DEV Community

Marco Biedermann
Marco Biedermann

Posted on • Updated on

Weekly Digest 02/2021

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

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 logo mxstbr / passport-magic-login

Passwordless authentication with magic links for Passport.js.

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

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

Screenshot 2021-01-09 at 16 55 23 Screenshot 2021-01-09 at 16 55 28 Screenshot 2021-01-09 at 16 56 24

Usage

To use magic link authentication, you have to:

  1. Setup the Passport strategy and Express routes on your server
  2. 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
Enter fullscreen mode Exit fullscreen mode

Naming cheatsheet

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 logo kettanaito / naming-cheatsheet

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

Naming cheatsheet

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']
Enter fullscreen mode Exit fullscreen mode

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


dribbble shots

The Sweet Sew application iteraction

https://cdn.dribbble.com/users/1998175/screenshots/14928264/media/cff25b9ec42e05be2fd6af6198631f1c.mp4

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

Book Store App

https://cdn.dribbble.com/users/5031392/screenshots/14930553/media/eab5cff9bd1bfa13ddfff5ac80684c6c.png

by Sergey Bulanov https://dribbble.com/shots/14930553-Book-Store-App

Mount fire logo concept

https://cdn.dribbble.com/users/5279042/screenshots/14947718/media/41df03f520608de3300b645beb6d84ca.jpg

by Md Arif Hossain https://dribbble.com/shots/14947718-Mount-fire-logo-concept

Molly + ❤

https://cdn.dribbble.com/users/766394/screenshots/14947202/media/7fdbac2509e7f30e01da519b6eb94df3.jpg

by Joby https://dribbble.com/shots/14947202-Molly

Newspaper Apps

https://cdn.dribbble.com/users/1348777/screenshots/14948165/media/6e2f27a27b4cc8eff715b9e0b9be3b43.png

by Respogrid https://dribbble.com/shots/14948165-Newspaper-Apps


Tweets


Picked Pens

Tilting Maze Game

by Hunor Márton Borbély

Background patterns

by Chuan

Neumorphism Animation

by ma suwa

Tabbar

by Aaron Iker


Talk to you next week and stay safe! 👋

Top comments (0)