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

// Dev Awesome #44

November 6, 2020

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

Meet Face ID and Touch ID for the Web

An in-depth look into an awesome upcoming API that will give us access to authentication methods like Face ID and Touch ID for the web.

webkit.org

Introducing Microsoft Edge preview builds for Linux

With this update Edge will be officially supported on Ubuntu, making it available for development and testing on all major desktop platforms.

blogs.windows.com

Docker Tutorial for Beginners

Almost 3 hour long course that covers all important Docker concepts. Hosted on YouTube and completely free.

youtube.com

Responsive Grid Design: Ultimate Guide

Excellent tutorial on how to use the CSS grid to create precise responsive layouts.

medium.muz.li

The state of CSS 2020

The annual survey about everything CSS is now open and everyone is welcome to participate!

stateofcss.com

Libraries & Tools

React v17.0 Released

This new release is a bit unusual - it adds no new features, instead focusing on improving the way React will be setup and upgraded in the future.

reactjs.org

Detect GPU - Classify user's GPU capabilities

With this library you can run a 3D rendering benchmark and learn about the user's GPU, so you can tune graphically intensive tasks.

github.com/TimvanScherpenzeel/detect-gpu

Butter Slider - Vanilla drag and hold slider

Super simple slider library with great performance and no dependencies

github.com/armandsalle/butter-slider

Free Favicon Maker - Tiny SVG favicon generator

SVG favicons have pretty good support these days, so here is a cool little app that lets you make a nice favicon in minutes.

formito.com

Playwright - Node library to automate Chromium, WebKit and Firefox.

Write automated UI test for all the major browsers using a single, reliable API.

github.com/microsoft/playwright

Inspiration & Design

Pure CSS Product Card

Awesome interactive product card for a bike with included checkout and animated customization options.

codepen.io

Creating 3D Illustrations with CSS

Some great tips on making 3D CSS art from Ricardo Oliva Alonso, who we've featured on the newsletter many times.

frontend.horse

IRA Design - Build your own amazing illustrations

Hand drawn, customizable SVGs that are 100% free for use in personal & commercial projects.

iradesign.io

3D CSS Letter Transition on CodePen

A really complex and eye-catching title card with great animations and design.

codepen.io

Colorable - Tool for checking text and background color contrast

It's important to make sure the text and background colors in a design are compatible. This tool makes that super easy.

colorable.jxnblk.com