Service workers at TPAC

Last month we had a service worker meeting at the W3C TPAC conference in Fukuoka. For the first time in a few years, we focused on potential new features and behaviours. Here's a summary: Resurrection finally killed reg.unregister; If you unregister a service worker registration, it's removed fro...

Probably?

Remy Sharp asked a question on Twitter that got me thinking about probability for the first time in a while. The problem Get your copybooks out now! Remy is using an image service that has an API which returns a URL for one of its images, picked at random. Remy makes five requests to the service,...

Probably?

Remy Sharp asked a question on Twitter that got me thinking about probability for the first time in a while. The problem Get your copybooks out now! Remy is using an image service that has an API which returns a URL for one of its images, picked at random. Remy makes five requests to the service,...

Who has the fastest website in F1?

I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm going to make my predictions the only way I know how: By...

Who has the fastest website in F1?

I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm going to make my predictions the only way I know how: By...

A declarative router for service workers

I'm looking for feedback on this API. It isn't yet supported in any standard or browser. In the very early days of service workers while they were still named "navigation controllers" we had the idea of a declarative router. This provided a high-level API to define the behaviour of particular...

A declarative router for service workers

I'm looking for feedback on this API. It isn't yet supported in any standard or browser. In the very early days of service workers while they were still named "navigation controllers" we had the idea of a declarative router. This provided a high-level API to define the behaviour of particular...

What happens when packages go bad?

I built spritecow.com back in 2011, and I no longer actively maintain it. A few months ago, a user berated me for using a crypto currency miner on the site without their informed consent. And sure enough, the site's JS had a small addition that loaded the mining JS, and sent the result somewhere...

What happens when packages go bad?

I built spritecow.com back in 2011, and I no longer actively maintain it. A few months ago, a user berated me for using a crypto currency miner on the site without their informed consent. And sure enough, the site's JS had a small addition that loaded the mining JS, and sent the result somewhere...

I discovered a browser bug

I accidentally discovered a huge browser bug a few months ago and I'm pretty excited about it. Security engineers always seem like the "cool kids" to me, so I'm hoping that now I can be part of the club, and y'know, get into the special parties or whatever. I've noticed that a lot of these securi...

I discovered a browser bug

I accidentally discovered a huge browser bug a few months ago and I'm pretty excited about it. Security engineers always seem like the "cool kids" to me, so I'm hoping that now I can be part of the club, and y'know, get into the special parties or whatever. I've noticed that a lot of these securi...

Third party CSS is not safe

A few days ago there was a lot of chatter about a 'keylogger' built in CSS. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But the real problem is thinking that third part...

Third party CSS is not safe

A few days ago there was a lot of chatter about a 'keylogger' built in CSS. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But the real problem is thinking that third part...

Arrays, symbols, and realms

On Twitter, Allen Wirfs-Brock asked folks if they knew what Array.isArrayobj did, and the results suggested… no they don't. For what it's worth, I also got the answer wrong. Type-checking arrays function fooobj // … Let's say we wanted to do something specific if obj is an array. JSON.stringify i...

Arrays, symbols, and realms

On Twitter, Allen Wirfs-Brock asked folks if they knew what Array.isArrayobj did, and the results suggested… no they don't. For what it's worth, I also got the answer wrong. Type-checking arrays function fooobj // … Let's say we wanted to do something specific if obj is an array. JSON.stringify i...

await vs return vs return await

When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject // Wait one second await new Promiser = setTimeoutr, 1000; // Toss a coin const isHeads =...

await vs return vs return await

When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject // Wait one second await new Promiser = setTimeoutr, 1000; // Toss a coin const isHeads =...

Netflix functions without client-side React, and it's a good thing

A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir. This shouldn't be a surprise The following: 1. Download HTML & CSS in parallel. 2. Wait for CSS to finish downloading & execute it...

Netflix functions without client-side React, and it's a good thing

A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir. This shouldn't be a surprise The following: 1. Download HTML & CSS in parallel. 2. Wait for CSS to finish downloading & execute it...

Lazy async SVG rasterisation

Phwoar I love a good sciency-sounding title. SVG can be slow When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images. Here's a demo, press "Scale SVG". Devtools timelin...

Lazy async SVG rasterisation

Phwoar I love a good sciency-sounding title. SVG can be slow When transforming an SVG image, browsers try to render on every frame to keep the image as sharp as possible. Unfortunately SVG rendering can be slow, especially for non-trivial images. Here's a demo, press "Scale SVG". Devtools timelin...

HTTP/2 push is tougher than I thought

"HTTP/2 push will solve that" is something I've heard a lot when it comes to page load performance problems, but I didn't know much about it, so I decided to dig in. HTTP/2 push is more complicated and low-level than I initially thought, but what really caught me off-guard is how inconsistent it ...

HTTP/2 push is tougher than I thought

"HTTP/2 push will solve that" is something I've heard a lot when it comes to page load performance problems, but I didn't know much about it, so I decided to dig in. HTTP/2 push is more complicated and low-level than I initially thought, but what really caught me off-guard is how inconsistent it ...

ECMAScript modules in browsers

ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. import addTextToBody from './utils.mjs'; addTextToBody'Modules are pretty cool.'; // utils.mjs export function addTextToBodytext const div = document.createElement'div'; div.textContent = text;...

ECMAScript modules in browsers

ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. import addTextToBody from './utils.mjs'; addTextToBody'Modules are pretty cool.'; // utils.mjs export function addTextToBodytext const div = document.createElement'div'; div.textContent = text;...

Combining fonts

&&&& I love the font Just Another Hand, I use it a lot in diagrams during my talks: Here it is! Yay! The thing is, I don't like the positioning of the hyphen & equals glyphs… Cache-Control: max-age=3600 They look awkwardly positioned – they sit too high. Thankfully CSS lets you merge fonts...

Combining fonts

I love the font Just Another Hand, I use it a lot in diagrams during my talks: Here it is! Yay! The thing is, I don't like the positioning of the hyphen & equals glyphs… Cache-Control: max-age=3600 They look awkwardly positioned – they sit too high. Thankfully CSS lets you merge fonts together, s...

Async iterators and generators

Streaming fetches are supported in Chrome, Edge, and Safari, and they look a little like this: async function getResponseSizeurl const response = await fetchurl; const reader = response.body.getReader; let total = 0; while true const done, value = await reader.read; if done return total; total +=...

Async iterators and generators

Streaming fetches are supported in Chrome, Edge, and Safari, and they look a little like this: async function getResponseSizeurl const response = await fetchurl; const reader = response.body.getReader; let total = 0; while true const done, value = await reader.read; if done return total; total +=...

Do we need a new heading element? We don't know

There's a proposal to add a new element to the HTML spec. It solves a fairly common use-case. Take this HTML snippet: Do you find the "plot" a distraction in movies? If so, you should check out "John Wick" - satisfaction guaranteed! This could be a web component, or a simple include. The problem...

Events and disabled form fields

I've been working on the web since I was a small child all the way through to the haggard old man I am to day. However, the web still continues to surprise me. Turns out, mouse events don't fire when the pointer is over disabled form elements, except in Firefox. Serious? Serious. Give it a go. Mo...

Fun hacks for faster content

A few weeks ago I was at Heathrow airport getting a bit of work done before a flight, and I noticed something odd about the performance of GitHub: It was quicker to open links in a new window than simply click them. Here's a video I took at the time: GitHub link click vs new tab Here I click a...

Sounds fun

I played with the web audio API for the first time recently, so I thought I'd write up what I learned. I think that's my job or something. Playing a sound The simplest demonstrable thing we can do with web audio is "play a sound". But to do that, we first we need to load & decode something: // Th...

SVG & media queries

One of the great things about SVG is you can use media queries to add responsiveness to images: circle fill: green; @media min-width: 100px circle fill: blue; But when should the circle be blue? The specs say min-width should match on the width of the viewport, but… Which viewport? …as above… Whi...

Service worker meeting notes

On July 28th-29th we met up in the Mozilla offices in Toronto to discuss the core service worker spec. I'll try and cover the headlines here. Before I get stuck in to the meaty bits of the meeting, our intent here is to do what's best for developers and the future of the web, so if you disagree...

The performance benefits of rel=noopener

If you have links to another origin, you should use rel="noopener", especially if they open in a new tab/window. Example site Without this, the new page can access your window object via window.opener. Thankfully the origin security model of the web prevents it reading your page, but no-thankfull...

Caching best practices & max-age gotchas

Getting caching right yields huge performance benefits, saves bandwidth, and reduces server costs, but many sites half-arse their caching, creating race conditions resulting in interdependent resources getting out of sync. The vast majority of best-practice caching falls into one of two patterns:...

Streaming template literals

Template literals are pretty cool right? const areThey = 'Yes'; console.log$areThey, they are; // Logs: Yes, they are You can also assign a function to process the template, known as "tagged" templates: function strongValuesstrings, ...values return strings.reducetotalStr, str, i = totalStr += st...

Control CSS loading with custom properties

Last week I wrote about a simple method to load CSS progressively, and on the very same day some scientists taught gravity how to wave. Coincidence? Yes. The pattern in the previous post covers the 90% case of multi-stage CSS loading, and it's really simple to understand. But would you like to he...

The future of loading CSS

Chrome is intending to change the behaviour of , which will be noticeable when it appears within . The impact and benefits of this aren't clear from the blink-dev post, so I wanted to go into detail here. Update: This is now in Chrome Canary. The current state of loading CSS …content… CSS blocks...

Service workers and base URIs

Previously when we've run into a contentious service worker design issue, we've asked web developers what they think. This has worked out pretty well in the past, with developer feedback directly informing spec changes. It's also great because we can blame y'all if you pick the wrong thing. Well,...

2016 - the year of web streams

Yeah, ok, it's a touch bold to talk about something being the thing of the year as early as January, but the potential of the web streams API has gotten me all excited. TL;DR: Streams can be used to do fun things like turn clouds to butts, transcode MPEG to GIF, but most importantly, they can be...

The anatomy of responsive images

I just had my responsive images epiphany and I'm writing it all down before I forget everything. This is what I know… Fixed size, varying density If your image is a fixed size in pixels, but you want to cater for screens of different density, here's the solution: img alt="A cat" width="320"...

Tasks, microtasks, queues and schedules

When I told my colleague Matt Gaunt I was thinking of writing a piece on microtask queueing and execution within the browser's event loop, he said "I'll be honest with you Jake, I'm not going to read that". Well, I've written it anyway, so we're all going to sit here and enjoy it, ok? Actually, i...

If we stand still, we go backwards

Recently, ppk claimed the web is going too fast in the wrong direction, and asked for a year's moratorium on web features. I was so angry I ran straight to a dictionary to find out what "moratorium" meant. Turns out it means "suspension". I got a bit snarky about it on Twitter, which isn't really...

That's so fetch!

There's been some confusion around the new fetch API recently. Let's clear things up. The first thing you'll notice about fetch is it's a massive improvement on XMLHttpRequest in terms of API design. Here's how to get some JSON using XHR: var xhr = new XMLHttpRequest; xhr.open'GET', url;...

The offline cookbook

Update: Together with Udacity I created a free offline-first interactive course. It involves taking an online-only site to full offline-first glory. Many of the patterns in this article are used. When AppCache arrived on the scene it gave us a couple of patterns to make content work offline. If...

Iterators gonna iterate

ES6 gives us a new way to iterate, and it's already supported in stable releases of Firefox, Chrome, & Opera. Here it is: for var num of 1, 2, 3 console.lognum; // Result: 1 // Result: 2 // Result: 3 Unlike for part in thing which iterates through property names of an object in a generic way, for...

Launching ServiceWorker without breaking the web

Update: Thanks to everyone who read and commented, you influenced the direction of the API. We're going for B, the path-based method, but allowing a header to relax these rules so you can put your worker script wherever you want. Many thanks! With ServiceWorkers you can control requests to any pa...

Using ServiceWorker in Chrome today

The implementation for ServiceWorker has been landing in Chrome Canary over the past few months, and there's now enough of it to do some cool shit! Unnecessary representation of "cool shit" What is ServiceWorker? ServiceWorker is a background worker, it gives us a JavaScript context to add featur...