Weekly Digest 02/2021
Tags: css, devtools, javascript, node
Published: 2021-01-17 16:38:54

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](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77)

### The New Array Method You'll Enjoy: [array.at](http://array.at/)(index)

[Array.at](http://array.at/)(index) method in JavaScript accesses array items at positive and (finally!) at negative indexes.

[https://dmitripavlutin.com/javascript-array-at/](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](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/)

### 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/](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.

{% youtube kO2dZxtsC1M %}

by [Chris Coyier](https://twitter.com/chriscoyier)

### 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.

{% youtube 3tUXV_n3yng %}

---

## Useful GitHub repositories

### passport-magic-login

![https://user-images.githubusercontent.com/7525670/104158644-0c61f400-53ee-11eb-960f-167c6ebd3ec9.png](https://user-images.githubusercontent.com/7525670/104158644-0c61f400-53ee-11eb-960f-167c6ebd3ec9.png)

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

{% github mxstbr/passport-magic-login %}

### Naming cheatsheet

![https://raw.githubusercontent.com/kettanaito/naming-cheatsheet/master/naming-cheatsheet.png](https://raw.githubusercontent.com/kettanaito/naming-cheatsheet/master/naming-cheatsheet.png)

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.

{% github kettanaito/naming-cheatsheet %}

---

## dribbble shots

### The Sweet Sew application iteraction

[https://cdn.dribbble.com/users/1998175/screenshots/14928264/media/cff25b9ec42e05be2fd6af6198631f1c.mp4](https://cdn.dribbble.com/users/1998175/screenshots/14928264/media/cff25b9ec42e05be2fd6af6198631f1c.mp4)

by Taras Migulko [https://dribbble.com/shots/14928264-The-Sweet-Sew-application-iteraction](https://dribbble.com/shots/14928264-The-Sweet-Sew-application-iteraction)

### Book Store App

![https://cdn.dribbble.com/users/5031392/screenshots/14930553/media/eab5cff9bd1bfa13ddfff5ac80684c6c.png](https://cdn.dribbble.com/users/5031392/screenshots/14930553/media/eab5cff9bd1bfa13ddfff5ac80684c6c.png)

by Sergey Bulanov [https://dribbble.com/shots/14930553-Book-Store-App](https://dribbble.com/shots/14930553-Book-Store-App)

### Mount fire logo concept

![https://cdn.dribbble.com/users/5279042/screenshots/14947718/media/41df03f520608de3300b645beb6d84ca.jpg](https://cdn.dribbble.com/users/5279042/screenshots/14947718/media/41df03f520608de3300b645beb6d84ca.jpg)

by [Md Arif Hossain](https://twitter.com/imarifhsn) [https://dribbble.com/shots/14947718-Mount-fire-logo-concept](https://dribbble.com/shots/14947718-Mount-fire-logo-concept)

### Molly + ❤

![https://cdn.dribbble.com/users/766394/screenshots/14947202/media/7fdbac2509e7f30e01da519b6eb94df3.jpg](https://cdn.dribbble.com/users/766394/screenshots/14947202/media/7fdbac2509e7f30e01da519b6eb94df3.jpg)

by [Joby](https://twitter.com/JobyArts) [https://dribbble.com/shots/14947202-Molly](https://dribbble.com/shots/14947202-Molly)

### Newspaper Apps

![https://cdn.dribbble.com/users/1348777/screenshots/14948165/media/6e2f27a27b4cc8eff715b9e0b9be3b43.png](https://cdn.dribbble.com/users/1348777/screenshots/14948165/media/6e2f27a27b4cc8eff715b9e0b9be3b43.png)

by Respogrid [https://dribbble.com/shots/14948165-Newspaper-Apps](https://dribbble.com/shots/14948165-Newspaper-Apps)

---

## Tweets

{% twitter 1348902534363152385 %}

{% twitter 1348994763522011137 %}

{% twitter 1349051923912036355 %}

{% twitter 1349782080021028865 %}

{% twitter 1348647764146663424 %}

---

## Picked Pens

## Tilting Maze Game

{% codepen https://codepen.io/HunorMarton/pen/VwKwgxX %}

by [Hunor Márton Borbély](https://twitter.com/HunorBorbely)

### Background patterns

{% codepen https://codepen.io/yuanchuan/pen/xxEXwZw %}

by [Chuan](https://twitter.com/yuanchuan23)

### Neumorphism Animation

{% codepen https://codepen.io/ma_suwa/pen/eYdZVML %}

by [ma suwa](https://twitter.com/masuwa1018)

### Tabbar

{% codepen https://codepen.io/aaroniker/pen/rNMmZvq %}

by [Aaron Iker](https://twitter.com/aaroniker_me)

---

Talk to you next week and stay safe! 👋