The five best design links, every weekday

Domain: web.dev

web.dev

CSS border animations

Looking at several ways to animate a border in CSS.

web.dev

Farewell to HTML5Rocks

So long HTML5Rocks, it’s been nice knowing you.

web.dev

Building a button component

A foundational overview of how to build color-adaptive, responsive, and accessible components.

web.dev

State of CSS 2022

Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.

web.dev

Building a dialog component

A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the dialog element.

web.dev

Building a loading bar component

A foundational overview of how to build a color adaptive and accessible loading bar with the progress element.

web.dev

Interop 2022: browsers working together to improve the web for developers

Learn more about how all browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues.

web.dev

Building an adaptive favicon

A foundational overview of how to build an adaptive favicon.

web.dev

The UI fund

Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.

web.dev

Towards an animation smoothness metric

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

web.dev

SVGcode: a PWA to convert raster images to SVG vector graphics

Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or monochrome vector images (SVG).

web.dev

Layout Patterns

A collection of layout patterns built using modern CSS APIs that will help you build common interfaces.

web.dev

Building a 3D game menu component

A foundational overview of how to build a responsive, adaptive, and accessible 3D game menu.

web.dev

Towards an animation smoothness metric

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

web.dev

Photoshop’s journey to the web

By using various new standardized web technologies, Adobe has now brought a public beta of Photoshop to the web.

web.dev

Building an effective Image Component

Images are a common source of performance bottlenecks for web applications and a key focus area for optimization.

web.dev

Building a multi-select component

A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.

web.dev

Building a split-button component

A foundational overview of how to build an accessible split-button component.

web.dev

CSS accent-color

Bring your brand color to built-in HTML form inputs with one line of code.

web.dev

2021 Scroll Survey Report

Get the 2021 Scroll Survey Report plus words from the Chrome team about how this impacts priorities and plans for Chromium and the web.