The Ultimate Low-Quality Image Placeholder Technique — Harry notes the importance in offering a reasonably pleasant experience for users who find themselves waiting for images to load, explaining how Low-Quality Image Placeholders (LQIP) are one such possible answer. The problem however is they don’t particularly play nice with Core Web Vitals and Largest Contentful Paint (LCP). This post goes into any nuances to be aware of, along with how best to implement a solution.

Harry Roberts

How Photoshop is Now on the Web — Getting Photoshop onto the Web (where it has been for a little while now – we first covered Photoshop's journey to the Web in 2021) was the result of both a lot of collaboration and a myriad of modern browser technologies (WebAssembly, Web Components + Lit, Service Workers & more) that Addy covers in this post.

Addy Osmani

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Bosch sponsor

Flexbox Froggy: A Game for Learning CSS Flexbox — We first linked this eight years ago but this is still a neat introduction to flexible box layout which is now, at least, supported by basically every visual browser going.

Codepip

Chrome Now Shows Each Active Tab’s Memory Usage — Chrome Canary has neat new hover cards that show the memory usage for each open tab.

Addy Osmani

Get Ready for Interop 2024 — What you need to know about the cross-browser effort so far, what the plan is for Interop 2024, and how you can contribute to what’s included for next year.

Jen Simmons (WebKit)

Product For Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups.

Posthog sponsor

Upgrading Frontend Dependencies with Confidence — Tests can provide a way to see if our app logic isn’t working the way we expect, but what if a frontend component is rendering incorrectly? We can turn to visual regression testing. Sébastien, known for his work on Docusaurus, shares a workflow based on GitHub Actions, Playwright, and Argos that's suitable for this task.

Sébastien Lorber

From WebGL to WebGPU — Some tips for WebGL developers who are migrating to WebGPU.

François Beaufort

Using The Intl Segmenter API — Kilian shared on Twitter that he lost some time “trying to detect words in non-western language strings” but then learnt about the Intl.segmenter browser API. It has a ton of functionality for editing and formatting of text and numbers. This post shows us how to use it.

Kilian Valkhof

Animating Multi-Page Navigations with Browser View Transitions and Astro — A beginner-friendly guide, with demos and code, that walks you through the use of the Browser View Transitions API paired with Astro for a smoother navigation experience.

Igor Penaque

Misconceptions Can Kill Accessibility Momentum — Reflecting on accessibility misconceptions and how new standards and technologies can inadvertently add to them.

Eric Eggert

Making a Website is for Everyone — “The web’s low barrier to entry led me to a career that has been a boon for my life. I hope it can do the same for others.”

Jim Nielsen

Websites in the Dock — Did you know you can now launch web apps as standalone apps in (the newest version of) macOS?

Jeremy Keith

Viselect: Let Users Visually Select DOM Elements — If you’ve got a variety of elements and you want users to be able to select them in groups, individually, or even in multiple groups, this lets you offer that functionality easily. Can be used in a vanilla fashion or with integrations for React or Vue.js.

Simon Reinisch

Critical 6.0: Extracts and Inlines Critical Path CSS from HTML — A Node powered tool for when you want to optimize a page’s rendering to the max by inlining above-the-fold CSS.

Addy Osmani

Add Figma Like Collaborative Features in a Few Lines of Code — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK.

Ably sponsor

blog-cells: Add Runnable, Interactive Code Snippets on Pages — Like embedding a JSFiddle or Codepen, but these are a cleaner and minimal solution that work well in tutorials and in SSGs like Jekyll or Hugo. Try some examples here.

Varun Ramesh

MiniSim: A Native Mac Menubar App for Launching iOS and Android Emulators — It’s open source, includes various configuration settings for a handy mobile testing solution.

Oskar Kwaśniewski

Sprite Your SVGs: Paste SVG Code to Generate an Optimized Sprite — CSS sprites aren’t so much of a thing nowadays, but if you have a use case for an SVG sprite, this helps with the code generation.

José Donato