Programming news, cool libraries, and productivity tips by Dev Awesome.

// Dev Awesome #33

May 22, 2020

Dev Awesome

Welcome to Dev Awesome, the newsletter for awesome developers. This week we have another dose of interesting articles, tools and inspiration to supercharge your afternoon. Enjoy!

Articles & Tutorials

Introducing Web Vitals: essential metrics for a healthy site

A new project by Google that aims to provide unified guidance about the key features and metrics to focus on when building for the web.

blog.chromium.org

Rebuilding our tech stack for the new Facebook.com

In-depth article on how the Facebook team rewrote the website from scratch using React, GraphQL, Relay, and modern CSS techniques.

engineering.fb.com

A Complete Guide to CSS Functions

Great resource for learning about all the various functions CSS has to offer, featuring lots of examples and tiny demos of how they work.

css-tricks.com

JavaScript Features To Forget

This article is about JS properties and methods that now have better alternatives and therefore should not be used anymore.

davidflanagan.com

How to Create Pure CSS Games

We've featured a lot of CSS games in past issues, so here is a nice article that goes over some of the techniques for making games without JS.

medium.com

Libraries & Tools

Deno 1.0 - A big release for the experimental JS runtime

In case you haven't heard of it, Deno is a very promising project that offers an alternative environment for working with JavaScript and TypeScript.

deno.land

Pico - Take browser screenshots in JavaScript

Great tool for generating high-precision screens of the entire viewport that include scroll position, input states, canvas contents, and more.

github.com/nikersify/pico

ES2015 cheatsheet

Nice reference page with all the important new features from the latest ECMAScript releases.

devhints.io

Fast or Slow - Global Website Speed Profiler

Awesome tool that provides in-depth analysis, insights and metrics about your site's performance.

fastorslow.com

Bootstrap 4.5.0 Released

The new version comes with dozens of bug fixes, a handful of new utilities plus some other minor features.

blog.getbootstrap.com

Inspiration & Design

Animal Crossing: Isabelle's Day Off

Absolutely amazing pure-CSS demo. Make sure to check the CodePen for the coding timelapse video on how its done.

codepen.io

Form design: multiple inputs versus one input

A nice overview of the pros and cons for of using multiple inputs for things like credit card numbers and dates.

adamsilver.io

Pose Animator - Experiment for doing animations based on camera motion

This interesting Tensorflow project takes a 2D vector and animates in in real time to match the movements detected from a webcam.

github.com/yemount/pose-animator/

Modern CSS Solutions for Old CSS Problems

An ongoing tutorial series about designs that used to be tricky but are now straightforward thanks to new CSS features.

moderncss.dev

Scroll Down Icon Animation on CodePen

Three elegant CSS animation designs for prompting users to scroll down.

codepen.io