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

// Dev Awesome #22

November 8, 2019

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

Human Readable JavaScript

Some great tips on how to write and format your code to make it easier to read by your fellow teammates.

Regex Crossword - Practice regular expressions by solving puzzles

Fun crossword puzzle game, where the crossword clues are defined using regular expression. Lots of levels with varying difficulties available.

GRID - A simple visual cheatsheet for CSS Grid Layout

Very useful cheatsheat that will help you quickly figure out how to build responsive layouts with the CSS grid system.

HTMLHell - A collection of bad practices in HTML, copied from real websites.

Using images and divs as buttons, applying the same ID on multiple elements, and other monstrosities await you in HTML hell.

JavaScript to Know for React

Well structured tutorial on the JavaScript features you should be familiar with before delving into React.

Libraries & Tools

Vue Interactive Paycard - Credit card form with stunning design and animations

Really impressive form design that reacts to user input and animates the card in real time. It is also very user friendly with number formatting, validation and card type detection.

Sal - Lightweight scroll animation library

Great little scroll animation library focused on getting the best performance possible. It uses only vanilla JS, the Intersection Observer API and has no dependencies.

PWA Asset Generator - Command line tool for building PWA resources

Based on Node.js and Puppeteer, this tool generates icons and splash screens and then automatically adds them to the manifest.json and HTML of your project.

Ackee - Self-hosted analytics tools with a beautiful admin panel

Google Analytics-like API and interface, which can be ran on your own server and plugged into your projects for collecting anonymous user data.

Sortable - JavaScript library for creating reorderable drag-and-drop lists.

This library requires no external dependencies, has a ton of useful features, and works on all modern browsers and touch devices.

Inspiration & Design

Meet Spectrum, Adobe’s design system

The design system behind all of Adobe's projects is now public, including all the guides, components, fonts, icons, and more.

Crafting Stylised Mouse Trails

Another amazing tutorial by the Codrops team. This time we're building mouse trail animations with WebGL and the OGL library.

Rubber Slider - Fun take on the range element

Range selector component with two animated selectors that are very satisfying to adjust.

Email Love - Email inspiration and resources

A large collection of beautiful newsletter designs, categorized for easy discovery and inspiration.

Design Tips - A collection of mini web design lessons

Some awesome tips by Steve Schoger on how to position your UI components, what text colors to use, and more.