Today I Learned by OOZOU

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`.


Convert SVG to PNG

On MacOS, install inkscape (with brew) and use it like this:
$ inkscape --export-type=png --export-dpi=200 --export-background-opacity=0 file.svg
This will create a file.png with transparent background.

CMD+Click behaviour in Figma

CMD + Click in designer mode = normal click in Inspector mode

Holding ⌘CMD+Left Clicking in Designer mode will select the deepest layer resides within that frame/group whilst doing so in inspector/developer mode will select the outermost object/frame/group within your selection area (The opposite)

Rails Cache-Control

For enabling setting cache-control headers of static assets and using a CDN on Heroku:

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.public_file_server.headers = {
  'Cache-Control' => 'public, max-age=31536000',
  # You need to enable this (or set it to your domain) for fonts to work
  'Access-Control-Allow-Origin' => '*'

if ENV['ASSET_HOST'].present?
  config.action_controller.asset_host = ENV['ASSET_HOST'] # 'https://cdn.example.com'


Upgrade postgres database with homebrew

To upgrade postgres you can run 

brew upgrade postgresql

After you've done that your existing databases will have data that is incompatible with the your new postgres binary. Normally you would have to use pg_update and pass in the correct binaries to migrate the data, however, brew includes an upgrade script to update the data for you.

brew postgresql-upgrade-database


Unique ID for DOM in Rails

Rails has many great view helpers, one of which is dom_id:
dom_id(Post.find(12))       # => "post_23"
dom_id(Post.new)            # => "new_post"

You can also provide a prefix:
dom_id(Post.find(23), :edit) # => "edit_post_23"
dom_id(Post.new, :custom)    # => "custom_post"