Control camera pan, tilt, and zoom
Pan, tilt, and zoom features on cameras are finally controllable on the web.
High DPI Canvas
Image filters with canvas
Canvas inspection using Chrome DevTools
Integrating Canvas into your Web App
No tears guide to HTML5 games
Typographic effects in canvas
Everything announced at Chrome Dev Summit 2021
A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
Choose the right image format
Selecting the right image format is the first step in delivering optimized images on your website. This post helps you to make the right choice.
Choosing the right easing
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
Chrome and Firefox soon to reach major version 100
User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.
Clean and maintain your site
This post explains how to clean up your site after it has been hacked.
Click to Call
On devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a phone number, more commonly known as click to call.
Clipboard patterns
A collection of common patterns for dealing with the clipboard.
Cumulative Layout Shift (CLS)
This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.
Address form best practices codelab
Learn best practices for address forms.
Art direction
In this codelab, learn how to load completely different images based on device display size.
Building resilient search experiences with Workbox
How to implement a resilient search experience with Workbox, using Background Sync and the Push API.
Use density descriptors
In this codelab, learn how to use density descriptors and srcset to load images with the right pixel density for the user's device.
Fix sneaky 404s
In this codelab, learn how to track down a sneaky 404 that may prevent your page from being properly indexed.
Make it installable
In this codelab, learn how to make a site installable using the beforeinstallprompt event.
Get started with the Notifications API
In this codelab, learn how to request user permission and send notifications.
Build a push notifications server
In this codelab, learn how to build a push notifications server.
Use a Service Worker to manage notifications
In this codelab, learn how to manage notifications with a service worker.
Payment form best practices codelab
Learn best practices for payment forms.
Same Origin Policy & Fetch requests
In this codelab, learn how the same-origin policy works when fetching resources.
Same Origin Policy & iframe
In this codelab, learn how the same-origin policy works when accessing data inside an iframe.
Creating WebP Images with the Command Line
In this codelab, learn how to serve optimized images using WebP.
Working with service workers
In this codelab, learn how to make an application reliable by registering a service worker.
Specifying multiple slot widths
In this codelab, learn how to use the sizes attribute to size images correctly depending on the user's viewport.
Google Community Guidelines and Anti-Harassment Policy for In-Person and Virtual Events
Community Guidelines
HowTo Components – Overview
HowTo Components
HowTo Components – howto-checkbox
HowTo Components – howto-tabs
HowTo Components – howto-tooltip
Using AVIF to compress images on your site
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.
Use conic gradients to create a cool border
Constructable Stylesheets
Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
Control focus with tabindex
When building custom interactive components, use tabindex to ensure that they're keyboard accessible.
Make your website "cross-origin isolated" using COOP and COEP
Learn how to set up the opt-in-based isolated environment, called cross-origin isolated, with COOP and COEP.
Creative list styling
A look at some useful and creative ways to style a list.
Critical Rendering Path
Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
Defragment cross-domain logins
Learn how to use architectural standards and solutions (such as metadata, cross-origin iframes, identity federation, and subdomain consolidation) to resolve cross-domain identity fragmentation and deliver a seamless user journey.
A guide to enable cross-origin isolation
Cross-origin isolation enables a web page to use powerful features such as SharedArrayBuffer. This article explains how to enable cross-origin isolation on your website.
Custom metrics
Custom metrics let you measure and optimize aspects of your site's experience that are unique to your site.
Working with Custom Elements
How to provide your own in-app install experience
Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.
Breaking down barriers using the DataTransfer API
The DataTransfer object holds data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.
Debug layout shifts
Learn how to identify and fix layout shifts.
Debug media playback errors on the web
Learn how to debug media playback errors on the web.
Deep dive into top web developer pain points
A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.
How to define your install strategy
Best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.
Designcember Calculator
A skeuomorphic attempt at recreating a solar calculator on the web that makes use of the ambient light sensor and the window controls overlay feature.
Web Developer Satisfaction
Web Developer Satisfaction is a Google project to gather information about the needs of web developers. The goal is a more reliable, predictable and interoperable web platform, enabling developers to invest in and trust it, and adopt and use new features to grow the platform and their business.
Device Orientation & Motion
Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass in mobile devices.
Pixel-perfect rendering with devicePixelContentBox
Since Chrome 84, ResizeObserver supports a new box measurement called device-pixel-content-box, that measures the element's dimension in physical pixels. This is crucial for rendering pixel-perfect graphics, especially in the context of high-density screens.
Accessing hardware devices on the web
This article helps Web developers pick the right hardware API based on a given device.
Disable mouse acceleration to provide a better FPS gaming experience
Web apps can now disable mouse acceleration when capturing pointer events.
Jumping the hurdles with the Gamepad API
Drawing to canvas in Emscripten
Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.