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

// Dev Awesome #50

February 12, 2021

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

Front-End Performance Checklist 2021

Super in-depth guide that covers everything you need to know about modern web performance, from metrics to tooling and front-end techniques.

smashingmagazine.com

Don't use functions as callbacks unless they're designed for it

A really good tutorial on callbacks and how they can lead to unexpected and unwanted side effects.

jakearchibald.com

Safari 14 added WebExtensions support. So where are the extensions?

Interesting article on some of the reasons why web extension developers are still reluctant to build plugins for Safari.

sixcolors.com

Firefox 85 Cracks Down on Supercookies

Important news from the FIrefox team about user privacy, browser cache and cross-site tracking.

blog.mozilla.org

Making GitHub's new homepage fast and performant

The GitHub landing page had a nice redesign recently and this article explains how it was built with performance as a top priority.

github.blog/2021-01-29-making-githubs-new-homepage-fast-and-...

Libraries & Tools

Create App - Frontend build config generator

Awesome app that helps you configure your next project by selecting which libraries you will need.

createapp.dev

Github1s - One second to read GitHub code with VS Code.

Amazing open-source project that allows you to open any GitHub repo in VSCode, directly in the browser.

github.com/conwnet/github1s

Get Waves - Nice tool for making SVG waves

This online app makes it super easy to generate SVG shapes with plenty of customization.

getwaves.io

Pace - Easy solution for adding progress bar to your site

Nice library with super simple installation. Just include the provided JS and CSS and it automatically adds a loading bar.

github.com/CodeByZach/pace

Rough Notation - Tiny JS library for "hand-drawn" annotations

This library adds smooth animations for text highlight, underline, strikethrough and other effects.

roughnotation.com

Inspiration & Design

Gaze-controlled keyboard

An impressive machine learning demo that lets you use a virtual keyboard via eye tracking.

gaze-keyboard.netlify.app

Why I'm losing faith in UX

Interesting article that speaks against bad design practices and dark patterns that are becoming more and more prevalent.

creativegood.com

PSone - CSS Framework in the style of PS1

Fun retro design framework for making your apps look like the menu of a Playstation 1 console.

github.com/micah5/PSone.css

Panelle.js - Tool for making comic book panels

Web app for creating comic book pages and frames with nice drag & drop controls.

andrewfulrich.gitlab.io

Not a fan - Cool animated demo on CodePen

This is just a great-looking web experiment for an animated fan with controllable speed.

codepen.io