Today we are going to build on top of an article I published last week to expand our knowledge of Turbo 8’s page refreshes and, as a treat, we will write some beautiful Ruby code along the way. In this article we are going to add searching and filtering to an existing sortable table interface. We will use Turbo 8 page refreshing, a tiny Stimulus controller, and regular old Rails code to build a…
Scroll-restoring, morphing page refreshes are one of the headline features of Turbo 8. Page refreshes make it easier than ever to build modern, SPA-like experiences with Turbo and Ruby on Rails. One of the most immediate wins for page refreshes is making it simpler to build search and filter UIs, so today we are going to get practical with Turbo 8 by building a sortable table view with page…
Turbo 8 was released in February of 2024 , to much excitement in the Rails world, and the broader HTML-over-the-wire community. At the top of the list of new features was the combination of tooling that added support for morphing page refreshes and scroll position preservation, powered by idiomorph and the ability to broadcast page refreshes with a new Turbo Stream action . This combination offers…
Turbo 7.2 brought major changes to what you can accomplish with Turbo Streams. To demonstrate those changes, today we are going to build a Turbo Stream-powered modal form without a single Turbo Frame. We will also create our own custom Turbo Stream action that emits a custom event on the browser. The key technique we will use in this article is an update to the standard method of using Turbo to…
If you have worked with Turbo Streams, you have probably run into a frustrating limitation. From the beginning, Turbo Streams were designed exclusively for handling form submissions, and that was the way it worked. If you wanted to respond to a GET request with a Turbo Stream, you couldn’t, without a clunky workaround. Until now. In Turbo 7.2, you can respond to GET requests with Turbo Streams. No…
Every B2B web app eventually gets charts. Users love them, buyers love them, sales teams love them. Look at all this data! Look how pretty it is! Charts! I love charts too. So, let’s build a filterable pie chart with Rails and StimulusReflex. Our chart will rely on data from the database, and, because it is 2022, we will be able to update the chart as the user applies a filter without requiring a…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
The article below is on a topic that has bothered me for a long time — the lack of opportunity for junior Rails developers — spurred by some recent Twitter energy around Ruby on Rails being “back”. I got mentioned in one of the viral threads about Rails being back which jump started my brain into writing this article, but I don’t write it to admonish folks who are excited about Rails and want to…
Writing about what you learn, when done well, is a great way to solidify your own knowledge of a topic, stretch yourself professionally, and establish credibility in your field. In 2020, I started writing tutorial-style articles for Ruby on Rails developers. Writing these articles began as a fun distraction from a stressful job, and as a way to reconnect with web development as a discipline as my…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
(This post was originally published on Indie Hackers , but I thought some of my regular blog readers might find it interesting, so I’m publishing it here, with light edits.) One month ago I published my first ebook on Gumroad. I went into the process with absolutely no idea what I was doing, and no real idea of what to expect. I wanted to see if I could write and sell a book, so I struck out with…
A nearly-universal need in web applications is user notifications. An event happens in the application that the user cares about, and you inform the user of the event. A common example is in applications that have a commenting system — when a user mentions another user in a comment, the application notifies the mentioned user of that comment through email. The channel(s) used to notify users of…
Kredis is a new gem that makes it easier to work with Redis keys in Ruby on Rails. Kredis was added a suggested gem for new Rails applications starting with the release of Rails 7.0 in December of 2021 and is likely to become a larger force in the Rails world in the coming years. From the documentation , Kredis “encapsulates higher-level types and data structures around a single key, so you can…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
When Rails 7 released in December, Turbo became a default component of all new Ruby on Rails applications. This was an exciting moment for Rails developers that want to use Rails full-stack — especially folks on small teams with limited resources to pour into building and maintaining a React or Vue frontend. Along with that excitement has come a constant stream of developers trying to learn how…
September 2022 Update: The techniques described in this article still work. However, with the release of Turbo 7.2, there is a simpler approach than the technique used in this article. You can find an updated version of this article here . Nearly every web application will eventually need to add pagination to improve page load times and allow users to process information in a more consumable way —…
Today we are going to build a live, server-rendered, liquid-enabled markdown previewer with Ruby on Rails and StimulusReflex. It’ll be pretty neat. Allowing users to preview their content before saving it is a common need in web applications — posts, products, emails. Any user-created content that gets turned into HTML can benefit from a preview function to help users check their work before they…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
As you may have heard by now, Rails 7 comes out of the box with importmap-rails and the mighty Webpacker is no longer the default for new Rails applications. For those who aren’t ready to switch to import maps and don’t want to use Webpacker now that it is no longer a Rails default, jsbundling-rails was created. This gem adds the option to use webpack , rollup , or esbuild to bundle JavaScript…
View components, via Github’s view_component gem , are growing in popularity in the Rails community but until recently, view components and Turbo Stream broadcasts didn’t play well together. This made using both view components and Turbo Streams in the same application clunky and a little frustrating. While there were ways to get components working with streams, thanks to a recent addition to…
This newsletter went out via email to the Hotwiring Rails subscriber list, but I know that not everyone wants another email cluttering up their inbox. For those folks, I’ll always publish the full content of the newletter here too, so you can get all the content with none of the emails. Thoughts or feedback on how I can make this newsletter more valuable? Have something you’d like to include in…
Today we are going to build a table that can be sorted, searched, and filtered all at once, using Ruby on Rails, Turbo Frames, a tiny Stimulus controller, and a little bit of Tailwind for styling. We will start with a sortable, Turbo Frame-powered table that displays a list of Players from a database. We built this sortable table in a previous article — you might find it helpful to start with that…
Turbo, part of the Hotwire tripartite, gives you the tools to write dramatically less custom JavaScript than you would otherwise need to build modern, performant web applications. Turbo is composed of Turbo Drive , Turbo Frames , Turbo Streams , and Turbo Native . Each is a valuable piece of the puzzle but today we’re going to focus on Turbo Frames . Turbo Frames “ allow predefined parts of a page…
An updated version of this article for Rails 7 and Turbo 8 was published in March of 2024. Everything in this article still works, but the updated article presents a simpler path with the new tools added in Turbo 8. Read the updated article here . One of the wonderful things about working in Rails in 2021 is that we are spoiled for options when it comes to building modern, reactive applications.…
Today we’re going to use Ruby on Rails and StimulusReflex to build a table that sorts itself each time a user clicks on a header column. Sorting will occur without a page turn, in less than 100ms, won’t require any custom JavaScript, and we’ll build the whole thing with regular old ERB templates and a little bit of Ruby. The end result will be very fast, efficient, simple to reason about, and easy…
The Rails ecosystem continues to thrive, and Rails developers have all the tools they need to build modern, reactive, scalable web applications quickly and efficiently. If you care about delivering exceptional user experiences, your options in Rails-land have never been better. Today we’re going to dive into this ecosystem to use two cutting edge Rails projects to allow users to submit forms that…
Today we’re going to learn how to build a Ruby on Rails app that accomplishes what some folks think is impossible in a multi-page application — persisting an audio player while navigating around an application. We’ll use Ruby on Rails and Turbo to accomplish this, but we could use Turbo’s predecessor, Turbolinks to achieve the same result, and Rails is only incidental to the finished project. We…
As we approach the release of Rails 7, the Rails ecosystem is full of options to build modern web applications, fast. Over the last 9 months, I’ve written articles on building type-as-you-search interfaces with Stimulus and with the full Hotwire stack , exploring a few of the options available to Rails developers. Today, we’re going to build a live search experience once more. This time with…
The release of Hotwire in late 2020 brought attention to a growing interest within the Rails community in building modern, reactive Rails applications without needing the complexity of an API + SPA. Although Hotwire’s Turbo library garnered a lot of attention, the Rails community has been working for years to improve the toolset we have to build modern, full-stack Rails applications. Turbo isn’t…
A very common pattern in Rails development is for a view to contain checks for things like current_user.can?(:take_some_action) . These types of checks are common, especially in B2B applications that implement role-based permissions powered by a solution like Pundit . So, naturally, when a Rails developer begins working with Turbo Stream broadcasts, they wonder how to access the current_user or…
Updated March 17th, 2024 to account for the release of refresh and morph Stream actions in Turbo 8 Turbo, part of the Hotwire tripartite, helps you build modern, performant web applications with dramatically less custom JavaScript. Turbo is composed of Turbo Drive , Turbo Frames , Turbo Streams , and Strada . Each is a valuable piece of the puzzle but today we’re going to focus on Turbo Streams .…
An updated version of this article for Rails 7 and Turbo 8 was published in March of 2024. Everything in this article still works, but the updated article presents a simpler path with the new tools added in Turbo 8. Read the updated article here . Last year I wrote an article on building an instant search form with Rails and Stimulus. Since then, Turbo , the other half of Hotwire for the web has…
September 2022 update: Since this article was written, Rails 7 and Turbo 7.2 have been released. There are new, simpler techniques to building modal forms with Turbo now. I published an updated version of this article after the release of Turbo 7.2, I recommend reading that article instead. The release of the Hotwire package of Stimulus and Turbo has brought a tremendously powerful set of tools to…
Today we’re building one of the most common elements in web design - a lefthand sidebar for navigation - using Tailwind CSS and Stimulus.js. Our sidebar will always take up 100% of the height of the page and we’ll be able to expand and collapse the sidebar by clicking a button. The whole thing will be accomplished with just a bit of Stimulus for the expand/collapse action and a small amount of…
Hotwire is a set of tools for building web applications by sending HTML instead of JSON over the wire. Hotwire gives us a framework for making DOM updates without writing much, or any, JavaScript while delivering fast, modern-feeling web applications. In today’s example, we’re building a interface that remotely retrieves a portion of the page content from an endpoint and replaces a targeted…
Today we’re exploring Hotwire , a new-old way of building web applications by sending HTML instead of JSON over the wire. We’ll learn how Hotwire works with Ruby on Rails by building a simple application that allows users to leave comments on a project and see those comments in real-time, without requiring full page turns. This guide presents an alternative approach to a guide I wrote last year…
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…
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…
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…
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…
This post is a lightly edited version of an internal update I sent to everyone at CareerPlug after the completing our second product cycle, modeled on Basecamp’s Shape Up method. I am making these updates public in hopes that others will find value in the lessons learned from a real team adopting a fairly radical new product development process. The first update includes more information about our…
August 5, 2021 update: Since publishing this post, Turbo was released. While the method described here for building a live search interface with Stimulus still works just fine, if you’re using Stimulus, you might be interested in the other half of Hotwire on the web. In August of 2021, I published a post describing how to build the same interface described here with hotwire-rails, instead of just…
If you use Ruby on Rails, you’ve probably heard of Stimulus , a “modest” JavaScript framework for sprinkling in small bits of JavaScript to your mostly-HTML front-end. Instead of reaching for the monster JavaScript frameworks that have become very popular in recent years, Stimulus gives you the tools to add just enough interactivity while relying on plain-old Rails and HTML as often as possible.…
Below you’ll find a lightly edited version of an internal update I sent to everyone at CareerPlug after the completing our first product cycle, modeled on Basecamp’s Shape Up method. Since the target audience for these updates is the company first, I’ll add inline commentary and footnotes as needed to add context for readers that aren’t intimately familiar with CareerPlug’s internal workings. My…
One of the most damaging pieces of advice you can receive as a new product manager is that your job is to say no. This advice, well-meaning and oft-repeated, isn’t wrong but when taken at face value it is incredibly damaging. Your job as a product manager is not saying no; your job is saying yes to the right things. This might seem like a silly distinction — in either case, you’re saying no a lot,…
Product managers love building new things. It is a driving force behind why many of us decide on this career path; we get to spend all day figuring out what cool new thing to build next. This love of building stuff serves us well in the early days of a product. Everything is new, you don’t have many users, and you are missing core components of your product’s value proposition. Delivering new…
The world of product management is noisy. Your clients are asking for new features. Your sales team needs a magical new feature to close their next deal. Your success team heard from 50 people yesterday about gaps in your product. Noise is coming in from every direction, all of the time. Learning to process a constant barrage of information from disparate sources into a coherent product vision is…