Today I Learned

A Hashrocket project

8 posts by vidalekechukwu @vidalekechukwu

CSS :root Selector

Assign styles to the root, <html> element by assigning them to a :root style block:

:root {
  background: red;
}

Now, when you open up your web page, you'll see that the <html> element has a red background! Preeetty cool right?!

CSS Variables

CSS3 supports native variables that are assigned with the following syntax:

html {
  --foo-color: #FF0000;
  --bar-color: #00FF00;
}

Note the -- that precedes the variable's name. Now, the <html> element and all its descendants will be able to access the variables with the following syntax.

a {
  color: var(--foo-color);
}

button {
  background: var(--bar-color);
}

CSS uses the var function to look up variables.

You don't have to assign the variable to the <html> tag. It can be assigned to any element or selector's style block. Just remember, only that element and its children will have access to the variable ;-)

Futhermore, you can access the variables in Chrome's DevTool/Element Inspector!

NOTE: This feature is not supported at all in Internet Explorer and only has partial support in Microsoft Edge 15, the most recent Edge at this time of writing. Opera Mini users are out of luck as well :-(

Browser Support Chart

Accept Your Own Changes During Git Rebase

During a git rebase you may encounter conflicts in files between your current, HEAD, branch and the branch you're rebasing. Ordinarily, you'll want to go through each file and individually resolve each conflict to ensure that the proper changes are preserved.

Sometimes, however, you already know that you want to accept ALL the changes in a file on your local branch and discard the other branch's edits. Instead of opening the file, finding the conflict regions, then making the appropriate changes, you can more succinctly prefer your changes with the following command:

git checkout --ours /path/to/file.js

Conversely, if you want to keep the other branch's changes, run:

git checkout --theirs /path/to/file.ex

You can also do this for an entire directory:

git checkout --ours /path/to/dir/
git checkout --theirs . # Current working directory

When you [re]open the conflict files, you'll see that your preferred branch's changes have been written and the other branch's have been discarded.

After you've finished, stage the the conflict files, and continue your rebase:

git add /path/to/conflict_file.rb
git rebase --continue # or --skip

Combine Multiple Rake Commands Without &&

Ordinarily, to successively run commands whose execution depends on the previous command's success, you would separate the commands with two &'s. This includes rake commands:

rake db:migrate && rake db:redo && rake db:test:prepare

The downside to this, however, is that the Rails environment is loaded with each rake invocation. Thus, in this example the Rails environment is loaded three times.

This is slow. To speed up the process, we can load the Rails environment just once as follows:

rake db:migrate db:redo db:test:prepare

We still run all the tasks but don't have to wait an eternity for Rails to get its act together and load rake. Hooray!

Hat-tip @mrmicahcooper

How Javascript Boolean Comparison Works

true && true // true
true && false // false
false && false // false
true && null // null
true && undefined // undefined

Get a Random Record from an ActiveRecord Model

Let's say you have an events table with a model name Event. If you want to get a random event from the table, you could run

Event.find_by_sql(
  <<-SQL
    SELECT * FROM events ORDER BY random() LIMIT 1
  SQL
).first

The functional part of this query is the ORDER BY random() bit. For every row that postgres is sorting, it generates a random number (between 0.0 and 1.0 by default). Then it sorts the rows by their randomly generated number. Read more about the postgres random() function at the documentation page.

Rails: Start Resque Worker for Async Mail Delivery

QUEUE=mailers rake resque:work

Assuming you have properly configured Resque to work with ActiveJob, you will now have a worker waiting to execute mail delivery requests. Read more about how to execute these deliveries to take full advantage of the feature.

If you want to run the worker as a background process simply set the BACKGROUND environment variable before running the rake task:

BACKGROUND=1 QUEUE=mailers rake resque:work

App-Wide Search-Replace in Vim

1) In command-line mode, load all desired files into your argument list (arglist)

:args `git grep -l <string>`

where <string> is the string you want to replace.

2) Run a global search-replace across all the files in your arglist

:argdo %s/<string>/<replacement>/gce | update

Note:

  • Search-replace flags:

    • g[lobal]: replace all matches
    • c[onfirm]: ask for confirmation before replacing
    • e[rror]: don't halt operation at errors
  • update saves each file after the replacement is made.

  • The search-replace will only apply to files checked into your git history. Be sure to commit the files you want searched before attempting this.