November 8, 2019
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!
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.
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.
This library requires no external dependencies, has a ton of useful features, and works on all modern browsers and touch devices.
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.