Dialogs, Modality and Popovers Seem Similar. How Are They Different? — A real deep dive into the semantics, behaviours and characteristics of some of the most common user interface elements of websites today, plus a look at the proposed popover attribute.

Hidde de Vries

The Shared Element Transition API Is FLIPping Cool — Chris takes a look at what you can do with the “tremendously cool” Shared Element Transition API. With it, you can animate individual elements across different pages even when the browser does an entirely fresh page load. Support is limited and experimental for now, but as a bit of extra visual flair, it may be possible to justify its short-term use.

Chris Coyier

Free Course: The Last Algorithms Course You'll Need — This super fun free video course dives into data structures, arrays, search and sort, recursion, graphs, trees and much more.

Frontend Masters sponsor

Designing the Perfect Mobile Navigation UX — Navigation on mobile can quickly get complicated — things like hamburger menus, full-page overlays, animated slide-in-menus, and nested accordions may spring to mind. These options may not always be the best, so this post looks at some alternative design patterns worth exploring.

Vitaly Friedman

Six Steps to Improve Using Images in HTML for Users & Developers — A look at how to better serve images for users with responsive sizes and modern formats without making your life as a developer much harder. There’s ▶️ a video version too if you’d prefer.

Austin Gil

Inside the Mind of a Frontend Developer: Building a Hero Section — An exploration of how one developer thinks while building a simple hero component, showing (unsurprisingly) the thought process, why a certain solution was selected, and the pros and cons of it.

Ahmad Shadeed

Conditionally Adaptive CSS: Browser Behavior That Might Improve Your Performance — Your site might be ready to adapt to any viewport. But Vadim asks why users should wait for irrelevant desktop styles when they load it on mobile?

Vadim Makeev

Shortcut Brings Product and Engineering Together. Try It for Free — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly Clubhouse.io) sponsor

What CSS Do You Absolutely Have to Know? One Developer's Top Five — There may have been a time when it was possible to know most CSS properties and how they work, but Geoff states that those days are long-gone, and asks what CSS do you absolutely have to know?

Geoff Graham

Creating Animated Gradient Text The Quick Way — Using scoped custom properties and background-clip.

Jhey Tompkins

MetalliCSS: A Metallic Finish for Your CSS — A tiny, dependency-free library to make your CSS ‘literally shine.’ It’s simultaneously quite 2005 and quite cool, particularly the live, customizable demo on the homepage.

Mikael Åsbjørnsson-Stensland

☑️ The WCAG 2.1 Web Accessibility 'Not-Checklist' — A guide to make sure you haven’t missed anything. If you’re new to accessibility, the resource provides a foundation.

Intopia

📅 Register for Unblock 2022 - A CI/CD Conference by Buildkite

Buildkite sponsor

Content Parser: Extract Markdown, HTML, or Plain Text From Content-Heavy Websites — Simple online tool.

Content Parser

uiverse: Open Source UI Elements Made with CSS and HTML — This is a community-driven effort that includes buttons, checkboxes, toggles, cards, loading graphics, and more. You can contribute your own or grab what’s here.

uiverse

Sargam Icons: A Collection of 700+ Open-source Icons in SVG and Figma Formats — All SVGs are optimized and you can see them on display in three different styles.

Abhimanyu Rana