Forem: Andy Leverenz

Infinite Scroll with Rails and Turbo - No JavaScript Required!

Andy Leverenz — Mon, 26 Feb 2024 21:18:46 +0000

In this blog post, I will walk you through creating an infinite scroll feature using Rails and Turbo. I wanted to see if using only Turbo was an option for this feature, and it turns out it is. I was excited to discover this, so I wanted to share the wealth.

I will be sure to cover the necessary steps, including setting up the database and handling the server-side logic. By the end of this guide, you will have a fully functional infinite scroll feature in your Rails application that you can borrow on your own.

Important: Make sure you’re using the latest version of Rails and turbo-rails gem.

Create a new app

rails new infinite_scroll_turbo -j esbuild

Add Tailwind CSS, will_paginate, and faker gems

To make this demo more realistic, I’ll use the tailwindcss-rails gem for some ready-to-go styles out of the box.

If you'd like more control consider passing -c tailwind in your rails new command which gives you a blank slate OR if you want some UI done for you check out my project Rails UI.

bundle add tailwindcss-rails faker will_paginate
rails tailwindcss:install

Generate some records

First, I’ll set up the development database and house some dummy content we’ll generate with the faker gem we just installed.

rails generate scaffold Post title:string content:text
rails db:migrate

Add some Ruby code to seed data more quickly inside db/seeds.rb

# db/seeds.rb
50.times do
  Post.create(title: Faker::Lorem.sentence(word_count: 4), content: Faker::Lorem.paragraph(sentence_count: 4))
end

Finally, run the seed command to generate those records.

rails db:seed

Update Rails routing

Since we scaffolded a Post model, I'll root the app to posts#index

# config/routes.rb
Rails.application.routes.draw do
  resources :posts
  get "up" => "rails/health#show", as: :rails_health_check
  root "posts#index" # uncomment this line!
end

With our database and seeded data in the app, we’re ready to consider the controller logic.

To make infinite scrolling work, we’ll need some form of pagination.

I reached for will_paginate because it’s super simple to set up and use. There are many more options for pagination with Rails, so feel free to swap for something you prefer.

Update the posts controller

In the PostsController, I added the following code.

# app/controllers/posts_controller.rb 

def index
  @posts = Post.paginate(page: params[:page], per_page: 4)
end

Infinite scroll logic with Rails and Turbo

To use no JavaScript we’ll use a unique way to render a index.turbo_stream.erb file in the form of a turbo stream response. Here's the code in my posts/index.html.erb file.

<div class="w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>

  <div class="flex justify-between items-center">
    <h1 class="font-bold text-4xl">Posts</h1>
    <%= link_to "New post", new_post_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
  </div>

  <div id="posts" class="min-w-full">
    <%= turbo_frame_tag "posts", src: posts_path(format: :turbo_stream), loading: :lazy %>
  </div>

  <% if @posts.next_page %>
    <%= turbo_frame_tag "load_more", src: posts_path(page: @posts.next_page, format: :turbo_stream), loading: :lazy %>
  <% end %>
</div>

<div class="fixed bottom-0 rounded-tl right-0 h-12 bg-gray-50/50 backdrop-blur-sm w-full text-lg font-medium py-2 text-gray-900 text-center border-t border-l border-gray-200/80 w-56">
  <p>🚀 Current page: <span id="current_page"><%= @posts.current_page %></span></p>
</div>

Using the turbo_frame_tag we can source a defined path in the Rails app to load lazily. This just works which is impressive in itself.

Real-time infinite pagination

I passed an explicit format to the path helpers (i.e. posts_path(format: :turbo_stream) ).

Doing this instructs the rails app to return index.turbo_stream.erb view logic instead of the default index.html.erb file using the advertised “HTML over the wire” approach.

Create a new file called index.turbo_stream.erb in your app/views/posts folder. Inside the index.turbo_stream.erb file, I added the following:

<%= turbo_stream.append "posts" do %>
  <%= render partial: "posts/post", collection: @posts %>
<% end %>

<% if @posts.next_page %>
  <%= turbo_stream.replace "load_more" do %>
    <%= turbo_frame_tag "load_more", src: posts_path(page: @posts.next_page, format: :turbo_stream), loading: :lazy %>
  <% end %>
<% end %>

<%= turbo_stream.update "current_page", @posts.current_page %>

Using will_paginate, we can conditionally check for a next_page based on the parameters set in the controller.

If a new page is present, I display the turbo_frame_tag “load_more” in the index.html.erb and index.turbo_stream.erb views.

This dynamically loads via the paths passed to the src argument on the turbo_frame_tag.

Notice all formats are loaded as :turbo_stream. This continues happening recursively until no pages are left as you scroll.

To make each post more resemble a blog post, I updated the markup and styling slightly inside _post.html.erb.

<article id="<%= dom_id post %>" class="py-6">

  <h1 class="text-2xl font-semibold tracking-tight"><%= post.title %></h1>

  <p class="my-5 text-lg text-gray-700">
    <%= post.content %>
  </p>

  <% if action_name != "show" %>
    <%= link_to "Show this post", post, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <%= link_to "Edit this post", edit_post_path(post), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
    <hr class="mt-6">
  <% end %>
</article>

Done!

And with that, we have infinite scroll using Ruby on Rails and Turbo 8. No additional JavaScript/Stimulus.js is necessary. I think this is a game changer and I hope this tip helps you code your Rails app a little faster.

Keep reading

Add Geolocation to Search with Rails and Stimulus.js

Andy Leverenz — Mon, 19 Feb 2024 18:33:52 +0000

In this tutorial, I'll show you how to add Geolocation support to a search form using Ruby on Rails and Stimulus.js

By integrating geolocation capabilities, users can search for locations based on their current position, which saves time and effort.

New up a Rails application

To kick things off, let’s create a new app I'll call geodemo. I prefer Tailwind for my CSS and esbuild for JavaScript. We'll leverage Stimulus.js for this tutorial so you can choose whatever JavaScript engine you like as it adapts to each gracefully.

rails new geodemo -c tailwind -j esbuild

Add Dependencies

Let’s install some dependencies. A lovely gem called Geocoder will help us find locations based on an address or set of latitude and longitude lookups. It’s super powerful!

bundle add geocoder

Add a Search Controller

For this tutorial, we’ll make a global search rails controller. I won’t get into the weeds of what we would search but you could use something like pg_search to build a query from a model you need to return results of.

rails g controller search index

I’ll put a basic form in app/views/search/index.html.erb coming up.

Add a SearchLocationController

We need a view and request cycle to make this all work so let’s generate a SearchLocation controller with Rails to handle the POST request. For the sake of the guide, I'll add a route for the index action to display the form we'll leverage coming up.

rails g controller search_location create

This should generate the controller in app/controllers a couple of views and some default routes. Let's amend the routes.

Rails.application.routes.draw do
  get 'search/index'
  post 'search_location', to: "search_location#create"

  get "up" => "rails/health#show", as: :rails_health_check

  root "search#index"
end

Now you can boot up your server and hopefully see the new root path active at localhost:3000

Add the search form

Inside app/views/search/index.html.erb I've added this erb code:

<div class="max-w-xl mx-auto my-16">
  <h1 class="font-bold text-3xl mb-4">Search by location</h1>
  <div data-controller="geolocation">
    <%= form_tag url: search_index_url, method: :get do %>
      <div class="relative">
        <%= text_field_tag :query, nil, class: "px-6 py-3 rounded border border-gray-300/80 focus:ring-4 focus:ring-gray-200/60 focus:outline-none w-full rounded-full text-lg", placeholder: "Search state or city", data: { geolocation_target: 'input' } %>

        <button type="submit" class="absolute top-1.5 right-2 bg-white rounded-full px-5 py-2 border border-gray-300/80 shadow-sm bg-gray-50/50 hover:bg-gray-50">Search</button>
      </div>
    <% end %>

    <button type="button" data-action="click->geolocation#handleClick" class="underline font-medium mt-2">
      <span>Find my location</span>
    </button>
  </div>
</div>

This code scaffolds a basic search form that would perform a GET request to our search controller index action.

If we had real search records in our app, we could return real data in some fashion after submission.

I’ll leave that for you to sort out since this tutorial is more about geolocation.

If you look closely, you’ll see some data attributes on our HTML code.

These will be how Stimulus.js knows about our form fields and actions.

The button “Find my location” has an action that our Stimulus.js controller I’ll call geolocation_controller.js will work with. Let’s make that next.

Set up the Geolocation Stimulus.js Controller

Let's create a Stimulus controller to handle geolocation functionality.

Create a new file named geolocation_controller.js in the app/javascript/controllers directory.

You can also run this handy rails command to generate one fast.

rails g stimulus geolocation

Inside the new file, I’ve added the following code:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input"]

  handleClick() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        this.handleSuccess.bind(this),
        this.handleError.bind(this)
      )
    } else {
      console.error("Geolocation is not supported by this browser.")
    }
  }

  handleSuccess(position) {
    const { latitude, longitude } = position.coords
    this.sendLocationToRails(latitude, longitude)
  }

  handleError(error) {
    console.error(`Geolocation error: ${error.message}`)
  }

  sendLocationToRails(latitude, longitude) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content

    fetch("/search_location", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": csrfToken,
      },
      body: JSON.stringify({ latitude, longitude }),
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`)
        }
        return response.json()
      })
      .then((data) => {
        if (data.address.state) {
          this.inputTarget.value = data.address.state
        } else if (data.address.city) {
          this.inputTarget.value = data.address.city
        }
      })
      .catch((error) => {
        console.error("Error communicating with Rails:", error)
      })
  }
}

Here’s a quick outline of what this code is responsible for:

Targets : It declares a static property targets, specifying the targets that the controller will interact with. In this case, it specifies an input target.
handleClick Method : This method is triggered when a user clicks on an element associated with this controller. It checks if the browser supports geolocation. If it does, it calls getCurrentPosition method of the navigator.geolocation object, passing two callback functions for success and error handling.
handleSuccess Method : This method is invoked upon successfully retrieving the user's geolocation. It extracts the latitude and longitude from the position object and calls sendLocationToRails method with these coordinates.
handleError Method : This method handles errors encountered during geolocation retrieval by logging an error message to the console.
sendLocationToRails Method : This method sends the user's location (latitude and longitude) to a Rails backend endpoint using a fetch request. It retrieves the CSRF token from the meta tags, includes it in the request headers, and sends the location data as JSON in the request body. It then processes the response, updating the input field value based on the data received (either a zip code or a city name). Any errors during this process are caught and logged to the console.

Handle Geolocation Response in Rails Controller

In your Rails controller (search_controller.rb), implement the logic to handle the geolocation data received from the frontend:

class SearchLocationController < ApplicationController
  def create
    # Access latitude and longitude parameters sent from frontend
    latitude = params[:latitude]
    longitude = params[:longitude]

    # Implement your logic to determine a location based on coordinates
    location_data = Geocoder.search([latitude, longitude])

    render json: location_data.first.data
  end
end

This code leverages the Geocoder gem we added before and returns JSON based on the values passed from the front end.

Testing it out

If all goes well, we should be able to click the “Find my location” link and propagate the input field with either a postal code or city, depending on what returns. This is a one-click option to make it easier on your users who would instead give their location instead of typing one in the form manually.

We extract the latitude and longitude coordinates from the navigator.geolocation browser API. Those coordinates get submit via JavaScript as a POST request to our search_location#create method in the SearchLocationController , which then performs the query to decode into a US state. Finally, that response returns to the front end and dynamically sets the input's value.

Happy dance, it works!

In this tutorial, we've successfully integrated geolocation support into a search form in a Rails application using Stimulus.js.

The lazy users (we all know we are one) can now conveniently search for locations based on their current position in one click.

Now there is plenty of room for improvement here, but I hope I’ve guided you in a good direction to build something useful.

Experiment with additional features, like error handling and showing user feedback such as loading states and more.

Happy coding!

Digging into View Transitions with Turbo 8 and Rails

Andy Leverenz — Mon, 12 Feb 2024 17:03:25 +0000

This is a super quick tutorial to show you the new ViewTransition API that ships with Turbo 8, released recently.

View Transitions are a neat way to add more fluidity between views in your app. With Rails and Turbo 8, adding this effect is pretty straightforward. The most challenging obstacle is understanding the CSS side of the equation.

Let’s dive in and start experimenting.

Create a new rails app

I’ll use a basic Rails app with esbuild for JavaScript. We won’t use JavaScript in this tutorial, so feel free to use the defaults.

rails new turbo_view_transitions -j esbuild

To save time, I’ll add the tailwind-rails gem to get scaffold UI out of the box.

bundle add tailwindcss-rails
rails tailwindcss:install

With this out of the way we can generate a new Post scaffold with some demo columns.

rails g scaffold Post title:string body:text

Update your root route to posts#index

# config/routes.rb
Rails.application.routes.draw do
  resources :posts  
  get "up" => "rails/health#show", as: :rails_health_check
  root "posts#index"
end

Modifying the Rails app main layout

To use view transitions with Turbo 8, add a new meta tag to your layout’s <head></head> tags. <meta name="view-transition" content="same-origin" />

<!-- app/views/layouts/application.html.erb-->
  <!DOCTYPE html>
<html>
  <head>
    <title>TurboViewTransitions</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="view-transition" content="same-origin" />

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
  </head>

  <body>
    <main class="container mx-auto mt-10 px-5 flex">
      <%= yield %>
    </main>
  </body>
</html>

Here’s my modified layout. The main change is the new meta tag <meta name="view-transition" content="same-origin" />. I also changed the main tag to use a smaller margin at the top of the page.

Modifying the posts UI

In the app/views/posts/index.html.erb I added some new markup to help make this demo more visually appealing.

<div class="w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>

  <div class="grid grid-cols-12 gap-16">
    <div class="col-span-8">
      <div class="flex justify-between items-center">
        <h1 class="font-bold text-4xl">Posts</h1>
        <%= link_to "New post", new_post_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
      </div>

      <div id="posts">
        <%= render @posts %>
      </div>
    </div>

    <aside class="col-span-4 bg-blue-600 rounded-lg text-white p-10">
      <h3 class="font-semibold text-3xl sidebar-title">Sidebar title</h3>
      <p>This is my sidebar</p>
    </aside>
  </div>
</div>

Consider this a basic blog with a sidebar. We’ll leverage view transitions to make it snazzy.

Add custom view transition CSS

Now for the exciting part. Let's add some view transition effects starting from simple to more complex.

Simple global transitions (easy)

You may be interested in a slight animation on every view transition. To do that, you could add a couple of lines of CSS to app/assets/stylesheets/application.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global slight fade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

Target the root of the page directly and add a global transition.

How about different types of animations?

Want to get a little more sophisticated? Try these styles that offer some slide and fade effects all in one.

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

/* Global but more fancy */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Singling out elements and combining transitions

Say you want to target independent elements directly but also have global transition effects. That’s possible. Here’s my code thus far.

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

/* Global but more fancy */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Sidebar */
aside {
  view-transition-name: sidebar;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-in,
    210ms cubic-bezier(0.4, 0, 0.2, 1) both slide-up;
}

With turbo, we’re able to target directions. And in doing so, you can even tie into either the ::view-transition-new or ::view-transition-old states of the transition. With some gnarly CSS, you can target elements independently of one another and perform some wacky animations.

Notice how, much like CSS Grid, you can name “areas” to define layouts. In this specific case, you can use view-transition-name to name an element in the dom for use in other targeted CSS.

So I used

/* Sidebar */
aside {
  view-transition-name: sidebar;
}

This targets the aside element in app/views/posts/index.html.erb and gives us a way to define a new transitional style based on the turbo directions. Here's the example from before with that in action. Notice how our named view transition is "sidebar.”

html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-in,
    210ms cubic-bezier(0.4, 0, 0.2, 1) both slide-up;
}

Hooking into Turbo

Turbo adds a data-turbo-visit-direction attribute to the <html> element to indicate the direction of the transition. The attribute can have one of the following values:

forward in advance visits.
back in restoration visits.
none in replace visits.

Depending on the request, if you view the source when clicking a link or button, the HTML element will quickly update with the new data attributes. As a result, your CSS can capture the forward, backward, and none directions to manipulate the elements on the page.

Browser Compatibility

Only Chrome and Microsoft Edge are currently supported, but I anticipate Safari and Firefox to follow soon. Keep this in mind as you add this to your apps.

What's the real-world use case for view transitions?

Having toyed with View Transitions, these will be extremely popular for folks leveraging Rails to build mobile apps. It allows you to do less with more native versus non-native apps. We see Turbo in use on the Basecamp team's apps already today, and it's about to get more familiar with other apps.

This is all not to say web apps or progressive web apps shouldn't leverage this feature. It will be overused to some degree. I remember when the trend of animating everything on a marketing website was popular. You couldn't scroll without something moving in or out of view. I worry we're in for that again...

We’ve only scratched the surface

This tutorial is super basic, but I hope it sheds some light on what’s possible with a little dash of CSS and tools you’re already using with Ruby on Rails. Among many new features, Turbo 8 brings a dash of life with View Transitions. Rails apps are about to get more pleasing, and I’m excited and here for it!

Create a Simple and Responsive Tailwind Navbar with Dropdown

Andy Leverenz — Mon, 05 Feb 2024 19:45:11 +0000

Creating a responsive and visually appealing navigation bar is crucial for any website, and Tailwind CSS offers a streamlined, utility-first approach to achieve this.

This guide will walk you through constructing a simple Tailwind navbar component with a dropdown menu. We’ll also ensure the navigation is adaptable across all devices.

Why Tailwind CSS for Responsive Navbars?

Tailwind CSS simplifies building responsive navbars by providing utility classes that can be applied directly in your HTML, eliminating the need for extensive custom CSS. Whether you aim to implement a Tailwind navbar with dropdown functionalities or just a navigation component, Tailwind has you covered.

Step 1: Add the HTML for a Simple Tailwind Navbar
Step 2: Responsive Design with Tailwind CSS
Step 3: Toggling the Dropdown Menu
Step 4: Toggling the Tailwind Navbar mobile menu
Step 5: Customizing and Testing Your Tailwind Navbar

Prerequisites

Basic understanding of HTML and CSS
Tailwind CSS integrated into your project

Step 1: Add the HTML for a Simple Tailwind Navbar

The foundation of our Tailwind navbar component begins with its HTML structure. Here's a straightforward layout to start with:

<nav class="bg-gray-800 text-white">
  <div class="container mx-auto px-4 md:flex items-center gap-6">
    <!-- Logo -->
    <div class="flex items-center justify-between md:w-auto w-full">
      <a href="#" class="flex items-center py-5 px-2 text-white flex-1">
        <span class="font-bold">Webcrunch</span>
      </a>
      <!-- Mobile Menu Button -->
      <div class="md:hidden flex items-center">
        <button class="mobile-menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <title>bars-3-bottom-left</title>
            <g fill="none">
              <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
          </svg>
        </button>
      </div>
    </div>
    <!-- Primary Navigation -->
    <div class="hidden md:flex md:flex-row flex-col items-center justify-start md:space-x-1 navigation-menu pb-3 md:pb-0 navigation-menu">
      <a href="#" class="py-2 px-3 block">Home</a>
      <a href="#" class="py-2 px-3 block">About</a>
      <!-- Dropdown Menu -->
      <div class="relative">
        <button class="dropdown-toggle py-2 px-3 hover:bg-gray-700 flex items-center gap-2 rounded">
          <span class="pointer-events-none">Services</span>
          <svg class="w-3 h-3 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <title>chevron-down</title>
            <g fill="none">
              <path d="M19.5 8.25l-7.5 7.5-7.5-7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
          </svg>
        </button>
        <div class="dropdown-menu absolute hidden bg-gray-700 text-white rounded-b-lg pb-2 w-48">
          <a href="#" class="block px-6 py-2 hover:bg-gray-800">Web Design</a>
          <a href="#" class="block px-6 py-2 hover:bg-gray-800">Development</a>
          <a href="#" class="block px-6 py-2 hover:bg-gray-800">SEO</a>
        </div>
      </div>
      <a href="#" class="py-2 px-3 block">Contact</a>
    </div>
  </div>
</nav>

Step 2: Responsive Design with Tailwind CSS

To ensure our Tailwind navbar is responsive, we utilize Tailwind's built-in classes like md:flex for medium screens and hidden to toggle visibility. These utilities allow the navbar to adapt seamlessly across different devices.

Step 3: Toggling the Dropdown Menu

For the dropdown menu within our Tailwind navbar component, we can add a bit of JavaScript to handle the interaction:

document.addEventListener("DOMContentLoaded", () => {
  // Select all dropdown toggle buttons
  const dropdownToggles = document.querySelectorAll(".dropdown-toggle")

  dropdownToggles.forEach((toggle) => {
    toggle.addEventListener("click", () => {
      // Find the next sibling element which is the dropdown menu
      const dropdownMenu = toggle.nextElementSibling

      // Toggle the 'hidden' class to show or hide the dropdown menu
      if (dropdownMenu.classList.contains("hidden")) {
        // Hide any open dropdown menus before showing the new one
        document.querySelectorAll(".dropdown-menu").forEach((menu) => {
          menu.classList.add("hidden")
        })

        dropdownMenu.classList.remove("hidden")
      } else {
        dropdownMenu.classList.add("hidden")
      }
    })
  })

  // Optional: Clicking outside of an open dropdown menu closes it
  window.addEventListener("click", (event) => {
    if (!event.target.matches(".dropdown-toggle")) {
      document.querySelectorAll(".dropdown-menu").forEach((menu) => {
        if (!menu.contains(event.target)) {
          menu.classList.add("hidden")
        }
      })
    }
  })
})

Step 4: Toggling the Tailwind Navbar mobile menu

// Mobile menu toggle
  const mobileMenuButton = document.querySelector(".mobile-menu-button")
  const mobileMenu = document.querySelector(".navigation-menu")

  mobileMenuButton.addEventListener("click", () => {
    mobileMenu.classList.toggle("hidden")
  })

On mobile screens, we hide the menu from view and display a hamburger menu icon. This icon is tapable on smaller screens. The javascript targets both the mobile menu and th

Step 5: Customizing and Testing Your Tailwind Navbar

Tailwind CSS makes building a navigation component a breeze and offers endless customization options to ensure your navbar aligns perfectly with your brand's aesthetics. Let's dive deeper into how you can personalize your navbar with features like sticky navigation and dark mode support and why testing across different devices is crucial for user experience.

Customizing the Tailwind Navbar

Color Schemes : Tailwind provides various color utilities. You can change your navbar's background, text, and hover states to match your brand colors. For instance, use bg-blue-500 for a blue background or text-white for white text. Don't forget to apply hover effects with classes like hover:bg-blue-700 for interactive elements.
Spacing and Layout : Tailwind's spacing utilities allow you to adjust padding and margin for the perfect layout. Use classes like px-4 (padding on the x-axis) or my-2 (margin on the y-axis) to space elements within your navbar.
Typography : Customize the text size, weight, and color using Tailwind's typography classes. For example, text-lg for larger text or font-bold for bold text can make your navbar items stand out.

Implementing a Tailwind Sticky Nav

To make your navbar sticky, meaning it stays at the top of the viewport as the user scrolls, add the sticky and top-0 classes to your <nav> element. This ensures that your navigation is always accessible, regardless of where the user is on the page:

<nav class="sticky top-0 bg-gray-800 text-white z-50">

The z-50 class ensures your navbar stays above other content. Adjust the z-index as needed based on your page's elements.

Adding Dark Mode Support

Tailwind CSS v2.0 and above supports dark mode out of the box, making it easy for users who prefer a darker interface to adapt your navbar design. Use the dark: prefix to specify different styles for dark mode:

<nav class="bg-gray-800 text-white dark:bg-black dark:text-gray-200">

In this example, the navbar will have a black background and lighter text in dark mode. Refer to Tailwind's documentation for proper dark mode configuration. By default, you can define dark mode based on a global body class name or support device-enabled dark mode.

Testing Across Devices

Responsiveness: Use browser dev tools to simulate various screen sizes and ensure your navbar looks good on all devices. Pay special attention to breakpoints where your layout changes, such as when the mobile menu button appears.
Interactivity: Test interactive elements like dropdown menus and links to ensure they work as expected on touch devices and with mouse and keyboard.
Performance: Ensure your navbar performs well, especially when implementing features like sticky positioning or dynamic dark mode switching, which can impact rendering.
Accessibility: Test for accessibility, ensuring your navbar is navigable using keyboard shortcuts and screen readers. This includes proper ARIA labels for interactive elements.

Conclusion

With Tailwind CSS, creating a simple, responsive navbar component with a dropdown menu becomes a straightforward process. By leveraging Tailwind's utility classes, you can efficiently create a navigation bar that's both stylish and functional across all screen sizes. This guide has shown you how to integrate essential features into your Tailwind navbar, enhancing your website's navigation experience for users on any device.

Continue reading

How to Add Live Reload to Your Rails Application

Andy Leverenz — Sun, 28 Jan 2024 17:09:29 +0000

Live reload is an incredible tool for developers looking to boost their productivity. In this tutorial, I will walk you through implementing live reload in your Ruby on Rails application using esbuild.

Implementing live reload can significantly streamline your development workflow, saving you valuable time and effort. You can instantly see the results by automatically refreshing your app whenever you make changes without manually reloading the page.

To achieve this, we will leverage the power of esbuild, a cutting-edge technology for fast and efficient JavaScript bundling. By combining esbuild with Ruby on Rails, we can create a seamless live reload experience that will streamline your development process.

Introduction
Setting Up Your Rails Project
Installing Necessary Gems and Dependencies
Configuring Esbuild
Creating the Live Reload Script
Putting It All Together
Live reload alternatives for Ruby on Rails
Conclusion
Continue learning

Introduction

Live Reload automates the refresh process of your web page whenever you make changes to your code. This feature not only saves time but also enhances your overall development experience.

Setting Up Your Rails Project

Start by creating a new Rails project with Tailwind CSS and esbuild:

rails new livereload -c tailwind -j esbuild

Installing Necessary Gems and Dependencies

First, ensure you have the jsbundling-rails gem installed. If not, add it to your Gemfile and run bundle install.

Next, set up esbuild with Rails:

./bin/bundle exec rails javascript:install:esbuild

Add the chokidar package for file watching:

yarn add chokidar -D

Configuring esbuild

Create and customize an esbuild.config.js file in your project:

# esbuild.config.js
const esbuild = require("esbuild")
const chokidar = require("chokidar")
const http = require("http")
const path = require("path")

const isProduction = process.env.RAILS_ENV === "production"
const watchMode =
  process.argv.includes("--watch") || process.argv.includes("--reload")
const reloadMode = process.argv.includes("--reload")
const port = 5678

// Esbuild configuration
const esbuildConfig = {
  entryPoints: [path.join("app/javascript", "application.js")],
  bundle: true,
  minify: isProduction,
  sourcemap: !isProduction,
  outdir: path.join("app/assets/builds"),
}

// Start the esbuild build process
esbuild.build(esbuildConfig).catch(() => process.exit(1))

// Set up a simple HTTP server for live reload with CORS headers
const clients = []
const server = http.createServer((req, res) => {
  // Set CORS headers
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS")
  res.setHeader("Access-Control-Allow-Headers", "Content-Type")

  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",
  })

  clients.push(res)

  req.on("close", () => {
    clients.splice(clients.indexOf(res), 1)
  })
})

server.listen(5678)

// Watch for file changes 
chokidar
  .watch([
    "app/javascript/**/*",
    "app/views/**/*",
    "app/assets/stylesheets/**/*",
  ])
  .on("all", () => {
    esbuild.build(esbuildConfig)
    clients.forEach((client) => client.write("data: reload\n\n"))
  })

console.log("Live reload server running on http://localhost:5678")

This configuration sets up esbuild and a simple HTTP server for the live reload functionality.

Here's a simplified explanation of what the code in esbuild.config.js is doing, hopefully, broken down into more straightforward terms:

Setting Up Tools and Checking the Environment :
- The code starts by loading some necessary tools: esbuild, chokidar, and http. esbuild helps in bundling and optimizing JavaScript files, chokidar watches for file changes, and http is used to create a server.
- It checks if the Rails app is in production mode. This helps the code decide whether to optimize files for faster performance or not.
Configuring Esbuild :
- A configuration is set for esbuild. This includes where to find the JavaScript files, whether to bundle them together and where to save them. It's like giving esbuild a map and a to-do list.
Starting the Build Process :
- esbuild starts its job using the configuration provided. If something goes wrong, it stops the process to avoid more issues.
Creating a Mini Server for Live Reload :
- The code sets up a small server. This server's job is to send messages to the web browser to refresh the page whenever there are changes.
- It makes sure that any browser is allowed to connect to this server (that's what CORS headers do).
Listening for Changes :
- chokidar starts watching files in your JavaScript, views, and stylesheets directories. Whenever there's a change in these files, it tells esbuild to rebuild them.
- After rebuilding, it notifies all connected browsers to refresh the page. This means you see the changes in your web app immediately ✨.
Running the Server :
- Finally, the server starts, and the code tells you that it's running and ready to reload your pages automatically on http://localhost:5678.

Creating the Live Reload Script

Now, add a live_reload.js file to app/javascript and import it in application.js:

// app/javascript/live_reload.js

if (process.env.NODE_ENV === "development") {
  const source = new EventSource("http://localhost:5678")
  source.onmessage = (event) => {
    if (event.data === "reload") {
      window.location.reload()
    }
  }
}

This script listens for the "reload" event cast from our esbuild configuration and refreshes the page. We created a new EventSource for the server created by the build configuration.

Putting It All Together

With these configurations, your Rails app is now set up for live reloading. You can start your Rails server and begin coding. The browser automatically reloads whenever you change your JavaScript, stylesheets, or views. This ultimately saves you time and sanity during development.

Live reload Alternatives for Ruby on Rails

If you’re looking for alternatives to the esbuild-driven method I introduced in this tutorial, there are plenty of other options with Rails. Some options depend on specific technologies or front-end frameworks but accomplish similar goals.

Guard LiveReload
- Description: Guard LiveReload automatically refreshes your browser when 'view' files are modified.
- Link: Guard LiveReload on GitHub
Rack::LiveReload
- Description: A Rack middleware that inserts the LiveReload script into your app's responses. Works well with apps not using Webpacker.
- Link: Rack::LiveReload on GitHub
Webpacker
- Description: Though primarily for managing JavaScript, Webpacker can be configured for hot module replacement, similar to live reloading.
- Link: Webpacker on GitHub
BrowserSync
- Description: Not specific to Rails, BrowserSync can synchronize file changes and interactions across multiple devices, ideal for responsive testing.
- Link: BrowserSync
React Hot Loader
- Description: React Hot Loader enables hot module replacement for a smoother development experience if you use React with Rails.
- Link: React Hot Loader on GitHub
Vite Ruby
- Description: Vite Ruby integrates Vite.js with Ruby on Rails, offering a fast front-end build tool with features like hot module replacement.
- Link: Vite Ruby on GitHub

Conclusion

Live Reload is an awesome tool for enhancing your Rails development workflow. It reduces the time spent on manual refreshes, allowing you to focus more on development. The result is more efficient coding and better development of apps.

Continue learning

JavaScript mouse-tracking Glow Effect with Tailwind CSS

Andy Leverenz — Tue, 16 Jan 2024 21:13:58 +0000

In this Tailwind CSS tutorial, we'll explore how to add an interactive, mouse-tracking glow effect to web elements using just JavaScript and Tailwind CSS. This simple yet eye-catching effect will enhance the user experience on your webpage.

Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript.
Tailwind CSS installed in your project.

Setting up a project

I like to use vite.js for projects like this,but you could easily use something else. Vite has built-in support for many things, so it’s more efficient for me to test out new ideas and create tutorials such as this one.

You can reference the docs or follow along as I create a new project. I used bun for package management and vanilla JavaScript to keep things simple. Be sure to remove all the boilerplate Vite.js installs when scaffolding a project.

bunx create-vite # go through the wizard, then cd into your project

Install Tailwind CSS

Tailwind has some dependencies, so we’ll install those using bun. These are saved as dev dependencies because the -d flag passed. You can confirm inside your package.json file post-install.

bun add tailwindcss postcss autoprefixer @tailwindcss/typography -d

Next, we need to generate a tailwind configuration and postcss configuration file. This can be done with the following:

bunx tailwindcss init -p

Add the default Tailwind styles to your stylesheet.

/* style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, you can boot your server running:

bun dev

I updated the default tailwind.config.js file to the following for this tutorial. You will want to add directories of files possibly. Read the docs for more information.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["index.html"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
}

Initial HTML Structure

To make the glow effect more impactful, we can create a custom card that would benefit from the effect in the first place. I chose tropical fish.

You can start by creating a basic HTML structure. Here, we have a div containing a heading, paragraph, and button, wrapped in a parent div with the class glow-capture.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Create a custom mouse tracking Glow Effect with Tailwind CSS</title>
</head>

<body class="bg-zinc-950 text-zinc-50 antialiased h-screen">
  <div class="max-w-3xl mx-auto px-4 space-y-12 pb-32 pt-16 mt-10 mb-24">
    <!-- Fish 1 -->
    <div class="relative glow-capture">
       <div
        class="group bg-zinc-900/50 border-4 border-white/5 rounded-2xl p-10 shadow-lg shadow-black/80 flex md:flex-row flex-col flex-wrap md:items-start items-center md:justify-between justify-center gap-6 backdrop-blur-md">
        <div class="flex-1 md:order-1 order-2">
          <p class="opacity-50">Tropical fish</p>
          <h2 class="font-bold text-4xl tracking-tighter mb-3">Banana Wrasse</h2>
             <div class="md:prose-base prose-lg prose-zinc prose-invert text-opacity-90">
            <p>The Banana Wrasse is known for its vibrant yellow color and elongated body, resembling a banana.</p>
            <p>This active and playful fish thrives in tropical reef environments, often seen darting among corals and
              rocks.</p>
          </div>

          <button class="font-semibold px-6 bg-zinc-950/50 backdrop-blur-md py-3 rounded-xl text-white/90 border-2 border-white/10 mt-6">Learn more</button>
        </div>
         <img src="fish-1.jpg" alt="Banana Wrasse" class="max-w-sm rounded-full object-cover w-40 h-40 border-4 border-white/5 md:order-2 order-1 shadow-inner" />
      </div>
      <div class="glow-overlay" style="--glow-color: #7c3aed"></div>
    </div>
  </div>
</body>

I’ll start with one section that focuses on one fish for now. We can then duplicate the code and swap some colors, images, and content.

You’ll see some custom classes, such as glow-capture and glow-overlay. These will come in handy when we define some JavaScript and extend Tailwind.

Let’s tackle the CSS first.

Styling with Tailwind CSS

Add the following styles for the .glow-overlay class. These styles create the base for our glow effect. You can leverage the @apply logic with Tailwind CSS here. I kept this code traditional CSS for now.

We use mask and pass a radial-gradient method. It's a fancy way to make gradients that aren't the simpler gradients you might be used to. Read more about masks and radial gradients on mdn.

.glow-overlay {
  --glow-size: 25rem;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--glow-opacity, 0);
  mask: radial-gradient(
    var(--glow-size) var(--glow-size) at var(--glow-x) var(--glow-y),
    var(--glow-color) 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
}

Extend Tailwind

We need to extend Tailwind to have a new variant called glow. Read more about plugins and adding variants on the Tailwind CSS documentation.

Here’s my revised tailwind.config.js file.

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

export default {
  content: ["index.html"],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    plugin(
      function ({ addVariant }) {
        addVariant("glow", ".glow-capture .glow-overlay &")
      },
      {
        theme: {
          extend: {
            colors: {
              glow: "color-mix(in srgb, var(--glow-color) calc(<alpha-value> * 100%), transparent)",
            },
          },
        },
      }
    ),
  ],
}

The code uses the plugin extension of the Tailwind CSS library. We pass a new variant called glow, which targets elements within the glow-capture and glow-overlay classes. The & sign acts as a placeholder.

Finally, with the new variant, we can extend the theme based on its usage. To do so, we use the color-mix property in CSS, leveraging the —-glow-color CSS variable that gets defined in our HTML and later manipulated with JavaScript.

Add JavaScript for Mouse Tracking

Write a JavaScript function to track the mouse movement and apply the glow effect. This code listens for mouse movement over the .glow-capture element and updates CSS variables to move the glow effect.

/* main.js */

import "./style.css"

document.addEventListener("DOMContentLoaded", () => {
  const captures = document.querySelectorAll(".glow-capture")

  captures.forEach((capture) => {
    // Clone a child element. For example, we can clone the first child.
    const clonedChild = capture.children[0].cloneNode(true)
    const overlay = capture.querySelector(".glow-overlay")

    // Append the cloned child to the overlay.
    overlay.appendChild(clonedChild)

    capture.addEventListener("mousemove", (event) => {
      const x = event.pageX - capture.offsetLeft
      const y = event.pageY - capture.offsetTop

      overlay.style.setProperty("--glow-x", `${x}px`)
      overlay.style.setProperty("--glow-y", `${y}px`)
      overlay.style.setProperty("--glow-opacity", "1")
    })

    // Add mouseleave event to remove the glow effect
    capture.addEventListener("mouseleave", () => {
      overlay.style.setProperty("--glow-opacity", "0")
    })
  })
})

In my Vite project, a main.js file is the default entry point. I'm just chucking this code there. We do quite a few things in this file:

Listed first for the DOMContentLoaded event and then proceed
Find all elements with the .glow-capture class
Loop through each element with the .glow-capture class and clone it.
The overlay div added in our HTML gets a new child element which effectively doubles our original fish card.
On the individual card, we listen for both the mousemove and mouseleave events, setting custom CSS styles based on the mouse x and y position. If you leave the card with your mouse, we remove opacity, so you can't see the "glow” effect.

Adding the new glow variant classes

Here’s where it gets fun. Because we introduced the new Tailwind CSS variant called glow, we can target elements within the card to change as we navigate the card with our mouse. You can apply the variants like any other Tailwind CSS variants.

<!-- Fish 1 -->
    <div class="relative glow-capture">
      <div
        class="group bg-zinc-900/50 border-4 border-white/5 rounded-2xl p-10 shadow-lg shadow-black/80 flex md:flex-row flex-col flex-wrap md:items-start items-center md:justify-between justify-center gap-6 backdrop-blur-md glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
        <div class="flex-1 md:order-1 order-2">
          <p class="opacity-50">Tropical fish</p>
          <h2 class="font-bold text-4xl tracking-tighter mb-3 glow:text-glow/[.15]">Banana Wrasse</h2>
          <div class="md:prose-base prose-lg prose-zinc prose-invert text-opacity-90">
            <p>The Banana Wrasse is known for its vibrant yellow color and elongated body, resembling a banana.</p>
            <p>This active and playful fish thrives in tropical reef environments, often seen darting among corals and
              rocks.</p>
          </div>

          <button
            class="font-semibold px-6 bg-zinc-950/50 backdrop-blur-md py-3 rounded-xl text-white/90 border-2 border-white/10 mt-6 glow:ring-1 glow:border-glow glow:ring-glow">Learn
            more</button>
        </div>

        <img src="fish-1.jpg" alt="Banana Wrasse"
          class="max-w-sm rounded-full object-cover w-40 h-40 border-4 border-white/5 md:order-2 order-1 glow glow:ring-1 glow:border-glow/[.5] glow:ring-glow shadow-inner" />
      </div>
      <div class="glow-overlay" style="--glow-color: #7c3aed"></div>
    </div>

Here I’ve applied it to the card, title, button, and fish image to produce a neat effect based on the —glow-color variable passed to the div with the class glow-overlay .

Add more fish to the mix

Here’s my entire HTML file:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Create a Mouse Tracking Glow Effect with Tailwind CSS</title>
</head>

<body class="bg-zinc-950 text-zinc-50 antialiased h-screen">
  <div class="max-w-3xl mx-auto px-4 space-y-12 pb-32 pt-16 mt-10 mb-24">
    <!-- Fish 1 -->
    <div class="relative glow-capture">
      <div
        class="group bg-zinc-900/50 border-4 border-white/5 rounded-2xl p-10 shadow-lg shadow-black/80 flex md:flex-row flex-col flex-wrap md:items-start items-center md:justify-between justify-center gap-6 backdrop-blur-md glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
        <div class="flex-1 md:order-1 order-2">
          <p class="opacity-50">Tropical fish</p>
          <h2 class="font-bold text-4xl tracking-tighter mb-3 glow:text-glow/[.15]">Banana Wrasse</h2>
          <div class="md:prose-base prose-lg prose-zinc prose-invert text-opacity-90">
            <p>The Banana Wrasse is known for its vibrant yellow color and elongated body, resembling a banana.</p>
            <p>This active and playful fish thrives in tropical reef environments, often seen darting among corals and
              rocks.</p>
          </div>

          <button
            class="font-semibold px-6 bg-zinc-950/50 backdrop-blur-md py-3 rounded-xl text-white/90 border-2 border-white/10 mt-6 glow:ring-1 glow:border-glow glow:ring-glow">Learn
            more</button>
        </div>

        <img src="fish-1.jpg" alt="Banana Wrasse"
          class="max-w-sm rounded-full object-cover w-40 h-40 border-4 border-white/5 md:order-2 order-1 glow glow:ring-1 glow:border-glow/[.5] glow:ring-glow shadow-inner" />
      </div>
      <div class="glow-overlay" style="--glow-color: #7c3aed"></div>
    </div>

    <!-- Fish 2 -->
    <div class="relative glow-capture">
      <div
        class="bg-zinc-900/50 border-4 border-white/5 rounded-2xl p-10 shadow-lg shadow-black/80 flex md:flex-row flex-col flex-wrap md:items-start items-center md:justify-between justify-center gap-6 backdrop-blur-md glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
        <div class="flex-1 md:order-1 order-2">
          <p class="opacity-50">Tropical fish</p>
          <h2 class="font-bold text-4xl tracking-tighter mb-3 glow:text-glow/[.15]">Anthia</h2>
          <div class="md:prose-base prose-lg prose-zinc prose-invert text-opacity-90">
            <p>Anthias fish are renowned for their dazzling, multi-hued scales, ranging from pinks and purples to
              oranges
              and yellows.</p>
            <p>
              They form dynamic, shimmering schools in coral reefs, adding a burst of color and life to the underwater
              world.</p>
          </div>
          <button
            class="font-semibold px-6 bg-zinc-950/50 backdrop-blur-md py-3 rounded-xl text-white/90 border-2 border-white/10 mt-6 glow:ring-1 glow:border-glow glow:ring-glow">Learn
            more</button>
        </div>

        <img src="fish-2.jpg" alt="Banana Wrasse"
          class="max-w-sm rounded-full object-cover w-40 h-40 border-4 border-white/5 md:order-2 order-1 glow glow:ring-1 glow:border-glow/[.5] glow:ring-glow shadow-inner" />
      </div>
      <div class="glow-overlay" style="--glow-color: #f43f5e"></div>
    </div>

    <!-- Fish 3 -->
    <div class="relative glow-capture">
      <div
        class="bg-zinc-900/50 border-4 border-white/5 rounded-2xl p-10 shadow-lg shadow-black/80 flex md:flex-row flex-col flex-wrap md:items-start items-center md:justify-between justify-center gap-6 backdrop-blur-md glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
        <div class="flex-1 md:order-1 order-2">
          <p class="opacity-50">Tropical fish</p>
          <h2 class="font-bold text-4xl tracking-tighter mb-3 glow:text-glow/[.15]">Lipstick Tang</h2>
          <div class="md:prose-base prose-lg prose-zinc prose-invert text-opacity-90">
            <p>The Lipstick Tang, distinct for its striking blue body and vivid red-orange lips, resembles a vibrant
              splash
              of lipstick
              in the ocean. </p>
            <p>This eye-catching fish is a favorite among reef enthusiasts, gracefully navigating through coral
              gardens
              with elegance.</p>
          </div>
          <button
            class="font-semibold px-6 bg-zinc-950/50 backdrop-blur-md py-3 rounded-xl text-white/90 border-2 border-white/10 mt-6 glow:ring-1 glow:border-glow glow:ring-glow">Learn
            more</button>
        </div>

        <img src="fish-3.jpg" alt="Banana Wrasse"
          class="max-w-sm rounded-full object-cover w-40 h-40 border-4 border-white/5 md:order-2 order-1 glow glow:ring-1 glow:border-glow/[.5] glow:ring-glow shadow-inner" />
      </div>
      <div class="glow-overlay" style="--glow-color: #0ea5e9"></div>
    </div>

    <div class="text-sm text-white/60 text-center">
      <a href="https://webcrunch.com" target="_blank">webcrunch.com</a>
    </div>
  </div>

  <script type="module" src="/main.js"></script>
</body>

</html>

The end result

The end result is super cool! I love this effect. We’re tricking ourselves visually with the by cloning the cards and using more modern CSS to make a neat glow effect.

One limitation I discovered is the ability to do any major transition or transform effects. Because the element is cloned it looks way off if you attempt it.

From here you can experiment with different glow colors, sizes, and transition effects to personalize the glow effect for your own needs.

I hope you found this tutorial useful. If you enjoyed it be sure to share the link with your friends.

How to use Bun with Ruby on Rails

Andy Leverenz — Sun, 07 Jan 2024 19:18:42 +0000

In the Ruby on Rails world, we often leverage tools like node.js and yarn as a build step for front-end tooling like Tailwind CSS, Stimulus.js, and many other front-end technologies.

As more hype grows about removing the “build” from the equation, I, for one, don’t necessarily see the additional dependencies and tooling as a bad thing. It's made so much of what I do way more efficient.

A new approach called Bun has entered the scene and offers those same benefits and more. Most promising is the massive leap in build speed. I heard about this addition to Rails and have meant to dive in to try it out for some time. This blog post and video is an answer to that desire.

What is Bun?

Bun is an all-in-one toolkit for JavaScript and TypeScript apps. It ships as a single executable called bun. You can compare it to npm and yarn.

On the marketing site there's a section that reads:

Replace yarn with bun install to get 30x faster package installs.

So you can see why I might be intrigued. To be 100% fair, I don’t leverage a lot of JavaScript. Ruby on Rails is my go-to for more features. In the event I need more interactivity, I reach out to Stimulus.js. That being said, if I stand to benefit from quicker installs of packages and build times, I will gravitate toward that route.

Here are the design goals as quoted from Bun’s website

Bun is designed from the ground up with today's JavaScript ecosystem in mind.

Speed. Bun processes start 4x faster than Node.js currently (try it yourself!)
TypeScript & JSX support. You can directly execute .jsx, .ts, and .tsx files; Bun's transpiler converts these to vanilla JavaScript before execution.
ESM & CommonJS compatibility. The world is moving towards ES modules (ESM), but millions of packages on npm still require CommonJS. Bun recommends ES modules, but supports CommonJS.
Web-standard APIs. Bun implements standard Web APIs like fetch, WebSocket, and ReadableStream. Bun is powered by the JavaScriptCore engine, which is developed by Apple for Safari, so some APIs like Headers and URL directly use Safari's implementation.
Node.js compatibility. In addition to supporting Node-style module resolution, Bun aims for full compatibility with built-in Node.js globals (process, Buffer) and modules (path, fs, http, etc.) This is an ongoing effort that is not complete. Refer to the compatibility page for the current status.

Bun is more than a runtime. The long-term goal is to be a cohesive, infrastructural toolkit for building apps with JavaScript/TypeScript, including a package manager, transpiler, bundler, script runner, test runner, and more.

Bun with Rails

In a recent pull request to the jsbundling-rails gem, support for Bun was added to Rails as a JavaScript runtime.

You can install it like other options, including build, rollup, and webpack. I usually reach for esbuild but wanted to try bun

Create a demo Rails app using bun

Let’s create a simple app and give bun a shot

rails new bun_demo -c tailwind -j bun

This installs a vanilla Rails application with Tailwind CSS and Bun for the front end.

What about existing apps?

Do you have an existing app and want to use Bun? Assuming you’ve installed the jsbundling-rails gem, you can run the following task:

./bin/rails javascript:install:bun

Preview the `bun.config.js` file

When you run the new rails app command above in the latest version of Rails (7.1), a new bun.config.js file is created in the project's root. Inside is the following code.

import path from 'path';
import fs from 'fs';

const config = {
  sourcemap: "external",
  entrypoints: ["app/javascript/application.js"],
  outdir: path.join(process.cwd(), "app/assets/builds"),
};

const build = async (config) => {
  const result = await Bun.build(config);

  if (!result.success) {
    if (process.argv.includes('--watch')) {
      console.error("Build failed");
      for (const message of result.logs) {
        console.error(message);
      }
      return;
    } else {
      throw new AggregateError(result.logs, "Build failed");
    }
  }
};

(async () => {
  await build(config);

  if (process.argv.includes('--watch')) {
    fs.watch(path.join(process.cwd(), "app/javascript"), { recursive: true }, (eventType, filename) => {
      console.log(`File changed: ${filename}. Rebuilding...`);
      build(config);
    });
  } else {
    process.exit(0);
  }
})();

Here, we have a general configuration for bun, which declares the entry point of the app and the output points.

The configuration also watches for changes within the app/javascript directory, so you needn't refresh the page as you code. This was a massive milestone in front-end web development, and now we all seem to take it for granted :).

Notice Stimulus.js is installed by default and preconfigured to “Just Work". Remember the motto “Convention Over Configuration”? that’s at play here, and I love this stuff!

Much like esbuild, a file builds to the app/assets/builds directory in real-time. In this case, it would be called application.js.

This configuration file gets processed with a script inside the package.json file. There I have the following scripts:

// package.json

"scripts": {
    "build": "bun bun.config.js",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },

Because I installed Tailwind CSS and Bun, we see both scripts present.

Finally, in the current version of Rails (7.1) there’s a Procfile.dev file that gets sourced to a ruby gem called foreman.

That file bundles all the scripts we need to run into one set of processes giving us the ability to run one command to boot the rails app and build the assets.

bin/dev

Lovely, although a spiderweb of stuff, right? Luckily, it works out of the box, and you don’t have to pre-configure anything to install.

Not so fast!

If you’re following along and you ran bin/dev in the previous step, you might see an error like this in your logs:

unknown command: bun run build --watch

Bun still needs to be installed on your system if you see this. There are several ways to go about installing it. I will reach for homebrew, given I’m on a Mac. Read the docs for a different setup.

brew tap oven-sh/bun 
brew install bun

You can check if it’s installed by running

bun --version

Usage

Bun is super similar to yarn in syntax and key commands. You can use it like the following:

bun add -d tailwindcss
bun add @hotwired/turbo-rails @hotwired/stimulus

To run bin/dev we need to install dependencies using bun.

bun install
# bun install v1.0.20 (09d51486)
# 12 packages installed [1.66s]

This happens quickly, but while Rails created the Stimulus and Hotwire files inside app/javascript, the dependencies we need aren't installed.

bun add @hotwired/stimulus @hotwired/turbo-rails

Now running bin/dev, we should be set up for success!

What now?

Well, build cool stuff like normal! With bun under the hood for JavaScript, you get the added benefits of speed and compatibility without changing too much “muscle memory”.

Personally, I have used yarn and esbuild exclusively sincejsbundiling-rails and cssbundling-rails entered the scene. I’m excited to give Bun a run for its money and will likely switch to it.

Digging into Solid Queue and Rails

Andy Leverenz — Sun, 07 Jan 2024 18:21:01 +0000

In the realm of Ruby on Rails and background job processing, Solid Queue is the newest contender. Solid Queue is a robust alternative to well-established solutions like good_job and Sidekiq. This guide explores Solid Queue, delving into its distinctive features and comparing it with its counterparts.

What is Solid Queue?

Solid Queue is an open-source background processing library tailored for Ruby on Rails applications. Its primary objective is to efficiently manage asynchronous tasks, ensuring your application's performance remains rock-solid even during peak traffic and demanding workloads.

Key Features of Solid Queue:

Reliability: Solid Queue places a premium on reliability and data integrity. It guarantees that jobs are processed precisely once, eliminating the risk of duplicates or data loss.
Transaction Support: Unlike some competing solutions, Solid Queue seamlessly integrates with database transactions, ensuring consistent data when both your application and background jobs interact.
Concurrency Control: Solid Queue offers granular control over concurrency, enabling you to specify the number of workers for each job type and optimize resource utilization.
Active Job Compatibility: If your Rails application relies on Active Job, you'll appreciate Solid Queue's effortless compatibility, simplifying migration and adoption.

How Solid Queue Sets Itself Apart

Data Integrity: Solid Queue is committed to data integrity, which is critical for applications handling sensitive information or intricate business logic. It guarantees that jobs are processed reliably, eliminating the possibility of duplicates.
Database Transactions: Integrating Solid Queue with database transactions is a standout feature. In contrast, GoodJob and Sidekiq may necessitate additional configuration through something like Redis and management to maintain transactional consistency.
Concurrency Control: While all three solutions offer concurrency control, Solid Queue's flexibility in specifying worker counts for different job types empowers you to fine-tune resource allocation for optimal performance.

Examples

To show how to use SolidQueue in a Ruby on Rails application, you'll need to take the following steps on a new Rails application.

Install the gem. Add the following to your Gemfile and run bundle install .

gem "solid_queue"

Run the installer

rails generate solid_queue:install

This adds a few migrations, replaces a few configurations in the test, development, and production environment, and adds a solid_queue.yml config file to the app. All the values are commented out by default.

gsub config/environments/development.rb
        gsub config/environments/test.rb
        gsub config/environments/production.rb
      create config/solid_queue.yml
       rails railties:install:migrations FROM=solid_queue
Copied migration 20240102191754_create_solid_queue_tables.solid_queue.rb from solid_queue

The configuration wasn’t added to my development.rb environment file but made it to the production.rb file. You may need to append the following to your preferred environment configurations if you aren't adding it to config/application.rb

config.active_job.queue_adapter = :solid_queue

Inside the config/solid_queue.yml configuration file, be sure to uncomment the defaults.

default: &default
  dispatchers:
    - polling_interval: 1
      batch_size: 500
  workers:
    - queues: "*"
      threads: 5
      processes: 1
      polling_interval: 0.1

development:
 <<: *default

test:
 <<: *default

production:
 <<: *default

Be sure to configure Solid Queue as your Active Job queue adapter

# config/application.rb
config.active_job.queue_adapter = :solid_queue

Run the migrations

rails db:migrate

This creates several tables related to different states of a given job:

== 20240102191754 CreateSolidQueueTables: migrating ===========================
-- create_table(:solid_queue_jobs)
   -> 0.0024s
-- create_table(:solid_queue_scheduled_executions)
   -> 0.0009s
-- create_table(:solid_queue_ready_executions)
   -> 0.0012s
-- create_table(:solid_queue_claimed_executions)
   -> 0.0009s
-- create_table(:solid_queue_blocked_executions)
   -> 0.0009s
-- create_table(:solid_queue_failed_executions)
   -> 0.0007s
-- create_table(:solid_queue_pauses)
   -> 0.0007s
-- create_table(:solid_queue_processes)
   -> 0.0009s
-- create_table(:solid_queue_semaphores)
   -> 0.0012s
-- add_foreign_key(:solid_queue_blocked_executions, :solid_queue_jobs, {:column=>:job_id, :on_delete=>:cascade})
   -> 0.0062s
-- add_foreign_key(:solid_queue_claimed_executions, :solid_queue_jobs, {:column=>:job_id, :on_delete=>:cascade})
   -> 0.0054s
-- add_foreign_key(:solid_queue_failed_executions, :solid_queue_jobs, {:column=>:job_id, :on_delete=>:cascade})
   -> 0.0050s
-- add_foreign_key(:solid_queue_ready_executions, :solid_queue_jobs, {:column=>:job_id, :on_delete=>:cascade})
   -> 0.0061s
-- add_foreign_key(:solid_queue_scheduled_executions, :solid_queue_jobs, {:column=>:job_id, :on_delete=>:cascade})
   -> 0.0053s
== 20240102191754 CreateSolidQueueTables: migrated (0.0381s) ==================

Start Solid Queue’s supervisor to be able to run jobs. This should be a new terminal instance.

bundle exec rake solid_queue:start

Define and enqueue jobs as you would with Active Job:

# app/jobs/sample_job.rb
class SampleJob < ApplicationJob
  def perform
    # Your job logic here
  end
end

# Enqueue the job
SampleJob.perform_later


rails console
> SampleJob.perform_later

Pretty simple, right? I love that it lives within the framework and doesn’t make me learn a complicated new standard. I come from Sidekiq, and the workflow is highly similar, minus a few bits.

Handling Failed jobs and retries

Solid Queue does not have an automatic retry feature; instead, it depends on Active Job for this functionality. Any failed jobs will be stored in the system, and a record of the failed execution will be created in the solid_queue_failed_executions table. These failed jobs will remain in the system until manually discarded or re-enqueued.

The team plans to introduce a UI component called Mission Control that allows you to examine and diagnose any specific job or group of jobs efficiently.

For now, you can manually intervene with these methods:

failed_execution = SolidQueue::FailedExecution.find(...) # Find the failed execution related to your job
failed_execution.error # inspect the error

failed_execution.retry # This will re-enqueue the job as if it was enqueued for the first time
failed_execution.discard # This will delete the job from the system

This seems nice for the ability to manually retry if necessary in your app’s logic rather than having it be arbitrary. Some might argue the latter.

Adding some UI in the meantime

I noticed on Twitter a library called Panoptic. The simple UI was built with Bootstrap CSS to provide a GUI for Solid Queue.

You can add it much like Sidekiq if you’re familiar with that configuration style. It’s an engine that bolts on the app.

# add to your Gemfile
gem "panoptic"

Then in your config/routes.rb file, add the following one-liner

# config/routes.rb
Rails.application.routes.draw do
  mount Panoptic::Engine => "/panoptic"
  # more code
end

You can visit localhost:3000:/panoptic to see it in action.

Again, the team has stated that something called Mission Control is on the near horizon, so I wouldn't depend heavily on this library. It is something, though!

In pursuit of increased developer happiness with Puma

While running bundle exec rake solid_queue:start each time you need background job processing, it works fine; a handy Puma plugin integration in Solid Queue allows for some nice automations. When Puma is running (rails server), the processing of your job will kick in alongside it.

I need to add a one-liner to my puma.rb file.

# config/puma.rb
plugin :solid_queue

Conclusion

Solid Queue is a formidable choice for background job processing in Ruby on Rails applications. It prioritizes reliability, data integrity, and seamless database transaction integration.

While GoodJob and Sidekiq remain excellent alternatives, Solid Queue's unique attributes make it a compelling candidate for your next project without additional dependencies or resources. I think you will need to consider the extra database space it might reserve, but hopefully, it shouldn't be enough to cause too much concern.

Digging into Turbo 8's Morphing Feature in Ruby on Rails

Andy Leverenz — Fri, 22 Dec 2023 20:18:06 +0000

Inspired by Jorge Manrubia’s talk from Railsworld I wanted to try out morphing which is coming to Turbo 8 very soon.

On October 9th, 2023 Jorge published a blog post that was a precursor to the talk. I recommend giving it a read.

The gist of the blog post and talk is that Turbo frames and streams are useful but often cumbersome to integrate since they are highly focused containers of logic.

They won’t be going away but might be more of a special-use tool coming up with the introduction of morphing which could be a more convenient and useful “default” much like the standard full-page reloads of historical Rails apps.

Discovering the problem

The Basecamp team has been working on integrating a calendar into their HEY product. In building the new feature, they quickly spotted the constraints of turbo frames and streams. Having to broadcast and update many items on a given page is problematic and overly complex, so they looked for a better approach, one much closer to the default Rails full-page reload conventions.

What is morphing?

No, this doesn’t relate to Power Rangers, though one could wish!

Morphing is the process of merging one DOM into another without too many side effects. It’s not necessarily natural but the perception our eyes see makes it feel as such.

Morphing isn’t new, but it is to Turbo 8. The Basecamp team chose idiomorph as a library to help with the new features. It's a JavaScript library for morphing from one DOM tree to another.

The TL;DR;

Morphing provides smoother updates everywhere rather than selective updates like turbo streams and turbo frames.

Putting it to practice

Let’s make a quick blog to put these new features to work. I prefer esbuild to importmaps so I passed a flag to declare that. Feel free to skip that part.

rails new morphblog -j esbuild

Add Tailwind CSS

I’m going to scaffold our models coming up so to make the views pre-styled and save myself some time we’ll leverage the dedicated tailwindcss-railsgem.

bundle add tailwindcss-rails

Then run the installer

rails tailwindcss:install

The app is now accessible at localhost:5000

Install Turbo

Add the latest beta of Turbo(turbo-rails gem) (this will change of course once the official version is released)

# Gemfile

gem "turbo-rails", "~> 2.0.0-beta.2"

Then run

bundle install

Don’t forget to update the node version of Turbo as well

yarn add @hotwired/turbo@8.0.0-beta.2

Create the blog

Scaffold a Post resource. We’ll make it reference a User model that I'll create next.

rails g scaffold Post title content:text user:references

Scaffold a User

rails g scaffold User name email

Note: For the guide I’ll forgo worrying about authentication so we’re keeping this stupid simple for now.

Create a User on the rails command line rails console.

User.create(name: "Andy", email: "andy@webcrunch.com")

  TRANSACTION (0.0ms) begin transaction
  User Create (0.5ms) INSERT INTO "users" ("name", "email", "created_at", "updated_at") VALUES (?, ?, ?, ?) RETURNING "id" [["name", "Andy"], ["email", "andy@webcrunch.com"], ["created_at", "2023-12-21 20:31:06.848693"], ["updated_at", "2023-12-21 20:31:06.848693"]]
  TRANSACTION (0.4ms) commit transaction
=>
#<User:0x00000001090775b0
 id: 1,
 name: "Andy",
 email: "andy@webcrunch.com",
 created_at: Thu, 21 Dec 2023 20:31:06.848693000 UTC +00:00,
 updated_at: Thu, 21 Dec 2023 20:31:06.848693000 UTC +00:00>
irb(main):002>

Update the associations

After generating the resources we can define the associations in the models.

# app/models/user.rb

class User < ApplicationRecord
  has_many :posts
end

And then in the Post model:

# app/models/post.rb
class Post < ApplicationRecord
  belongs_to :user
end

Standard Rails stuff!

Update routing

Inside config/routes.rb we can uncomment the line beginning with root

Rails.application.routes.draw do
  resources :users
  resources :posts
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  # Defines the root path route ("/")
  root "posts#index"
end

Stub out the controller

Normally in the controller, you might define a current user based on some authentication strategy. To make this demo “just work” I’ll stub it out with some crappy code assigning the first User directly :)

class PostsController < ApplicationController
   def create
    # assign the User record we just made for demo purposes
    @post = Post.new(post_params.merge(user: User.first))

    respond_to do |format|
      if @post.save
        format.html { redirect_to post_url(@post), notice: "Post was successfully created." }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end
end

Remove user references from the Post form

Because we are doing this in our controller, we don’t need the user_id field. Let's remove it so we are left with the following:

<%= form_with(model: post, class: "contents") do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :title %>
    <%= form.text_field :title, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
  </div>

  <div class="my-5">
    <%= form.label :content %>
    <%= form.text_area :content, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
  </div>

  <div class="inline">
    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
  </div>
<% end %>

Move the Post form to the index

Let’s make our form super simple and display it above all the posts on the index. Maybe think of it like a makeshift “X” (formerly Twitter) app.

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>

  <h1 class="font-bold text-4xl">Posts</h1>

  <%= render "posts/form", post: Post.new %>

  <div id="posts" class="min-w-full mt-10">
    <%= render @posts %>
  </div>
</div>

From here go ahead and create a post or two. You can use the console or go through the UI but we just need a post or two as dummy data to get started.

Add new morph meta tag

In your application.html.erb layout file add the following within the head tags.

<%= turbo_refreshes_with method: :morph, scroll: :preserve %>

<head>
  <title>Morphblog</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= turbo_refreshes_with method: :morph, scroll: :preserve %>

  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>

This instructs the app to "morph" the page while preserving the scroll position. Previously, Turbo would "replace" the entire page and "reset" the scroll position.

Update Post model

Next, we need to broadcast the updates. With the new beta version of Turbo, we can add the following to our Posts model.

# app/models/post.rb

class Post < ApplicationRecord
  belongs_to :user
  broadcasts_refreshes # add this line
end

Then in the posts#show view, we can add the turbo_stream_from tag you might already be familiar with.

<div class="mx-auto md:w-2/3 w-full flex">
  <div class="mx-auto">
    <% if notice.present? %>
      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
    <% end %>

    <%= turbo_stream_from @post %>

    <%= render @post %>

    <%= link_to "Edit this post", edit_post_path(@post), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <div class="inline-block ml-2">
      <%= button_to "Destroy this post", post_path(@post), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
    </div>
    <%= link_to "Back to posts", posts_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
  </div>
</div>

Watch a quick example of the “streamed” updates in action. I opened two windows, one being incognito. It kinda “just works” which is way cooler than tons of turbo frame tags and whatnot.

Updating collections

This is one area I’m not 100% sold on. It still works but there’s a big assumption with a collection you’ll have an association tied to it. That’s probably true most of the time but it feels a bit rigid. I might be overthinking it of course.

Using the new morph features to make something like the posts index stream updates we need an association tied to it. So instead of just rendering all the posts, we’ll render the user’s posts and update our models.

Here’s the Post model

# app/models/post.rb
class Post < ApplicationRecord
  # updates the timestamp when a post-commit (create, update, destroy) occurs
  belongs_to :user, touch: true
  broadcasts_refreshes
end

The touch: true addition instructs the timestamp of the associated user when it's manipulated in some way.

On the User model we need to add the new method

# app/models/user.rb
class User < ApplicationRecord
  has_many :posts
  broadcasts_refreshes
end

Then in the index view, we’ll stub out what might normally be a current_user with the associated user we defined for demonstration purposes.

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  before_action :set_post, only: %i[show edit update destroy]

  # GET /posts or /posts.json
  def index
    @user = User.first
    @posts = @user.posts # update to user posts
  end

  # more stuff below
end

Then we need to stream updates from that User specifically.

<div class="w-full max-w-3xl mx-auto">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>

  <h1 class="font-bold text-4xl">Posts</h1>

  <%= render "posts/form", post: Post.new %>

  <%= turbo_stream_from @user %>
  <div id="posts" class="min-w-full mt-10">
    <%= render @posts %>
  </div>
</div>

Here it is in action. Pretty darn slick!

Wrapping up

Having dabbled with the beta I’m super excited about this update!

It makes reaching for turbo frame tags more intentional versus necessary. There will no doubt be times when you need more sophistication but I think this is a huge improvement and one I’m excited to transition into existing apps leveraging a ton of turbo frames. The fact that I need to add about 3 lines of code is probably my favorite part. Cheers to the future of Rails!

Best Practices for Naming Models in Ruby on Rails

Andy Leverenz — Sun, 17 Dec 2023 13:33:10 +0000

In Ruby on Rails, naming models is more than just a convention. It's about clarity, efficiency, and ensuring your app is easy to manage. Here's a guide to help you name your models like the pros.

P.S. I created a handy guide at https://web-crunch.com/naming-models. Bookmark it if you need a refresher every once in a while!

Singular and Capitalized

Model names should be singular and capitalized. Rails uses this convention to look for the corresponding pluralized table name in the database.

# Good
class Product < ApplicationRecord
end

# Avoid
class Products < ApplicationRecord
end

Keep it descriptive and clear

Names should be self-explanatory. Don't forget to avoid abbreviations unless they are well-known.

# Good
class ShoppingCart < ApplicationRecord
end

# Avoid
class SCart < ApplicationRecord
end

Organize with namespaces

For complex apps, namespaces help in organizing models. Use modules to group related models.

# Good
module Inventory
  class Item < ApplicationRecord
  end
end

# Usage
@item = Inventory::Item.new

Intuitive Associations

Keep it intuitive. If a User has many articles, the association should reflect that.

class User < ApplicationRecord
  has_many :articles
end

Acronyms and Initialisms

If you're using acronyms, keep them uppercase.

# Good
class HTTPRequest < ApplicationRecord
end

# Avoid
class HttpRequest < ApplicationRecord
end

Avoid Reserved Words

Some words are reserved in Rails and should be avoided as model names (e.g., Attribute, Error).

Context-Specific Naming

If your app has models that only make sense within a specific context, name them accordingly.

# Good for a school management app
class GradeReport < ApplicationRecord
end

# Good for an e-commerce app
class PaymentGateway < ApplicationRecord
end

Avoid Ambiguity

Names should be unambiguous, even if they end up being longer.

# Good
class SubscriptionPayment < ApplicationRecord
end

# Avoid
class Payment < ApplicationRecord
  # This could be ambiguous in an app dealing with multiple payment types
end

Composite Names

For models representing a combination of entities, use clear composite names.

# Good
class UserSubscriptionHistory < ApplicationRecord
end

# Avoid
class UserHistory < ApplicationRecord
  # This is vague about what history it refers to
end

Polymorphic Associations

In polymorphic associations, choose names that clearly indicate their versatile nature.

class Picture < ApplicationRecord
  belongs_to :imageable, polymorphic: true
end

class Employee < ApplicationRecord
  has_many :pictures, as: :imageable
end

class Product < ApplicationRecord
  has_many :pictures, as: :imageable
end

STI (Single Table Inheritance)

The model name should indicate its role if you use Single Table Inheritance.

# Good
class Vehicle < ApplicationRecord
end

class Car < Vehicle
end

class Motorcycle < Vehicle
end

Conclusion

Remember, well-named models make your code cleaner and more accessible for others (or future you) to understand and maintain. I hope these examples add more depth to your understanding! Look for more articles like this to come. In the meantime, check out some related content:

P.P.S. Reminder! I created a handy guide at https://web-crunch.com/naming-models. Bookmark it if you need a refresher every once in a while!

How I Create a Tailwind CSS Plugins from Scratch

Andy Leverenz — Wed, 06 Dec 2023 19:55:06 +0000

This tutorial guides you through creating a custom Tailwind CSS plugin to add a variety of button styles. I find it an excellent way to rinse and reuse button components in the multiple prototype-like apps I build yearly. We'll cover designs like solid, outline, and ghost buttons, each with customizable colors and hover states.

Why Tailwind CSS plugins?

From the Tailwind CSS docs,

Plugins let you register new styles for Tailwind to inject into the user’s stylesheet using JavaScript instead of CSS.

This is handy when leveraging reusable tailwind components or styles across different apps, websites, or environments.

Prerequisites

Familiarity with Tailwind CSS is super useful to have!
Node.js and yarn or npm installed.

Install Vite.js

I’ll be using vite.js to make use of Tailwind CSS. I reach for it when I need something more static in production. Folks who have followed me might know I usually use Ruby on Rails for my full-stack framework of choice. This guide applies to everything in that environment, too, but this guide is less about Rails.

Alright, let’s install Vite. You’ll want to create a new app using the following command. Follow the steps and choose vanilla JavaScript to keep things simple.

yarn create vite

When naming the project, I chose:

tailwindcss-button-plugin

Choose vanilla JavaScript for any option that prompts you and run

cd tailwindcss-button-plugin
yarn
yarn dev

This should boot a development server and give you a localhost link to visit.

Install Tailwind CSS

Next, we need Tailwind CSS installed.

yarn add tailwindcss postcss autoprefixer -D
npx tailwindcss init -p

These two commands install Tailwind CSS dependencies in the project and create a tailwind.config.js file and a postcss.config.js file.

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Inside the tailwind.config.js file, we can add the following.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {}
  },
  plugins: [],
}

Inside the style.css file, I'll remove the current contents and add the following Tailwind directives.

/* style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Navigating back to the localhost path Vite supplied us, we should see the browser reset. Tailwind CSS is working, but it’s not apparent until we code.

I’ll remove all default content from the app so we have a clean slate.

<!-- index.html -->
  <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS Button Plugin Tutorial</title>
</head>

<body>

  <script type="module" src="/main.js"></script>
</body>

</html>

// main.js
import "./style.css"

You can just delete all the SVG assets, too. With this configuration complete, we are ready to write the plugin.

Step 1: Setting the Plugin File

In the app's root directory, create a new file for the plugin named tailwind-custom-buttons.js. You can call this whatever you like.

// tailwind-custom-buttons.js
module.exports = function({ addComponents }) {
    // Our button styles will be added here
};

We’ll need to export a function with built-in helper functions that give us access to various parts of the tailwind library.

Step 2: Writing the Button Styles

We'll create several button styles: solid, outline, and ghost. Here's how you can define them:

module.exports = function({ addComponents, theme }) {
    const buttons = {
        '.btn': {
            padding: '.5rem 1rem',
            borderRadius: theme('borderRadius.md'),
            fontWeight: '600',
            display: 'inline-block',
            textAlign: 'center',
        },
        '.btn-solid': {
            backgroundColor: theme('colors.blue.500'),
            color: theme('colors.white'),
            '&:hover': {
                backgroundColor: theme('colors.blue.600'),
            },
        },
        '.btn-outline': {
            backgroundColor: 'transparent',
            color: theme('colors.blue.500'),
            border: '2px solid',
            borderColor: theme('colors.blue.500'),
            '&:hover': {
                backgroundColor: theme('colors.blue.500'),
                color: theme('colors.white'),
            },
        },
        '.btn-ghost': {
            backgroundColor: 'transparent',
            color: theme('colors.blue.500'),
            '&:hover': {
                backgroundColor: theme('colors.blue.100'),
            },
        },
        // Additional styles can be added here
    };

    addComponents(buttons);
};

Step 3: Testing the Plugin

Include the plugin in your tailwind.config.js:

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('./tailwind-custom-buttons.js'),
        // Other plugins...
    ],
};

You can just run your build process to see the new button styles.

In the index.html file I added the following

<!-- index.html -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS Button Plugin Tutorial</title>
</head>

<body class="bg-stone-50 text-stone-800">
  <div class="max-w-3xl mx-auto my-24">
    <h1 class="font-bold text-3xl pb-6 text-stone-800 text-center">Tailwind CSS Button Plugin Tutorial</h1>

    <div class="flex items-center justify-center gap-4">
      <button class="btn btn-solid">Solid</button>
      <button class="btn btn-outline">Outline</button>
      <button class="btn btn-ghost">Ghost</button>
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-danger">Danger</button>
      <button class="btn btn-custom">Custom</button>
    </div>
  </div>

  <script type="module" src="/main.js"></script>
</body>

</html>

Step 4: Advanced Customization

Responsive and State Variants

You can easily add responsive and state variants to your buttons:

module.exports = function({ addComponents, variants }) {
    const buttons = {
        // ... your button styles
    };

    addComponents(buttons, {
        variants: ['responsive', 'hover', 'focus'],
    });
};

This unlocks the ability to change button styles that respond to interactions and screen viewport widths.

Dynamic Theming

Allow customization of button colors by using the theme's color configuration:

'.btn-custom': {
    backgroundColor: theme('colors.custom', theme('colors.teal.500')),
    color: theme('colors.white'),
    '&:hover': {
        backgroundColor: theme('colors.customHover', theme('colors.teal.600')),
    },
},
// Similarly, add .btn-secondary, .btn-danger, etc.

In tailwind.config.js, add custom colors if needed:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        custom: "#f79b4b",
        customHover: "#e38a3c",
      },
    },
  },
  plugins: [require("./tailwind-custom-buttons")],
}

Why not add these using CSS?

Well, you totally can do that. In fact, it’s pretty simple to do, but I think it boils down to reusability. If you’re on a team and build out a series of custom components like this one, you could effectively publish it as a separate repo somewhere and include it on new projects as we advance. With CSS, that’s a little harder to manage but not impossible.

I’ve primarily gone the CSS route since most of my custom CSS is relative to the application or website I’m creating and it didn’t make sense to extract into something super reusable. Your mileage may vary!

Conclusion

You've created a Tailwind CSS plugin that provides a rich set of customizable button styles. This plugin enhances your UI toolkit, enabling quick and consistent button styling across your projects.

You can experiment with different styles and configurations to tailor the plugin to your design needs. Your creativity is the limit!

Useful links

Let’s Build: A Supplement Stack Sharing App with Ruby on Rails

Andy Leverenz — Tue, 05 Dec 2023 17:42:49 +0000

Welcome to my latest Let’s Build series, where we'll build a supplement stack sharing app using Ruby on Rails.

Over time, I’ve added several these builds, which resonate with many of my audience.

These are both useful for first principles product ideas but also lovely ways to practice to see how quickly I can build an MVP of product ideas. Luckily, with Rails, this can be done quickly with just one developer.

The Idea

The idea for a supplement stack shopping and sharing tool (I'm dubbing Supstacker) came to me while browsing Twitter (X) one evening. I saw someone I followed to share a photo of over a dozen supplement bottles and proceeded to make a thread documenting each. While this was useful, places like X (formerly Twitter) are more of a “point in time” type of experience rather than something to refer back to often.

I read the thread and quickly realized that sharing any collection of supplements you might take with friends is hard. You can go one by one, but a list over, say, five supplements and things quickly get disorganized.

Plans following the build

As a disclaimer, I like this idea and plan to make it real. I’ll share the source code with y’all for reference, but don’t copy me directly if you plan to try to do the same.

When I build ideas like this, it's two-fold. To make helpful stuff people find value in and also benefit monetarily. That will be no different this time around. I suppose it’s fun to build this stuff, too, so I can’t leave that out. Do you want to build together to go faster? Reach out to me, and we can see what might make sense.

Pre-requisites

I’ll be using the latest version of Rails at the time of this writing/recording, which is Rails 7.1. We’ll leverage the Hotwire framework of frameworks and all the goodies that come with it.

Tailwind CSS is my go-to for CSS these days, and as a bonus, I’ll make use of the alpha version of my new project Rails UI to save some initial time on design.

P.S. If you need design work tailored for Rails apps, I’m available for hire.

Let’s get on with it!

Video version of the series

Part 1

Part 2

Part 3

Part 4

Part 5

Part 6

Part 7

Part 8 Part 9 - Final Part

Written version of the series

Getting started

I’ll start making a new Rails app on my machine using Rails 7.1 and Ruby 3.2.2. The app is a vanilla Rails app to begin with. I’m going this route since Rails UI plays more excellently alongside it.

rails new supstacker

After scaffolding the app, install Rails UI. You can totally not use Rails UI and customize your app a bit more. I’m using it to save some configuration time and design setup.

bundle add railsui --github getrailsui/railsui --branch main

After installing the gem, run.

bundle install

Finally, run the Rails UI installer.

rails railsui:install

That should fetch some dependencies and tweak the app. It also installs and configures Devise for you.

Boot your app and head to the root path (localhost:3000). You can then configure your Rails UI installation by choosing an app name, support email, CSS framework, and theme for the chosen CSS framework.

Saving your changes installs the framework and completes your configuration. With Rails UI installed, you now have a design system, an archive of opt-in pages, and more in your arsenal.

Generating resources

I’m calling this app Supstacker. It’s kinda catchy and the domain was also available💪!

We’ll use the term Stack as our first model, the collections of supplements. Additionally, we can use Product as another model to be what gets added to a Stack and ultimately shared/interacted with by your friends or public folks.

Thanks to Rails UI, we already have a User model, so let's build our resource list as an exercise in planning:

User - The model responsible for an entity who might add supplements and share stacks.
Stack - A category or collection type of resource that acts as a basket for your supplements. Users can have many stacks. A stack has a shareable link that users can send to each other for quick and easy access.
Product - The singular supplement (product) shared inside a stack. This might have richer data like pricing trends, title, description, and nutrition facts.
Brand - The brand of a supplement. A Supplement would have one brand. A brand can have many supplements.

This is a short and sweet list to get us started.

As the app build gets underway, adding additional filterable criteria and categories might be an excellent way to help people browse. Some expansion ideas include tagging, categories (protein, weight management, vitamins/wellness, etc…), brands, reviews, ingredients, and more.

Quick setup

rails g scaffold Brand name description:text

rails g scaffold Product title:string description:text link:string asin:string 'price:decimal{10,2}' brand:references

rails g scaffold Stack title:string share_link:string user:references

rails g migration CreateProductStacks

class CreateProductStacks < ActiveRecord::Migration[6.0]
  def change
    create_table :product_stacks do |t|
      t.belongs_to :product, null: false, foreign_key: true
      t.belongs_to :stack, null: false, foreign_key: true

      t.timestamps
    end
  end
end

Defining relationships

We can move quickly thanks to ActiveRecord, which helps define relationships on the model level in Rails. I’ll list all the models below and explain what’s going on with each.

User Model

A user has_many stacks.
- A user should be able to make more than one stack OR perhaps with business in mind, you might offer one free stack and add a payment gateway here to upsell and earn for the service.
A user has_many products through stacks.
- Being able to see all the products a user has would be awesome. With this relationship, we’re able to do so. We can query through all stacks a user has created and output the products.

# app/models/user.rb
class User < ApplicationRecord
  has_many :stacks
  has_many :products, through: :stacks
end

Stack Model

A stack belongs_to a user.
- When a user creates a Stack, it references their user_id even if other users can view it. This is important to easily display user profile data on a view for others to understand whose stack it actually is.
A stack has_many products.
- Think of a Stack as a container of products and what we’ll allow users to share. We don’t want to limit the number of products, but requiring at least one product would make sense.

# app/models/stack.rb
class Stack < ApplicationRecord
  belongs_to :user
  has_many :product_stacks
  has_many :product, through :product_stacks
end

Product Model

A product has_many a ProductStacks
A product has_many a Stacks
A product belongs_to a Brand
- Brands are similar to stacks but apply only to products. We’ll leverage this model to give users an easy way to filter their search for supplements and other users with products of the same brand (brand_id) within their Stacks.

# app/models/product.rb
class Product < ApplicationRecord
  belongs_to :brand
  has_many :product_stacks, dependent: :destroy
  has_many :stacks, through: :product_stacks
end

ProductStack model

A ProductStack belongs_to a product
A ProductStack belongs_to a stack
- This join model allows us to retrieve products and stacks through one another more easily.

class ProductStack < ApplicationRecord
  belongs_to :product
  belongs_to :stack
end

Brand Model

A brand has_many products
I added dependent: :nullify so we can delete a product but not necessarily the associated brand. You might see a foreign key constraint exception on the database layer if you don't do this.

# app/models/brand.rb
class Brand < ApplicationRecord
  has_many :products, dependent: :nullify
end

This set of relationships allows a user to have multiple stacks; each stack can contain multiple products, and each product belongs to a specific stack and brand.

If you’re following along, amend your app to match the snippets above. We’ll refine the controllers and views coming up. Before we do, we need to enhance our routes.

Initial Routing

With our resources generated, we should have a couple of new lines in the config/routes.rb file that came with the app. If you're using Rails UI, your file should look similar to this:

# config/routes.rb

Rails.application.routes.draw do
  resources :stacks
  resources :products
  resources :brands
  if Rails.env.development? || Rails.env.test?
    mount Railsui::Engine, at: "/railsui"
  end

  # Inherits from Railsui::PageController#index
  # To overide, add your page#index view or change to a new root
  # Visit the start page for Rails UI any time at /railsui/start
  root action: :index, controller: "railsui/page"

  devise_for :users
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions; otherwise, 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  # Defines the root path route ("/")
  # root "posts#index"
end

The root route points to the Rails UI engine by default. Let's change this to stacks#index for now.

# config/routes.rb

root to: "stacks#index"

Head back to localhost:3000, and you should see the Rails UI theme we chose (using Tailwind CSS) and the Stacks index.

Because we use scaffolds when generating our resources, we get the “basics” of a CRUD app, which allows you to create, read, update, and destroy each model we’ve added so far minus users.

Next, let’s update the resource lines to align more with our application architecture. We’ll nest products within stacks .

# config/routes.rb
Rails.application.routes.draw do
  resources :brands
  resources :stacks do
    resources :products
  end
  #...
end

Clean up the scaffolds

With scaffolds comes some unnecessary fluff that we can tighten up and remove. An example of this is the user_id input on the new stack form and the .jbuilder files and response types in the controllers.

When done, there should be no comments in the controllers and id related attributes in the views.

Authentication strategy

Rails UI supports Devise by default, and there are pre-designed authentication views. With that work already out of the way for this app, I’d like to require a user to be authenticated to manipulate data related to a Stack . We will follow suit with the other models soon enough.

Here’s my updated stacks_controller.rb file.

# app/controllers/stacks_controller.rb

class StacksController < ApplicationController
  before_action :authenticate_user!, except: %i[index show]
  before_action :set_stack, only: %i[show edit update destroy]

  def index
    @stacks = Stack.all
  end

  def show
  end

  def new
    @stack = Stack.new
  end

  def edit
  end

  def create
    @stack = Stack.new(stack_params)
    @stack.user = current_user

    if @stack.save
      redirect_to stack_url(@stack), notice: "Stack was successfully created."
    else
      render :new, status: :unprocessable_entity
    end
  end

  def update
    if @stack.update(stack_params)
      redirect_to stack_url(@stack), notice: "Stack was successfully updated."
    else
      render :edit, status: :unprocessable_entity
    end
  end

  def destroy
    @stack.destroy!
    redirect_to stacks_url, notice: "Stack was successfully destroyed."
  end

  private
    def set_stack
      @stack = Stack.find(params[:id])
    end

    def stack_params
      params.require(:stack).permit(:title)
    end
end

Besides cleaning the file, I added a before_action called :authenticate_user. This is built into the Devise gem and requires a session to bypass. If a user isn’t logged in, they are redirected to the form to do so. You can declare which actions in the controller this applies to. In this case, we want it to apply to everything except the index and show routes.

On top of the new before action, I added some extended logic to assign the current user to a stack inside the create action. That way, we will know who created it based on their user_id.

So it's extra evident the user_id field was generated previously when we first developed the Stack resource. You can check your schema.rb file to see it on the stacks table.

The line user:references worked for us on the generator command.

Here’s an excerpt from my schema file for reference.

create_table "stacks", force: :cascade do |t|
    t.string "title"
    t.integer "user_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["user_id"], name: "index_stacks_on_user_id"  end

If you haven’t already, sign up for an account at localhost:3000/users/sign_up . Because we are working locally, you can use a fake email and password. I'd suggest something super easy to remember, for speed's sake.

Try creating a Stack

Right now, a Stack by itself is underwhelming. Let’s create a stack and ensure the user data saves correctly. Then, we can proceed to the Product model.

I created one called Andy’s Stack, and it worked!

To verify it saved my user data, we can leverage rails console

rails console

Then type

Stack.last

That should then output our first stack

irb(main):001> Stack.last
  Stack Load (0.1ms) SELECT "stacks".* FROM "stacks" ORDER BY "stacks"."id" DESC LIMIT ? [["LIMIT", 1]]
=>
#<Stack:0x00000001064f4c58
 id: 1,
 title: "Andy's Stack",
 user_id: 1,
 created_at: Mon, 27 Nov 2023 21:25:35.307793000 UTC +00:00,
 updated_at: Mon, 27 Nov 2023 21:25:35.307793000 UTC +00:00>

Note the user_id column has the value 1. This gives us a clue that our logic is working!

For bonus points, you could write if you wanted to see information about the user assigned to the stack.

Stack.last.user
 Stack Load (0.1ms) SELECT "stacks".* FROM "stacks" ORDER BY "stacks"."id" DESC LIMIT ? [["LIMIT", 1]]
  User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
=> #<User id: 1, email: "andy@example.com", first_name: nil, last_name: nil, admin: false, created_at: "2023-11-27 21:19:52.662926000 +0000", updated_at: "2023-11-27 21:19:52.662926000 +0000">

This works fine now, but it won’t be as accurate as your data scales. You might need to be more explicit. For example:

stack = Stack.find(340)

Products

The Product model is where a single supplement resides. A product should be able to be a part of any user's stack. We’ll want to make sure a product doesn't already exist in the database before adding it.

My goal for this Let’s Build series is to append the attributes below dynamically. We’ll use a bit of web scrapping to do this along with Nokogiri, a super cool ruby gem. A user needs to supply a link to the product page on Amazon, and the app will parse the rest to the best of its ability.

We’ll add more granular details for the product, including:

title
asin (amazon standard identification number)
- I chose Amazon since it’s the most prominent place to shop (in the States). You could integrate multiple merchants eventually and include various links to those. If you were to do various merchants, it might make sense to make a new model so it’s additional criteria a user could filter products/stacks by.
description
- Brief description of the product. This might include ingredients or something.
link
- A link where the user purchased it originally
price
- The original purchase price as a decimal
brand_id
- We can provide more accessible filtering logic with the Brand model coming up so users can find products and stacks that might match their preferences.

Authentication strategy for products

Much like stacks, I want to require a user session to manipulate the data related to a product. We’ll add more logic to allow only the user who created the product in the first place permissions to do so.

Here’s the updated controller.

class ProductsController < ApplicationController
  before_action :authenticate_user!, except: %i[index show]
  before_action :set_product, only: %i[show edit update destroy]

  def index
    @products = Product.all
  end

  def show
  end

  def new
    @product = Product.new
  end

  def edit
  end

  def create
    @product = Product.new(product_params)
    if @product.save
      redirect_to product_url(@product), notice: "Product was successfully created."
    else
      render :new, status: :unprocessable_entity
    end
  end

  def update
    if @product.update(product_params)
      redirect_to product_url(@product), notice: "Product was successfully updated."
    else
      render :edit, status: :unprocessable_entity
    end
  end

  def destroy
    @product.destroy!

    redirect_to products_url, notice: "Product was successfully destroyed."
  end

  private
    def set_product
      @product = Product.find(params[:id])
    end

    def product_params
      params.require(:product).permit(:title, :description, :link, :asin, :price, :brand_id)
    end
end

Besides cleaning up the logic from the scaffold, we added a new line right after the class declaration authenticate_user! Much like the stacks_controller.rb file.

Update the product form

I want the “Add product” form to be straightforward. You pass a URL to the product on Amazon, and the app goes and fetches data and creates the product. Our form becomes quite simple then.

<!-- app/views/products/_form.html.erb -->

<%= form_with(model: [@stack, product]) do |form| %> <%= render
"shared/error_messages", resource: form.object %>

<h3 class="font-normal text-lg mb-6">
  Provide the link to the Amazon product, and we'll do the rest.
</h3>

<div class="form-group">
  <%= form.label :link, "Amazon link", class: "form-label" %> <%=
  form.text_field :link, class: "form-input", placeholder:
  "https://www.amazon.com/OPTIMUM-NUTRITION-STANDARD-Naturally-Flavored/dp/B00QQA0H3S/"
  %>

  <div class="prose prose-sm max-w-full pt-3">
    <p>
      Example link:
      <code
        >https://www.amazon.com/OPTIMUM-NUTRITION-STANDARD-Naturally-Flavored/dp/B00QQA0H3S/</code
      >
    </p>
  </div>
</div>

<%= form.submit "Add product", class: "btn btn-primary btn-lg" %> 
<% end %>

Editing a product

Even though products will be created dynamically, we want to give users the ability to change the details as necessary. I’ll make a new form partial in app/views/products called _edit_form.html.erb .

This form will have all the criteria of a product

<%= form_with(model: [@stack, product]) do |form| %> <%= render
"shared/error_messages", resource: form.object %>

<h3 class="font-normal text-lg mb-6">
  Provide the link to the Amazon product and we'll do the rest.
</h3>

<div class="form-group">
  <%= form.label :thumbnail, class: "form-label" %> <%= form.file_field
  :thumbnail, class: "form-file-input" %> <% if form.object.thumbnail.attached?
  %>
  <div class="my-2">
    <%= image_tag product.thumbnail, class: "w-32 h-auto" %> <%= link_to "Remove
    Thumbnail", remove_thumbnail_stack_product_path(@stack, product), class:
    "btn btn-link" %>
  </div>
  <% end %>
</div>

<div class="form-group">
  <%= form.label :title, class: "form-label" %> <%= form.text_field :title,
  class: "form-input" %>
</div>

<div class="form-group">
  <%= form.label :price, class: "form-label" %> <%= form.number_field :price,
  step: "0.01", class: "form-input" %>
</div>

<div class="form-group">
  <%= form.label :description, class: "form-label" %> <%= form.text_area
  :description, class: "form-input min-h-[220px]" %>
</div>

<div class="form-group">
  <%= form.label :asin, class: "form-label" %> <%= form.text_field :asin, class:
  "form-input" %>
</div>

<div class="form-group">
  <%= form.label :brand_id, "Brand", class: "form-label" %> <%=
  form.collection_select :brand_id, Brand.all, :id, :name, { prompt: "Select
  one" }, {class: "form-select"} %>
</div>

<div class="form-group">
  <%= form.label :link, "Amazon link", class: "form-label" %> <%=
  form.text_field :link, class: "form-input", placeholder:
  "https://www.amazon.com/OPTIMUM-NUTRITION-STANDARD-Naturally-Flavored/dp/B00QQA0H3S/"
  %>
  <div class="prose prose-sm max-w-full pt-3">
    <p>
      Example link:
      <code
        >https://www.amazon.com/OPTIMUM-NUTRITION-STANDARD-Naturally-Flavored/dp/B00QQA0H3S/</code
      >
    </p>
  </div>
</div>

<%= form.submit "Add product", class: "btn btn-primary btn-lg" %> 
<% end %>

Removing a product thumbnail

For exercise, I added a link to remove an attachment if it’s present on a product. We first check for its existence and display it if it does exist. The link to remove it is a new endpoint added to our controller and routing to simplify it.

# config/routes.rb 
resources :stacks do 
  resources :products do 
    get 'remove_thumbnail', on: :member 
  end 
end

Here’s my controller after updating to match the new routing structure and additional end point to remove a thumbnail.

# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  before_action :authenticate_user!, except: %i[index show]
  before_action :set_product, only: %i[show edit update destroy remove_thumbnail]
  before_action :set_stack

  def index
    @products = Product.all
  end

  def show
  end

  def new
    @product = Product.new
  end

  def edit
  end

  def create
    # TODO
  end

  def update
    if @product.update(product_params)
      redirect_to stack_product_url(@stack, @product), notice: "Product was successfully updated."
    else
      render :edit, status: :unprocessable_entity
    end
  end

  def remove_thumbnail
    @product.thumbnail.purge

    redirect_to stack_product_url(@stack, @product), notice: 'Thumbnail removed successfully.'
  end

  def destroy
    @product.destroy!

    redirect_to stack_url(@stack), notice: "Product was successfully destroyed."
  end

  private
    def set_stack
      @stack = Stack.find(params[:stack_id])
    end

    def set_product
      @product = Product.find(params[:id])
    end

    def product_params
      params.require(:product).permit(:title, :description, :link, :asin, :price, :brand_id)
    end
end

ActiveStorage has a built-in purge method we can leverage to remove the attachment easily. I'll do a simple redirect back to the product after removing it.

Creating a product dynamically

I don’t believe I’ve covered web scraping this blog before. It’s a bit of a brittle way to get data from other sites for your site. Most websites frown on scraping data, so use this at your discretion. If you get in trouble, neither Web-Crunch.com nor I can be held responsible.

With that disclaimer out of the way, let’s create a new concern we can use throughout the app. This type of thing is a little taxing, so I want to make a separate module to handle the logic and a background job for queuing up the processes as they transpire. Putting this in a queue frees up your app’s resources and allows the end user to continue navigating without waiting. All that being said, since the process takes a little time, a user needs to be told what’s happening while they wait.

Parsing data automatically

We’ll make products a bit more dynamic with the help of Nokogiri. I want to capture a thumbnail of the product, among other things, once it’s created, if possible. We can inspect elements on a given product page and look for unique class names or IDs. Ideally, they are present for easier access via Nokogiri.

For now, to prototype this, let’s make a new ruby module (a.k.a. a concern) inside the app/models/concerns folder.

Below is the basic module structure. You could extend this to include new sources other than Amazon, depending on your needs and sources.

# app/models/concerns/product_parser.rb
module ProductParser
  module Amazon
  end
end

User agents

We need to randomize our user agent when accessing the URL to get past some of Amazon's guards for another type of scrapper. With the help of ChatGPT and Google, I found a large array we can utilize.

# app/models/concerns/product_parser.rb
module ProductParser
  require 'open-uri'

  COMMON_USER_AGENTS = ['Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0','Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36']

  def self.parse_doc(url)
    URI.open(url, 'User-Agent' => COMMON_USER_AGENTS.sample) { |f| Nokogiri::HTML.parse(f) }
  end
end

Parsing Logic 101

That file turns into something like this with an internal parse_doc method. It accepts a URL. With the help of the open-uri library in Ruby, we can fetch it as a random user agent. Then, loop through the hash returned as parse the HTML using Nokogiri.

Think of this process as Ruby/Nokogiri visiting the URL and scanning the DOM elements of the page. From there, we traverse a little deeper to find specific aspects of the data we are after.

This process is, without a doubt, error-prone and brittle. You’re at the mercy of Amazon updating their HTML or CSS classes, so a routine check to ensure the page is scraping correctly would be wise. Tests can solve this, which I’ll do coming up.

If they aren't present, I’ll update the parse with elements and conditional logic. Additionally, the module will create a new product using the attributes we save. Here’s my final parser file.

include ActionView::Helpers::SanitizeHelper

module ProductParser
  require 'open-uri'

  COMMON_USER_AGENTS = ['Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36','Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0','Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36']

  def self.parse_doc(url)
    URI.open(url, 'User-Agent' => COMMON_USER_AGENTS.sample) { |f| Nokogiri::HTML.parse(f) }
  end

  module Amazon
    def self.get_attributes(url)
      attributes = {}
      doc = ProductParser.parse_doc(url)

      # title
      title_element = doc.at('#productTitle')

      if title_element
        title_string = title_element.inner_html.strip
        attributes[:title] = title_string
      end

      # description
      description_element = doc.at('#productDescription')

      if description_element
        dirty_description = description_element.inner_html
        clean_description = sanitize(dirty_description, tags: %w[h3 span p])
        attributes[:description] = clean_description.strip
      end

      # price
      price_1_element = doc.at('#corePrice_feature_div .a-offscreen')
      price_2_element = doc.at('.header-price span')

      if price_1_element
        price_1_string = price_1_element.inner_html
        price_1_decimal = price_1_string.gsub(/[^0-9.]/, '').to_d
        attributes[:price] = price_1_decimal
      elsif price_2_element
        price_2_string = price_2_element.inner_html
        price_2_decimal = price_2_string.gsub(/[^0-9.]/, '').to_d
        attributes[:price] = price_2_decimal
      else
        attributes[:price] = nil
      end

      # brand
      brand_element = doc.at('.po-brand .a-span9 span')
      if brand_element
        brand_string = brand_element.inner_html
        brand_name = brand_string.strip
        brand = Brand.find_or_create_by!(name: brand_name)
        attributes[:brand] = brand
      end

      # thumbnail
      thumbnail_element = doc.at('#landingImage')
      thumbnail_url = thumbnail_element['src'] if thumbnail_element

      if thumbnail_url
        thumbnail = URI.open(thumbnail_url)
        attributes[:thumbnail] = ActiveStorage::Blob.create_and_upload!(io: thumbnail, filename: "thumbnail_#{Time.now.to_i}")
      end

      # asin
      asin = url.match(%r{dp/([^/]+)/})&.captures&.first
      attributes[:asin] = asin

      return attributes
    end

    def self.save_to_product(url, product)
       begin
        attributes = get_attributes(url)
        product.update(attributes)
      rescue StandardError => e
        Rails.logger.error("Error in save_to_product: #{e.message}")
        Rails.logger.error(e.backtrace.join("\n"))
      end
    end
  end
end

In this file, we find and collect the following bits of data. It’s stored in an attributes variable.

title
description
price_1
price_2 - A backup price on different versions of the product page
brand - Starts as a string, and we take that string and either create a new product or find an existing one in our database to assign.
thumbnail - Pull the thumbnail from the doc and attach it via ActiveStorage.
asin - We do some Ruby magic and use a Regular expression pattern to extract the ASIN from the url.

So far, we’ve only parsed the data. We haven’t saved a new product. We’ll do that coming up in our ProductsController and a background job. For now, I’ll note the method in the parser called save_to_product that accepts the url and product instances. This will make more sense in a second.

Creating a product for real

If you remember our new product form, you will recall it’s a simple field and a submit button. The end user adds a link from Amazon to the field and clicks Create Product. That brings us to our next step. By design/convention, the form on /stacks/:stack_id/products/new will leverage a POST HTTP response to our server. Doing so sends a request with the link parameter. We'll take that and amend our create action in the controller.

class ProductsController < ApplicationController
  #...
   def create
    link = params[:product][:link].strip
    ProductImportJob.perform_later(link, @stack.id)
    redirect_to stack_path(@stack), notice: "Product is being created, sit tight!"
  end
  #...
end

Here we go “anti” conventional a bit and introduce a few new steps in the chain to create a product dynamically.

Create a product import background job

The ProductImportJob class is in the create action. Let's create that quickly:

rails g job ProductImport

That makes a new file app/jobs/product_import_job.rb

In this file, we’ll leverage the new parser to put the taxing processes in a queuing service, which in return won’t tax our app’s resources and also gives the end user a better experience.

Add and configure sidekiq

I prefer to use Sidekiq for my background queuing service. There are a few configuration steps to get out of the way before we do.

Add sidekiq to your Gemfile or run the following:

bundle add sidekiq

Head to config/application.rb and add the following to your app. Here's my file:

require_relative "boot"

require "rails/all"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Supstacker
  class Application < Rails::Application
    config.generators do |g|
      g.template_engine :railsui
      g.fallbacks[:railsui] = :erb
    end

    config.to_prepare do
      Devise::Mailer.layout "mailer"
    end

    config.active_job.queue_adapter = :sidekiq # ADD THIS LINE

    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.1

    # Please, add to the `ignore` list any other `lib` subdirectories that do
    # not contain `.rb` files, or that should not be reloaded or eager loaded.
    # Common ones are `templates`, `generators`, or `middleware`, for example.
    config.autoload_lib(ignore: %w(assets tasks))

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")
  end
end

If you have a Procfile.dev file, add the following lines (with Rails UI, you should have this).

# Procfile.dev
web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch
worker: bundle exec sidekiq # add this one

Finally, I like to use the UI reasonably often, so I added the following to my routes file.

# config/routes.rb
Rails.application.routes.draw do
  if defined?(Sidekiq)
    require "sidekiq/web"
    mount Sidekiq::Web => "/sidekiq"
  end
end

Restart your server bin/dev with that out of the way.

Add the product job import logic

Our logic in the job is pretty simple.

# app/jobs/product_import_job.rb

class ProductImportJob < ApplicationJob
  queue_as :default

# after_perform do |job|
    # Send notification if you want
# end

  def perform(link, stack_id)
    stack = Stack.find(stack_id)

    # Check if the product already exists based on the link
    existing_product = Product.find_by(link: link)

    if existing_product
      # If the product exists, associate it with the stack
      existing_product.stacks << stack
    else
      # If the product doesn't exist, create a new one
      product = Product.new(link: link)
      product.stacks << stack
      ProductParser::Amazon.save_to_product(link, product)
    end
  end
end

When performing the job, we pass the link and the stack_id as arguments. Because products can belong to other stacks, it makes sense to rinse and reuse those if we have them in the database. Instead of creating a duplicate product, we’ll assign the existing one to the respective stack.

See the parser at work? If the product doesn’t exist, we offload the work to the parser and pass the link and product to it using the save_to_product method I called attention to earlier.

That then fetches all the attributes, assigns them to the product instance, and saves the product to the database.

After completing the job, you could use fancy logic to refresh the page with ActionCable. I left this out for the sake of time but invite you to extend it. Note the comment in the job:

class ProductImportJob < ApplicationJob
# after_perform do |job|
    # Send notification if you want
# end
end

This callback method gets called where you can do something further. I’ll often send emails or trigger notifications here.

Verify with a test

To actively test our parser, we should add a test to ensure it returns data. This will help automate our scrapping logic so we know if it fails, we can make more immediate improvements. Amazon will no doubt update its product pages. It’s not a matter of if but when.

Before we add the test, we need to update our users.yml fixture file. This is so we can leverage devise in our tests. You can add whatever dummy content you want here. I said the following.

# test/fixtures/users.yml
one:
  first_name: John
  last_name: Doe
  email: john@example.com
two:
  first_name: Jane
  last_name: Doe
  email: jane@example.com

I’ll just put a new test in test/ directly called product_parser_test.rb for the parser test. Here's my file.

We require a logged-in user to add a product, so we need to use the devise sign_in to test an authenticated user. Be sure to include the line include Devise::Test::IntegrationHelpers

require "test_helper"

class ProductParserTest < ActiveSupport::TestCase
  include ProductParser
  include Devise::Test::IntegrationHelpers

  def setup
    sign_in(:one)
    @amazon_url = "https://www.amazon.com/BSN-XPLODE-Pre-Workout-Supplement-Beta-Alanine/dp/B007XRVL2Y/"
  end

  def test_parse_doc
    doc = ProductParser.parse_doc(@amazon_url)
    assert_instance_of Nokogiri::HTML::Document, doc
  end

  def test_amazon_get_attributes
    attributes = ProductParser::Amazon.get_attributes(@amazon_url)

    assert_not_nil attributes[:title]
    assert_not_nil attributes[:description]
    assert_not_nil attributes[:price]
    assert_not_nil attributes[:brand]
    assert_not_nil attributes[:thumbnail]
    assert_not_nil attributes[:asin]
  end
end

Then we can try it out by running:

rails test test/product_parser_test.rb

If all goes well, you’ll see two green tests. If not, check the logs and debug :)

rails test test/product_parser_test.rb

Running 2 tests in a single process (parallelization threshold is 50)
Run options: --seed 36475

# Running:
...

Finished in 3.899943s, 0.5128 runs/s, 1.7949 assertions/s.
2 runs, 7 assertions, 0 failures, 0 errors, 0 skips

Trying it all out

Here’s a quick video of me running through the process on my local machine. One thing to note is that once you submit the form, there’s no automatic page refresh to show the new product.

View the demo

Automatically refresh the project list with Turbo streams

I wasn’t going to include this due to time originally, but it’s driving me up the wall, so let’s have a Stack list of products update automatically when the product import job is complete.

Stack Show view

I’ve updated my views a bit to help make turbo logic easier. Instead of rendering a new form over on /stack/1/products/new, I decided to embed that form right on the Stack show view to simplify things. Here is the updates stack show view:

<!-- app/views/stacks/show.html.erb-->

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="pb-6">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Stacks", stacks_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">
            <%= @stack.title %>
          </span>
        </li>
      </ol>
    </nav>

    <h1 class="h3 mb-6"><%= @stack.title %></h1>
    <div class="flex items-center gap-4 py-3 px-2 border-y">
      <div class="flex-1 flex items-center gap-4">
        <time class="text-slate-600 dark:text-slate-400 text-xs" datetime="<%= @stack.created_at.to_formatted_s(:long) %>">Created <%= time_ago_in_words(@stack.created_at) + " ago" %></time>
      </div>

      <% if current_user_stack?(@stack) %>
        <%= link_to "Edit", edit_stack_path(@stack), class: "btn btn-light" %>
      <% else %>
        <%= link_to "Create your own stack", new_user_registration_path, class: "btn btn-primary" %>
      <% end %>

    </div>
  </div>

  <div class="p-6 border bg-indigo-50/20 border-indigo-600/50 rounded-2xl shadow-sm mb-6">
    <h3 class="font-semibold text-xl tracking-tight mb-3">Add a product</h3>
    <%= render "products/form", product: Product.new %>
  </div>

  <%= turbo_frame_tag "products_count_#{@stack.id}" do %>
    <%= render "stack_product_count", stack: @stack %>
  <% end %>

  <%= turbo_stream_from @stack %>

  <%= turbo_frame_tag "product_list_#{@stack.id}" do %>
    <%= render "product_list", stack: @stack %>
  <% end %>
</div>

Towards the bottom, we render the new product form. Below that is the magic that makes turbo stream updates to our view.

First, we need this line:

<%= turbo_stream_from @stack %>

This one-liner is responsible for listening to websocket updates as they transpire. We’ll add some logic to our background job to “trigger” the upcoming update.

Below that line is our new product list, which I extracted to a partial.

<%= turbo_frame_tag "product_list_#{@stack.id}" do %>
  <%= render "product_list", stack: @stack %>
<% end %>

That partial is located in app/stacks/product_list.html.erb

<!-- app/stacks/product_list.html.erb -->

<% stack.products.each do |product| %>
  <%= render "products/product_slim", stack: stack, product: product %>
<% end %>

Finally, inside the products/product_slim.html.erb partial is the slender details of a product.

<!-- app/views/products/_product_slim.html.erb -->

<li class="py-3 flex items-center gap-4">
  <% if product.thumbnail.attached? %>
    <%= link_to stack_product_path(stack, product), class: "block" do %>
      <%= image_tag url_for(product.thumbnail), class: "w-12 h-12 p-1 object-contain border rounded", alt: product.title %>
    <% end %>
  <% end %>

  <div class="flex items-start justify-between gap-4 flex-1">
    <div class="flex-1">
      <%= link_to stack_product_path(stack, product), target: :_top, class: "group" do %>
        <h4 class="font-normal text-sm group-hover:text-indigo-600"><%= truncate(product.title, length: 75) %></h4>
        <p class="font-medium text-sm"><%= number_to_currency(product.price) %></p>
      <% end %>
    </div>
    <div class="flex justify-end">
      <%= link_to "Buy on Amazon", product.link, target: :_blank, class: "btn btn-dark btn-sm", target: :_top %>
    </div>
  </div>
</li>

Then, one more for brownie points is partial to update the count in real time with turbo, too.

<!-- app/stacks/_stack_product_count.html.erb -->
<h3 class="pt-6 h4"><%= pluralize(stack.products.size, 'Product') %></h3>

Product show

The product shown is another page showing more details of the product. It’s nothing special, but it gets the job done for now. Expand on the design as you want.

<!-- app/views/product/show.html.erb-->
<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="pb-6 border-b">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to @stack.title, stack_path(@stack), class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">
            <%= truncate(@product.title, length: 60) %>
          </span>
        </li>
      </ol>
    </nav>
    <div class="flex items-start justify-between gap-4">
      <h1 class="h4 flex-1"><%= @product.title %></h1>
      <% if current_user_stack?(@stack) %>
        <%= link_to "Edit", edit_stack_product_path(@stack, @product), class: "btn btn-light" %>
      <% end %>
    </div>
  </div>
  <%= render @product %>
</div>

Then the _product.html.erb partial

<!-- app/views/products/_product.html.erb-->

<article id="<%= dom_id product %>">
  <div class="flex items-start justify-between py-6">
    <% if product.thumbnail.attached? %>
      <%= image_tag product.thumbnail %>
    <% end %>

    <div class="flex flex-col items-end">
      <p class="text-3xl font-bold pb-3"><%= number_to_currency(product.price) %></p>
      <%= link_to "Buy on Amazon", product.link, target: :_blank, class: "btn btn-dark" %>
    </div>
  </div>

  <div class="prose prose-indigo pt-4">
    <p class="mb-0 font-semibold">
      Description
    </p>
    <p class="my-0 prose">
      <%= simple_format product.description %>
    </p>
    <p class="mb-0 font-semibold">
      Brand
    </p>
    <p class="my-0">
      <%= product.brand.name %>
    </p>

    <p class="mb-0 font-semibold">
      ASIN
    </p>
    <p class="my-0">
      <%= product.asin %>
    </p>

    <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="<%= product.created_at.to_formatted_s(:long) %>">Created <%= time_ago_in_words(product.created_at) + " ago" %></time>
  </div>
</article>

Update the product import job to include stream trigger

This approach aims to make the product append to the Stack product list automatically following the import (when the background job is completed). This solves the page refresh we had to do manually before. Instead of appending a new partial, we’ll re-render the whole list.

class ProductImportJob < ApplicationJob
  queue_as :default

  def perform(link, stack_id)
    stack = Stack.find(stack_id)
    imported_product = nil
    # check if the product already exists based on the link
    existing_product = Product.find_by(link: link)

    if existing_product
      imported_product = existing_product.stacks << stack
    else
      # If the product doesn't exist, create a new one
      product = Product.new(link: link)
      product.stacks << stack
      imported_product = ProductParser::Amazon.save_to_product(link, product)
    end

    broadcast_turbo_stream(stack, imported_product)
  end

  private

  def broadcast_turbo_stream(stack, product)
    Turbo::StreamsChannel.broadcast_replace_to(
      stack,
      target: "product_list_#{stack.id}",
      partial: "stacks/product_list",
      locals: { stack: stack }
    )

    Turbo::StreamsChannel.broadcast_replace_to(
      stack,
      target: "products_count_#{stack.id}",
      partial: "stacks/stack_product_count",
      locals: { stack: stack }
    )
  end
end

The new broadcast_turbo_steam method gets a stack and product instance. We then call the Turbo::StreamsChannel.broadcast_replace_to method passing the object we are streaming updates to (remember the line <% turbo_stream_from @stack %> ? Yeah, that one). We'll target our product list by it's unique ID and pass the partial we made through so the whole list updates when a new product is added.

Quite the feat of work to reduce the need to refresh the page, but the results are fantastic!

Here’s a quick video of the new experience:

View the demo

Add a share link to stacks

We have most of the functionality we need to call this an MVP. We’ll need a way for users to share their stacks easily, so let's add that. When we generated a stack, we added a column called share_link.

When a new stack is created, we could prefill that link with a unique ID that’s a short URL. Let’s add that logic to the model as a callback function.

class Stack < ApplicationRecord
  belongs_to :user
  has_many :product_stacks
  has_many :products, through: :product_stacks

  before_create :generate_unique_share_link

  def generate_unique_share_link
    # Loop until a unique share link is generated
    loop do
      self.share_link = generate_random_string
      break unless Stack.exists?(share_link: share_link)
    end
  end

  def generate_random_string
    SecureRandom.urlsafe_base64(6)
  end
end

When a new Stack is created, we'll add a share_link string randomized by default. We'll check to ensure it doesn't already exist so we know it's unique. Using the loop block, we can provide this.

Create a new Stack if you're following along and fire up your rails console.

rails console

irb> Stack.last
#<Stack:0x000000010a89cd20
 id: 2,
 title: "John's Stack",
 share_link: "_KStndzM",
 user_id: 1,
 created_at: Thu, 30 Nov 2023 22:50:00.456748000 UTC +00:00,
 updated_at: Thu, 30 Nov 2023 22:50:00.456748000 UTC +00:00>
irb(main):003>

Notice that the share_link column has a short link identifier we can now leverage.

Update Stack routing

We need a way to accent the new share link as a param in our routing, so lets update the stack resources:

# config/routes.rb

resources :stacks, param: :share_link do
  resources :products do
    get 'remove_thumbnail', on: :member
  end
end

Here’s the full controller:

# app/controllers/stacks_controller.rb
class StacksController < ApplicationController
  before_action :authenticate_user!, except: %i[index show]
  before_action :set_stack, only: %i[show edit update destroy]

  def index
    @stacks = Stack.all
  end

  def show
  end

  def new
    @stack = Stack.new
  end

  def edit
  end

  def create
    @stack = Stack.new(stack_params)
    @stack.user = current_user

    if @stack.save
      redirect_to stack_url(@stack), notice: "Stack was successfully created."
    else
      render :new, status: :unprocessable_entity
    end
  end

  def update
    if @stack.update(stack_params)
      redirect_to stack_url(@stack), notice: "Stack was successfully updated."
    else
      render :edit, status: :unprocessable_entity
    end
  end

  def destroy
    @stack.destroy!
    redirect_to stacks_url, notice: "Stack was successfully destroyed."
  end

  private
    def set_stack
      @stack = Stack.find_by(share_link: params[:share_link]) || Stack.find_by(id: params[:share_link])
    end

    def stack_params
      params.require(:stack).permit(:title)
    end
end

Inside the private method at the bottom of the file, the set_stack now looks by id and share_link and pulls up the same page.

We can try this manually. Pull up the string your stack generated for the share_link column and add it to the url localhost:3000/stacks/_KStndzM.

It’s working great!

Make it easy to copy a link

To wrap up this Let’s Build, use Stimulus.js and Clipboard.js to click an icon to copy the share link for easy access.

Create a stimulus controller

rails g stimulus clipboard

Install dependencies:

yarn add clipboard tippy.js

Import the file to your index_controller.js file if Rails doesn't already.

# app/controllers/index_controller.js

import ClipboardController from "./clipboard_controller"
application.register("clipboard", ClipboardController)

Inside the new clipboard_controller.js file, I added the following:

import { Controller } from "@hotwired/stimulus"
import ClipboardJS from "clipboard"
import tippy from "tippy.js"

export default class extends Controller {
  static values = {
    successMessage: String,
    errorMessage: String,
  }

  connect() {
    this.clipboard = new ClipboardJS(this.element)
    this.clipboard.on("success", () => this.tooltip(this.successMessageValue))
    this.clipboard.on("error", () => this.tooltip(this.errorMessageValue))
  }

  tooltip(message) {
    tippy(this.element, {
      content: message,
      showOnCreate: true,
      onHidden: (instance) => {
        instance.destroy()
      },
    })
  }
}

When mounted, This reusable component will display a tooltip with a success or error message if the clipboard instance was copied. We’ll need to supply a url to clipboard.js

I’ll update the Stack show view to have a new button that, when clicked, should copy the share link to the user's clipboard.

<!-- app/views/stacks/show.html.erb-->
<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="pb-6">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Stacks", stacks_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">
            <%= @stack.title %>
          </span>
        </li>
      </ol>
    </nav>

    <h1 class="h3 mb-6"><%= @stack.title %></h1>
    <div class="flex items-center gap-4 py-3 px-2 border-y">
      <div class="flex-1 flex items-center gap-4">

        <button class="btn btn-white rounded-full flex items-center justify-center w-10 h-10 m-0" data-controller="clipboard" data-clipboard-text="<%= stack_url(@stack.share_link) %>">
          <%= icon "link", classes: "w-5 h-5 flex-shrink-0" %>
        </button>

        <time class="text-slate-600 dark:text-slate-400 text-xs" datetime="<%= @stack.created_at.to_formatted_s(:long) %>">Created <%= time_ago_in_words(@stack.created_at) + " ago" %></time>
      </div>

      <% if current_user_stack?(@stack) %>
        <%= link_to "Edit", edit_stack_path(@stack), class: "btn btn-light" %>
      <% else %>
        <%= link_to "Create your own stack", new_user_registration_path, class: "btn btn-primary" %>
      <% end %>

    </div>
  </div>

  <div class="p-6 border bg-indigo-50/20 border-indigo-600/50 rounded-2xl shadow-sm mb-6">
    <h3 class="font-semibold text-xl tracking-tight mb-3">Add a product</h3>
    <%= render "products/form", product: Product.new %>
  </div>

  <%= turbo_frame_tag "products_count_#{@stack.id}" do %>
    <%= render "stack_product_count", stack: @stack %>
  <% end %>

  <%= turbo_stream_from @stack %>

  <%= turbo_frame_tag "product_list_#{@stack.id}" do %>
    <%= render "product_list", stack: @stack %>
  <% end %>
</div>

Now, we can click to copy the URL and visit either the original stack path or the new unique share link. Awesome!

A gotcha

After a quick test, I found a bug in our products_controller.rb. We’re setting the Stack at the bottom in a private method, much like in the stacks_controller.rb . We can copy our updated code to find the Stack like so. Important note: it's updated to stack_share_link in this controller.

# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  #...

  private
    def set_stack
       @stack = Stack.find_by(share_link: params[:stack_share_link]) || Stack.find_by(id: params[:stack_share_link])
    end
end

Conclusion

In conclusion, this Let's Build series focused on creating a product sharing system that allows users to add products to their stack.

The system utilizes web scraping with Nokogiri to extract data from product pages on Amazon. The product's attributes, such as title, description, price, and brand, are dynamically appended to the system. The authentication strategy ensures that only the user who created the product has permission to manipulate its data.

The system also allows users to edit and remove products, as well as remove product thumbnails.

Creating a product dynamically involves a background job that queues up the scraping process to avoid taxing the app's resources.

The system uses Nokogiri to parse the data from the product page and save it to the database. Tests are implemented to ensure the parser is returning accurate data. The system also includes the functionality to refresh the stack list of products automatically using Turbo streams. Finally, a share link is added to stacks, allowing users to share their stacks with others easily. 🎉

Bonus

I follow a methodology from the Amazon team where you start with a press release for the idea you've decided to build. If that press release is sound, it gives your team more conviction to press forward on a solid foundation. Through grit and perseverance, you can accomplish anything. This guide started with the following press release.

Press release

Today, we're excited to announce the upcoming launch of Supstacker, the ultimate app for supplement enthusiasts! Designed and developed by Andy, a seasoned product designer and developer passionate about making life better through technology.

Supstacker is your go-to destination for sharing and shopping for supplements. Whether you're a fitness enthusiast, health-conscious individual, or just someone looking to boost their well-being, Supstacker has got you covered.

Key Features:

Create and Share Stacks: With Supstacker, you can easily create lists of your favorite supplements, known as "stacks." Share your stacks with friends, family, or the entire Supstacker community.
Shop Smart: Find the best deals and top-quality supplements in one place. Supstacker provides product recommendations and pricing information, ensuring you get the most bang for your buck.

Stay tuned for the official launch of Supstacker. We can't wait to help you supercharge your supplement shopping experience. Get ready to stack, shop, and earn with Supstacker!

Please get in touch with Andy Leverenz for press inquiries or more information.

About Supstacker

Supstacker is Andy's brainchild, designed to simplify supplement shopping and empower users to see their friends' stacks, all while enhancing their well-being.

With Supstacker, you can create, share, and shop for supplement stacks.

Useful links:

Nokogiri
Stimulus Docs
Turbo Docs
Full YouTube playlist of this series
Hello Rails - A modern course designed to help you start using and understanding Ruby on Rails fast.
Rails UI - Professionally designed UI components & templates made exclusively for Ruby on Rails.
Hire me
More Let's Builds like this one

Forem: Andy Leverenz

Infinite Scroll with Rails and Turbo - No JavaScript Required!

Create a new app

Add Tailwind CSS, will_paginate, and faker gems

Generate some records

Update Rails routing

Update the posts controller

Infinite scroll logic with Rails and Turbo

Real-time infinite pagination

Done!

Keep reading

Add Geolocation to Search with Rails and Stimulus.js

New up a Rails application

Add Dependencies

Add a Search Controller

Add a SearchLocationController

Add the search form

Set up the Geolocation Stimulus.js Controller

Handle Geolocation Response in Rails Controller

Testing it out

Happy dance, it works!

Digging into View Transitions with Turbo 8 and Rails

Create a new rails app

Modifying the Rails app main layout

Modifying the posts UI

Add custom view transition CSS

Simple global transitions (easy)

How about different types of animations?

Singling out elements and combining transitions

Hooking into Turbo

Browser Compatibility

What's the real-world use case for view transitions?

We’ve only scratched the surface

Links

Create a Simple and Responsive Tailwind Navbar with Dropdown

Why Tailwind CSS for Responsive Navbars?

Table of Contents

Prerequisites

Step 1: Add the HTML for a Simple Tailwind Navbar

Step 2: Responsive Design with Tailwind CSS

Step 3: Toggling the Dropdown Menu

Step 4: Toggling the Tailwind Navbar mobile menu

Step 5: Customizing and Testing Your Tailwind Navbar

Customizing the Tailwind Navbar

Implementing a Tailwind Sticky Nav

Adding Dark Mode Support

Testing Across Devices

Conclusion

Continue reading

How to Add Live Reload to Your Rails Application

Table of Contents

Introduction

Setting Up Your Rails Project

Installing Necessary Gems and Dependencies

Configuring esbuild

Creating the Live Reload Script

Putting It All Together

Live reload Alternatives for Ruby on Rails

Conclusion

Continue learning

JavaScript mouse-tracking Glow Effect with Tailwind CSS

Setting up a project

Install Tailwind CSS

Initial HTML Structure

Styling with Tailwind CSS

Extend Tailwind

Add JavaScript for Mouse Tracking

Adding the new glow variant classes

Add more fish to the mix

The end result

You might also enjoy these articles

How to use Bun with Ruby on Rails

What is Bun?

Bun with Rails

Create a demo Rails app using bun

What about existing apps?

Preview the bun.config.js file

Not so fast!

Usage

What now?

Preview the `bun.config.js` file