TIL

Today I Learned by OOZOU

Create monochrome screen using overlay layers covered with hue fill effect

#FIGMA
2
Gavin

Hold ⌥option while click & drag along an input field to adjust sizing

#FIGMA
Gavin

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).
#CLI
1
Federico

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

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

Foo
  .bar
  .baz

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 /\.(.*)/
#RUBY
1
Joe

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
7
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
3
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
2
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
7
Gavin