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

// Dev Awesome #61

January 7, 2022

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

Array.prototype.groupBy to the rescue!

The Array Grouping JS proposal will add a useful new method for effortlessly grouping array items.

charpeni.com

How to Choose Between SVG or Webfont

Very helpful checklist that helps you decide whether to use an SVG or webfont solution for loading icon sets.

blog.fontawesome.com

The State of CSS 2021 results are here!

The results contain helpful data breakdowns like salaries based on experience level and framework rankings.

2021.stateofcss.com

Chrome Users Beware: Manifest V3 is Deceitful and Threatening

Some interesting criticism of the new Chrome manifest for building web extensions.

eff.org

The CSS :has() selector is way more than a "Parent Selector"

Nice overview of one of the most promising upcoming additions to CSS - the :has selector.

bram.us

Libraries & Tools

Tailwind CSS v3.0 Released

This is the biggest update to Tailwind ever, coming absolutely packed with features including better compilation, more colors and added utilities to name a few.

tailwindcss.com

Introducing the Memory Inspector

The Chrome dev tools now include a memory inspector tab that makes it possible to view JS ArrayBuffer and WebAssembly.Memory objects.

developer.chrome.com

Cobe - WebGL globe Library

Lightweight (under 5kb) library for displaying 3D globes that look great, have smooth animations, and are super easy to set up.

github.com/shuding/cobe

Slowfiles - Slow-loading resources for testing

Useful web API that generates slow, inaccessible or missing JS and CSS files that you can use in testing.

slowfil.es

Utopia - React dev environment in the browser

The app is combines VSCode with an editable design preview which are two-way synced, so that design and code update each other.

utopia.app

Inspiration & Design

Virtual Playground Experiment

Relaxing interactive demo by Achmat Fauzi with great music, colors and animations.

vplayground.netlify.app

Working Gameboy CSS art

The article includes useful explanations on how the game and some of the CSS effects were built.

theangularguy.hashnode.dev

Modern for Wikipedia

A browser extension that redesigns Wikipedia to give it a more modern user interface.

www.modernwiki.app

UI cheat sheet: Spacing friendships

Easy to follow and well-illustrated tutorial on how to improve your designs by maintaining the correct spacings ratios.

uxdesign.cc

Emoji to Scale

Fun demo of various emojis arranged by their real life item size.

javier.xyz