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

// Dev Awesome #54

June 11, 2021

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

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.

web.dev

The Perfect Link

Great article on how to code and design links that are more accessible, better-looking and clear on where they lead.

a11y-collective.com

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.

developer.chrome.com

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.

smashingmagazine.com

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.

octo.github.com/projects/flat-data

Libraries & Tools

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.

mailstudio.app

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.

fetoolkit.io

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.

boringavatars.com

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.

devfonts.gafi.dev

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.

domevents.dev

Inspiration & Design

Unveiling Material You

An update from Google on their design language, focusing on better accessibility and color customizations.

material.io

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.

georgefrancis.dev

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!

codepen.io

Sliding Tabs with CSS transitions

Simple but perfectly executed animation design for switching between tabs.

codepen.io

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.

market.pmnd.rs