Chrome Dev Summit is back! Visit to secure your spot in workshops, office hours and learning lounges!

Articles by Eric Bidelman

Engineer @ Google working on web tooling: Headless Chrome, Puppeteer, Lighthouse

The Reporting API

Reporting API brings a common infrastructure for the browser to send reports for various issues: CSP violations, deprecations, browser interventions, network errors, and feature policy violations.

ReportingObserver: know your code health

ReportingObserver gives developers insight into what their code is doing in the wild. ReportingObserver surfaces information on issues like deprecations and interventions, messages that were previously only available in the DevTools console.

Introduction to Feature Policy

Feature Policy allows developers to selectively enable, disable, and modify the behavior of certain APIs and features in the browser. It's like CSP, but for features! Shipped in Chrome 60.

Headless Chrome: an answer to server-side rendering JS sites

This article shows how to run headless Chrome and Puppeteer as part of your web server to "SSR" a static version of client-side JS apps for improved loading performance and better crawler indexability.

Working with the new CSS Typed Object Model

CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.

Take control of your scroll: customizing pull-to-refresh and overflow effects

The CSS overscroll-behavior property allows developers to override the browser's overflow scroll effects when reaching the top/bottom of content. It can be used to customize or prevent the mobile pull-to-refresh action.

An event for CSS position:sticky

Using position: sticky and IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!

Automated testing with Headless Chrome

How to setup Karma, Mocha+Chai, and Travis to run automated tests on Headless Chrome.

Getting Started with Headless Chrome

Headless Chrome (shipping in Chrome 59) is a way to run the Chrome browser in a headless environment. It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line.

Lighthouse January 2017 update

What's new in Lighthouse 1.5. New audits, extension updates, Performance Experiment, online Viewer features, and UI tweaks.

Building a Better Web with Lighthouse

What's new in Lighthouse. Redesign, new best practice audits, and an online report viewer.

BroadcastChannel API: A Message Bus for the Web

The BroadcastChannel API allows same-origin scripts to send messages to other browsing contexts. It can be thought of as a simple message bus that allows pub/sub semantics between windows/tabs, iframes, web workers, and service workers.

Shadow DOM v1: Self-Contained Web Components

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

Custom Elements v1: Reusable Web Components

Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.

Building the Google I/O 2016 Progressive Web App

Learn how we built a the Google I/O 2016 Progressive Web App (IOWA) using web components, Polymer, and material design and launched it into production on

IOWA is a single page application (SPA) that's built using web components, Polymer, Firebase, and has an extensive backend written in App Engine (Go). It pre-caches content for offline users using a service worker, dynamically loads new pages, gracefully transitions between views, and reuses content after first load.

Easy URL Manipulation with URLSearchParams

URLSearchParams trivial access and manipulation of the URL's query string

Web apps that talk - Introduction to the Speech Synthesis API

Introduction to the Web Speech API's synthesis feature.

Chrome Dev Summit: Polymer declarative, encapsulated, reusable components

Polymer is a gateway into the amazing future of Web Components. Learn more about Web Components and Polymer from the Chrome Dev Summit

What's the CSS :scope pseudo-class for?

Visualizing Shadow DOM Concepts

Canvas-driven background images

Powering a css background using canvas or webgl

Stick your landings! position: sticky lands in WebKit

Integrating input[type=file] with the Filesystem API

Arrived! xhr.send(ArrayBufferViews)

Don't Build Blobs, Construct Them

Processing XHR2 file uploads in PHP

Taking an Entire Page Offline using the HTML5 FileSystem API

HTML5 audio and the Web Audio API are BFFs!

Getting Rid of Synchronous XHRs

CSS Filter Effects Landing in WebKit

Transferable Objects: Lightning Fast!

'Stream' video using the MediaSource API

Let Your Content Do the Talking: Fullscreen API

Intro to the Full Screen API

WebSockets updated to latest version in Chrome Canary

Workers ♥ ArrayBuffer

Debugging the Filesystem API

Downloading resources in HTML5: a[download]

HTML5 Libraries/polyfills - Mid July

Don't Miss a Frame: Using the Page Visibility API + HTML5 Video

Registering a custom protocol handler

Contra in HTML5 + Web Audio API

Welcome to!