Articles from Rails Designer Blog
The eleven-shade color scale from Tailwind CSS is one of those ideas I keep stealing. You know the one: 50 through 950 gives you enough stops for backgrounds, borders, hover states, text, everything. I use it even when I’m not using Tailwind. But I almost never use the defaults (your site/app ends up looking like every other site built by LLMs). The fix is not complicated. You don’t need a color…
This is part 2 of a two-part series. Part 1 covered controllers and lifecycle. Controllers connect and disconnect. That is not useful on its own. The value comes from three things: referencing elements inside the controller, handling events without inline JavaScript and reacting to data changes. Stimulus calls these targets, actions and values. Each maps to a distinct JavaScript feature. And none…
Every transactional email provider ships a Ruby SDK. Each one has its own client class, its own conventions, its own way of doing the same thing. I got tired of learning yet another API for every project. So I built Courrier . About 14 months and 73 commits later, Courrier 1.0 is here. It covers 13 email providers and 7 newsletter platforms. There’s a companion gem for Rails apps that adds…
This is part 1 of a two-part series. Part 2, coming soon, will cover targets, actions and reactive values. Yep, that text is programmatically added using a recreated Stimulus framework and a hello_world_controller.js Stimulus is a modest JavaScript framework to sprinkle bits of interactivity. At its core it watches the DOM for elements with a data-controller attribute and connects them to…
Users are creating accounts on your new Saas. Yay (and not just family and friends or bots). Yay! Now comes the next step from every marketing handbook: capturing newsletter subscriptions. This article builds on Add Sign Up to Rails 8’ Authentication . Add a simple checkbox to let users opt in to product updates during signup. Store their preference using Rails Vault and manage the subscription…
I’ve built many a SaaS . And most have pricing tiers: the higher the plans the more widgets you can create or features are allowd. Typically there are two ways to approach this: hide the feature if the customer does not have access; show all features, to all customers, but guard them with some, optional, upsell. I have succesfully implementated the latter approach with a helper that quacks like…
Changelog widgets, like those from Headway and Beamer, are still a popular way to tell your users about updates to your product. What if you could build one yourself? Perron , the Rails-based SSG, has a library of production-ready custom elements. One of them, the Embed Content component is perfect for this exact use case. It fetches JSON data, renders it as a list, tracks read state and handles…
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…
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…
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…
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).…
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…
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…
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…
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…
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…
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…
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…
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…
Webhooks are one of those super simple but really powerful tools that almost every developer has needed to use at least once. From Stripe, GitHub to Postmark. Setting up webhooks is not difficult, but there is quite a bit of boilerplate involved: payload storage, event routing and signature verification. Repetitive. Tedious. Boring. Oh, and did I mention debugging? Meet Fuik : a Rails engine that…
When building a SaaS with Rails, I often have more complex logic that spans multiple models and actions. Over time, I’ve settled on two distinct patterns: Form Objects and what I’ll just call classes (or POROs). They serve different purposes, and knowing when to reach for each has made my code easier to reason about and test. Let me walk you through how I use them both. Use Form Objects for user…
This article is taken from the book JavaScript for Rails Developers ( use ONE-YEAR-OLD to get 25% discount ; valid until 2025-04-09 🥳). It is a book I published about a year ago. Over that period, many hundreds bought the book. It is written for Ruby/Rails developers to make JavaScript your 2nd favourite language. I always get a little excited when I see a good refactoring happen. So I want to…
Late 2024 I published Rails Icons 1.0 (slighly off-topic, but I mentioned a modest few thousand downloads in that article; now it is close to 250k; I expect the same + a bit more for Perron ). Today I like to re-introduce Rails Icons again to you: here is version 1.8 . (I did not expect SVG icons could be this exciting; and I have a few more ideas still! 🤯) First I extracted the sync and SVG…
Recently I had to build something using the canvas element. Today I’ll show you how to build an interactive emoji composer using HTML Canvas and Stimulus. Click emojis to add them to a canvas, drag them around and export your creation as an image. It is quite fun (coming from an emoji connoisseur)! 😎👍 Click a face emoji, add some accessories, position everything just right and download your…
Building on the video recording feature from earlier , let’s add a nice touch to the presentation index page: video previews that play on hover. You know the experience—hover over a video thumbnail and get a quick preview of what’s inside. It’s the same interaction you see on YouTube, Netflix and every modern video platform. The presentations index After recording presentations, you need a way to…