# web.dev: Articles All of web.dev's articles. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Rendering on the Web DevFeed: [Rendering on the Web]() Original publisher: [Read original article]() Author: Addy Osmani X GitHub Bluesky Jason Miller X GitHub Homepage Published: 2026-01-05T08:00:00Z Content type: article Language: en Sources: [web.dev: Articles]() Topics: [Server-side rendering](), [Web Development](), [HTML](), [JavaScript](), [Web](), [browser](), [Document Object Model (DOM)](), [Interaction to Next Paint]() Tags: [article](), [browser](), [developers](), [html](), [interaction-to-next-paint](), [javascript](), [performance](), [web](), [web-developers]() ### AI overview This article explains how web developers can choose where application logic and rendering should run. It defines server-side rendering, client-side rendering, prerendering, hydration, and rehydration, and discusses their tradeoffs using page-performance metrics such as TTFB, FCP, INP, and TBT. ### Source excerpt Recommendations for implementing logic and rendering in apps. ## Why is CrUX data different from my RUM data? DevFeed: [Why is CrUX data different from my RUM data?]() Original publisher: [Read original article]() Author: Barry Pollard X GitHub Mastodon Bluesky Homepage Published: 2025-12-17T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [real user monitoring]() Tags: [analytics](), [benchmarking](), [chrome](), [metrics](), [real-user-monitoring](), [user-experience]() ### AI overview This guide explains why Core Web Vitals measurements from CrUX and real user monitoring can differ, and how RUM can provide finer-grained analysis to investigate site issues. ### Source excerpt Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX. ## Responsive and fluid typography with Baseline CSS features DevFeed: [Responsive and fluid typography with Baseline CSS features]() Original publisher: [Read original article]() Author: Miriam Suzanne GitHub Bluesky Homepage Published: 2025-12-16T08:00:00Z Content type: article Language: en Sources: [web.dev: Articles]() Topics: [CSS](), [Accessibility](), [modern web development](), [web design]() Tags: [accessibility](), [article](), [css](), [developer](), [how-to](), [learn](), [typography](), [user-control](), [web-design]() ### AI overview This article explains how responsive and fluid typography can adapt to browser viewport size while preserving user control over font preferences and zoom. It presents Baseline CSS features and emphasizes testing responsive typography for accessibility. ### Source excerpt Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind. ## Ten modern layouts in one line of CSS DevFeed: [Ten modern layouts in one line of CSS]() Original publisher: [Read original article]() Author: Una Kravets X GitHub Bluesky Homepage Published: 2025-12-15T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [Web Development]() Tags: [css](), [demo]() ### AI overview A tutorial on concise modern CSS layout techniques, including centering, Flexbox-based responsive cards, and grid sidebars. ### Source excerpt This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts. ## Color themes with Baseline CSS features DevFeed: [Color themes with Baseline CSS features]() Original publisher: [Read original article]() Author: David A Herron Homepage Published: 2025-12-11T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [Web Development](), [Dark Mode](), [User interface design]() Tags: [css](), [dark-mode](), [how-to](), [themes](), [ui]() ### AI overview A CSS tutorial on building color themes with Baseline features, using relative colors and OkLCh to derive palette values and support light and dark modes. ### Source excerpt Learn how to create color themes with Baseline web features available in CSS. ## Preload responsive images DevFeed: [Preload responsive images]() Original publisher: [Read original article]() Author: Barry Pollard X GitHub Mastodon Bluesky Homepage Yoav Weiss X GitHub Published: 2025-12-03T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [modern web development](), [Web Development]() Tags: [browser](), [html](), [images](), [mobile](), [user-experience](), [web]() ### AI overview A tutorial on preloading responsive images so browsers can select and fetch an appropriate image resource earlier, improving load speed and reducing unnecessary mobile data use. ### Source excerpt Learn about new and exciting possibilities for preloading responsive images to ensure great user experience. ## Time to First Byte (TTFB) DevFeed: [Time to First Byte (TTFB)]() Original publisher: [Read original article]() Author: Barry Pollard X GitHub Mastodon Bluesky Homepage Jeremy Wagner GitHub LinkedIn Homepage Published: 2025-11-28T08:00:00Z Content type: article Language: en Sources: [web.dev: Articles]() Topics: [Latency](), [browser](), [Chrome](), [JavaScript](), [API](), [HTTP]() Tags: [api](), [browser](), [chrome](), [guide](), [http](), [javascript](), [latency](), [post]() ### AI overview This post explains Time to First Byte (TTFB), a metric measuring the time from navigation start until the first response byte begins to arrive. It covers the request phases that contribute to TTFB, the effects of 103 Early Hints and early response flushing, recommended performance targets, and methods for measuring TTFB in browsers and developer tools. ### Source excerpt This post explains the Time to First Byte (TTFB) metric and shows how to measure it. ## Optimize Time to First Byte DevFeed: [Optimize Time to First Byte]() Original publisher: [Read original article]() Author: Barry Pollard X GitHub Mastodon Bluesky Homepage Jeremy Wagner GitHub LinkedIn Homepage Published: 2025-11-28T08:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [Latency](), [real user monitoring](), [Web](), [Caching](), [User Experience](), [Chrome]() Tags: [caching](), [chrome](), [latency](), [performance](), [time](), [user-experience](), [web](), [web-performance]() ### AI overview This tutorial explains how to optimize Time to First Byte (TTFB), a web performance metric that affects subsequent user experience metrics such as First Contentful Paint and Largest Contentful Paint. It covers measuring TTFB with field and lab data, understanding differences between them, and investigating redirects, server-side caching, and network conditions. ### Source excerpt Learn how to optimize for the Time to First Byte metric. ## and popover: Baseline layered UI patterns DevFeed: [and popover: Baseline layered UI patterns]() Original publisher: [Read original article]() Author: David A Herron Homepage Published: 2025-11-25T08:00:00Z Content type: article Language: en Sources: [web.dev: Articles]() Topics: [dialog](), [aria](), [browsers](), [Web](), [web applications](), [modern web development](), [JavaScript]() Tags: [aria](), [article](), [browsers](), [dialog](), [how-to](), [javascript](), [modal](), [ui](), [user-experience](), [user-interface](), [web-applications]() ### AI overview This article explains how to build modal and popover UI patterns with features built into modern web browsers. It demonstrates a sign-up modal that appears when a user tries to save an image to a favorites list without being logged in, and discusses the accessibility behavior required for modal dialogs. ### Source excerpt Learn how to build UI patterns for modal windows and prompts using the and popover web features. ## How to implement an image gallery using Baseline features DevFeed: [How to implement an image gallery using Baseline features]() Original publisher: [Read original article]() Author: Stacy Kvernmo Bluesky Homepage Published: 2025-10-29T07:00:00Z Content type: tutorial Language: en Sources: [web.dev: Articles]() Topics: [Web platform](), [HTML](), [browser](), [Developer Tools](), [Usability]() Tags: [browser](), [defer](), [demo](), [developer-tools](), [features](), [how-to](), [html](), [performance](), [techniques](), [usability](), [user-interface](), [web]() ### AI overview This tutorial demonstrates how to implement a web image gallery with Baseline features. It focuses on reducing performance costs from large image collections through HTML-based lazy loading, including images that are initially hidden in dialogs. ### Source excerpt Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features.