Use isSameorAfter to set condition to select specific periods

momentjs is a JavaScript library that helps parse, validate, manipulate, and display date/time in JavaScript in a very easy way.

momentjs provide specific instructions to handle dates which can create conditions in each one, to select a period after and same that you needed, like a >= instruction use isSameorAfter:

moment('2010-10-20').isSameOrAfter('2010-10-19'); // true
moment('2010-10-20').isSameOrAfter('2010-10-20'); // true
moment('2010-10-20').isSameOrAfter('2010-10-21'); // false

Learned by ramon-guzman on Mar 9, 2023

Upgrade to Ruby 3.2 to avoid ReDoS attacks

Did you know that in Ruby 3.1.3 and prior some regular expressions could take a long time to process?

Don't believe me? Try running this in a 3.1.3 irb console:

/^a*b?a*$/ =~ "a" * 50000 + "x"

Your system will halt for like 10 seconds before returning no matches. This is the basis for ReDoS (Regexp Denial of Service) attacks.

Thankfully, Ruby 3.2.0 has fixed this and the same regexp gets resolved in 0.003 seconds. They also added a Regex.timeout global option which would prevent your app from falling victim to ReDoS attacks!

Learned by kevin-perez on Feb 6, 2023

CSS Container Queries

I've always seen responsive elements styled with CSS media queries. These often need more media queries to make them look good on different page sections. There's a way to skip the headache.

Use of container queries to apply CSS styles with the element's container size in mind instead of the viewport size:

/* Create a container context */
.container {
  container-type: inline-size;
}

/* Default font size */
.card h2 {
  font-size: 1em;
}

/* Updated font size when the container is larger than 500px */
@container (min-width: 500px) {
  .card h2 {
    font-size: 2em;
    color: gray;
  }
}
<div class="container">
  <div class="card">
    <h2>Card title</h2>
  </div>
</div>

Example

Learned by carlos-araoz on Nov 17, 2022

Enumerable#any? and Enumerable#detect

Someone told me #any? didn't stop iterating after finding the first truthy value, that I should use #detect instead, but turns out both methods behave the same, at least in Ruby 3.0.1.

Try running this for example:

(1..5).to_a.any? do |n|
  puts n
  true
end

(1..5).to_a.detect do |n|
  puts n
  true
end

You'll see this:

1
1

Learned by kevin-perez on Oct 20, 2022

to install ruby 2.4.6 on a Mac m1 with rbenv

Once upon a time (even thouhg we have newer versions of ruby) I had to install an older version of ruby, the 2.4.6 on my Mac M1 (OS X 12.6), I was having this problem:

ruby-build: using readline from homebrew

BUILD FAILED (macOS 12.6 using ruby-build 20220910.1)

So after googling I found that we can do this:

CFLAGS="-Wno-error=implicit-function-declaration" RUBY_CONFIGURE_OPTS='--with-readline-dir=/usr/local/opt/readline/' arch -x86_64 rbenv install 2.4.6

and it worked!

that's it bye!

Learned by victor-delarocha on Sep 27, 2022

Always use retry inside rescue blocks

Ruby includes a retry keyword that would bring execution back to the start of the current method while preserving scope. But what if you do this?

def my_method
  my_var = 1
  retry
end

That would fail with an Invalid retry, which is one of the few illegal statements in Ruby.

retry is only allowed inside rescue blocks.

def my_method
  my_var = 1
  raise Exception
rescue Exception
  retry
end

Learned by kevin-perez on Aug 16, 2022

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:

CSS:

.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"; 
} 

Result:

  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

CSS:

.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"; 
} 

Result:

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

That's all folks!

Learned by Victor Velazquez on Apr 28, 2022

Behavior of Capybara's "have_no_content" when expected with `.to_not` and with `.to`

about to_not have_content:

  expect(page).to_not have_content("not on page")

it waits (Capybara's default waiting time), then it pass. Don't use it! 🚫

whereas to have_no_content:

  expect(page).to have_no_content("not on page")

Waits (same as with .to_not) but it passes as soon as "not on page" disappears from the page; use this one to wait for loading messages to disappear! ✅

Learned by victor-delarocha on Apr 21, 2022

Always check ACLs if something is fishy!

If you ever encounter a Linux dir in which you cannot write even when you're sure you have write permissions on it, check the ACLs. You may find someone doesn't particularly like you. 😞

-> getfacl /tmp 
# file: tmp
# owner: root
# group: root
# flags: --t
user::rwx
group::rwx
other::rwx
user:my_user:--- # this means "screw u and only u"

Learned by kevin-perez on Mar 11, 2022

Defining classes using full name vs wrapping them inside modules

In Ruby, we can write classes inside modules. We usually do this to have classes namespaced to the module, so we don't risk two different classes having the same name. This is important since Ruby won't complain about re-defining a class, it would just open it and add new methods to it.

We could write classes using their full name, like this:

class Pokemon::Game::SpecialAttack < Pokemon::Game::Attack
  # ...
end

or, we could wrap the whole thing using modules, like this:

module Pokemon
  module Game
    class SpecialAttack < Attack # Ruby looks for SpecialAttack inside Pokemon::Game automatically!
      # ...
    end
  end
end

Both methods work the same, except the one above can only reference Attack using its whole name. On the other hand, it looks somewhat easier to read than nesting modules inside other modules. Which style do you prefer?

Learned by kevin-perez on Mar 4, 2022