RLFO#23: Browsers, Wowsers

This post originally premiered on Random Links Found Online. Click this link to subscribe to the newsletter for regular updates straight to your inbox!

Since their conception some time around the 90s, browsers have evolved from green text on a black screen to the current “every app can be a Chrome app” behemoth of a software blob, including a rendering engine, a JS runtime, a compass in case you lose in the forest, 3 gallons of gasoline, and God knows what else. Chances are, you’re reading this in a browser, but do you really know how a browser works?

?? Populating the page: how browsers work

[link] Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals. And nothing loads faster or runs smoother than plain ol’ HTML with neither CSS nor JavaScript. But that’s not how modern apps work. We don’t simply serve text to web users, we serve interfaces and an experience. We don’t simply serve Web Sites, no. Nowadays serve Web Apps. So there’s more to a browser than simply DNS lookups and TCP handshakes.

?? Web Browser Engineering

[link] During this past year, I might have made some bold claims to my students. Claims like “you can write your own download manager” (remember IDM?) or “you can write your own HTTP server” or even “you can write your own CPU emulator”. Now I’m gonna make another one: you can write your own web browser. And this book grabs you by your hand and walks you through a forest of bugs, to finally arrive at your own web browser, written in Python and leading to too much humblebragging in the foreseeable future.

?? Writing Javascript without a build system

[link] Imagine a world without NPM and Webpack — or whatever them web kids are using these days. Imagine building a simple showcase website, a personal portfolio if you will, and not having to pull 4 GBs of node_modules. Imagine just pulling a dependency from a CDN, rather than having to compile transpile from a weird superset of CSS or JS to a simpler version of the language we all learned to start with.

?? How we reduced the size of our JavaScript bundles by 33%

[link] Most likely you don’t have a say whether your company will use a build system or not, they already used one when you joined the company and now it’s too late to just remove it. That doesn’t mean you can’t make it better. Almost all the time, bundlers naively bundle everything in the same bundle. Especially when you import a library only to use 2 out of its 2000 functions, you can end up with more dead weight in your bundles than you’d prefer. Here’s how Dropbox addressed this issue, resulting in smaller bundle size. And smaller means fffasterrr.

?? History of the browser user-agent string

[link] I love this piece of trivia: All browsers are roleplaying as Firefox. Not on how they work internally, on that part (almost) all browsers are roleplaying as Chromium. But when they present themselves to the world wide web, all browsers say “Hi, I’m Firefox” and then they say “sike, jk lol”. And the history behind it is somewhat hilarious and useless, but it explains why every User-Agent starts with “Mozilla 5.0”.