Surma is a contributor to WebFundamentals
Replacing a hot path in your app's JavaScript with WebAssembly
One key benefit that WebAssembly offers is predictable performance across browsers. But how do you turn hot path written in JavaScript into WebAssembly?
Emscripten and npm
How do you integrate WebAssembly into this setup? In this article we are going to work this out with C/C++ and Emscripten as an example.
Houdini's Animation Worklet
Animation Worklet allows you to write imperative animations that run at the device's native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time.
Emscripten’s embind
Generate JavaScript bindings for your C/C++ code.
Emscripting a C library to Wasm
Wasm allows you to run C code on the web.
Meltdown/Spectre
Implications for Web Developers and Chrome’s mitigations.
CSS Paint API
Houdini’s CSS Paint API allows you to programmatically draw CSS images.
Animating a Blur
A few tricks are necessary to animate a blur efficiently.
HowTo: Components – howto-checkbox
Supercharged Live Stream Blog: Code Splitting
“Code splitting” and “route-based chunking” are some of the new buzzwords in web development. But what do they mean and how can you implement them?
HowTo: Components – howto-tabs
HowTo: Components – howto-tooltip
HowTo: Components – Overview
"HowTo: Components"
CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar
Custom transform matrices allow you to build frame-perfect custom scrollbars.
CSS Grid – Table layout is back. Be there and be square.
CSS Grid Layout makes creating two dimensional grid based layouts easy. It's been in development for over 5 years, but is now available in Chrome and coming to other browsers soon. Let's take a peek at what's new and how you can use it on your sites!
Including Videos
If your video is short and you want it to auto-play—basically, if you are considering a GIF—then this guide might be just what you need.
ResizeObserver: It’s Like document.onresize for Elements
ResizeObserver lets you know when an element has changed its size.
Introduction to HTTP/2
HTTP/2 (or h2) is a binary protocol that brings push, multiplexing streams and frame control to the web.
Complexities of an Infinite Scroller
Infinite scrollers are a common UI pattern. Here we explore how to implement this pattern in a memory conservative way that performs at 60fps.
Houdini: Demystifying CSS
Houdini is a collection of APIs that expose the CSS engine’s internals to developers
IntersectionObserver’s Coming into View
IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.