In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

Let’s talk about eliminating font stylesheets as a render-blocking resource, and walk through an optimal setup that not only makes Lighthouse happy, but also overcomes the dreaded flash of unstyled text (FOUT) that usually comes with loading fonts. We’ll do all that with vanilla HTML, CSS, and JavaScript, so it can be applied to any tech stack.

Today, ES2017 is the closest to modern syntax and tools such as npm, Babel, webpack, and Rollup have made it possible to configure your build system and write your packages using this syntax. This post covers several approaches, and you should use the easiest option that works for your use case.

My goal is to improve the user experience and the business outcome day by day. I am still looking for a tool that tells me what to focus on today to make the most significant impact. As this is the perfect time of the year to create a wish list, here is mine.

Reducing your web pages' size helps with both load time for people with slower internet connections and them having access to your pages in the first place.

Tech is always political. The way data is collected and handled is often biased, and many products are neither accessible nor inclusive. Ethical Design Guide is made to share resources on how to create ethical products that don't cause harm.

We believe that our system, coupled with a complete set of open-source models, would allow upcoming developers and us comprehensively study configurations under which optimizations fail to provide their advertised performance improvements.

Dropdown, navigation button, tooltip, collapsible panel, lightbox, tabs, switch like above…
UI components made in minutes without worried about JavaScript. Only set a few HTML attributes, and code the rest with your CSS skills.

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take over your entire front-end—in fact, it's not concerned with rendering HTML at all. Instead, it's designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.

There's an issue in Silicon Valley and I think the technology industry as a whole, we think adding features increases value, while adding features actually decreases the experience and the focus.

Cette chasse aux interstitiels doit être envisagée dans une approche plus globale d’allégement de son site ou de “désencombrement”.

Au-delà de faciliter la navigation, la réduction de la publicité au strict minimum et la suppression des images ou vidéos inutiles (entre autres) permettent de recentrer l’attention de l’utilisateur.

Excellent article, documenté et sourcé, sur les études sociolinguistiques explorant le rapport entre la langue écrite et orale, et la pensée, dans le cadre d'une langue inclusive.

Generating social share images with a serverless function and headless browser.

Because it takes time to set up a connection with the Google Fonts domains, and because that connection is needed before the render-blocking CSS can be downloaded, it can delay rendering metrics like Largest Contentful Paint.

Great resource to understand React, actually

A tour of the internals of Chrome's rendering architecture, tracing the steps in the pipeline from web content to display pixels. Concretizes high-level concepts with pointers to important classes and data structures in the codebase.

Lors de mes missions chez le client, j’estime que mon travail ne se contente pas de seulement développer telle ou telle fonctionnalité demandée, mais d’avoir un rôle de conseil et d’accompagnement.
De ce fait, lorsque le PO (oui je boss très souvent dans des contextes agiles), vient avec l’idée de placer des encarts de pubs, ou encore d’ajouter un formulaire en plusieurs étapes, ou d’ajouter une vidéo, mon rôle de Software craftsmanship intervient, et plutôt que de répondre

The answer is, as with most matters: It depends. Depending on the type of content you’re working with and the kind of information you’re asking for, it could easily either be one checkbox or two radio buttons. The collection of answers above can hopefully help you make a more informed decision. But as with all user interfaces, nothing beats the input you can get from user testing and research. So hopefully the answers above can at least serve as a starting point in situations where you need more to make a decision.

This is where another Sentry feature comes into play. After you’ve signed up and configured everything, head to the Performance section and you’ll see which transactions are getting better over time and which have regressed, or gotten slower