I'm an engineer, educator, and entrepreneur that has been building digital products for over 20 years with experience in startups, education, technical training
You are iterating on a design. Maybe you are redesigning your dashboard. Maybe you are trying three different layouts for a landing page. Maybe Claude just gave you four variations of a pricing table and you need to pick one. Here is the problem: eve...
I'm trying to improve my design engineering and have been practicing and looking for opportunities to flex and grow. One of my favorite new techniques is View Transitions, a simple way using CSS to animate transitions between states of the view, whet...
We're going to build a common UI pattern: a sortable, paginated table using the power of Ruby on Rails and Turbo Frames. Sortable Table Headers The first step is to create the sortable table headers as simple links. I wrote a few helper methods in Ru...
A common pattern is having a search form that filters a list of items. That's what we're going to build now with a minimal amount of code using Turbo Frames and Stimulus. Here's what it will look like in the end. We've got a bunch of jobs, each with...
Another common UI pattern is a slide over. This is a modal that slides in from the side of the screen. It's really easy it turns out to implement this with a Turbo Frame. Let's do it. Step 1: The Slide Over Turbo Frame First, we need to create a Tur...
A common UX pattern is to have a form with the ability to add and remove nested records. For example, a form for a blog post might have a section for adding tags. The user can add as many tags as they want, and remove tags they no longer want. For s...
In the previous post we built a common UI pattern of a button that reveals a form and on submitting the form, adds the newly created item to a list. We implemented the new playlist functionality using Turbo Frames and just a little bit of Javascript ...
Much like the Drag and Drop Uploader I built, I've been finding that you don't need to use JS plugins to build a lot of common functionality these days. It is easier to just roll your own solution. The DOM API is modern and easy to use. In this serie...
A popular feature in applications is the ability to request a magic link to your account's email address that will log you into the application without a password. I guess it's known as passwordless login or magic links. After adding the reset passwo...
As a continuation of Rails Authentication from Scratch, let's add a password reset feature to our application. Generating the Reset Password Token The general flow of a password reset is as follows: User clicks "Forgot Password" link User enters ema...
Part 1: User Signup Rails Authentication Demo App Source code There are certainly a lot of amazing authentication options in the Rails ecosystems. If I was building a large application with a lot of multi-user expectations, I would use Devise. It is ...
Our uploader is super functional and fast. Quick Review Just for fun, I thought we'd add a feature where after the upload is complete we display an audio player for the track that was just uploaded. If we look back at our code, in our Upload class,...
We left off having a functional uploadzone that can handle multiple files and upload them to directly S3. You can drag and drop a file into the zone and it will upload to S3. You can also click the zone and select multiple files to upload. Once the f...
In Part 1 we created a Rails app with ActiveStorage and S3. We also built an uploadzone component that can handle the files and prepare to pass them off to something to upload them. That's where we're going to begin. The S3 Direct Upload Process The ...
You want a fast fancy uploader to be an easy thing to implement. But it gets tricky. I'll do my best to explain how I built the Uploader for Musicbase using ActiveStorage and Direct Uploads to S3. It might get complex and there are a lot of steps, b...
How To Use Rails Components To recap, so far we've covered a lot about Rails-Components.com What's Rails-Components.com? Why Ruby on Rails Needs Components Rails Components: More Installer Over Library It's time to show you how to use Rails Compone...
After covering what rails components are and why they need to be first class citizens in the rails ecosystem, in the next few posts I'm going to share my vision for how they could work (and for the most part, how they currently work in the first comp...
I previously wrote a bit about What Rails Components and why don't we have them are at a very high level. Rails Components are shareable, encapsulated, and interoperable pieces of functionality that can be dropped into your Rails application. They ar...
Why no Rails Components? If there are two things you should know about me as a developer it's that I love Ruby on Rails and that I value speed above all else when it comes to building. I've been using Ruby on Rails so well over a decade and one of th...
Audio waveforms allow us to visualize the waveform of an audio file - displaying the amplitude of the audio signal over time. They are often used in audio editors and music players to show a visual representation of the audio. In this post we'll walk...