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

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 Clubhouse.io) 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

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.

renzhezhilu

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.

DevDojo

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

cogentgene