The five best design links, every weekday

Domain: web.dev

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.

web.dev

Building a breadcrumbs component

A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.

web.dev

The performance effects of too much lazy-loading

Eagerly loading images within the initial viewport—while liberally lazy-loading the rest—can improve Web Vitals while loading fewer bytes.

web.dev

The new responsive: Web design in a component-driven world

User-preference based media features, container queries, and media queries for new screen types will enable us to usher in a new era of web design.

web.dev

New CSS functional pseudo-class selectors :is() and :where()

These seemingly small additions to CSS selector syntax are going to have a big impact.

web.dev

Best practices for fonts

Learn about how to optimize web fonts for Core Web Vitals.

web.dev

CSS for Web Vitals

This article covers CSS-related techniques for optimizing Web Vitals.

web.dev

Learn CSS

An evergreen CSS course and reference to level up your web styling expertise.

web.dev

Best practices for cookie notices

Learn about how cookie notices affect performance, performance measurement, and UX.

web.dev

Compat2021: Eliminating five top compatibility pain points on the web

Google is working to fix the top five browser compatibility pain points for web developers.

web.dev

Building a Tabs component

A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.