Welcome to my second weekly digest of this year.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, and designs I consumed during this week.

Interesting articles to read

Get Ready For ESM

JavaScript Modules will soon be a reality for Node.js package maintainers.

Get Ready For ESM

The New Array Method You'll Enjoy: array.at(index)

Array.at(index) method in JavaScript accesses array items at positive and (finally!) at negative indexes.

https://dmitripavlutin.com/javascript-array-at/

Front-End Performance Checklist 2021

An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques.

Front-End Performance Checklist 2021 - Smashing Magazine

CSS Scroll Snap

In this article, Ahmad will walk you through CSS scroll snap basics. What’s make him excited is that he just learned CSS scroll snap, so all the details I will explain will be freshly written. Are you ready? Let’s dive in!

https://ishadeed.com/article/css-scroll-snap/

Some great videos and courses I watched this week

Centering List Markers

Like so many things CSS, there is all sorts of little stuff to know, even about something as minuscule as centering a list marker.

by Chris Coyier

Chrome 88 - What’s New in DevTools

New CSS angle visualization tools, emulate unsupported image types and storage quota, new Web Vitals lane and more.

Useful GitHub repositories

passport-magic-login

Passwordless authentication with magic links for Passport.js 🔑

User signup and login without passwords
Supports magic links sent via email, SMS or any other method you prefer
User interface agnostic: all you need is an input and a confirmation screen
Handles secure token generation, expiration and confirmation

mxstbr / passport-magic-login

Passwordless authentication with magic links for Passport.js.

Passwordless authentication with magic links for Passport.js 🔑

User signup and login without passwords
Supports magic links sent via email, SMS or any other method you prefer
User interface agnostic: all you need is an input and a confirmation screen
Handles secure token generation, expiration and confirmation

Originally implemented by Tobias Lins for Splitbee and eventually extracted for Feedback Fish:

Usage

To use magic link authentication, you have to:

Setup the Passport strategy and Express routes on your server
POST a request with the users email or phone number from the client once they have entered it into the login input

Installation

npm install passport-magic-login

Frontend usage

This is what the usage from the frontend looks like once you've set it all up. It only requires a single request:

// POST a request with the users email or phone number to the server
fetch(`/auth/magiclogin`, {
  method

…

View on GitHub

Naming cheatsheet

Naming things is hard. This sheet attempts to make it easier.

Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.

kettanaito / naming-cheatsheet

Comprehensive language-agnostic guidelines on variables naming. Home of the A/HC/LC pattern.

Naming cheatsheet

Naming things is hard. This sheet attempts to make it easier.

Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.

English language

Use English language when naming your variables and functions.

/* Bad */
const primerNombre = 'Gustavo'
const amigos = ['Kate', 'John']
/* Good */
const firstName = 'Gustavo'
const friends = ['Kate', 'John']

Like it or not, English is the dominant language in programming: the syntax of all programming languages is written in English, as well as countless documentations and educational materials. By writing your code in English you dramatically increase its cohesiveness.

Naming convention

Pick one naming convention and follow it. It may be camelCase…

View on GitHub

dribbble shots

Tweets

Addy Osmani

@addyosmani

The `inputmode` attribute is great ✨ Hints to the browser what virtual keyboard to show on mobile: bit.ly/inputmode

08:00 AM - 12 Jan 2021

Metafizzy

@metafizzyco

🔥Hot new major version🔥 Infinite Scroll v4 uses fetch(), returns promises, tests with Puppeteer, and integrates with GitHub Actions infinite-scroll.com

14:06 PM - 12 Jan 2021

Adam Argyle

@argyleink

Inspired by @RobinhoodApp,
a CSS way

@supports (animation-timeline: works) {

@scroll-timeline scroll-fade {
time-range: 4s
}

@keyframes fade-in {
to {
opacity: 1
}
}

nav > * {
opacity: 0;
animation: fade-in 1s linear both;
animation-timeline: scroll-fade
}

}

17:53 PM - 12 Jan 2021

Josh W. Comeau

@joshwcomeau

🌠 PSA: if you nest elements with rounded edges, you need to tweak the radius! Otherwise you get chunky corners.

✨ The formula I use:
outerRadius = innerRadius + (outerSize - innerSize) / 2

Live demo: codepen.io/joshwcomeau/pe…

18:15 PM - 14 Jan 2021