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

// Dev Awesome #45

November 20, 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

10 Insights from adopting TypeScript at scale

A great article from the Bloomberg Engineering team on how they transitioned their entire codebase (over 50 million lines of JS) to TypeScript.

techatbloomberg.com

Clean up your code by applying these 7 rules

Some great tips on how to improve your code and make easier to read and maintain. The examples are presented in JS but apply to other languages as well.

dev.to

What Vue.js Does Better Than React

Very interesting article, highlighting some of the features and design decisions that Vue gets right.

hswolff.com

CSS Variables 101

This tutorial does an excellent job at explaining how CSS custom properties work and provides some common patterns for using them efficiently.

ishadeed.com

Comparing Static Site Generator Build Times

In this article, the CSS Tricks team compares the build times of popular SSG frameworks and gives some insight on why faster isn't always better.

css-tricks.com

Libraries & Tools

CSS Layout - A cheatsheet for popular UI layouts

Various page layouts, form inputs, and other components that you can quickly copy and use in your projects.

github.com/phuoc-ng/csslayout

Joplin - Open-source notes and TODO app

The app can run on Windows, macOS, Linux, Android and iOS, allowing to easily sync your notes between all the platforms.

github.com/laurent22/joplin

Lerna - A tool for managing large monorepos

This tool makes it easier to organize multi-package repositories with git and npm.

github.com/lerna/lerna

Image Compare - Vanilla JS library for comparing between images

Awesome plugin that looks and works great right out of the box. Perfect for showing before and after on renders and photos.

image-compare-viewer.netlify.app

Linkinator - Find broken links in your website

Simple site crawler tool for checking if all the links in your website are active and don't lead to any 404s.

github.com/JustinBeckwith/linkinator

Inspiration & Design

Drum sequencer and sample pad

A really impressive drum arranger on CodePen that is super fun to play around with.

codepen.io

Chasing the Pixel-Perfect Dream

In this beautifully presented article, Josh Comeau shares his ideas on why implementing pixel perfect designs doesn't always work.

joshwcomeau.com

Coin Flip Donate Button

Very unique design for a donation button with smooth animations that are randomized to look different on each press.

codepen.io

100 Days of CSS Illustrations

Alvaro Montoro challenged himself to do 1 animation each day for 100 days. Here are the results!

dev.to

Spectrum, Adobe’s design system

Here you can take a look at Adobe's design language and see all the components, fonts and icons they use.

spectrum.adobe.com