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

// Dev Awesome #39

August 28, 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

Announcing TypeScript 4.0

The newest release brings lots of useful features, some minor breaking changes, and a cool new website and docs.

devblogs.microsoft.com

Second-guessing the modern web

Interesting article offering some critique on the modern way of building websites with a single page app approach and React-like frameworks.

macwright.com

How to Use AVIF: The New Next-Gen Image Compression Format

An overview of the promising new AVIF image format which will be fully available in Chrome 85.

reachlightspeed.com

This vs That - Commonly mistaken methods, properties and operations explained

Nice website that shows you the difference between easy to confuse concepts such as JS apply vs call, CSS :active vs :focus, and more.

thisthat.dev

The new CSS property that boosts your rendering performance: content-visibility

Launching in Chromium 85, the content-visibility property makes it possible to delay rendering elements until they are really needed.

web.dev

Libraries & Tools

Omatsuri - Beautiful collection of offline-ready frontend tools

There are 10 tools in total, including a Base64 encoder, fake data generator, SVG to JSX converter and other great stuff.

omatsuri.app

Selecto - JS component for selecting multiple elements with drag area

The library works great both with a mouse and touch screens. There are easy to integrate versions for React, Vue and other frameworks.

github.com/daybrush/selecto

Karma - Test JS code in multiple browsers at once

A useful tool for running JS tests in an actual browser environment. Works with Mocha, Jasmine, and other popular testing frameworks.

github.com/karma-runner/karma

Mock Service Worker (MSW) - Seamless API mocking library

This project offers a modern solution for mocking REST and GraphQL APIs in the browser and Node.

github.com/mswjs/msw

Faven - A web tool to help you generate favicons

Fantastic little app that generates different sized version of your favicon and gives you the HTML for implementing it.

github.com/22mahmoud/faven

Inspiration & Design

Previewed - Great mockup generator app

The app offers a wide selection of templates and device mockups that can be used for creating stunning promotional materials.

previewed.app

Building a Design System Library

Really in-depth article covering the whole process behind Lyft's new product design language.

medium.com

System UIcons - Over 200 royalty-free icons

The collection offers a growing number of icons with consistent styles, specifically designed for apps and systems.

github.com/CoreyGinnivan/system-uicons

Form Design Best Practices

Some sound advice on how to design forms that are easier to fill out and understand.

medium.com

Impossible Checkbox

Fun self-deactivating switch with a cute design.

codepen.io