Inside a super fast CSS Engine: Quantum CSS (aka Stylo)

Great writeup on how Firefox’s new CSS Engine “Quantum CSS” works. Also sports a clear and in-depth explanation of the rendering pipeline, with some nice illustrations to go along. You may have heard of Project Quantum… it’s a major rewrite of Firefox’s internals to make Firefox fast. We’re swapping in parts from our experimental browser, …

Puppeteer – Headless Chrome Node API

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome. const puppeteer = require(‘puppeteer’); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(‘https://example.com’); await page.screenshot({path: ‘example.png’}); browser.close(); })(); Puppeteer – …

Chromeless Playground: Chrome Automation Made Simple

With Chrome 59 came the ability to run a Headless Chrome. Controlling it via code isn’t that easy nor elegant. Enter Chromeless (not be confused with Mozilla’s Chromeless): With Chromeless you can control Chrome (open website, click elements, fill out forms…) using an elegant API. This is useful for integration tests or any other scenario …

Understanding the Critical Rendering Path

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the “Critical Rendering Path”. Good and short writeup on …

Using Immutable Caching To Speed Up The Web

Firefox shipped with support for Cache-Control: Immutable: The benefits of immutable mean that when a page is refreshed, which is an extremely common social media scenario, elements that were previously marked immutable with an HTTP response header do not have to be revalidated with the server. No more 304‘s for those resources, because the browser …

Text-wrapping, hyphenation, emojis and what not

Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both “normal” strings and strings of emojis. The tests (and its rendering results per browser) are stored on Codepen and embedded below: 💩 and ⚠️ behave differently (click to enlarge): These tests left me with some …

Chrome “Go Back With Backspace” Extension

With the release of Chrome 52, the backspace button no longer navigates back when pressing it. Highly annoying, because the navigating back with the backspace button is just very, very handy (it only requires one finger/hand!). “Go Back With Backspace” is the official Google released Chrome Extension that restores this behavior (other – non-Google developed …

Safari Technology Preview

Safari Technology Preview is a version of Safari for OS X, distributed by Apple, that includes a cutting-edge, in-development version of the WebKit browser engine. It’s a great way to test upcoming WebKit features and give feedback to the people building them when it’s most useful — early in development. Think Webkit Nightly, but then …

Viewports Visualisation App

PPK: Instead of the work I was supposed to do I spent about a day and a half on the alpha version of a viewports visualisation app. It’s already been very useful to me, since figuring out how the viewports actually work is necessary for full understanding. I hope it does the same for you. …