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:
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:
into this:
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.
Done.
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.
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 /\.(.*)/
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):
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
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
$ 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
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
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.