:is() pseudo-class - CSS

When we apply the same style to multiple selectors on CSS we use to do something like this:

.section-header h1,
.section-header span,
.section-header .heading {
  line-height: 1.2;
}
.navigation li,
.navigation p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter way.

.section-header :is(h1, span, .heading) {
  line-height: 1.2;
}
.navigation :is(li, p) {
  padding: 5px 10px;
}

Notes on getting my M1 Rails + Foreman environment working

I expect this to evolve quickly and different things seem to be working for different people. In the meantime, hope to avoid a few rabbit holes for others.

  1. rvm worked for ruby 3.0.0 but not 2.6.6 (which is what I needed). cflags workarounds made it so ruby could get installed but gems with native extensions like grpc could not compile correctly. Tried asdf before trying rbenv and it worked, so I stuck with asdf.
  2. Had to prepend every brew installation (including brew itself) with arch -x86_64 brew install ....
  3. After installing asdf, I installed bundler as usual. No arch -x86_64 or anything. Same for bundle install afterwards.
  4. This DriftingRuby episode helped a lot.

I don't think the following were necessary but this is what I did because installing things with brew was getting hairy:

  1. Use Postgres.app to keep PostgreSQL running in the background, deleted it from my Procfile. Naturally, I have to start Postgres manually before I start Foreman.
  2. Downloaded ElasticSearch binaries and put the path in my Procfile. Essentially /Users/jose/dependencies/elasticsearch/elasticsearch-#.#.#/bin/elasticsearch

Using Gem::Dependency class manually to ensure version matching

I needed to add a mechanism to ensure that some actions of a controller were available only for specific versions, and I thought it was super similar of what Gemfile does, so I started to look how to use Gem::Dependency to solve this, and turns out it was super easy:

class Controller
  def feeds_one
    check_for_version_support('>= 1.0', '< 3')

    render json: SomeData.all
  end

  def feeds_two
    check_for_version_support('= 1.0')

    render json: SomeData.all
  end

  def feeds_three
    check_for_version_support('>= 2.1')

    render json: SomeData.all
  end

  private

  def check_for_version_support(*specification)
    checker = Gem::Dependency.new(action_name, specification)

    return if checker.match?(action_name, params[:version])

    raise VersionNotSupported, "Version not upported"
  end
end

P.A.R.A. Method

P.A.R.A. stands for Projects — Areas — Resources — Archives

A Project is “a series of tasks linked to a goal, with a deadline.”

An Area of responsibility is “a sphere of activity with a standard to be maintained over time.”

A Resource is “a topic or theme of ongoing interest.”

Archives include “inactive items from the other three categories.”

This Method has captured my attention and has been an exceptional tool for assign our projects, tasks, and resources.

Ruby 2.7 introduced numbered parameters for blocks

Since Ruby 2.7, it is possible to use numbered parameters in blocks additionally to named parameters.

This is an example of a block with named parameters:

my_array.each { |element| element.do_something }

And this is the same line with numbered parameters:

my_array.each { _1.do_something }

This works with multiple parameters too:

# named parameters
my_hash.each_pair { |key, value| puts "#{key}: #{value}" }

# numered parameters
my_hash.each_pair { puts "#{_1}: #{_2}" }

Browsers' IndexedDB are shared across domain

I was working on a major refactor for a PWA which basically changed the DB schema by reducing the amount of versions, nothing outstanding. BUT, I didn't change the DB name.

I was puzzled why whenever accessing the previous version I had to delete the data to have the app load correctly, then I realized that despite the PWA being located at different URL paths, both versions were using the same IndexedDB because of the same domain policy.

Using Upsert with Rails

Some DBMS support natively something that behaves like update or insert, Rails recently added the method Upsert that can take advantage of this method.

It is useful to update information that do not need to run validations, meaning, in a super performant way, here's an example:

# We usually do this:
activity = current_user.activity
if activity 
  activity.update(last_seen_at: Time.current)
else
  current_user.activity.create(last_seen_at: Time.current)
end

But if you see, it does not need to run any validation, it just needs to update last_seen_at if exists or create a new one, it performs two queries: one to instanciate the activity object and a second one that performs the real update/insert statement.

That can be replaced with the following code and it will perform just a single query and it will take care to either create the record or update an existing one

Activity.upsert({ last_seen_at: Time.current, user_id: current_user.id}, unique_by: :user_id)

To make this really work, considering you use Postgresql, you have to add a unique index on user_id and modify default value on created_at and updated_at in a migration like this:

query = <<-SQL
  ALTER TABLE #{Activity.table_name}
  ALTER COLUMN created_at SET DEFAULT CURRENT_TIMESTAMP,
  ALTER COLUMN updated_at SET DEFAULT CURRENT_TIMESTAMP
SQL
execute(query)

What is your car color?

Did you know that your car color can say a lot about how you want to be perceived by other people? Here is a list of some colors and their own meanings.

White: This color evokes freshness, cleanness, youth, and modernity.

Black: This is the most popular color in luxury vehicles. Black can be described as a sexy, powerful, and mysterious color.

Silver: This color is linked to a sense of innovation and modernity, that is why a lot of high tech products go for silver.

Red: This is a bold color, if your car is red this might mean you want to show an image of power, action, and confidence.

Blue: Blue is often described as the color of stability and safety. If your car is blue this might mean you are a trustworthy person.

Yellow: If you drive a yellow car might mean that you are a happy person or maybe a person who likes to take risks.

Gray: If you have a gray car this could mean you are a person who does not want to stand out, and prefers something a bit more ¨subtle¨ instead.

Better usage of Rails logger

Logging usefull data is a hard task, but there's one specific method that helps to improve the experience of logging actual useful information: tagged. It adds extra tags to the log message making it easy to debug:

Rails.logger.tagged('Super App') do
  Rails.logger.info('Log Message')
end

This will result in somethin like this:

[Super App] Log Message

If you can see, it prepends usefull information, you could add personalized data to trace logs, for example:

class ApplicationController << ActionController::Base
  around_action :add_logger_tags

  def add_logger_tags
    Rails.logger.tagged(logging_tags) do
      yield
    end
  end

  def logging_tags
    [
      "Request Id: #{request.id}",
      "Session Id: #{session.id}",
      current_user && "User id: #{current_user.id}"
    ]
end

And you will have super nice logs to read

How to use my local browser and get access to the server on Circle CI with port-forwarding

This helped me to debug a failing test, that was only happening on the CircleCI Server.

How to do it?

  1. Go to Details Job Page on the Circle CI app and re-run the job as Rerun Job with SSH. image

  2. You should be able to find an additional step called Enable SSH, just expand it to see a command similar to this ssh -p 64625 ubuntu@54.221.135.43 but with minor differences (the port number and IP address will be different). Copy the command into your terminal.

  3. Paste it and append this -L 3000:localhost:4000. With this, every request happening on the port 4000 (CircleCI server) will be forwarded to my local computer in the port 3000, so my local browser can reach the CircleCI server directly.

    $ ssh -p 64625 ubuntu@54.221.135.43 -L 3000:localhost:4000

  4. Lastly, change of directory, go to your application folder and serve your app in port 4000.

    $ cd my-app-directory && <command to serve your app>

    In this example, I ran yarn run dev which runs a server on the port 4000.

  5. Go to the browser and visit the localhost:3000.