Idiosyncrasies of the HTML parser

Highly interesting book (in the making) by Simon Pieters, on how HTML parsers work:

The HTML parser is a piece of software that processes HTML markup and produces an in-memory tree representation (known as the DOM).

The HTML parser has many strange behaviors. This book will highlight the ins and outs of the HTML parser, and contains almost-impossible quizzes.

Not for beginning audiences!

Idiosyncrasies of the HTML parser →

Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images.

This article aims to cover most of the tools and approaches for optimizing images for the web.

Good to see that it also covers native lazy image loading. The smallest image still remains an image not loaded unnecessarily 😉

Optimizing images for the web – an in-depth guide →

💁‍♂️ Addy Osmani’s Essential Image Optimization is also worth a look.

Clicking Buttons: Inconsistent behavior across browsers

Great research by Zell Liew:

I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t.

In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies.

Great to see all those illustration gifs to show what’s going one. Must’ve taken a ton of work to create them all.

Inconsistent behavior among browsers when clicking on buttons →

“Can I email…” – Support tables for HTML and CSS in emails

Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client?

They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email.

Can I email… Support tables for HTML and CSS in emails →
Can I Email – Email Client Support Scoreboard →

😱 Digging back in the archive I noticed that “Can I use…” got mentioned here on bram.us about 10 (!) years ago … wow, has it been that long already?!

pagemap, a mini map navigation for web pages

Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages:

To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map:

<canvas id="map"></canvas>
#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}
pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

Installation per npm/yarn

$ yarn add pagemap

pagemap – minimap for web pages →
pagemap source (GitHub) →

Paint Holding in Google Chrome

One of the features that shipped with Chrome 76 is “Paint Holding”. It’s a technique that removes the “flash of white” – e.g. the white page you briefly see while the browser is loading the next page – when navigation between two pages on the same origin, thus delivering a smoother experience to the user.

The way this works is that we defer compositor commits until a given page load signal (PLS) (e.g. first contentful paint / fixed timeout) is reached. Waiting until a PLS occurs reduces likelihood of flashes of white/solid-color.

No idea what the fixed timeout is, but let it be another reason make your site as fast as hell 🙂

Paint Holding – reducing the flash of white on same-origin navigations →

Time to First Byte: What It Is and Why It Matters

Harry Roberts has done an extensive write-up on Time To First Byte (TTFB), an often overlooked metric when it comes to measuring the performance of websites.

While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one.

To see what happens during your TTFB, you can leverage the Server Timing API.

Time to First Byte: What It Is and Why It Matters →

AR.js: Efficient Augmented Reality for the Web

AR.js is Efficient Augmented Reality for the Web using ARToolKit. It is Fast! It runs efficiently even on phones. 60 fps on my 2 year-old phone! it is a pure javascript solution, fully opensource. It works on any phone with webgl and webrtc

AR.js: Efficient Augmented Reality for the Web →

Making accessibility simpler with ally.js

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the “web platform” should’ve provided itself, so JavaScript applications can be made accessible more easily.

An example of the things provided by ally.js is ally.maintain.tabFocus to trap TAB focus in dialogs for example, thus preventing the browser from shifting focus to its UI or to elements not contained in the dialog.

var handle = ally.maintain.tabFocus({
  context: '.dialog',
});

JS Bin on jsbin.com

ally.js

Implementing “Save For Offline” with Service Workers

Una Kravets implemented “Save For Offline” on her blog, using Service Workers. She described the reasoning, process, and code to implement.

With “Save For Offline”, if someone is reading your blog on the subway, and loses their Internet connection, they won’t lose their place. If they accidentally click and the browser refreshes, they won’t lose their place. If they want to save your article to read on an airplane or at at a café in a foreign country where they have no internet plan, they can do that. And if they just want to save battery and be on airplane mode, that’s cool too.

✨Magic.✨

Jeremy also did something similar, to make his Resilient Web Design work offline.

Implementing “Save For Offline” with Service Workers →
Making Resilient Web Design work offline →