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

// Dev Awesome #56

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

The State Of Web Workers In 2021

An in-depth article about web workers and why this promising technology is still not widely adopted.

smashingmagazine.com

The Large, Small, and Dynamic Viewports

There are now additional CSS viewport units that define different sizes, fixing some previous issues that vh and vw units caused.

bram.us

A Bashful Button Worth $8 Million

Speaking of CSS viewport issues, here is a cautionary tale about a button that was always out of reach because of a vh bug.

cloudfour.com

The performance effects of too much lazy-loading

Some interesting insights from the web.dev team on how to use lazy loading to get the biggest performance benefits.

web.dev

When a Click is Not Just a Click

Great tutorial on how to distinguish mouse clicks from keyboard triggers and touch events.

css-tricks.com

Libraries & Tools

LiveKit - Open source video conferencing platform.

A promising project for building scalable video chat apps. Offers great framework support and docs.

livekit.io

Nativefier - Make any web page a desktop application

Interesting command line tool that uses Electron under the hood to generate a desktop app from any web project.

github.com/nativefier/nativefier

AVPRess - Advanced online video optimizer

A useful tool for compressing and resizing videos right in the browser, powered by WebAssembly.

avpress.zaps.dev

PDF Make - PDF printing in pure JavaScript

Feature-rich JS library for generating PDF documents that works both client and server side.

github.com/bpampuch/pdfmake

Size Limit - Performance budgeting tool for JavaScript projects

Nice tool for calculating the real cost of running JS apps or libraries. It offers a CLI and plugins most popular build tools.

github.com/ai/size-limit

Inspiration & Design

CSS-only clock that tells the current time

A really fun CSS experiment about building a working analogue clock.

css-tricks.com

Blobmaker - Create random, unique, and organic-looking SVG shapes

Free SVG blob generator with plenty of options and one of the cleanest app user interfaces we've seen.

www.blobmaker.app

Frustrating Design Patterns: Broken Filters

Excellent article on the design of filter forms and how to make them less annoying to use.

smashingmagazine.com

SVG Heart Animation

Cute design for a "heart" button with smooth animations and clean markup.

codepen.io

Blobby Deer on CodePen

Impressive GSAP and Three.js demo that renders a deer out of SVG bubbles.

codepen.io