Ever since I started building Rails app, I’ve dreamt about one day building mobile apps in Rails. Well, that day has finally arrived, thanks to Turbo-iOS!

With Turbo-iOS you can basically point an iOS app to your backend Rails app, it handles the native navbar functionality and pushing views however the content of those views is simply your backend web app.

Build high-fidelity hybrid apps with native navigation and a single shared web view. Turbo Native for iOS provides the tooling to wrap your Turbo 7-enabled web app in a native iOS shell. It manages a single WKWebView instance across…

Using Git Aliases can make you feel like you have superpowers!

It wasn’t until recently that I discovered Git Aliases, they are so handy that I seriously don’t know how I lived without them. These are two that I use every day now.

Git Add Commit Push

git config — global alias.add-commit-push '!git add -A && git commit -m "$1" && git push && git status'

Once the alias has been added you can now add, commit and push all on one line.

git add-commit-push "Add, commit, push in one line!"

Git New Branch

git config --global alias.new-branch '!git checkout -b "$1" && git add -A &&…

This GitHub Action lets you easily attach GitHub commits and pull requests to a Trello card simply by including the card number in your git commit message.

GitHub Issues is such a great tool for software development teams. However if the rest of your company is already using Trello, then you are faced with the decision whether to stick with Trello or switch to GitHub Issues.

The upside of sticking with Trello is that it’s already familiar for non-developers so it’s easy for other team members to submit bugs or feature requests. …

This Stimulus controller will let you easily integrate Quill.js into your Rails project, including adding some missing table functionality.

I’ve used lots of different WYSIWYG editors in the past, most are clunky or produce messy HTML, but Quill.js is a pretty light weight option that actually works fairly well. The following will show how to use Stimulus to create a Quill editor as well as add some missing table functionality.

Add Quill Module

Note, the table module is only available in the upcoming 2.0.0 release, so you’ll need to add the latest dev version to be able to use it.

yarn add quill@2.0.0-dev.4

If you are using CanCanCan for authorization and also want to use the magic of StimulusReflex for reactive page updates, these strategies will help you check user abilities in your reflexes.

CanCanCan is a powerful authorization library that allows you to authorize! the current_user for an action, as well as restrict records only accessible_by their current_ability.

def index
authorize! :index, Classroom
@classroom = Classroom.accessible_by(current_ability)

Once you start using StimulusReflex, you’ll soon need to utilize the accessible_by in your reflexes to only obtain records permitted for the current_user as well. …

This Rails strategy lets you lazy load your CanCanCan abilities so you only load them when needed helping improve overall performance.

I love CanCanCan, it’s a powerful authorization library for Rails initially created the Ryan Bates and later adopted by the Rails community to support and maintain. It’s my default authorization gem for all my Rails projects.

I also like to follow STI pattern for authentication, for example having a base User with Admin, etc subclasses. To go along with these user types, I usually define UserAbility, AdminAbility, etc to encapsulate all specific user’s abilities in one file.

This works…

HTMX is small powerful library that lets you trigger HTTP AJAX requests simply by adding attributes to your HTML tags without having to write any Javascript.

In a previous post I wrote how to Lazy Load Form Fields In Rails Using StimulusReflex. I like Stimulus and StimulusReflex both a lot, paired together they are incredibly powerful set of libraries for Rails.

However recently HTMX caught my attention, “a library that allows you to access modern browser features directly from HTML, rather than using Javascript”.

This pattern can help lazy load form fields in Rails using StimulusReflex which can be useful when calling an external API or loading slow relationships.

For example, let’s say you have a form where you want to pull in a list of GitHub repos for a user so they can display them on their profile.

Loading this data from GitHub’s API can take a couple of seconds depending on the number of repos the user has, so rather than delaying the entire form from loading we can instead load them asynchronously.

The initial /app/views/users/_form.html.erb would look something like this.


This Rails pattern provides a flexible way for clients to specify whether they want nested resources includes in the API response simply by passing a flag as a parameter to the endpoint.

For example if you were building a simple blog, you would get Posts with Comments by calling posts.json?comments=true, however calling posts.json or posts.json?comments=false would return Posts without Comments.

This reusable Vue component will help you easily add a responsive grid of cards to your Quasar app using Colcade.

I’ve recently fell in love with Quasar, it’s an awesome javascript framework that lets your build hybrid iOS and Android apps as well as PWAs using Vue.

Being a long time fan of Bootstrap, I liked that Quasar follows a lot of Bootstrap conventions for padding, columns, etc. They also have a larger suite of controls than the Ionic Framework including a nice timeline and messages component.

Unfortunately I found their solutions for handling a responsive grid of cards to…

Dale Zak

Full stack developer specializing in web apps built on Rails with Stimulus, and mobile apps using Ionic and Vue.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store