DEV Community: Rails Designer

Beam Up: CLI to deploy static sites

Rails Designer — Tue, 30 Jun 2026 07:30:00 +0000

Beam Up is a command-line tool I wanted for some time. Its goal is to make deployments of static sites across various providers simpler from your machine: run one command: beam_up ./output/. ❤️

If you feel generous, head over to the GitHub repo and give it a star! 🌟

Installation and configuration

To install Beam Up, run:

gem install beam_up

Then initialize a configuration file for your chosen provider with:

beam_up init # to start an interactive process, or:
# beam_up init hetzner

This creates a .beam_up.yml file:

provider: netlify
netlify:
  api_token: your_token_here
  project_id: your_project_id

Ready to beam ⚡

Now you can deploy your static site using the super fun beam_up command:

beam_up ./output

Beam Up supports multiple providers including AWS S3, Seal Static, Hetzner, Netlify and Statichost. Oh, and it even works with SFTP (remember those days?!).

Usage from Ruby

Beam Up can also be used within Ruby scripts:

require "beam_up"

BeamUp.deploy! "./output"

Integration with Perron

While Beam Up is designed to work with any SSG (Jekyll, Middleman or Bridgetown), I built it for Perron. With the latest version, you can now simply run bin/rails perron:deploy, it will build your site (bin/rails perron:build) and deploy it: your site will be live in no time. Without any config, it will default to deploy to Seal Static (where an account is created for you on first deploy). Cool, right? 😎

Beam Up is a small, new OSS project made with ❤️ from Rails Designer HQ. If you like it, do star it on GitHub and give it a try on your (next) SSG project.

Build a reusable before/after image slider with Stimulus

Rails Designer — Mon, 29 Jun 2026 07:30:00 +0000

Before and after (image) sliders are great for product showcases, before/after transformations, renovation projects or photo editing results. They’re engaging, interactive, and honestly just fun to use.

Ever thought of building one from scratch? Not complicated at all! In this article, I want to show how to build a simple, reusable Stimulus controller that does just all that. This is how the end result will look like:

As always, the code can be found on GitHub.

It is simple, really

The beauty of this controller is its simplicity. You need three things:

a wrapper element;
two images (before and after), and;
a slider.

That’s it. Here’s it in HTML:

<div data-controller="compare">
  <img data-compare-target="before" src="before.jpg">
  <img data-compare-target="after" src="after.jpg">

  <div data-compare-target="slider"></div>
</div>

The two images are positioned absolutely and the slider sits on top as a draggable handle. The “after” image gets clipped dynamically as you drag.

Here’s that interesting part. It uses clip-path to reveal or hide the after image:

set #position(value) {
  this.positionValue = value
  this.sliderTarget.style.left = `${value * 100}%`
  this.afterTarget.style.clipPath = `inset(0 0 0 ${value * 100}%)`
}

When you drag the slider, it calculates the position relative to the container’s width, then updates both the slider’s left position and the clip-path of the after image. Most of that is done with:

#pointerDown = (event) => {
  if (event.target !== this.sliderTarget) return

  event.preventDefault()

  document.addEventListener("pointermove", this.#pointerMove)
  document.addEventListener("pointerup", this.#pointerUp)
}

Stimulus controllers are meant to be reusable

This controller is a wrapper element plus two images. That’s it. Use cases then are limitless (they generally work great on marketing blogs as well!):

product photography ; show different angles or colors of the same product
photo editing results ; before/after with filters, adjustments, or retouching
UI redesigns ; old interface vs. new interface

You could (should) extend this in several directions. Add keyboard support for accessibility. Include labels (“Before” / “After”) that move with the slider. Add touch support with haptic feedback on mobile.

It is the kind of controller you copy and paste into your projects. Just as it should be.

Building a quiz with Stimulus

Rails Designer — Sat, 13 Jun 2026 07:30:00 +0000

Quizzes are a fun! Well… I do think they are. Always up to learn new things. So how can you create one in with your favorite frameworks? In this article, I want to show how you can build a quiz witg Stimulus. It can be a good starting point for learn about a new customer in your SaaS or as a smart, little marketing tool (keep readers engaged/on your page). 💡

The quiz loads questions from a Rails endpoint, tracks answers in real-time, calculates results and submits them to your server. As always, the code can be found on GitHub.

This will be the result. Time to dust off that good ol’ computer science knowledge… 🤓

Building the data class

Here’s the QuizData class that handles the quiz logic. For this example it lives inside the Stimulus controller, but you can organise it however you want.

class QuizData {
  constructor(questions) {
    this.questions = questions
    this.answers = {}
  }

  answer(questionIndex, selectedOption) {
    this.answers[questionIndex] = selectedOption
  }

  getAnswer(questionIndex) {
    return this.answers[questionIndex]
  }

  correctCount() {
    return this.questions.filter((question, questionIndex) => {
      const answer = this.answers[questionIndex]
      return answer !== undefined && answer === question.correct
    }).length
  }

  result() {
    return this.questions.reduce((accumulate, question, questionIndex) => {
      const answer = this.answers[questionIndex]

      return accumulate + ((answer === question.correct) ? Math.pow(2, this.questions.length - 1 - questionIndex) : 0)
    }, 0)
  }

  get totalQuestions() {
    return this.questions.length
  }

  get isComplete() {
    return Object.keys(this.answers).length === this.totalQuestions
  }

  static default() {
    return new QuizData([
      {
        question: "What is \"Hi\" in binary?",
        options: ["01001000 01101001", "01000111 01101001", "01001000 01110011", "01000001 01101001"],
        correct: 0
      },

      // more questions…
    ])
  }
}

This class provides methods to record answers, checks if all questions are answered and calculate the score and encode results. The result() method is a little bit clever, it encodes which questions were answered correctly as a binary number, making it easy to store and analyze results server-side.

The static default() method provides quiz data if you do not have a remote endpoint so you can use it also outside of a Rails app (in a static site, for example).

The Rails endpoint

Your quiz questions need to come from somewhere. Create a QuizzesController with an index action that returns questions as JSON:

class QuizzesController < ApplicationController
  def index
    render json: {
      questions: [
        {
          question: "What is \"Hi\" in binary?",
          options: ["01001000 01101001", "01000111 01101001", ...],
          correct: 0
        },

        # etc…
      ]
    }
  end

  def create
    Rails.logger.info "Quiz submission: #{params.permit!.to_h}"

    head :ok
  end
end

The index action returns an array of questions with their options and the index of the correct answer. The create action receives the submitted answers, you can process them here however you want (send along, store in DB, etc.).

The Stimulus controller

Now the Stimulus where it all happens 🛏️✨. This controller fetches questions from your endpoint, renders them and handles user interactions. It uses the @rails/request.js library to make clean HTTP requests.

When the controller connects, it fetches the questions:

async connect() {
  this.quiz = await this.#getQuestions()

  this.#render()
}

async #getQuestions() {
  if (this.hasQuestionsEndpointValue) {
    try {
      const response = await get(this.questionsEndpointValue, { responseKind: "json" })

      if (response?.questions?.length > 0) return new QuizData(response.questions)
    } catch (error) {
      console.warn("Failed to load questions from endpoint, using defaults:", error)
    }
  }

  return QuizData.default()
}

This check this.hasQuestionsEndpointValue is added so I can use this controller also outside of a Rails app.

When a user selects an answer, the controller records it and enables the submit button (when all questions are answered):

selectAnswer(event) {
  const optionsContainer = event.target.closest("[data-quiz-question-index]")
  const questionIndex = parseInt(optionsContainer.dataset.quizQuestionIndex, 10)
  const selectedOption = parseInt(event.target.value, 10)

  this.quiz.answer(questionIndex, selectedOption)
  this.submitTarget.disabled = !this.quiz.isComplete
}

When the user submits the quiz, the controller sends the answers and result to your Rails endpoint. For details on how @rails/request.js works and how to make GET and POST requests from a Stimulus controller, check out this article 😊. What is happening is that you’re sending structured data (answers and a calculated result) to your server:

async submit() {
  const payload = {
    answers: this.quiz.answers,
    result: this.quiz.result()
  }

  if (this.hasAnswersEndpointValue) {
    await post(this.answersEndpointValue, {
      body: JSON.stringify(payload)
    })
  }

  this.#showResults()
}

After submission, the controller displays the results and hides the quiz:

#showResults() {
  const correct = this.quiz.correctCount()
  const total = this.quiz.totalQuestions

  const fieldsets = this.element.querySelectorAll("fieldset")
  fieldsets.forEach(fieldset => fieldset.remove())

  this.resultsTarget.innerHTML = `<div>${correct} out of ${total} correct</div>`
  this.submitTarget.hidden = true
}

The HTML view is minimal:

<article data-controller="quiz" data-quiz-questions-endpoint-value="<%= quizzes_path %>" data-quiz-answers-endpoint-value="<%= quizzes_path %>">
  <output data-quiz-target="results"></output>

  <button type="button" data-quiz-target="submit" data-action="quiz#submit" disabled>Submit Quiz</button>
</article>

The controller renders each question as a fieldset with radio buttons. The styling uses modern CSS (oklch color space; see this article, CSS Grid) to create a clean, accessible interface. The CSS isn’t included here, but it handles the layout, hover states and checked states for the radio buttons.

This quiz is a good starting point. You could add pagination to show only a few questions at a time, add a countdown timer that auto-submits when time runs out, send detailed results to an analytics service to track which questions trip up your users, allow retakes so users can compare scores over time or fetch different question sets based on difficulty level.

Meet Mata: live reload for Rack Apps

Rails Designer — Thu, 04 Jun 2026 19:30:00 +0000

I build quite a few sites. For my own products or I help others. Since I released Perron that is my go-to static site generator now. But it was missing one feature for a speedy development cycle: live reload. Not just a page refresh, but more like hot reloading.

Most live reload solutions either require ActionCable (overkill when using Perron) or just do full-page reloads (annoying/too minimal). I wanted something in between.

Meet Mata : a lightweight live reload solution for Rack apps. It uses Server-Sent Events (SSE) and idiomorph.

You can install Mata simply by running bundle add mata --group=development. Then configure the middleware with watch and skip paths. That’s it. No JavaScript bundling. No ActionCable. No WebSockets. Just smart live reloading! ✨

But Mata isn’t just for Perron. It works with any Rack-based framework, like Rails: Sinatra, Hanami or Roda. 🚀 See the GitHub README for set up examples.

Look, mom, no hands:

So why the name? It’s named after the legendary double agent: Mata Hari. 🕵️💃🤓

(oh, I learned while in Indonesia, in Bahasa Indonesia, mata means eye. A fun coincidence, for something that watches your files. 😅)

Already using Mata (you do if you use Perron!)? Give Mata a star on GitHub. ⭐❤️

Building user-customizable themes with Tailwind CSS

Rails Designer — Thu, 28 May 2026 15:30:00 +0000

A little while ago I was asked to to build a “white-label” feature into an existing app. Their customers can now customize the app to match their brand without touching code.

It will look a little something like this:

This article walks through how I build a custom theme system using Tailwind CSS and the OKLCH color space. The basics for this feature I extracted and is available on GitHub.

The approach I took generates an entire color palette from a single value, instead of managing eleven different color stops manually. Sounds complicated? It really is quite simple. Let me show you.

Tailwind allows defining custom colors using the @theme directive (these can then be used normally, e.g. text-brand-500 and bg-brand-50/60). Rather than hardcoding hex values, use CSS variables that change at runtime.

Here is the setup in app/assets/tailwind/application.css:

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.99 0.01 var(--color-value));
  --color-brand-100: oklch(0.98 0.02 var(--color-value));
  --color-brand-200: oklch(0.94 0.04 var(--color-value));
  --color-brand-300: oklch(0.86 0.08 var(--color-value));
  --color-brand-400: oklch(0.74 0.14 var(--color-value));
  --color-brand-500: oklch(0.60 0.18 var(--color-value));
  --color-brand-600: oklch(0.52 0.16 var(--color-value));
  --color-brand-700: oklch(0.44 0.14 var(--color-value));
  --color-brand-800: oklch(0.36 0.12 var(--color-value));
  --color-brand-900: oklch(0.26 0.08 var(--color-value));
  --color-brand-950: oklch(0.16 0.04 var(--color-value));
}

Notice the same --color-value variable? By changing this one variable, all eleven shades update automatically. The lightness and chroma values stay consistent (for a harmonious palette). 🌈

Use these colors in your templates like any other Tailwind color:

<nav class="bg-brand-50 border-brand-100">
  <span class="text-brand-600">Custom Theme</span>
</nav>

OKLCH?

But wait… OKLCH? What is that? OKLCH is a modern color space that separates color into three components: lightness, chroma and hue. This makes it a perfect choice for generating color palettes (Tailwind CSS changed to OKLCH internally as well since v4, iirc).

Take the brand-500 color from the example above:

oklch(0.60 0.18 var(--color-value))

So:

0.60 is the lightness. A value of 0 is black, 1 is white. This color is medium brightness.
0.18 is the chroma (or color saturation). Higher values are more vibrant.
var(--color-value) is the hue angle in degrees (0-360). This is what changes when you update the theme and defined initially in the style-element.

The beauty of OKLCH is that lightness and chroma remain constant across the palette. Only the hue changes. This means your brand color can shift from red to blue to green while maintaining the same visual weight and saturation at each shade level.

Setting up the HTML

In your layout, add a style tag with the default theme value:

<head>
  <style data-theme>
    :root { --color-value: 60; }
  </style>
  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

The default value of 60 is a sorta yellow-green hue. You can change it however you want.

Wiring up the theme controller

I just added this Stimulus controller for this demo (the client’s app worked a bit different).

import { Controller } from "@hotwired/stimulus"

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

  initialize() {
    this.style = document.querySelector('style[data-theme]')
  }

  update(event) {
    const value = event.target.value

    this.style.textContent = `:root { --color-value: ${value}; }`
    this.valueTarget.textContent = value
  }
}

The controller finds the existing style tag marked with data-theme and updates its content. This triggers a cascade: the CSS variable changes, all the brand colors are recalculated and the entire app recolors instantly. ✨

The demo interface

The example includes a simple slider to demonstrate the feature:

<div class="flex items-center gap-4 px-6 py-4 border-b border-brand-200" data-controller="theme">
  <span class="text-sm text-brand-700">Theme</span>
  <input type="range" min="0" max="360" value="60" data-action="theme#update" class="w-32 accent-brand-600">
  <span data-theme-target="value" class="text-sm text-brand-500">60</span>
</div>

<p class="mt-2 p-6 text-brand-900">Move the slider above to change the theme color.</p>

<ul class="flex gap-4 p-6">
  <li class="size-16 rounded-lg bg-brand-50 border border-brand-200"></li>
  <li class="size-16 rounded-lg bg-brand-100 border border-brand-200"></li>
  <li class="size-16 rounded-lg bg-brand-200 border border-brand-200"></li>
  <!-- … all the way to brand-950 -->
</ul>

User-selected themes

While this approach was built for a white-label app, it works equally well for user-customizable themes.

The technique is flexible. You could extend it to store multiple theme variables: primary color, secondary color, accent color. Each would be a separate CSS variable that users can customize independently.

Pretty cool, right?

Inbound email in Rails apps with Fuik

Rails Designer — Fri, 22 May 2026 07:30:00 +0000

Fuik is a Rails engine for handling webhooks that I launched recently. But it can also be used to process inbound emails! 💡

When working with inbound email in Rails using Action Mailbox, there’s a key requirement: managing EML files and blob storage. Once an email arrives at your domain, your email provider captures it and sends the data to you via webhook. You then extract what you need and process (or store) it. Action Mailbox requires: ActiveStorage ánd ActionMailer.

But what if you don’t have a need for ActiveStorage (including its cloud storage setup) or ActionMailer (because you use Courrier).

Most transactional email providers send their inbound emails as webhooks: Postmark, SendGrid, Mailgun and Mailpace. They all POST the email data to a webhook URL you configure.

Fuik is great at capturing just that: it captures those incoming webhooks, stores them in the database and calls your event class to process them. You see all your webhooks in at /webhooks. You can inspect and copy payloads, pull path accessors and generally debug what’s happening.

It is simple to get started:

bundle add fuik
bin/rails generate fuik:install
bin/rails db:migrate

That’s it. Your app now has /webhooks endpoints ready to receive any webhooks. Now to process inbound emails, let’s look at Postmark as an example (though every provider that sends inbound emails as webhooks wil work).

Postmark lets you receive inbound emails by pointing a MX record to their servers and then configure a webhook URL. When an email arrives, the data is POSTed to you. Let’s see how to process it in your app with Fuik.

Generate the class:

bin/rails generate fuik:provider postmark inbound_email

This creates three files.

Now open app/webhooks/postmark/inbound_email.rb. Postmark sends "To", "From", "Subject", "TextBody", and "HtmlBody". Route emails based on the recipient address:

module Postmark
  class InboundEmail < Base
    def process!
      return if to_email.blank?

      case to_email
      when /replies-.*@/
        message = Message.find_by(email_address: to_email)
        message.replies.create!(
          content: text_content,
          from: from_email
        )
      when /support@/
        SupportTicket.create!(
          from: from_email,
          subject: subject,
          body: text_content
        )
      end

      @webhook_event.processed!
    end

    private

    def to_email = payload["To"]

    def from_email = payload["From"]

    def subject = payload["Subject"]

    def text_content = payload["TextBody"]
  end
end

Postmark doesn’t send an event type in the payload (all inbound webhooks are inbound emails), so you set it statically. Use Fuik’s config (app/webhooks/postmark/config.yml) to extract it:

event_type:
  source: static
  value: inbound_email

Point your Postmark inbound webhook to https://yourdomain.com/webhooks/postmark in their dashboard, and emails start flowing in.

In the repo shared, I also added an example for Sendgrid to show another example how to do this.

Any provider with webhooks

Postmark and SendGrid are just examples. Mailgun, Brevo, Mailpace and others all send structured JSON via webhooks. The pattern is the same. Generate a provider, map the payload fields to your private methods, add your business logic and mark the event as processed.

Check out the example repository with both Postmark and SendGrid set up.

Thoughts, notes and what I read

Rails Designer — Tue, 19 May 2026 07:30:00 +0000

I’ve never used “social” media. Instead, I read a lot on various topics: Rails, web/tech and beyond. Next to the weekly practical article a week on Rails, Hotwire, CSS, SaaS and design I published, I have, since March, started sharing some thoughts and notes. They’re not publicly listed, but accessible via Atom feed only.

I hope to see more platform-independent Twitter-style feeds from others too. Web standards like RSS/Atom are great and don’t lock you into a platform or company. Just linear posts, no ragebaits or shitposting from others (and if so, unsubscribe).

With Perron’s customisable feeds feature, this is super easy to set up. I also created a tiny Raycast extension that makes posting super simple and quick too.

If you have a similar kind of feed, do share it below! 👇

Mine can be found at with here.

Reusable drag-and-drop image preview in Rails

Rails Designer — Thu, 14 May 2026 07:30:00 +0000

Custom elements have been covered here berfore. If you have used Hotwire in Rails, you have already used them. Both <turbo-frame> and <turbo-stream> are custom elements. They are just HTML tags with JavaScript behavior attached.

This article walks through building a drag-and-drop image upload custom element that works great in Rails forms. Starting with a simple avatar and ending with a reusable component that handles both inline and external forms. The code is, as usual, available on GitHub.

So first, why not use a regular file input or a Stimulus controller? The answer is that custom elements are perfect for self-contained components. They work anywhere in your HTML without needing to wire up data attributes or controller targets. Drop the tag in your view and it works. No configuration. No boilerplate.

With Stimulus you write:

<div data-controller="image-upload">
  <input type="file" data-image-upload-target="input" />

  <button data-action="click->image-upload#remove">Remove</button>
</div>

With the custom element I want to explore today, you write:

<image-upload name="user[avatar]" data-preview-image-url="...">
  <button type="button" data-remove-image>Remove</button>
</image-upload>

The component creates its own file input. It finds the form automatically. It handles drag-and-drop, preview rendering and removal. All wrapped in a clean, semantic HTML tag.

Lets get started, by creating the custom element in app/javascript/components/image-uploads.js:

class ImageUpload extends HTMLElement {
  #img = null;
  #input = null;

  connectedCallback() {
    this.#img = this.#image();
    this.#input = this.#fileInput();

    this.#load(this.#img);
    this.#dragAndDropListeners();
    this.#removeButtonListener();
    this.#clickToSelectListener();
  }
}

customElements.define('image-upload', ImageUpload);

The connectedCallback runs when the element is added to the page. It sets up the image element, creates the file input, loads any existing image and wires up all the event listeners.

The component creates an <img> tag if one does not already exist (only if the data-preview-image-url attribute is present):

#image() {
  if (!this.hasAttribute('data-preview-image-url')) return null;

  const img = document.createElement('img');
  this.insertBefore(img, this.firstChild);

  return img;
}

This means you do not need to add an <img> tag to your HTML. If you want to show an existing image, just add the data-preview-image-url attribute with the image URL.

Now it gets interesting. The component creates a hidden file input and appends it to the form , not to the component itself:

#fileInput() {
  const name = this.getAttribute('name');

  if (!name) {
    console.error('image-upload requires a "name" attribute');
    return null;
  }

  const input = document.createElement('input');
  input.type = 'file';
  input.name = name;
  input.accept = 'image/*';
  input.style.display = 'none';

  const formId = this.getAttribute('form');
  const form = formId ? document.getElementById(formId) : document.querySelector('form');

  if (form) {
    form.appendChild(input);
  } else {
    this.appendChild(input);
  }

  input.addEventListener('change', event => this.#fileSelected(event));

  return input;
}

This is crucial. The file input must be part of the form for Rails to receive it in the params. The component looks for a form in two ways: if a form attribute is present, it uses that ID to find the form. Otherwise, it finds the first form in the DOM. Use it inside a form (it finds the form automatically) or outside a form (pass the form ID via the form attribute).

When a file is selected (either via click or drag-and-drop), the component renders a preview:

#fileSelected(event) {
  const imageFile = event.target.files[0];

  if (imageFile) this.#process(imageFile);
}

#process(file) {
  if (this.#img) this.#render(file);
}

#render(file) {
  const reader = new FileReader();

  reader.onload = (event) => {
    this.#img.src = event.target.result;
  };

  reader.readAsDataURL(file);
}

The FileReader converts the file to a data URL which is displayed in the image element. The user sees the preview immediately.

The component listens for drag-and-drop events and adds a visual indicator:

#dragAndDropListeners() {
  this.addEventListener('dragover', event => this.#dragOver(event));
  this.addEventListener('dragleave', event => this.#dragLeave(event));
  this.addEventListener('drop', event => this.#drop(event));
}

#dragOver = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.setAttribute('data-drag-active', '');
}

#dragLeave = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.removeAttribute('data-drag-active');
}

#drop = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.removeAttribute('data-drag-active');

  const files = event.dataTransfer.files;
  const imageFile = Array.from(files).find(file => file.type.startsWith('image/'));

  if (imageFile) this.#process(imageFile);
}

When the user drags a file over the component, it sets a data-drag-active attribute. Style this with CSS to show visual feedback like a blue border or background color.

The component finds a button with data-remove-image and wires it up:

#removeButtonListener() {
  const removeButton = this.querySelector('[data-remove-image]');

  if (removeButton) removeButton.addEventListener('click', () => this.#remove());
}

#remove() {
  this.#input.value = '';

  if (this.#img) this.#img.removeAttribute('src');
}

When clicked, it clears the file input and removes the image preview. For has_one_attached in Rails, submitting an empty file input removes the attachment.

Using the component

Here is the avatar example inside a form:

<%= form_with(model: user) do |form| %>
  <div>
    <%= form.label :avatar, style: "display: block" %>
    <image-upload name="user[avatar]" data-preview-image-url="<%= url_for(@user.avatar) if @user.avatar.attached? %>">
      <button type="button" data-remove-image>Remove</button>
    </image-upload>
  </div>

  <div>
    <%= form.label :email_address, style: "display: block" %>
    <%= form.text_field :email_address %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>

And here is the header example outside the form:

<image-upload name="user[header]" form="user_form" data-preview-image-url="<%= url_for(@user.header) if @user.header.attached? %>">
  <button type="button" data-remove-image>Remove</button>
</image-upload>

<%= form_with(model: user, id: "user_form") do |form| %>
  <!-- form fields -->
<% end %>

The form="user_form" attribute associates the component with the form by ID. The file input gets appended to that form and submits with it.

Custom elements work anywhere in your HTML without needing to wire up data attributes or controller targets. I’ve been enjoying custom elements more and more and for really contained examples like this one, or for static sites built with Perron I think they are wonderful tool to have.

Adding edit, delete and reposition for nested forms in Rails with Stimulus

Rails Designer — Thu, 07 May 2026 07:30:00 +0000

In a previous article, I explored building nested forms with Stimulus. But what about when you need to edit existing questions, remove ones you no longer need or reorganize them? Let’s extend that foundation by adding: editing, deleting and repositioning questions using drag-and-drop.

This article builds directly on the previous setup, so make sure you have that in place before continuing (check out the repo for the full code base). The reposition logic is inspired by this article to create a Kanban board.

First, update the migration to include a unique index:

class AddPositionToQuestions < ActiveRecord::Migration[8.1]
  def change
    add_column :questions, :position, :integer, null: false
    add_index :questions, [:survey_id, :position], unique: true
  end
end

I like the positioning gem for this, make sure to set it up correctly.

Editing questions is really just vanilla Rails stuff, update the SurveysController with edit and update actions. It will save the question’s content alongside the survey models (I recently wrote how you can do this without using accepts_nested_attributes_for).

Now the more interesting part is the logic to reposition questions. Let’s go over the related parts. Add a RepositionController that stores the new position after drag-and-drop.

class RepositionController < ApplicationController
  def update
    resources.each_with_index do |resource, index|
      resource.update!(position: params[:new_position].to_i + index)
    end
  end

  private

  def resources
    resource_class.where(id: Array(params[:ids]))
  end

  def resource_class
    request.path.split("/")[1].singularize.classify.constantize
  end
end

Next is to updates your routes to include the new action:

Rails.application.routes.draw do
+ resources :questions, only: %w[destroy] do
+ collection do
+ patch :reposition, controller: "reposition", action: "update"
+ end
+ end
end

Update the nested-fields controller to support question removal.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
+ remove(event) {
+ const field = event.target.closest("[data-sortable-id-value]");
+ const destroyInput = field.querySelector('input[name*="_destroy"]');

+ if (destroyInput) {
+ destroyInput.value = "1";

+ field.hidden = true;
+ } else {
+ field.remove();
+ }
+ }
}

The remove() method checks if there’s a _destroy hidden field (for existing records). If so, it sets the value to “1” and hides the field. For new records without this field, it simply removes the element from the DOM.

Sortable Stimulus controller

Create a new Stimulus controller (this is mostly copied verbatim from the Kanban board article I mentioned) for drag-and-drop functionality:

// app/javascript/controllers/sortable_controller.js
import { Controller } from "@hotwired/stimulus"
import { Sortable } from "sortablejs"
import { patch } from "@rails/request.js"

export default class extends Controller {
  static values = { endpoint: String };

  connect() {
    Sortable.create(this.element, {
      group: "questions",
      animation: 150,
      easing: "cubic-bezier(1, 0, 0, 1)",
      ghostClass: "opacity-50",
      selectedClass: "selected",
      onEnd: (event) => this.#updatePosition(event)
    });
  }

  async #updatePosition(event) {
    const items = event.items?.length > 0 ? event.items : [event.item];
    const ids = items.map(item => item.dataset.sortableIdValue);

    await patch(this.endpointValue, {
      body: JSON.stringify({
        ids: ids,
        new_position: event.newIndex + 1
      })
    });
  }
}

This controller uses SortableJS and @rails/request.js to enable drag-and-drop.

Update the edit view

Create the edit view ( app/views/surveys/edit.html.erb ):

<h1>Edit Survey</h1>

<%= form_with model: @survey, data: {controller: "nested-fields"} do |form| %>
  <div>
    <%= form.label :name %>

    <%= form.text_field :name %>
  </div>

  <ul data-nested-fields-target="fields" data-controller="sortable" data-sortable-endpoint-value="<%= reposition_questions_path %>">
    <%= form.fields_for :questions do |question_form| %>
      <li data-sortable-id-value="<%= question_form.object.id %>">
        <%= question_form.hidden_field :_destroy %>

        <%= question_form.label :content, "Question" %>
        <%= question_form.text_area :content %>

        <%= button_tag "Remove", type: :button, data: { action: "nested-fields#remove" } %>
      </li>
    <% end %>
  </ul>

  <div>
    <!-- … -->
  </div>
<% end %>

Key points in this view:

The <ul> has both nested-fields and sortable controllers
Each <li> has data-sortable-id-value for drag-and-drop tracking
The _destroy hidden field marks questions for deletion
The template includes the _destroy field for new questions too

And there you have it. A complete nested forms solutions for Rails with Stimulus that includes adding new questions, deleting and reposition them. From here it is straight-forward to add nested answers too!

Perron 1.0 here is here

Rails Designer — Thu, 30 Apr 2026 16:30:00 +0000

Nine months ago, I introduced Perron, an OSS Rails-based static site generator. 190 commits and 18 releases later, lots of bugfixes and many new features—by yours truly and a few others—have been added. Today I am thrilled to announce Perron 1.0. 🥳

Want to check it out right away? Check out the docs, star it on GitHub or explore the showcase to see what others have built. 😻

Programmatic SEO

One of the most exciting features has been the ability to generate content programmatically. Whether you are building a SaaS directory, product comparison pages or anything else that mixes data with thousands of pages, with Perron this is now super easy.

Learn more about programmatic content creation.

Pull content using third-party APIs

Your content does not have to live in markdown files or data files. Building on top of the same sources feature that powers Perron’s programmatic feature, you can now pull content from third-party APIs. Great to pull content from CMS’, pull data from your GitHub account or whatever else that has an API.

Preview draft or scheduled content

This is one of those features that arrived from a personal pain: how to share a scheduled or draft article with others? Just set preview: true in the resource’s frontmatter and share the private link. Read all about it.

Live reload

Development just got faster. 🏎️💨 Perron live reloads using DOM morphing through the mata gem. It is a framework-agnostic gem I built specifically for Perron, but can be used with any Ruby framework. Watch your changes appear instantly in the browser without a full page refresh. Will announce this gem properly later. 🤫

But wait… there is more! 🤩

Processors to transform markdown; add target=_blank to links, transform images’ paths to be absolute or create your own processors to transform HTML however you need
Query your resources like Rails; use familiar methods like where, order and scope
Work directly with data sources; use data from CSV, JSON and YAML files
has_many and belongs_to; familiar class methods from Rails to associate resources with each other
Feeds out of the box; RSS, JSON and Atom feeds are now included out-of-the-box
Markdown support; whether you prefer kramdown, redcarpet or commonmarker, Perron works with all of them
Display related resources; show related posts, products or any other resources on your pages
Navigate with previous and next; built-in methods to navigate through your resources in sequence

Library additions

The library continues to grow with new snippets, components and templates:

Full text search form; add full text search to your site (also used on the docs site)
Filter elements; let your visitors filter content by category, tag or any other attribute
Embed content; useful for embedding a changelog or other content from your Perron site into your app
LLM skill; make sure your LLM agent knows its way around Perron
Documentation template; the template that also powers the Perron docs

What’s next?

Perron 1.0 is stable and ready for production (like this very site! 💡). But this is just the beginning. The showcase is growing with sites built by the community and there is plenty more to come. 🚀🌕

A huge thank you to @ianyamey, @goose3228 and @m-lague for their contributions and feedback along the way. ❤️

If you have not tried Perron yet, now is the time to hop on. Check out the docs, explore the library and star the repo. Would love to see what you will build. 🚂

Catch JavaScript errors with user-friendly error feedback

Rails Designer — Thu, 23 Apr 2026 16:30:00 +0000

JavaScript errors (either vanilla or with Stimulus controllers) often happen silently in the browser, leaving your users confused about what went wrong. “Why did nothing happen?”. “I just did click the button!” “Let’s try again…”. Still nothing… Starts furiously clicking the button now.

This poor user experience can be frustrating and can lead to more support tickets that could have been prevented. In this article I want to show how to build a simple class that catches unhandled JavaScript errors and displays them to the user in a friendly banner. It’s a small but meaningful improvement to your app’s user experience.

As always, the code can be found on GitHub.

The silence of the errors

When a JavaScript error occurs and isn’t caught, it silently fails in the background. The user has no idea what happened. You as a developer might inspect the browser’s console, but you are not a normie. Did the request fail? Is the app broken? Should they refresh the page? Without feedback, they’re left guessing.

A simple error banner at the top of the page can help with this. It tells the user something went wrong and gives them the option to dismiss it or take action.

Hello noisy errors

The ErrorFeedback class is straightforward. It listens for unhandled errors and promise rejections, then displays them in a banner:

// app/javascript/error_feedback.js
export default class ErrorFeedback {
  #banner = null
  _timeout = null

  constructor(options = {}) {
    this.duration = options.duration ?? 5000
    this.message = options.message ?? "Something went wrong. Please try again."
    this.visibleClass = options.visibleClass ?? "is-visible"

    this.#setup()
  }

  static gottaCatchThemAll(options) {
    return new this(options)
  }

  #setup() {
    window.onerror = (msg, src, line, col, error) => {
      this.#show(msg || error?.message)

      return true
    }

    window.onunhandledrejection = (event) => {
      this.#show(event.reason?.message || event.reason)
    }
  }

  #show(text) {
    if (!this.#banner) this.#createBanner()

    this.#banner.querySelector("p").textContent = text || this.message
    this.#banner.classList.add(this.visibleClass)
    this.#scheduleDismiss()
  }

  #hide = () => {
    if (this.#banner) this.#banner.classList.remove(this.visibleClass)

    this.#clearSchedule()
  }

  #createBanner() {
    this.#banner = document.createElement("div")
    this.#banner.className = "error-feedback"
    this.#banner.innerHTML = `
      <p></p>

      <button type="button" aria-label="Dismiss">×</button>
    `
    this.#banner.querySelector("button").addEventListener("click", this.#hide)

    document.body.appendChild(this.#banner)
  }

  #scheduleDismiss() {
    this.#clearSchedule()

    if (this.duration > 0) this._timeout = setTimeout(this.#hide, this.duration)
  }

  #clearSchedule() {
    if (this._timeout) {
      clearTimeout(this._timeout)

      this._timeout = null
    }
  }
}

[!tip]

If above class is overwhelming to you, why not check out JavaScript for Rails Developers? It touches upon many of the syntax you see above.

The class catches two types of errors: synchronous errors via window.onerror and promise rejections via window.onunhandledrejection. When an error occurs, it extracts the error message and displays it in the banner.

The banner automatically dismisses after a (configurable) 5 seconds.

Enable the banner

Initialize the error feedback in your main application file:

// app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"
import ErrorFeedback from "errors"

ErrorFeedback.gottaCatchThemAll() // I am too old to fully get this reference, but I think it is accurate enough

And that is it! The class is now listening for errors across your entire app.

Where to go from here

The banner can be easily extended with additional features. You could add a link to your documentation, a button to contact support or even integrate with error monitoring tools like Appsignal or Honeybadger.

For example, you could add a link to your support chat:

this.#banner.innerHTML = `
  <p></p>

  <div>
    <a href="https://example.com/chat">Chat with support</a>

    <button type="button" aria-label="Dismiss">×</button>
  </div>

Or extend the class to send errors to an external service:

#show(text) {
  if (!this.#banner) this.#createBanner()

  this.#banner.querySelector("p").textContent = text || this.message
  this.#banner.classList.add(this.visibleClass)
  this.#scheduleDismiss()

  // Send to error monitoring service
  this.#reportError(text)
}

#reportError(message) {
  // Send to Appsignal, Honeybadger, etc.
}

This simple class is not a replacement for proper error monitoring tools. Those tools provide detailed stack traces, user session replay and analytics that are super useful for debugging sessions. But this banner fills an important gap: it gives your users immediate feedback when something goes wrong, improving their experience and reducing confusion.

Level up CSS transitions with cubic-bezier

Rails Designer — Thu, 16 Apr 2026 19:15:00 +0000

This article was originally published on Rails Designer

If you've ever noticed that your CSS transitions feel a bit… flat, you're not alone (I seem them a lot! 😭). The default ease timing function works fine, but it's generic. Real-world motion has character, it bounces, overshoots and feels natural. That is what cubic-bezier is for.

What is cubic-bezier?

In CSS, cubic-bezier is used in the transition-timing-function or animation-timing-function property. It defines how intermediate values are calculated during a transition using a cubic Bézier curve (orly?! 🦉).

The syntax looks like this:

cubic-bezier(x1, y1, x2, y2)

Those four numbers define two control points on a curve. The curve starts at (0,0) and ends at (1,1), representing the beginning and end of the transition. The control points shape how the animation progresses between those states.

For a detailed explanation, check out the MDN Web Docs.

Examples that make a difference

Let's look at some examples that use default easing functions and then show a more interesting timing functions. Hover to see the effects:

(Please see the original article for live before/after examples)

This is how it is done with Tailwind CSS:

<div class="transition duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)] hover:scale-80 hover:rotate-359"></div>

And how you write it with CSS:

.icon {
  transition: transform 0.5s cubic-bezier(.68 -.6 .32 1.6);
}
.icon:hover {
  transform: scale(0.8) rotate(359deg);
}

(Please see the original article for live before/after examples)

This is how it is done with Tailwind CSS:

<div class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] hover:scale-150"></div>

And how you write it with CSS:

.button {
  transition: transform 0.3s cubic-bezier(.34 1.56 .64 1);
}
.button:hover {
  transform: scale(1.5);
}

(Please see the original article for live before/after examples)

This is how it is done with Tailwind CSS:

<div class="transition-transform duration-500 ease-[cubic-bezier(0.87,0,0.13,1)] hover:translate-x-8"></div>

And how you write it with CSS:

.pill {
  transition: transform 0.5s cubic-bezier(.87 0 .13 1);
}
.pill:hover {
  transform: translateX(2rem);
}

Notice the negative values in the cubic-bezier functions? Those create the "bounce" effect that overshoots its target before settling into place and what gives that "premium" feel.

[!note]
Tailwind CSS provides better defaults with ease-{in,out,in-out} classes

Finding the perfect curve

Rather than guessing values, use Easing Wizard. It's a beautiful, interactive tool (that I shared in my notes some weeks ago; only accessible via atom feed 🤫) where you can drag control points and see the resulting animation in real-time. Copy the generated cubic-bezier values directly into your CSS.

The difference between ease and a well-crafted cubic-bezier curve is immediately noticeable. Your interfaces will feel more responsive, more alive and more professional.

Try replacing your next transition: all 300s ease with transition: all 300s cubic-bezier(.68 -.6 .32 1.6) and see the difference for yourself.