What do people want from a news experience?
It might be surprising. But it's all possible on the web. Read More
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
Living with Web Apps
A spent a while living just with web apps. Here is my report. Read More
This is the web platform
This is the web platform Read More
Add to home screen is not what the web needs. Is it?
Maybe? :) Read More
Using the Github API to optimise your workflow
We've done a lot of work using Github in the recent past and here is some of the work that we have optimised. Read More
Auto-deploying Jekyll via Github
This post announces the implementation of automatic deployment for this blog, powered by Jekyll (Octopress) and GitHub WebHooks. The previous workflow involved local editing, committing to GitHub, and deploying via SSH using rake deploy
. The new process leverages GitHub WebHooks and a modified version of Github-Auto-Deploy to automatically pull, build, and deploy changes upon pushing to the GitHub repository, simplifying the deployment process and eliminating the need for terminal access and SSH keys.
Read More
Detecting critical above-the-fold CSS
I recently used Page Speed Insights for Mobile to improve my blog's page load time and one of the key recommendations was to reduce render-blocking CSS above the fold. This led me to explore the concept of critical CSS, which is the minimum CSS required to render the initial view of a page. I developed a proof-of-concept tool (bookmarklet and devtools snippet) that analyzes the DOM and extracts the critical CSS by iterating through visible elements and using window.getMatchedCSS()
. This tool helps identify unnecessary CSS, integrate into build processes for optimization, and potentially generate page-specific CSS files for improved performance. It currently has limitations, working only in WebKit/Blink, ignoring media queries, and not handling pseudo-elements.
Read More
Hackathons don't win you customers
I've run hackathons and learned they're not for winning customers. They're not about startups or brand awareness. They're about learning and improving your product. Treat them like beta tests where developers help find bugs and make your platform better. Focus on making your platform valuable and easy to integrate with. Reward developers for providing feedback, not just cool demos. Read More
Another experiment in creating a mobile friendly table of contents
I've been working on making html5rocks.com more mobile-friendly, focusing on reducing "Time to first read". The main culprit was the Table of Contents (ToC). My initial experiment with an offscreen ToC using CSS had cross-browser inconsistencies. Now, using existing JS, the ToC is fixed to the footer and toggled into view. I'm still exploring pure CSS solutions. Initially, I favored a small scrollable ToC at the bottom, but Paul Lewis suggested a full-screen ToC, which proved better. It minimizes distractions and clutter, provides more screen space for a readable, easily navigable ToC with larger touch targets and subtle hierarchy, even for long lists. The before/after screenshots demonstrate the improvement. Read More
Experiments in buildinig a mobile friendly table of contents
I'm experimenting with mobile-friendly table of contents designs for HTML5Rocks. The current ToC takes up too much screen space, hindering access to content. My goal is to improve user experience by getting readers to the content faster. My "Bottom ToC" experiment anchors the ToC to the bottom, expanding on tap and collapsing when the main content is tapped. It uses position: fixed
and the :active
pseudo-class, requiring no JavaScript and keeping the rendered HTML consistent between desktop and mobile. Though it has minor scrolling issues, it effectively minimizes initial ToC screen coverage while remaining accessible.
Read More
Installing Chrome for Android on an emulator
Installing Chrome for Android directly onto an emulator isn't possible, as it's only available via the Play Store. However, you can install the Chromium Test Shell, an open-source, functional version of Chromium without Chrome's usual interface. Although it lacks features like bookmarking and sync, it supports remote debugging. Find recent builds online and install them via adb. I've even created a script to automate downloading, extracting, and installing the latest Chromium Test Shell build, available on GitHub. Read More
Screen Recording from your Android device
For our Google I/O 2013 talk, we needed a way to seamlessly showcase live demos on an Android device. Projector switching was clunky, so we pre-recorded the demos for smoother transitions. This post details our process. We used a Blackmagic Intensity Shuttle to capture high-quality HDMI output from a Galaxy Nexus (which thankfully doesn't enforce HDCP on HDMI). This setup, along with the Orientation Control app to maintain portrait mode, allowed us to create polished, in-line video demos. While this solution isn't cheap, the quality and seamless integration were worth the investment. Read More
Bootstraping your own mobile web testing lab for Android Part 1
In this blog post, I share a simple shell script to help you create your own mobile web testing lab for Android. The script uses adb to connect to attached Android devices, sets up port forwarding for Chrome DevTools, and opens the browser on each device. It's a starting point towards my goal of using a Raspberry PI to host adb and all connected devices, simplifying multi-device testing. Read More
Traffic-lights with CSS
I wanted a traffic light system on iwanttouse.com to visually represent feature support. Initially, I used simple CSS classes like .good
(green), .ok
(amber), and .bad
(red), but this required clunky conditional logic to handle the color transitions based on percentage support. Paul Lewis suggested using HSL which allows for smooth transitions between red, amber, and green by adjusting the Hue value (0-359). Now, I can dynamically set the color using element.styles.color = \"hsla(\" + ((percentage / 100) * 90) + \", 50%, 50%)\";
which maps the percentage support to a Hue value between 0 (red) and 90 (green).
Read More
Dear AppCache we need to talk.
AppCache, while crucial for offline web apps, has significant issues. One major problem arises when integrating with APIs like registerProtocolHandler or registerContentHandler, which use query parameters. AppCache caches each unique URI, including query strings, separately. This is fine online, but offline, only previously cached URIs with specific query strings will work. Updating the app cache also causes every unique URL stored in the app cache group to be re-downloaded, even if they're not in the current manifest, potentially leading to server overload. This post highlights these issues and calls for better documentation and patterns for offline app development. Read More
I am willing to pay someone to move my blog from Posterous.
I love Posterous, but it's time for my blog to move on. I'm looking to hire someone to migrate my blog to a new platform. Must-haves include: static site generation, git integration, markdown/text/HTML support, preserving my current URLs and all imported posts, and full template control. Ideally, it won't be Ruby-based. I'm not concerned about hosted solutions, a fancy CMS, or comments. Read More
The New iPad is the perfect name
Apple has a clever naming strategy with "The New iPad." Customers naturally ask for the "new" version of products, avoiding confusion and instantly clarifying which model they want. This approach bypasses complex product names and generations. I predict Apple will continue this with other products like the iPhone, simplifying their branding and customer experience. Read More
We need to kill off the localStorage API
LocalStorage is a flawed API with poor querying, performance issues, limited storage, inconsistent event handling, and locking problems. Its only advantages are its simple semantics and browser support. Continued use of LocalStorage hinders the development of robust offline and client-side web apps. We should transition to IndexedDB, a superior alternative. I've demonstrated this by converting the BackboneJS TodoMVC example from LocalStorage to IndexedDB using Julien Genestoux's adapter. This involved a few configuration changes, highlighting the ease of adopting IndexedDB, which is our only viable path forward for client-side storage. Let's abandon LocalStorage and embrace IndexedDB to unlock the potential of offline web apps. Read More
On Vendor Prefixes
I'm excited about Mozilla's consideration of implementing webkit prefixes and starting a conversation around this. I believe that switching prefixes should only happen if the vendor is willing to drop their existing prefix in favor of another for the sake of standardization. Developers often target specific prefixes based on the dominant browser for their target audience (like WebKit for mobile). While I appreciate Remy Sharp's take, I disagree with his proposed solutions. I think prefixes should be dropped only when committing to another, and that the "production ready browser" idea is unrealistic. We should focus on educating developers on tools for handling prefixes. Read More
Getting your app to support Web Intents on Chrome
Chrome Dev and Canary (18+) now support Web Intents! Currently, intent registration is done via the Chrome apps manifest (not the intent tag) to allow the user agent to determine available services (including those on the local network or external native apps). The manifest entry specifies the supported action, data types, title, and path. Client-side code remains the same. Future support for declaring capabilities directly through HTML with the Intent tag is planned. Read More