Rails 7: Fix yarn missing on Heroku - When deploying Rails 6 sites to Heroku, the Ruby buildpack would detect if the webpacker gem was installed and install yarn for you automatically. With Rails 7, webpacker is no longer installed by default, so using jsbundling-rails and extras that require yarn to be installed will cause deployment errors on Heroku.

The fix is to install the nodejs buildpack. This needs to be done before the ruby buildpack. As follows:

heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby

After running these commands your deployment to Heroku will work great.

Using specific Node JS versions in Github Actions - Sometimes you may want to run your Github Actions using a specific version of NodeJS (eg version 8). This can come in handy if you are dealing with a legacy application and needing to compile a specific version of node-sass for example.

The way to do it is to add the following lines into your workflow file.

- uses: actions/setup-node@v2
  with:
    node-version: "8"

See what javascript caused an attribute to change - I was working on some front-end code today - and when I clicked on a checkbox it mysteriously shrunk. I mean its height was set to 0px when I clicked on it. It was so strange. Some code somewhere was adding a style attribute with height: 0px. Searching my codebase I couldn’t find anywhere where this was happening.

To solve these sorts of issues, Chrome (and I’m sure other browsers) have a feature in the dev-tools where you can stop execution and see what is happening under the hood so to speak - in other words see what javascript is running at exactly the moment a particular event happens on the DOM.

To access this feature - open up dev tools - and select the element you want to watch change. Right-click the element and in the Break on fly out menu select attribute modifications.

Now you will need to trigger the event. In my case, I clicked on the checkbox. Execution stopped and the browser popped up the exact code that was causing the checkbox to have a style attribute added.

A very handy feature.