|

Using matchMedia() and Code Ligatures

**+10% Speed Boost for your everyday life.

1️⃣ - Intercept events from matchMedia().

*with JavaScript

Anyone who has ever written CSS in a half-serious way knows about media queries. And anyone who's done some serious work on responsive and adaptive layouts also knows that you can use media queries with window.matchMedia() in JavaScript, too. But who knew that they can also execute callbacks if the query suddenly has a different result?
It's quite simple:

// create a 'media query list
const mediaQuery = window.matchMedia('(max-width: 1200px)');

// register event listener
mediaQuery.addListener(e => {
    if(e.matches) {
        console.log('media query matches')
    }  
}

Read more at Mozilla Developer Network.

2️⃣ - Make code quicker to grasp.

*in the text editor of your choice

One character is read faster than two. That's why the Fira Code font now has ligatures for all possible control characters. Ligatures are multiple characters that are combined into a single character when displayed. This is usually used in typography for consecutive letters like fi or fl, but in Fira Code it also works with control character combinations like =>, == or >=.

Oct-25-2019-15-47-23

Ligatures work in almost all text editors (installation guide).

Sidenote: The Microsoft Cascadia Code font also has ligatures.

3️⃣ - Tuning up the Spotlight search.

*in macOS

In my opinion, Spotlight search is a super tool to launch programs and search for files. But as a power user, sometimes I just wish there were more settings options. This is where Alfred comes in. Alfred is a very comprehensive and customizable replacement for Spotlight Search.
Apart from features like file search and launching programs, Alfred also comes with a "powerpack" (£23) that includes a clipboard history and "workflows". The latter allow the resourceful user to build their own behaviors and install behaviors from others. So there is virtually nothing more that can't be achieved with Alfred via a short command.

Here's my humble example: a workflow that searches the npm registry for a term.

Oct-16-2019-11-33-53


Go here to Webworker Quick Tips Vol. 1.