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 […]

RemoteDebug, an initiative to unify remote debugging across browsers

What if it was possible to use Chrome DevTools to debug Firefox, or use Firefox DevTools to debug Chrome? … The open web follows standards. Our tools should too. RemoteDebug, an initiative to unify remote debugging across browsers → Related: Sublime Web Inspector →

SlimerJS — A scriptable browser for Web developers

SlimerJS allows you to interact with a web page through an external JS script. It is useful to do functional tests, page automation, network monitoring, screen capture, etc. webpage .open(url) // loads a page .then(function(){ // executed after loading // store a screenshot of the page webpage.viewportSize = { width:650, height:320 }; webpage.render(‘page.png’, {onlyViewport:true}); // […]