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)
end

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…


This strategy can help better structure your seeds.rb file in Rails to ensure models are populated in order as well as provide environment specific seeds. Enjoy!

The seeds.rb file is the place where you can populate your database with some sample records. So after doing a rake db:reset, the database will contain all the records you created in the seeds.rb file. However there are two problems with the default setup.

One, if you have lots of models, this file can grow pretty large which is difficult to maintain.

Two, if you want certain records to only get created for specific…


This article outlines how to use the Ionic Framework with Webpack, Capacitor and Vue, including setting up vue router, vuex, and ionicons to make your life a little easier for building PWAs, iOS and Android apps. Enjoy!

Create Vue Project

First create a vue project using the webpack-simple template.

vue init webpack-simple my-app

Setup Environment Variables

Next create .env file for your production variables.

VUE_APP_NAME=MyApp

Then create .env.dev file for your development variables.

VUE_APP_NAME=MyApp Dev

Update Webpack Package

Make sure to update to the latest webpack.

npm install webpack@latest --save-dev

Add Vue Packages

Now let’s add some vue packages.

npm install @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint vue-cli-plugin-route --save-dev

Update Package Json

Next update package.json to make we’re…

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