• Home

  • Episodes

  • About

  • Login
    •

    David Kimura PRO
    Joined 7/18/2015
    Drifting Ruby Owner
    Ruby Rogues Panelist
    David Kimura PRO said almost 3 years ago on From Editor to IDE :
     ☒ I don't really use a "Rails" extension. The Solargraph extension does pretty much all I need it to.
    0 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Dashboards :
     ☒ For the loading text, I would probably introduce something like a spinner instead of changing the content text.

    # css
.spin {
  -webkit-animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    Added a stimulus controller called refresh which will add the spin class when clicked on

    # show page
<%= link_to reload_icon, weathers_feels_like_path, class: "float-end", data: { controller: 'refresh' } %>

    # refresh_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="refresh"
export default class extends Controller {
  connect() {
    this.element.setAttribute("data-action", "click->refresh#click")
  }

  click(e) {
    this.element.classList.add("spin")
  }
}

    This works because the entire turbo frame tag will be replaced. So, when the link is clicked, it will start spinning. Once the response is rendered, the link (as well as the entire turbo frame tag) will be replaced and it will "appear" to stop spinning.


    0 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Dashboards :
    To make the stimulus controller (especially if you're using importmaps or esbuild), you can use the task

    bin/rails g stimulus refresh
    0 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Modals :
     ☒ Yes, absolutely. I actually have a mention to this in the top of the show notes.
    0 0 0
    David Kimura PRO said almost 3 years ago on Capturing Signatures with Signature Pad :
    Check the resources section where I have the raw signature.js file linked. Also, around the 25 second mark, I explain the js file being moved to the vendors folder. If you're working on a more modern application with webpacker/esbuild/importmaps, I would probably use the npm package instead and would now use a stimulus controller to initialize the signature pad.
    0 0 1