TIL

Today I Learned by OOZOU

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:
Screen Shot 2021-07-13 at 17.33.38.png 89.7 KB



into this:
Screen Shot 2021-07-13 at 17.33.38.png 87.21 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)

Done.
5
Jeff

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).
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 /\.(.*)/
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
8
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
2
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
3
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
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.
2
Const