Frontend

DOM Order Matters

The importance of the default DOM order

Downloading resources in HTML5 - a[download]

Chrome now supports the HTML spec's new `download` attribute to `a` elements.

The HTML Drag and Drop API

The HTML5 Drag and Drop API lets developers make almost any element on a page draggable.

Efficiently load third-party JavaScript

Learn how to improve load times and user experience by avoiding the common pitfalls of using third-party scripts.

JavaScript eventing deep dive

Extract critical CSS

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.

Optimize Angular's change detection

Learn how to optimize your Angular app's change detection to make it more responsive.

Global and local variable scope

Learn about scope and how it works in JavaScript.

Web developer tools for debugging JavaScript issues in Google Search

How to debug SEO issues on individual pages or across an entire site.

Cross-browser paint worklets and Houdini.how

Learn how to implement cross-browser Houdini Paint API's and explore a world of Houdini worklets with Houdini.how.

How AMP can guarantee fastness in your Next.js app

How to file a good browser bug

Telling browser vendors about issues you find in their browser, on a specific device or platform is an integral part of making the web platform better!

Prevent unnecessary network requests with the HTTP Cache

The browser's HTTP Cache is your first line of defense against unnecessary network requests.

Icons and browser colors

Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.

Identify slow third-party JavaScript

Learn how to use Lighthouse and Chrome DevTools to identify slow third-party resources.

HTML Imports

The inert attribute

The inert property is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies.

IntersectionObserver's coming into view

IntersectionObservers let you know when an observed element enters or exits the browser's viewport.

Is it :modal?

This handy CSS pseudo-selector gives you a way to select elements that are modal.

JavaScript: What is the meaning of this?

Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…

The difference between JavaScript libraries and frameworks

Understand the differences between frameworks and libraries in the context of a client-side JavaScript environment.

CSS color-scheme-dependent colors with light-dark()

description: Define colors that react to the used color-scheme with the light-dark() function.

Loading WebAssembly modules efficiently

When working with WebAssembly, you often want to download a module, compile it, instantiate it, and then use whatever it exports in JavaScript. This post explains our recommended approach for optimal efficiency.

Are long JavaScript tasks delaying your Time to Interactive?

Learn to diagnose costly, work-preventing user interaction.

Media Source Extensions

Media Source Extensions (MSE) is a JavaScript API that lets you build streams for playback from segments of audio or video.

CSS min(), max(), and clamp()

Min, max, and clamp provide powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.

The <model-viewer> web component

The <model-viewer> web component lets you use 3D models on a web page declaratively.

Preload modules

Module preload offers a way of declaratively loading JavaScript modules ahead of time.

Monitor and analyze the app

What tools to use to keep track of and analyze the webpack bundle

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

User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us to usehr in a new era of responsive web design.

Use web workers to run JavaScript off the browser's main thread

The browser's main thread is incredibly overworked. By using web workers to shift code off the main thread, you can significantly improve your app's reliability and user experience.

Ten modern layouts in one line of CSS

This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

Optimize CSS background images with media queries

Use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images.

JavaScript Start-up Optimization

Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.

Precaching in Create React App with Workbox

Workbox is built into Create React App with a default configuration that precaches all static assets in your application with every build.

Precaching with the Angular service worker

Learn how to use the Angular service worker to precache the static assets in your app.

prefers-reduced-motion: Sometimes less movement is more

The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often prefer animations to be kept to a minimum.

Pre-render routes with react-snap

react-snap is a third-party library that pre-renders pages on your site into static HTML files. This can improve First Paint times in your application.

JavaScript Promises: an introduction

Promises simplify deferred and asynchronous computations. A promise represents an operation that hasn't completed yet.

Photoshop's journey to the web

Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a publi

Read files in JavaScript

How to select files, read file metadata and content, and monitor read progress.

Reduce JavaScript payloads with tree shaking

Knowing where to begin optimizing your application's JavaScript can be daunting. If you're taking advantage of modern tooling such as webpack, however, tree shaking might be a good place to start!

Registering a web-based payment app

Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.

Remove unused code

Analyze your JavaScript bundle to detect and remove unused code.

ResizeObserver: it's like document.onresize for elements

`ResizeObserver` notifies you when an element's content rectangle changes size so that you can react accordingly.

Route-level code splitting in Angular

Learn how to make your initial app bundle smaller by using route-level code splitting.

Route prefetching in Next.js

Same-origin policy

A browser can load and display resources from multiple sites. If there is no restriction on interactions between those resources, and if a script is compromised by an attacker, the script could expose everything on a user's browser.

Safe DOM manipulation with the Sanitizer API

The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page.

Script evaluation and long tasks

When loading scripts, it takes time for the browser to evaluate them prior to execution, which can cause long tasks. Learn how script evaluation works, and what you can do to keep it from causing long tasks during page load.

Semantics and screen readers

Assistive technologies rely on developers using semantic HTML. But what are semantics, and how do screen readers use them?

Introduction to ARIA

Introduction to ARIA and non-native HTML semantics

Service workers and the Cache Storage API

The browser's HTTP cache is your first line of defense. It's not necessarily the most powerful or flexible approach, and you have limited control over the lifetime of cached responses. But there are several rules of thumb that give you a sensible caching implementation without much work, so you should always try to follow them.

Shadow DOM 101

Shadow DOM 201

Shadow DOM 301

Shadow DOM v1 - Self-Contained Web Components

Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components

Getting Started with CSS Shapes

Sign-in form best practices

Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.

Towards an animation smoothness metric

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