All articles
-
Rust to WebAssembly the hard way
What follows is a brain dump of everything I know about compiling Rust to WebAssembly. Enjoy.
-
I turned JS into a compiled language (for fun and Wasm)
This is one of those times where I got so fascinated by the idea of a thing that I forgot to ask myself whether it’s a good idea to build the thing. The idea being, transpiling JavaScript to C++ so I can compile that to whatever I need.
-
The cost of convenience
It is tempting to build abstractions so developers have to do less and build more. However, this can easily end up causing frustrations with developers if not done right.
-
WebGPU — All of the cores, none of the canvas
WebGPU is an upcoming Web API that gives you low-level, general-purpose access GPUs.
-
My approach to coding interviews: Optimize for iteration
A big part of interviews is development velocity and agility. And that can be optimized for.
-
<video>, HTTP range requests & WHATWG streams
Range requests allow a <video> tag to seek through a video file. Adding support to your dev server is a fun challenge and taught me some interesting things about WHATWG Streams.
-
Is WebAssembly magic performance pixie dust?
Add WebAssembly, get performance. Is that how it really works?
-
Why your phone’s portrait mode fakes the blur
Portrait mode artificially blurs out the background of an image to make it look... “better”. Turns out the reason this is done artificially is physics more than anything else.
-
Ditherpunk — The article I wish I had about monochrome image dithering
I always loved the visual aesthetic of dithering but never knew how it’s done. So I did some research. This article may contain traces of nostalgia and none of Lena.
-
Case study: Moving a Three.js-based WebXR app off-main-thread
Keeping the frame rate stable is vital for virtual reality applications. Off-main-thread architecture can help ensure that the frames keep shipping.
-
Streams for reactive programming
Can you use WHATWG Streams for reactive programming? It seems so. But is it a good idea?
-
React + Redux + Comlink = Off-main-thread
Redux is state management. State management belongs off the main thread.
-
Is postMessage slow?
No, not really. (It depends.)
-
When should you be using Web Workers?
You should always use Web Workers. And in our current landscape of frameworks it’s virtually impossible.
-
Compiling C to WebAssembly without Emscripten
A compiler is just a part of Emscripten. What if we stripped away all the bells and whistles and used just the compiler?
-
Raw WebAssembly
Can you use the DOM in WebAssembly? Rust says yes, other people say no. Before we can resolve that dissonnance, I need to shine some light on what raw WebAssembly can do.
-
Less Snake Oil, More Context
I want to change how we — as a community — approach, analyze, and understand performance problems. Often I see questions like "What's the best way to do X?", "What is the fastest library to do Y?". Superlatives are human nature, it seems. But for performance work, they can be counter-productive.
-
Headless Web Development
The neat thing about DSLRs is that you can swap lenses, but the body of the camera stays exactly the same. Different lenses for different jobs, but the business logic — the core action of photography taking pictures — is in the body, and between them is a standardized mount system. I want to show how this idea can apply to the web.
-
Lights, Camera, Action!
Whenever Jake and I shoot a new episode of HTTP203, you see the two of us having an incessantly long conversation. What you don’t see is the crew of people that work quite literally behind the camera: lights have to be dimmed, as much voice with as little noise as possible has to be recorded, cameras have to be started and focused. What if we took a page from a professional video crew’s playbook?
-
The 9am rush hour
Rush hour is the worst time of day to travel. For many it’s not possible to travel at any other time of day because they need to get to work by 9am. This is exactly what a lot of web code looks like today: everything runs on a single thread, the main thread, and the traffic is bad.
-
My most useful RegExp trick
I don’t often use RegExp. But when I do, it’s a variation of this pattern.
-
Layers and how to force them
The answer is will-change: transform. Or is it?
-
Deep-copying in JavaScript
How do I copy an object in JavaScript? It’s a simple question, without a simple answer.
-
“An Actor, a model and an architect walk onto the web...”
Everything old is new again. Let’s take a concurrency model from the 70s and apply it to the web in 2017. Why? Well, read on, will ya?
-
2018: 120fps and no jank
The first consumer devices with variable framerates up to 120Hz are reaching the market and it makes for a notably different user experience. Websites, however, often seem to struggle to reach 60fps — how can we even talk about 120fps then?
-
Comlink + WebRTC — An Intro to WebRTC
WebRTC is cool. WebRTC is hard. WebRTC is painful, actually. Partly due to how alien the API feels, partly due to many tutorials skipping a lot of the details. Here’s my attempt at describing WebRTC and how I used it for some fun Comlink experiments.
-
DOM2Texture: Abusing Arcane APIs
When using OpenGL (or WebGL), you have to do everything yourself, including font rendering and layouting. I thought: “Wouldn’t it be great if you could just reuse the browser’s layouting and font-rendering engine instead of heaving to reinvent the wheel?”. Yes, but there’s no API for that. Or is there?
-
DIY Web Animations: Promises + rAF + Transitions
The Web Animations API is great. Except that support is mediocre at best. I keep finding myself re-creating them using Promises, rAF and CSS Transitions, which turned out to be pretty ergonomic.
-
Chromium Bug Tracker: All bugs with >32 stars get fixed?
Ah, Betteridge's law of headlines strikes again. The answer to the headline is “No”. Sorry.
-
DevDiary Underdash: Progressive Enhancement, Graceful Degradation and Accessibility
I wrote a thing, made everything keyboard controllable and yet Rob Dodson said its accessibility sucked. WHY?!!
-
How to read web specs Part IIa – Or: ECMAScript Symbols
Two browsers behave differently when given the same code. Which one is the buggy one? The spec is almost guaranteed to contain the answer, but it’s notoriously hard to read. Maybe this will help.
-
How to read web specs Part I – Or: WebVR, how do you work?
If you are like me and you like to live on the bleeding edge, you will probably have encountered the lack of tutorials, introductions or HowTos for new web APIs. If a new “thing” has actually made it into a browser, like Firefox Nightly or Chrome Canary, the only thing you might have at your disposal is probably the API spec and those tend to be hard to navigate and – fair warning – can turn out to be pretty unreliable.
-
Compositor Worklet evolves into Animation Worklet!
Did you see that Pokémon Go reference? Gotta get down with the kidz.
-
Lazyloading
Progressive enhancement At the PWA Roadshow event in London, Stuart Langridge pointed out a mistake in my talk. I was showing a piece of code that would lazyload iFrames. If JavaScript was not running, the iFrames would just be empty. Turns out, that is not how you do progressive enhancement!
-
New ways to make your web app jank with Houdini – An introduction
Clickbait blog post titles. Gotta love ’em. And this post doesn’t mention jank. You have been lied to!
-
Setting up HTTP/2
At Chrome Dev Summit 2015 I gave a talk about HTTP/2. I am genuinely excited about the benefits HTTP/2 brings to the web, to its developers and its users alike. If you don’t know about those, I’ll cheekily recommend my own talk – this post is more of a follow-up to the talk.
-
Maelstrom Gaming and 12 fps
Maelstrom Gaming is a team competing in League of Legends. But that’s not what this is about. This is about their homepage and parallax scrolling.