Colby.so Writing on bootstrapping, product, and web development

Building a horizontal slider with Stimulus and Tailwind CSS

Today we’re building a component that is common but deceptively tricky to get right - a horizontal slider with a position indicator and navigation buttons.

We’ll have a list of items of an arbitrary length, and our slider will allow folks to scroll to see every item in the list. As they scroll, indicators below the slider will update to show which items are visible on the screen. Clicking on the indicators will scroll the corresponding item into view. The whole thing is pretty fancy.

Here’s what it will look like when we’re finished.

A screen recording of a user scrolling a web page horizontally across an image gallery with identical images of red shoes

To accomplish this, we’ll start with a plain HTML file, pull in Tailwind CSS to make things look nice, and use Stimulus to build interactivity for our position indicators and navigation buttons.

I’m writing this assuming a solid understanding of HTML and CSS, and some level of comfort with JavaScript. If you’ve never seen Tailwind before, some of the classes we add for styling might feel a little odd. You don’t need any knowledge of how Stimulus works, but if you’re brand new you might want to read the Stimulus Handbook to help solidify some concepts.

Let’s dive in.

Read the rest 20-minute read


Building a video converter with Rails 6 and FFmpeg

Today’s project pulls together a number of built-in Rails tools, plus a couple of incredibly useful open source projects to build a web application that can convert user-uploaded video files to MP4.

To demonstrate some of the modern parts of the standard Rail stack, we’re going to go further than just building a converter. We will enhance the user experience during the upload and conversion process with Active Storage to handle direct file uploads, Action Cable for real-time updates on the video conversion, and Stimulus to dynamically update the DOM without needing a heavy Javascript framework.

Read the rest 33-minute read


Quit Doing Stupid Shit

At one point in my time at CareerPlug, the company adopted a phrase that I said in passing a few times - “Quit doing stupid shit” - as a company-wide mantra.

Was that a great phrase for the company to rally around? Probably not.

Most office workers do some amount of pointless busy work in their day (some more than others, perhaps), but saying that out loud can rub people the wrong way. No one wants to hear that their bosses think they’re doing stupid shit!

In spite of the insulting phrasing, there’s a lesson to learn from the mantra.

Read the rest Three-minute read


2021 Goals

2020 wasn’t a banner year, but my wife and I are both healthy and financially secure, and 2021 promises to be better. A vaccine is on the way and the end of the global pandemic is in sight. I’m excited for what’s to come.

For accountability, I’m posting my 2021 personal goals here, and I’ll share updates on my progress every quarter.

Read the rest Two-minute read


Building a custom Stimulus generator for Rails

If you’ve spent any time working with Ruby on Rails, you know that using generators can save you from a lot of console commands and copy/pasting from one file to the next. Need a new model? Just run rails g model MyNewModel name:string description:string and you’re set.

Rails covers most of the common use cases for you with built-in generators. If the built-in generators don’t meet your needs, you can get fancy by creating your own custom generators. Custom generators can save you time any time you’re finding yourself running lots of touch commands and copy/pasting boilerplate into new files.

Although Rails provides built-in generators for most things that Rails projects need, one common use case that’s missing is a generator for new Stimulus controllers. Stimulus , a modest JavaScript framework created by the team at Basecamp, is an increasingly common part of the Rails stack.

Read the rest Eight-minute read