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.

dev.to

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.

regexcrossword.com

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.

grid.malven.co

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.

www.htmhell.dev

JavaScript to Know for React

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

kentcdodds.com

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.

github.com/muhammederdem/vue-interactive-paycard

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.

mciastek.github.io/sal/

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.

github.com/onderceylan/pwa-asset-generator

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.

ackee.electerious.com

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.

github.com/SortableJS/Sortable

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.

spectrum.adobe.com

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.

tympanus.net

Rubber Slider - Fun take on the range element

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

codepen.io

Email Love - Email inspiration and resources

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

emaillove.com

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.

twitter.com