16 posts by Victor Velazquez

Fr Unit with CSS Grid Layout

I read about CSS Grid Layout, and I found the Fr unit, so I have to try it out.

From w3.org:

Flexible Lengths: the fr unit A flexible length or is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.

The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.

Each column or row’s share of the leftover space can be computed as the column or row’s * / .

Read more about fr unit

See this example:


.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 


  grid-template-columns: repeat(4, 1fr); 

1fr is for 1 part of the available space, each column take up the same amount of space.

I will update the 3rd column to size up to 4fr


.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr 4fr 1fr; 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 


See a live example: CSS Grit: Fr Unit by Victor Velazquez (@vicmaster) on CodePen.

That's all folks!

Use the spread syntax to find what an emoji is made up of

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. [1]

[1] Source: MDN Web Docs

(3)Β ['πŸ‘¨', '‍', '🎀']0: "πŸ‘¨"1: "‍"2: "🎀"length: 3[[Prototype]]: Array(0)
(7)Β ['πŸ‘©', '‍', 'πŸ‘©', '‍', 'πŸ‘§', '‍', 'πŸ‘§']

Learned from @mgechev at https://twitter.com/mgechev/status/1490920854313648128/photo/1

Useful? not sure

Interesting? Hell yeah!

Typeprof Ruby Interpreter in Ruby 3.0+

TypeProf is a Ruby interpreter that abstractly executes Ruby programs at the type level. It executes a given program and observes what types are passed to and returned from methods and what types are assigned to instance variables. All values are, in principle, abstracted to the class to which the object belongs, not the object itself.

Example: 1

 $ typeprof user.rb
# TypeProf 0.12.0

# Classes
class User
  attr_accessor skip_add_role: untyped
  def self.from_omniauth: (?Hash[bot, bot] auth) -> User

  def assign_default_role: -> nil

Example 2:

 $ typeprof skill.rb
# TypeProf 0.12.0

# Classes
class Skill
  def acceptable_image: -> nil

Example 3:

 $ typeprof ability.rb
# TypeProf 0.12.0

# Classes
class Ability
  attr_accessor user: untyped
  def initialize: (untyped user) -> untyped

  def alias_actions: -> untyped
  def register_extension_abilities: -> untyped

What is humans.txt?

I never heard of this until today.

What is humans.txt?

It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website.


Further reading

How to add an image to a gist

1.- Create a gist

2.- Clone your gist:

# make sure to replace `<hash>` with your gist's hash
git clone https://gist.github.com/<hash>.git # with https
git clone git@gist.github.com:<hash>.git     # or with ssh

3.- Open it & move your image

cd <hash>
mv ~/Desktop/image.jpg ~/Projects/gist/image.jpg

4.- Add your image to your gist's repository:

git add image.jpg

5.- Commit the image:

git commit -m "Add image"

6.- Update gist:

git push origin master


NIX node manager

Use n, an extremely simple Node version manager that can be installed via npm.

Say you want Node.js v12.10.0 to build Ghost template.

npm install -g n   # Install n globally
n 12.10.0          # Install and use v12.10.0
n                            # Output versions installed
n latest                     # Install or activate the latest node release
n stable                     # Install or activate the latest stable node release
n <version>                  # Install node <version>
n use <version> [args ...]   # Execute node <version> with [args ...]
n bin <version>              # Output bin path for <version>
n rm <version ...>           # Remove the given version(s)
n --latest                   # Output the latest node version available
n --stable                   # Output the latest stable node version available
n ls                         # Output the versions of node available

The slice_when method in Ruby

Creates an enumerator for each chunked elements. The beginnings of chunks are defined by the block.

This method splits each chunk using adjacent elements, elt_before, and elt_after, in the receiver enumerator. This method split chunks between elt_before and elt_after where the block returns true.

The block is called the length of the receiver enumerator minus one.

The result enumerator yields the chunked elements as an array. So each method can be called as follows:

enum.slice_when { |elt_before, elt_after| bool }.each { |ary| ... }

For example:

Return adjacent elements from this array [1, 2, 3, 5, 6, 9, 10] in chunked elements as an array.

[1, 2, 3, 5, 6, 9, 10].slice_when {|i, j| i+1 != j }.to_a
=> [[1, 2, 3], [5, 6], [9, 10]]

The each_cons method in Ruby

Iterates the given block for each array of consecutive <n> elements. If no block is given, returns an enumerator.

irb(main):001:0> [1,2,3,4].each_cons(2).to_a
=> [[1, 2], [2, 3], [3, 4]]

irb(main):002:0> [1, 2, 3, 5, 6, 9, 10].each_cons(2).to_a
=> [[1, 2], [2, 3], [3, 5], [5, 6], [6, 9], [9, 10]]

Print any two adjacent words in a given text:

def print_adjacent_words(phrase)
   phrase.split.each_cons(2) do |words|
     puts adjacent_word = words.join(" ")
irb(main):025:0> print_adjacent_words("Hello Darkness my old friend")
Hello Darkness
Darkness my
my old
old friend
=> nil

Ruby Double star (**)

def hello(a, *b, **c)
  return a, b, c

a is a regular parameter. *b will take all the parameters passed after the first one and put them in an array. **c will take any parameter given in the format key: value at the end of the method call.

See the following examples:

One parameter

# => [1, [], {}]

More than one parameter

hello(1, 2, 3, 4)
# => [1, [2, 3, 4], {}]

More than one parameter + hash-style parameters

hello(1, 2, 3, 4, a: 1, b: 2)
# => [1, [2, 3, 4], {:a=>1, :b=>2}]

Change the starting point for your ordered lists.

Use the start attribute to change the starting point for your ordered lists.

<ol start="10">


10. Git
11. Ruby
12. JS
13. PostgreSQL
14. CSS
15. HTML

Use discard_on to discard the job with no attempts to retry

Discard the job with no attempts to retry, if the exception is raised. This is useful when the subject of the job, like an Active Record, is no longer available, and the job is thus no longer relevant.

You can also pass a block that'll be invoked. This block is yielded with the job instance as the first and the error instance as the second parameter.

Example: 1

class SearchIndexingJob < ActiveJob::Base
  discard_on ActiveJob::DeserializationError
  discard_on(CustomAppException) do |job, error|

  def perform(record)
    # Will raise ActiveJob::DeserializationError if the record can't be deserialized
    # Might raise CustomAppException for something domain specific

Example: 2:

class UserNotFoundJob < ActiveJob::Base

  discard_on ActiveRecord::RecordNotFound

  def perform(user_id)

    @user = User.find(user_id)




Test Rails log messages with RSpec

Have you wondered how to test your Rails log messages?

Try this:

it "logs a message" do
  allow(Rails.logger).to receive(:info)
  expect(Rails.logger).to receive(:info).with("Someone read this post!")

  visit root_path

  expect(page).to have_content "Welcome to TIL"

Or this:

it "logs a message" do
  allow(Rails.logger).to receive(:info)

  visit root_path

  expect(page).to have_content "Welcome to TIL"
  expect(Rails.logger).to have_received(:info).with("Someone read this post!")


Comma-Separated Lists

Separate list elements with commas but not the last one:

ul > li:not(:last-child)::after {
  content: ",";


  • Hello,
  • There,
  • Comma

Source: AllThingsSmitty

Styling broken links

<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;

See the Pen Styling Broken Images by Victor Velazquez (@vicmaster) on CodePen.

Original source: bitsofco.de

How to add timeouts to slow queries

Sometimes some of your queries are taking too long to execute; you can specify optimizer hints and define timeouts for those queries.


It will raise a StatementTimeout exception if the query takes longer than usual to execute

Example (for PostgreSQL with pg_hint_plan):

Employee.optimizer_hints("SeqScan(employees)", "Parallel(employees 8)")

Example (for MySQL):

Employee.optimizer_hints("MAX_EXECUTION_TIME(50000)", "NO_INDEX_MERGE(employees)")

There are many causes for sudden slow queries in many databases, such as missing index, wrong catching, and performance.

But this is a topic for another day!

ActiveModel: Rails 6.1.0 - *_previously_changed? accepts :from and :to keyword arguments

*_previously_changed? accepts :from and :to keyword arguments like *_changed? since Rails 6.1.0

task.update!(status: :archived)
task.status_previously_changed?(from: "active", to: "archived")
# => true