はてなブックマーク

WebGPU is an upcoming Web API that gives you low-level, general-purpose access GPUs. I am not very experienced with graphics. I picked up bits and bobs of WebGL by reading through tutorials on how to build game engines with OpenGL and learned more about shaders by watching Inigo Quilez do amazing things on ShaderToy by just using shaders, without any 3D meshes or models. This got me far enough to

Add WebAssembly, get performance. Is that how it really works? The incredibly unsatisfying answer is: It depends. It depends on oh-so-many factors, and I’ll be touching on some of them here. Why am I doing this? (You can skip this) I really like AssemblyScript (full disclosure: I am one of their backers). It’s a very young language with a small but passionate team that built a custom compiler for

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. How did I get here? (You can skip this) I am late to the party, but I finally played “Return of the Obra Dinn”, the most recent game by Lucas Pope of “Papers Pleas

Redux is state management. State management belongs off the main thread. React is a popular web framework.Some love React for its component abstraction, some because of its vast ecosystem and some for its meta-platform properties. Note: I use words like “popular” or “often” being very aware that I am under the influence of the Web Development Twitter Echo Chamber™️. Your mileage may vary, proceed

No, not really. (It depends.) What does “slow” mean? I said it before, and I will say it again: If you didn’t measure it, it is not slow, and even if you measure it, the numbers are meaningless without context. That being said, the fact that people will not even consider adopting Web Workers because of their concerns about the performance of postMessage(), means that this is worth investigating. M

You should always use Web Workers. And in our current landscape of frameworks it’s virtually impossible. Did I get your attention with that? Good. Of course, as with any topic, there is nuance and I will lay that all out. But I have opinions, and they are important. Buckle up. The Performance Gap is widening Note: I hate the “emerging markets” terminology, but to make this blog post intuitive to a

A compiler is just a part of Emscripten. What if we stripped away all the bells and whistles and used just the compiler? Emscripten is a compiler toolchain for C/C++ targeting WebAssembly. But it does so much more than just compiling. Emscripten’s goal is to be a drop-in replacement for your off-the-shelf C/C++ compiler and make code that was not written for the web run on the web. To achieve this

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. When you go to WebAssembly.org, the very first thing you see is that it’s a “stack-based virtual machine”. It’s absolutely not necessary to understand what that means, or even look at the WebAssembly VM specification to make good

The answer is will-change: transform. Or is it? TL;DR: Unless you will change transform, don’t use will-change: transform. Use will-change: opacity or backface-visibility: hidden, as their side-effects are less disturbing on average. A primer to layers A very simplified rendering engine of a browser works as follows: Download and parse HTML, generating a DOM tree. Process styling to lay out the do

How do I copy an object in JavaScript? It’s a simple question, without a simple answer. Chinese translation: 中文版 Russian translation: русском Uzbek translation: O'zbek Call by reference JavaScript passes everything by reference. In case you don’t know what that means, here’s an example: function mutate(obj) { obj.a = true; } const obj = {a: false}; mutate(obj) console.log(obj.a); // prints true Th

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? TL;DR: You can use <foreignObject> to embed normal HTML content in an SVG, encode that SVG as a

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! What is Houdini? Have you ever thought about the amount of work CSS does? You change a single attribute and suddenly your entire website appears in a different layout. It’s kind of magic in that regard (can you tell where I am goin

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. Last Update: 2017-07-12 A few months have passed since that talk and the landscape keeps maturing and developing. The bigges