Today I Learned by OOZOU

Ignore bundled gems for Rubocop and ESLint in GitHub Actions

Rails projects will often install gems into the vendor directory in GitHub actions so we can cache them for the consecutive runs.

If you use code linters in the action you need to exclude the `vendor/bundle/*` to prevent false positives

For ESLint this can be configured through ignorePatterns
// ./.eslintrc.json
  "ignorePatterns": [

For Rubocop you can exclude through the AllCops config
# ./.rubocop.yml
    - 'vendor/**/*'

Add a macOS-style drop shadow to your "partial" screen captures or plain-bordered images

By default, and like it or hate it, the macOS keystrokes to capture full app screen (⇧- ⌘- 5) will add a subtle drop shadow around your saved image.  This can make it more visually appealing when adding a screen shot or image to a document.  The convert app, part of the ImageMagick distribution, has a nice command line function to add this same drop shadow effect to any of your images (e.g., a partial screen capture using .⇧- ⌘- 4)

Once installed, you can use the following command line to update your image with a drop-shadow:
convert "Screen Shot 2021-07-07 at 09.47.13.png" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "Screen Shot 2021-07-07 at 09.47.13.png"

which will turn this:
sample_clean.png 143 KB

into this:
sample_shadow.png 132.01 KB

Pro-tip: You can create a pseudo-function in your BASH or ZSH environment - e.g., in your ~/.bashrc file, add this line:
shadow () { convert "$@" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "$@"; }
and then source your ~/.bashrc file (first time) to activate it:
source ~/.bashrc

Now, from your command line, you can add a drop shadow to any image file by simply typing:
shadow "Screen Shot 2021-07-07 at 09.47.13.png"
(remember to add double-quotes around your file if it contains spaces)


git check-ignore

This command lets you debug if a certain file/path is ignored and, with the -v flag, it also shows you the matching exclude pattern (Docs).

Allow pasting multiline ruby blocks in Pry when using leading dot notation

We use leading dot notation a lot now e.g.


If you copy and paste this into a Pry REPL it throws an error because it doesn't know how to parse it. I thought this was because Pry was parsing differently to IRB but it's actually because Pry has a feature to call system methods by prefixing them with a dot. To be able to copy paste code like this you can simply remove the Pry commands 

Pry.commands.delete /\.(.*)/

Rails 6, Ruby 3, Bootstrap 5 and Hotwire

Extending the blogpost from Bootrails with Hotwire:
All the fancy new things (as of when I'm writing this TIL):

$ ruby --version
$ rails --version
$ rails new MyApp --skip-bundle --skip-coffee --database=postgresql
$ cd MyApp
# Add Hotwire-rails to Gemfile
$ echo "\ngem 'hotwire-rails'" >> Gemfile
$ bundle
$ ./bin/rails webpacker:install
# lets keep javascript and stylesheets in a app/frontend folder
$ mv app/javascript app/frontend
# add bootstrap dependencies
$ yarn add bootstrap@next
# when prompted, choose the latest version here:
$ yarn add @popperjs/core@next

Edit `./webpacker.yml` and modify source_path:
# Inside webpacker.yml
default: &default
  source_path: app/frontend # Change here

Add files to load bootstrap:
$ mkdir app/frontend/js && touch app/frontend/js/bootstrap_js_files.js
$ touch app/frontend/packs/application.scss
# Warning, this removes application.css (which we replace with application.scss)
$ touch app/assets/stylesheets/.keep && rm app/assets/stylesheets/application.css

// inside app/frontend/js/bootstrap_js_files.js
// enable plugins as you require them  

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip'

// inside app/frontend/packs/application.js  

// Add this line before import Rails …
import '../js/bootstrap_js_files.js'  

// inside app/frontend/packs/application.scss  

// Import Bootstrap v5  
@import "~bootstrap/scss/bootstrap";

Setup Hotwire
# create ./bin/bundle; currently required for the Remove Turbolinks task by Stimulus
# see: https://github.com/hotwired/stimulus-rails/issues/55
$ bundle binstubs bundler
$ ./bin/rails hotwire:install

Modify `app/views/layouts/application.html.erb`:
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below; also change turbolinks to turbo for hotwire -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>

    <%= yield %>

Check if everything compiles:
$ ./bin/rails assets:clobber
# You can probably ignore the warnings :)
$ ./bin/rails webpacker:compile

Convert Text Object to Title Case in Figma

You can set Text box property to convert everything into Title Case automatically (along with other common text cases)
Case selection

Reduce Heroku Slug Size

First, install the Heroku Repo plugin:

$ heroku plugins:install heroku-repo

then run:

$ heroku repo:gc --app app-name 
$ heroku repo:purge_cache --app app-name

Run incognito/private commands for Bash and Zsh


Simply put a space before the command and it won't be saved to `~/.bash_history`. E.g. ` qrencode -o out.png "Some secret text"`


Enable the following option to be able to run private commands by adding a space before and prevent it from being saved to `~/.zsh_history`.