Frontend Focus

#​511 — October 6, 2021 | Read on the web

Using Modern Image Formats: AVIF and WebP — Highlights how modern image formats (such as AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. Compares what’s possible at high-quality, low-quality and file-size targets.

Addy Osmani

Proposal for CSS @when — The CSS Working Group recently resolved to adopt a proposal for adding when/else rules — this sorta stuff will make handling complex media queries much easier to cope with.

Chris Coyier

Consent Management Without Endless Configurations — Transcend Consent ensures nothing is tracked without user consent, without sacrificing site performance or UX. The only solution that is fully compliant across all 200+ tracking technologies – all in a lightweight, 30KB bundle.

Transcend sponsor

A Guide to CSS Debugging — Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. This post looks at a few categories that bugs often fit into, how to evaluate the situation when you find some, and explore techniques that help prevent such bugs.

Stephanie Eckles

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Conditional Border Radius in CSS — This is a neat little trick looking at how to use CSS comparison functions to create a conditional border radius.

Ahmad Shadeed

Shortcut Puts the Agile in Agile and the “Can” in Kanban — Shortcut is made for developers and PMs, providing speedy task management, reporting, and collaboration. Try it today.

Shortcut (formerly sponsor

iOS Browser Choice — There’s been a lot of noise around iOS lack of real browser choice and Chris of CSS Tricks weighs in with his views and shares the thoughts of some others.

Chris Coyier

How I Make CSS Art — Goes from initial inspiration, to sketching and layering, through to coding the HTML, sorting positioning, responsiveness, and the final CSS.

Yosra Emad

Front-End Dev Shortcuts in iOS 15 — Exploring pre-made shortcuts in the iOS Shortcuts app that can be very useful for web development.

Geoff Graham

How to Calculate REMs From Pixels — Sizing things in CSS can be tricky. But REMs are probably easier than you think.

Nick Scialli

How I Learnt To Stop Worrying & Love Animating The Box Model

Sam Thorogood

Get Started with JavaScript and InfluxDB 2.0

InfluxData sponsor

What’s The Right Font Size in Web Design?

Oliver Schöndorfer

Designing The Accordion: Best Practices

Roman Kamushken


Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools and Resources

Multi-Functional Image Converter: An Online Tool to Batch Convert Images to Various Formats — While converting, you apply various effects including resize, scale, transform, watermark, crop, and more.


melonJS 9.1.0: A Lightweight JavaScript and HTML5 Game Engine — It’s ten years old but still seeing releases. Here’s a look at how to build a platformer or a typing game with it.

melonJS Team

Tails: The Ultimate Drag-and-Drop Page Creator for Tailwind Components — Not all the components are free, but there’s enough in the free version to include and customize all sorts of Tailwind-based UI elements, then easily export as HTML.


99 Avatars: Generate Random Hand-Drawn PNG/SVG Avatars in the Browser or via an API — You can customize various hair/facial settings and select background foreground colors, but the primary features of the avatars are random.

99 Avatars

Mesh Gradients: A Set of 100 Gradients Downloadable as High Quality JPEGs