⚡️ Hotwire dev newsletter - May 2023 edition

Welcome back to the ⚡️ Hotwire dev newsletter!

I’ve been pretty busy since last month. I ran another Turbo Native workshop, took a few longboarding lessons, and got into not one, but two, trading card games. 😆

But I’m excited to dive back into more Turbo Native work. I’m working with two very different clients right now. I’m building an app from scratch for one and integrating new HealthKit APIs for the other. It’s invigorating to work in such different spaces at the same time.

Speaking of new and exciting, I recently started a second newsletter. It’s a weekly email focusing on Turbo Native and me being a solopreneur. That is where I’ll be posting the more personal updates in the future. But don’t worry, this newsletter isn’t going anywhere!

So let’s dive into this month’s links. Highlights include the Rails World CFP announcement, how to write your own Rails generator, and five articles on Turbo Native - even Android gets some love this month.

📣  Announcements

Rails World Call for Papers now open

Rails World is the first conference hosted by the Rails Foundation, taking place in Amsterdam on October 5 and 6. And the CFP is officially open! You have until June 16 to submit your talk or workshop.

And you bet I’m submitting something about Turbo Native. So tell me, dear reader, what specific topic would you like learn about? 🤔

📰 Articles and videocasts

Welcome to Rails Cheat Sheet

by Brad Gessler @bradgessler

The Fly.io blog has been hot recently!

This time, Brad shares a high-level overview of where Rails is today. There are useful links for how to get started, some sane defaults for new projects, and where to go to learn more.

Once a Maintainer: Marco Roth

by Allison Pike @infieldai

Marco shares his story on getting started with coding, Ruby, and open source in this week’s Once a Maintainer interview. He also touches on some practical tips for how to get more folks involved in open source. A great developer origin story for a member of the StimulusReflex core team.

SupeChat #1 Amanda Perino from Rails Foundation about Rails World

by Yaroslav Shmarov @yarotheslav

SupeRails premiers the first SupeChat episode with Amanda Perino, the executive director of the Rails Foundation. Amanda reveals some more details on the upcoming Rails World conference and what to expect next from the Rails Foundation.

Also, 850+ people are already on the wait list for tickets! 🤯

👩‍🏫 Tutorials

Build a Memory Game with Rails, Stimulus JS, and Tailwind CSS

by Marvin Kang @kang_marvin

Fair warning, there is a lot of JavaScript in this tutorial.

Marvin walks through how to build a tile-matching game with Stimulus powered by a little Rails code to hold it all together. The most important takeaway I had from this is the clever use of Outlets to split up code among multiple controllers.

How to Create Custom Flash Types in Rails

by Akshay Khot

Did you know you can add custom flash types in Rails? Me neither!

Akshay walks us through how to use the API to create a “warning” flash and pass it directly to the redirect helper: redirect_to root_path, warning: "Incomplete profiles". Read to the end to see how it is implemented under the hood in the Rails source code.

Turbo Frame Pages in Ruby on Rails 7

by Deanin @Deaniocom

Anyone remember .js.erb files?

If you’re all in on Hotwire then you probably haven’t written one of those in a while. But we can apply the same concept to Turbo Streams. Deanin walks us through extracting some code into .turbo_stream.erb files to clean things up a bit and remove a little duplication.

Creating Custom Rails Generators

by Garrett Dimon @garrettdimon

Ever run bin/rails generate or bin/rails g and wished the generated code was a little more your style? Join Garrett as he dives into Rails generators; learn how to customize the builtin ones and how to create your own.

Maybe I’ll finally get around to creating bin/rails g turbo_native now!

Conditionally style elements in Turbo Frames with Tailwind CSS

by Spinal CMS @SpinalCms

A quick tutorial on how to add custom styling to elements when they are displayed in a Turbo Frame.

I love that how this approach uses a custom Tailwind CSS variant to target elements conditionally. For example, adding the turbo-frame:hidden class will hide the element when it is rendered in a Turbo Frame!

📱 Turbo Native

How to Get Up and Running With Turbo Android - Part 1

by William Kennedy @williamkennedy

There are too few resources on getting up and running with Turbo Android. This post aims to rectify that.

Thank you William! Learn how to build the basic scaffolding of a Turbo Native Android app from scratch. I don’t know much Kotlin but was still able to follow along thanks to multiple screenshots of the Android Studio IDE.

How to Get up and Running with Turbo Android Part 2 - Feel More Native

by William Kennedy @williamkennedy

Part 2 dives into adding a native screen powered by Jetpack Compose, Google’s modern UI tool, often compared to SwiftUI. I love that you can register fragments (screens) directly via turbo-android. I’d love if we could do the same for turbo-ios. 🤔

How to Get Up and Running With Turbo Android Part 3 - How to Access Native Android Features with the JavaScript Bridge

by William Kennedy @williamkennedy

Finally, part 3 follows up with how to call native Kotlin code from your web app. It uses the JavaScript bridge to read the user’s contact book and display everyone’s name in a web view. A great example of how Turbo Native can seamlessly bridge the hybrid gap.

Enhancing Turbo Native apps: How to hide web-rendered content

by Joe Masilotti @joemasilotti

Sometimes shoving a web view in native chrome can look a little… off.

Here’s how I hide web-rendered content in Turbo Native apps to make them feel a little more native. All from the comfort of Ruby and HTML.

A Rails-like endpoint switcher for iOS apps

by Joe Masilotti @joemasilotti

iOS doesn’t have a Rails.env.development? equivalent - so let’s build one! This tutorial outlines how to make your iOS apps a little more Railsy. And can even be applied outside of Turbo Native.