Pointer lock and first person shooter controls
Porting USB applications to the web. Part 2: gPhoto2
Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.
Porting USB applications to the web. Part 1: libusb
Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.
Practical prompt engineering for smaller LLMs
Learn how to adjust your prompts to achieve your preferred results across different LLMs, models, and model sizes.
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.
Establish network connections early to improve perceived page speed
Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
Faster web navigation with predictive prefetching
Code splitting allows you to speed up your applications, but it may slow down subsequent navigation. Predictive prefetching is an efficient way to use data analytics to smartly prefetch what the user is likely to use next, optimizing network utilization.
prefers-color-scheme: Hello darkness, my old friend
Many devices now support an operating system wide dark mode or dark theme experience. This post explains how dark mode can be supported on web pages, lists best practices, and introduces a custom element named dark-mode-toggle that allows web developers to offer users a way to override their operating system level preference on specific web pages.
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.
Preload critical assets to improve loading speed
As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. The critical request chain represents the order of resources that are prioritized and fetched by the browser.
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Combining with font-display: optional is the most effective way to guarantee jank-free rendering of custom fonts.
Preload responsive images
Learn about new and exciting possibilities for preloading responsive images to ensure great user experience.
Don't fight the browser preload scanner
Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.
Prepare media files for the web
In this section you'll learn how to format video for mobile web playback, and how to create multiple files to cover a range of browsers, plus how to encrypt them.
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.
Profiling Web Audio apps in Chrome
Learn how to profile the performance of Web Audio apps in Chrome using `about://tracing` and the **WebAudio** extension in Chrome DevTools.
Progressively enhance your Progressive Web App
Progressive enhancements ensure your PWA remains useful on all modern browsers, while delivering an advanced experience on browsers that support newer web capabilities.
JavaScript Promises: an introduction
Promises simplify deferred and asynchronous computations. A promise represents an operation that hasn't completed yet.
Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
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
Codelab: Build a push notification client
A step-by-step interactive tutorial that shows you how to build a client that subscribes the user to push notifications, displays push messages as notifications, and unsubscribes the user from push notifications.
Common Issues and Reporting Bugs
There are right ways of using notifications, and ways of using them better. Learn what makes a good notification. We won't just show you what to do. We'll show you how to do it.