• Home

  • Episodes

  • About

  • Login
    •

    David Kimura PRO
    Joined 7/18/2015
    Drifting Ruby Owner
    David Kimura PRO said over 4 years ago on AWS App Runner :
     ☒ Try refreshing the page. I did make a change a week ago in how the videos are delivered, but haven't experienced any issues with it since. I've added some CORS settings to be a bit more permissive.
    0 0 0
    David Kimura PRO said over 4 years ago on Hotwire Modals :
     ☒ I tested out this method with Importmaps while using the bootstrap CDN resources and it seems to work the same.

    In the application layout, I included both the CDN endpoints for the CSS and JS. When including the JS, it does set window.bootstrap for us.

      <head>
    <title>Drifting Ruby</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
    1 0 0
    David Kimura PRO said over 4 years ago on Hotwire Modals :
    Yea, I noticed it in post, but it was a bit late to go back and fix the video. Easter Eggs! However, I did get it correct in the show notes. 😊
    0 0 0
    David Kimura PRO said over 4 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 over 4 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