How to add a skeleton UI to Rails with Turbo

The introduction of Hotwire in September of 2021, launched Turbo Frames. A method that made Web-veterans consider the stone-age iframe-element. However with a twist. Turbo Frames could be loaded with HTML from the server. It may very well be a as tiny as only a button (with a distinct state) or extra concerned: an inventory […]

How to add hotkeys to your Rails app with Stimulus

When your app is rising, extra screens can be added. It’s at this level, you need to contemplate including one other means on your (energy) customers to navigate by way of your app. Introducing: keyboard shortcuts (or additionally hotkeys)! Hotkey navigation refers back to the implementation of keyboard shortcuts that enable customers to rapidly navigate […]

How to create modals with Rails and Hotwire (and Tailwind CSS)

With the introduction of Hotwire in September of 2021, Rails builders may now create extra superior, JavaScript-based UI’s with out writing hardly any JavaScript. Some of the frequent UI components in fashionable web-apps is the modal. Creating it with Hotwire is certainly fairly easy, however there are few gotchas and a few issues to bear […]

Tips and Ideas for ViewComponent with Tailwind CSS and Hotwire

Entrance-end code has traditionally been regarded down upon a bit. “HTML will not be an actual language!”, ”CSS sucks!!” ”…and so does JavaScript!!1!”. Which is a disgrace. Rails offers one-person growth groups a real tremendous energy, permitting them to construct a whole, profitable product from A to Z. Subsequent to Rails there are different first- […]

I made a reverse job board for developers

Hey everybody, I’m Zain, an indiehacker from Pakistan. I used to be laid off from my job final yr and was annoyed to seek out one other job. I utilized on a number of jobs on dozens of job boards solely to be ghosted or rejected. This expertise made me realise how a lot time […]

Broadcasting custom Turbo actions like set_title, morph, and more

One of many nice new options of Hotwire Turbo 7.2 was customized actions. Initially, Turbo allowed us to ship stream actions to the browser so as to add, take away, or change some HTML. Now, we are able to inform the browser to do something: console log, set title, play sounds, and use the morphdom […]

Thinking in Hotwire: Progressive Enhancement

This publish is a part of Hotwire Summer time: a brand new season of content material on Boring Rails! There are a lot of tutorials about methods to get began with Hotwire and methods to use the person items. However one factor that took me some time to understand was methods to “assume in Hotwire”. […]

Galaxy brain CSS tricks with Hotwire and Rails

This put up is a part of Hotwire Summer time: a brand new season of content material on Boring Rails! In Hotwire purposes, it’s essential to lean extra on the basics of CSS and HTML. When you’re like me, you most likely discovered simply sufficient CSS to get by, however by no means attain for […]

Adding a simple Hotwire ping tool in a Rails application

On this tutorial, we’ll make a easy ping instrument with Stimulus and Turbo Drive. Wait, what’s a ping? You might have seen the phrase ping used as a synonym for latency in on-line video games or community pace checks. However a ping is a program that sends a request to a server to verify its […]