June 11, 2021
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!
Learn CSS - An evergreen CSS course to level up your web styling expertise
Free course by the Google web.dev team, covering everything from CSS fundamentals to advanced techniques like keyframe animations and blend modes.
The Perfect Link
Great article on how to code and design links that are more accessible, better-looking and clear on where they lead.
What's New In DevTools (Chrome 92)
Lots of nice features in this release, including a CSS grid editor widget, updates to the network tab, a source order viewer and more.
Useful VS Code Extensions For Front-End Developers
A nice collection of extensions to boost your VS Code workflow, organized into neat categories and with good descriptions for each plugin.
GitHub OCTO Flat Data - Bring working datasets into your git repositories
It uses GitHub actions to fetch data from a URL endpoint (e.g. a JSON or CSV file) and save it directly to the git repo, keeping in synced.
Mail Studio - Powerful Email Design Tool
Awesome desktop app for creating responsive emails that look great everywhere. Combines visual and code editing, and offers tons of smart features.
Frontend Toolkit - Helpful development utilities combined in one place
Includes a color converter, JSON formatter and an npm package size calculator among other useful tools.
Boring avatars - Tiny React library for generating SVG avatars
The generator takes a username and color palette as input and creates nice round avatars with multiple styles available.
Dev Fonts - A collection of fonts for coding with customizable live previews
You can adjust the editor theme, select syntax highlighting and easily compare fonts to choose the one you like best.
Explore DOM Events - Nice tool for learning about event listeners
This visual tool makes it easier to test and understand concepts like event targets and bubbling.
Unveiling Material You
An update from Google on their design language, focusing on better accessibility and color customizations.
A Beginner's Guide to Applying Color in UI Design
Nicely presented and easy to follow tutorial on how to pick the right colors and apply them in the right spots.
3D iMac - The new iMacs recreated from CSS Only
Very sharp, animated CodePen demo of the new thin iMacs. Even the color options are there!
Sliding Tabs with CSS transitions
Simple but perfectly executed animation design for switching between tabs.
Market - A collection of royalty-free 3D assets
The app is very user-friendly with features like warnings for large assets, comment sections and different download options.