Service worker mindset
Working with service workers is new and unfamiliar for many web devs. This post provides some tips for wrapping your mind around them.
Service worker registration
Best practices for timing your service worker registration.
What makes for a good sign-out experience?
Practical developer guidance about what to do when a user logs out of the website.
Sign-up form best practices
Help your users sign up, sign in and manage their account details with a minimum of fuss.
Signed Exchanges (SXGs)
An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.
How to set up Signed Exchanges using Web Packager
Learn how to serve signed exchanges (SXGs) using Web Packager.
Simplify paint complexity and reduce paint areas
Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
Scroll snapping after layout changes
Starting in Chrome 81, scrollers remain snapped when the page layout changes. In other words, you no longer need to add event listeners to force resnapping.
Social discovery
You can influence the way your site appears when shared via social media by adding a few lines of code to each page. This can help bring more people to your site by providing previews with richer information than would otherwise be available.
Avoiding Unnecessary Paints - Animated GIF Edition
Accelerated Rendering in Chrome
Parallaxin'
Deep dive into the murky waters of script loading
Avoiding unnecessary paints
Keeping things fresh with stale-while-revalidate
stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
Stick to Compositor-Only Properties and Manage Layer Count
Compositing is where the painted parts of the page are put together for displaying on screen.
Style focus
The focus indicator identifies the focused element. For users who can't or don't use a mouse, this indicator is extremely important, as it acts as a stand-in for their mouse-pointer.
Splash vector graphics on your responsive site
Handle range requests in a service worker
Make sure your service worker knows what to do when a partial response is requested.
Four common types of code coverage
Learn what code coverage is and discover four common ways to measure it.
Defining test cases and priorities
Determine what to test, define your test cases, and prioritize.
To test or not to test, a technical perspective
Determine what you need to test and what you can rule out.
Total Blocking Time (TBT)
This post describes the Total Blocking Time (TBT) metric and explains how to measure it
Text Alternatives for Images
Using the alt attribute to provide text alternatives for images
The Basics of easing
Learn how to soften and give weighting to your animations.
The end of Internet Explorer
What ending support for Internet Explorer meant for the customers and developers at Maersk.com.
What are third-party origin trials?
Getting started with Three.js
Top ways sites get hacked by spammers
Find out the ways that spammers can compromise your site.
A Simple Trip Meter using the Geolocation API
Time to First Byte (TTFB)
This post explains the Time to First Byte (TTFB) metric and shows how to measure it.
Time to Interactive (TTI)
This post introduces the Time to Interactive (TTI) metric and explains how to measure it
Two-way communication with service workers
How establish a two-way communication channel between the page and the service worker.
Understanding cookies
Learn about how cookies work and what are first-party and third-party cookies.
What are the parts of a URL?
What's the difference between a host, site and origin? What is an eTLD+1? This article explains.
Use Imagemin to compress images
Uncompressed images bloat your pages with unnecessary bytes. Run Lighthouse to check for opportunities to improve page load by compressing images.
Use push notifications to engage and re-engage users
Use push notifications to engage users with targeted, timely updates.
Use Search Console
Verify ownership then check your site using Search Console.
User Location
Most browsers and devices have access to the user's geographic location. Learn how to work with the user's location in your site and apps.
User preference media features client hints headers
User timing API
Using a PWA in your Android app
How to open a Progressive Web App in an Android app.
Using tabindex
Use the tabindex attribute to explicitly set an element's tab position.
Variable fonts in real life
Sharing a practical guide to variable fonts, with lots of examples.
The <video> and <source> tags
You've properly prepared a video file for the web. You've given it correct dimensions and the correct resolution. You've even created separate WebM and MP4 files for different browsers. For anyone to see it, you still need to add it to a web page.
Going beyond images with basic video for the web
Research shows that web video lead to higher engagement and sales. Even if you haven't added video to your sites yet, it's just a matter of time until you do.
New functionality for developers—brought to you by WebAssembly
A showcase of tools now available on the web thanks to WebAssembly.
WebAssembly Threads ready to try in Chrome 70
WebAssembly thread support has shipped in Chrome 70 under an origin-trial.
Augmented reality: You may already know it
If you've already used the WebXR Device API, you'll be happy to know there's very little new to learn. Entering a WebXR session is largely the same. Running a frame loop is largely the same. The differences lie in configurations that allow content to be shown appropriately for augmented reality.
Building components
Components are the building blocks of modern web applications. What best practices should you follow when building your own components so they can stand the test of time?
Web components: the secret ingredient helping power the web
This post sums up a talk on the state of web components in 2019, given by Kevin Schaaf of the Polymer Project and Caridy Patiño of Salesforce.
Web on Android
Learn how different components can be used to render web content inside Android apps.
Fill OTP forms within cross-origin iframes with WebOTP API
WebOTP API can now receive an OTP from within an iframe.
Web Payments overview
Learn more about Web Payments and how they work.
Updates to the Web Payments APIs
Since the launch of the Payment Request API in Chrome 53 and the Payment Handler API in Chrome 68, there have been quite a few changes made to their respective specifications. This post summarizes those updates and will continue accumulating those API changes.
Web storage overview
WebAPKs on Android
When the user adds your Progressive Web App to their home screen on Android, Chrome automatically generates an APK for you, which we sometimes call a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
WebAssembly feature detection
Learn how to use the newest WebAssembly features while supporting users across all browsers.
Case Study - A Tale of an HTML5 Game with Web Audio
