Encoding data for POST requests
Right now, when you go to copilot.github.com you're greeted with this example: async function isPositive(text) { const response = await fetch(`http://text-processing.com/api/sentiment/`, { method: 'POST', body: `text=${text}`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }); const json = await response.json(); return json.label === 'pos'; } This is bad and might result in sec
AVIF has landed
Back in ancient July I released a video that dug into how lossy and lossless image compression works and how to apply that knowledge to compress a set of different images for the web. Well, that's already out of date because AVIF has arrived. Brilliant. AVIF is a new image format derived from the keyframes of AV1 video. It's a royalty-free format, and it's already supported in Chrome 85 on desktop
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 party content is 'safe'. Third party images If I include the above, I'm trusting example.com. They may betr
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 Promise((r) => setTimeout(r, 1000)); // Toss a coin const isHeads = Boolean(Math.round(Math.random())); if (isHeads) return 'yay'; throw Error('Boo!'); } This ret
Netflix functions without client-side React, and it's a good thing
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: Download HTML & CSS in parallel. Wait for CSS to finish downloading & execute it. Render, and continue rendering as HTML d
Async iterators and generators
Streaming fetches are supported in Chrome, Edge, and Safari, and they look a little like this: async function getResponseSize(url) { const response = await fetch(url); const reader = response.body.getReader(); let total = 0; while (true) { const {done, value} = await reader.read(); if (done) return total; total += value.length; } } This code is pretty readable thanks to async functions (here's a t
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 is between browsers – I'd assumed it was a done deal & totally ready for production. This isn't an "HTT
ECMAScript modules in browsers
ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. <script type="module"> import {addTextToBody} from './utils.mjs'; addTextToBody('Modules are pretty cool.'); </script> // utils.mjs export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); } Live demo. All you need is typ
Service worker meeting notes - JakeArchibald.com
Posted 04 August 2016 - using my year's quota of bullets in one post 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 with any of this, please make your
The performance benefits of rel=noopener - JakeArchibald.com
If you have links to another origin, you should use rel="noopener", especially if they open in a new tab/window. <a href="http://example.com" target="_blank" rel="noopener"> Example site </a> 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-thankfully some legacy APIs mean it can naviga
Caching best practices & max-age gotchas - JakeArchibald.com
Posted 27 April 2016 - this post was brought to you by: procrastination! 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: Pattern 1: Immutable content
2016 - the year of web streams - JakeArchibald.com
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 combined with service workers to become the fastest way to serve content. Streams, huh! What are they g
The future of loading CSS
Posted 11 February 2016 - totally overshadowed by some waving gravity thing. Thanks Einstein. Chrome is intending to change the behaviour of <link rel="stylesheet">, which will be noticeable when it appears within <body>. 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 <
Tasks, microtasks, queues and schedules
Posted 17 August 2015 - hold onto your butts for this one, it's spec-heavy 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, if video's more your thing, P
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); xhr.responseType = 'json'; xhr.onload = function () { console.log(xhr.response); }; xhr.onerror = function
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 those were the patterns you needed, congratulations, you won the AppCache lottery (the jackpot remains u
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 features such as push messaging, background sync, geofencing and network control. In terms of network control
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 just doubled the size. Italic? Tripled. Bold-italic? Quadrupled. This is a huge deal if those fonts are
Promises: resolve is not the opposite of reject
Posted 13 March 2014 and still refusing to do promise-based puns 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 Promise((resolve, reject) => { resolve(something); }).then( () => console.log('Yey'
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 started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the pr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
