A Netflix Web Performance Case Study
- Addy Osmani tl;dr: By refining the JavaScript used for Netflix.com’s sign-up process and using prefetching techniques, the developer team was able to provide a better user experience for both mobile and desktop users and offer several improvements. (1) Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com). (2) JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side. (3) Prefetching HTML, CSS and JavaScript (React) reduced Time-to-Interactive by 30% for future navigations.featured in #563
featured in #541
Hardest Problem in Computer Science: Centering Things
- Nikita Prokopov tl;dr: Nikita discusses the struggles of properly centering text and icons despite the advances of modern CSS. He discusses problems with: (1) font metrics where the bounding box of a text block is not balanced around the cap height. (2) Line heights that complicate centering. (3) Icon fonts that convert icons into text.featured in #507
The Hidden Depths Of The Input Element
- Phil Nash tl;dr: "The <input> element is the most fascinating element in HTML. Most elements behave the same way regardless of their attributes, the type attribute of the <input> element can take 1 of 22 different values that gives it not only different behaviour, but a different visual appearance too. I want to look beyond the various types that the <input> can embody, to the attributes you may not know about. Attributes that tweak the behaviour of the <input> to make it more usable, more accessible, and more applicable to various situations. Let's dig in."featured in #473
Building Modern Web Applications: 5 Essential Frontend Architecture Principles
- Patrick Roos tl;dr: Principles you should always follow: (1) Async or defer load, consider the critical path. (2) Tree-shake, consciously bundle and eliminate dead code. (3) Define and respect a performance budget. Principles you should follow when possible: (4) Stick to the web platform APIs and web standards. (5) Use new generation frontend frameworks. Patrick discusses each in this post.featured in #464
Useful DevTools Tips And Tricks
- Patrick Brosset tl;dr: (1) Zoom DevTools. (2) Delete annoying overlays. (3) List the fonts used on a page. (4) Measure arbitrary distances on a page. (5) Detect unused code. And more.featured in #427
The Modern Way Of Serving Images
- Jacob Groß tl;dr: "The following article will guide you through responsive image techniques, and introduce a novel technique that aims to make <img> tags work (almost) like <picture> tags, making migration in existing codebases easier. With the reduced engineering effort, this hopefully helps you improve the images on your website in 2023.”featured in #423
Watch Transitions in Slow Motion in Chrome’s DevTools
- Jim Nielsen tl;dr: “The animations panel lets you slow down the animations happening in the browser so you watch them play out at much slower speeds and troubleshoot the mechanics of the animation.”featured in #420
featured in #408
6 CSS Snippets Every Front-End Developer Should Know In 2023
- Adam Argyle tl;dr: (1) A container query. (2) Scroll snap. (3) Grid pile (4) Quick circle. (5) Control variants with @layer. (6) Memorize less and reach more with logical properties.featured in #405