TIL

Today I Learned by OOZOU

Use Pundit Policies to manage permitted parameters, defaults and per action

To manage permitted params you can add permitted_attributes and permitted_attributes_for_#{action} in your policies e.g.

class CommentPolicy < ApplicationPolicy
  def permitted_attributes
    %i[body]
  end

  def permitted_attributes_for_create
    %i[body application_id]
  end
end

Then in your controller

class CommentController
  def create
    @comment = Comment.create(comment_attributes) # { body: 'body', application_id: 1 }
  end
 
  def update
    @comment = Comment.find(params[:id])
    @comment.update(comment_attributes) # { body: 'new body' }
  end
 
  private def comment_attributes
    permitted_attributes(Comment)
  end
end
#RUBY-ON-RAILS
3
Joe

Use `requestSubmit` for form submits with Turbo

- `HTMLFormElement.submit()`: Does NOT trigger `submit` event
- `HTMLFormElement.requestSubmit()`: Triggers `submit` event

`Turbo` listens to submit events on form. 
Hence, always use `requestSubmit` to submit  a form using JS.
#RUBY-ON-RAILS
4
Abhi

Ignore bundled gems for Rubocop and ESLint in GitHub Actions

Rails projects will often install gems into the vendor directory in GitHub actions so we can cache them for the consecutive runs.

If you use code linters in the action you need to exclude the `vendor/bundle/*` to prevent false positives

For ESLint this can be configured through ignorePatterns
// ./.eslintrc.json
{
  "ignorePatterns": [
    "vendor/bundle/*"
  ]
}

For Rubocop you can exclude through the AllCops config
# ./.rubocop.yml
AllCops:
  Exclude:
    - 'vendor/**/*'
#RUBY-ON-RAILS
5
Joe

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:
sample_clean.png 143 KB



into this:
sample_shadow.png 132.01 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.
#MACOS
14
Jeff

Create monochrome screen using overlay layers covered with hue fill effect

#FIGMA
6
Gavin

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

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