TIL

Today I Learned by OOZOU

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
3.0.1
$ rails --version
Rails 6.1.3.1
$ 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>
<html>
  <head>
    <title>MyApp</title>
    <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' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Check if everything compiles:
$ ./bin/rails assets:clobber
# You can probably ignore the warnings :)
$ ./bin/rails webpacker:compile
#RUBY-ON-RAILS
1
Const

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
#FIGMA
1
Gavin

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
#HEROKU
2
Const

Run incognito/private commands for Bash and Zsh

Bash


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

Zsh


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

setopt HIST_IGNORE_SPACE
#SHELL
2
Hicham

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.
#MACOS
1
Const

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)
#FIGMA
6
Gavin

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

#RUBY-ON-RAILS
3
Const

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

#SHELL
6
Joe

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"
#RUBY-ON-RAILS
4
Const

Heredoc without interpolation

Sometimes you want to use Ruby's Heredoc without interpolation ('#{....}'). You can do this by adding single dashes around your keyword:
doc = <<-'SONG'
Business men, they drink my wine
#{person} dig my earth
None will level on the line
Nobody offered his word
Hey, hey
SONG

#RUBY
2
Const