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...

Minimising font downloads

Optimising fonts is pretty difficult for larger sites. There's an easy solution, although only some browsers support it. Translations Français Fonts can be big Really big. They can be anywhere from 70k to many megabytes compressed of course, because why wouldn't you?. You want bold? Well, you jus...

What happens when you read a response?

There's a bit of disagreement over the behaviour of requests and responses in the fetch API, curious to know what you think… Setting the scene The new fetch API gives the web proper Request and Response primitives. fetch'/whatever'.thenfunctionresponse return response.body.asJSON; .thenfunctionda...

Service Worker - first draft published

The first draft of the service worker spec was published today! It's been a collaborative effort between Google, Samsung, Mozilla and others, and implementations for Chrome and Firefox are being actively developed. Anyone interesting in the web competing with native apps should be excited by this...

Improving the URL bar

iOS has hidden the pathname of URLs for some time now, but recently Chrome Canary introduced something similar behind a flag. I'm not involved in the development of Chrome experiment at all, but I've got more than 140 characters worth of opinion on it… We have a real security problem I recently...

visibility: visible undoes visibility: hidden

If you set an element to display: none the browser ignores all of its children, if a child sets itself to display: block it will remain hidden. This isn't true of visibility. Serious? Serious. html.show-only-the-button visibility: hidden; html.show-only-the-button .the-button visibility: visible;...

ES7 async functions

They're brilliant. They're brilliant and I want laws changed so I can marry them. Update: This feature is now shipping in browsers. I've written a more up-to-date and in-depth guide. Async with promises In the HTML5Rocks article on promises, the final example show how you'd load some JSON data fo...

Promises: resolve is not the opposite of reject

When I first started working with promises I had the overly simplistic view that passing a value into reject would mark the promise as "failed", and passing a value into resolve would mark it as "successful". However, the latter isn't always true. new Promiseresolve, reject = resolvesomething;...

The browser cache is Vary broken

Jake, why are your blog posts always so depressing? -- Domenic Denicola @domenic Well, I wouldn't want to disappoint… TL;DR If you use "Vary" to negotiate content, the responses will fight for the same cache space. Additionally, IE ignores "max-age" and Safari is buggy. Content negotiation using...

Don't use flexbox for overall page layout

When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn't really work. Why? Well, take my hand and follow me into the next section… Updat...

Progressive enhancement is faster

Progressive enhancement has become a bit of a hot topic recently, most recently with Tom Dale conclusively showing it to be a futile act, but only by misrepresenting what progressive enhancement is and what its benefits are. You shouldn't cater to those who have deliberately disabled JavaScript...

Having fun with

Did you know that this works in every browser? Look, here's one: An image You might think it's leaking from SVG, but SVG images don't use src, they use xlink:href. Let's all take a moment to laugh at xlink. Done? Ok… In the first age of the web, some people accidentally typed instead of . Browser...

Solving rendering performance puzzles

You're missing demos in this post because JavaScript or inline SVG isn't available. The Chrome team are often asked to show the process of debugging a performance issue, including how to select tools and interpret results. Well, I was recently hit by an issue that required a bit of digging, here'...

Animated line drawing in SVG

There's a demo you're missing here because JavaScript or inline SVG isn't available. I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I start...

Progressive enhancement is still important

About 5 years ago it felt like the progressive enhancement battle had been won, but after watching the reactions to Nicholas Zakas' "Enough with the JavaScript already" it seems all the old arguments are back with reinforcements. Well, I'm wearing my angry-pants and I'm ready for a jog down ranty...

I've only gone and done a blog

I've been promising myself I'd start a blog for about 100 years now, but it's finally here! I decided to build everything from scratch to force myself to learn Vagrant, Puppet and other general sysops stuff that was on my "to explore" list. This was dumb in terms of how long it took me to get...