Joan León

This is me a couple of days before the first release of PostCSS.

From my new article about the history of PostCSS and the lessons I learned from it (for example, how to break an API when you have 400M downloads per month).

evilmartians.com/chronicles/w...

Same code, same infrastructure, different context. Web performance is sometimes an ‘us thing’ and sometimes a ‘them thing’. For better or worse, we have a responsibility to cater to both.

Have you used yield patterns in your projects? I’d love to hear your experiences.

How To Improve INP: Yield Patterns Detailed insights into patterns like await-interaction-response, yieldToMain, yieldUnlessUrgent & tips for faster Interaction-to-Next-Paint (INP).

I’m currently conducting a Web Perf Review for a client, and it’s the perfect excuse to revisit @kurtextrem.de’s brilliant article “How To Improve INP: Yield Patterns.”

Hands down, one of the best reads out there if you want to truly understand and apply this pattern

#WebPerf #INP #CoreWebVitals

GitHub - slightlyoff/wpt-embed: Web Components for displaying WPT traces, and scripts for saving them for display Web Components for displaying WPT traces, and scripts for saving them for display - slightlyoff/wpt-embed

If you liked the embedded WebPageTest.org traces in my latest blog[1], I cleaned up the code and wrote some docs for it:

github.com/slightlyoff/wpt-…

You can grab it via NPM:

npmjs.com/package/@slightl…

[1]: infrequently.org/2025/06/conferen…

Two-panel meme. In the first panel, a “Designer” character is secretly handing an “SVG” file to a “Developer” during a test. In the second panel, the developer looks frustrated while staring at a long block of embedded base64 image code inside the SVG file. The humor highlights the pain of receiving an SVG file that contains large, unreadable base64 image data instead of clean vector code.

Screenshot of an SVG file that includes an embedded image using base64 encoding. The image is inserted directly within the <image> tag using the xlink:href attribute, rather than linking to an external file. This means the entire image is stored inside the SVG as base64 data.

#WebPerfTip Avoid embedding raster images directly in SVGs

ℹ️ In this case, the image is a vector graphic

#WebPerf #Perfomance #WPO #ImagePerf

SpeedCurve | Why you need to know your site's performance plateau (and how to find it) Have you ever wondered why your site got faster, but your business and user engagement metrics didn't change? Here's why.

This essential post by @tammyeverts.com chimes with my experiences; teams I talk with don't understand that there are huge gains to be had when they finally get perf under thresholds that they think of as "impossible" with today's JS-laden stacks:

speedcurve.com/blog/web-perform…

Thanks for all the performance tips & knowledge you shared with us @perf.reviews. Great storytelling & rhythm, hidden gems, and very concrete materials.

@backmarketeng.bsky.social folks were captivated, and locked on the leads you provided.

Highly recommended!

How much vacation days do you get at your new job? Since it is a US company the vacation laws are very different from EU, no? In EU we enjoy 20 days of paid vacation time.

it’s very generous!

i think, just as now, the main problem will be ensuring i take holiday - and not coding while in holiday 😭

(actually i find i come up with the best ideas when i’m somewhat offline)

roe.dev/ama

#ama

This week, we had the great opportunity to deliver the Web Performance Workshop to the amazing tech team at Back Market

It was two days of sharing knowledge, answering questions, and identifying areas for improvement.

#WebPerf #WebPerfTraining #PerfReviews

Building Large Scale Web Apps | A React Field Guide Learn tools and techniques to build and maintain large-scale React web applications. Written by Addy Osmani and Hassan Djirdeh.

Building Large Scale Web Apps
largeapps.dev

By @addyosmani.bsky.social and Hassan Djirdeh

Modularity "The secret to building large apps is never to build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application." [Justin Meyer] One of the key principles of building large JavaScript applications is to modularize and componentize code. This can be described as dividing an application into small, independent modules or components that can be developed and tested independently.

"The secret to building large apps is never to build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application."

YouTube video by Jad Joubran CSS "if conditions" are here! 🔥

CSS now has "if conditions"!

Check out how you can create media() and style() if conditions :D

#css

The Case for Software Craftsmanship in the Era of Vibes - Zed Blog From the Zed Blog: Working toward genuine, quality software in an era where code production is not the constraint anymore.

The Case for Software Craftsmanship in the Era of Vibes

As software engineers, we should measure our contribution not in lines of code generated, but in reliable, well-designed systems that are easy to change and a pleasure to use.

zed.dev/blog/softwar...

SPDY RECAP in 60 seconds: Estela Franco @guaca.bsky.social shares potential impact of Early Hints at Shopify
🎥 Full Video: www.youtube.com/watch?v=d0EC...

GitHub - anthropics/prompt-eng-interactive-tutorial: Anthropic's Interactive Prompt Engineering Tutorial Anthropic's Interactive Prompt Engineering Tutorial - anthropics/prompt-eng-interactive-tutorial

👉 @anthropic.com's Prompt Engineering Interactive Tutorial

- Structure of a good prompt
- Common failure modes and learn the '80/20' techniques to address them
- Understand Claude's strengths and weaknesses
- Build strong prompts from scratch

github.com/anthropics/p...

#AI #PromptEngineering

@carlosazaustre.bsky.social

advocu-mcp-server MCP Server for Advocu - Reporting Tool for GDEs. Latest version: 0.1.1, last published: 6 minutes ago. Start using advocu-mcp-server in your project by running `npm i advocu-mcp-server`. There are no ...

👋🏼 GDE colleagues, my friend Carlos Azaustre has just published an Activity Reporting MCP Server to publish to Advocu

www.npmjs.com/package/advo...

#GDE

bbrew installed screenshot

Bold Brew (bbrew) - A Homebrew TUI Manager

github.com/Valkyrie00/b...

#CLI #TUI #CommandLine

YouTube video by Chrome for Developers Record and analyze a performance trace #DevToolsTips

Record and analyze a performance trace #DevToolsTips

www.youtube.com/watch?v=7A70...

#WebPerf #PerfTools

YouTube video by Chrome for Developers How to style console logs: Color and more! #DevToolsTips

How to style console logs: Color and more! #DevToolsTips

www.youtube.com/watch?v=01TC...

YouTube video by Chrome for Developers Performance debugging in DevTools

Performance debugging in DevTools

youtu.be/BHqxD9qr6Gw?...

#WebPerf #Perfomance #DevTools #PerfDebugging

YouTube video by Chrome for Developers Practical built-in AI with Gemini Nano in Chrome

Practical built-in AI with Gemini Nano in Chrome

www.youtube.com/watch?v=CjpZ... by @tomayac.com

#AI #ArtificialIntelligence #Chrome #WebAI

GitHub - anthropics/prompt-eng-interactive-tutorial: Anthropic's Interactive Prompt Engineering Tutorial Anthropic's Interactive Prompt Engineering Tutorial - anthropics/prompt-eng-interactive-tutorial

Prompt Engineering Interactive Tutorial, by @anthropic.com

github.com/anthropics/p...

#AI #ArtificialIntelligence #PromptEngineering #Engineering

YouTube video by Una Kravets CSS if() functions & reading-flow (in Chrome 137)

CSS if() functions & reading-flow (in Chrome 137)

www.youtube.com/watch?v=Apn8... by @una.im

#CSS #Web #Chrome

SpeedCurve | The Definitive Guide to Long Animation Frames (LoAF) LoAF lets you identify problem scripts, quantify the impact of third-party scripts, and improve the user experience. Here's everything you need to know to get started.

The Definitive Guide to Long Animation Frames (LoAF)

www.speedcurve.com/blog/guide-l...

#WebPerf #Performance

6 Ways Slack, Notion, and VSCode Improved Electron App Performance | Palette Docs This is a complete guide on getting the most mileage out of Electron apps.

6 Ways Slack, Notion, and VSCode Improved Electron App Performance

palette.dev/blog/improvi...

#WebPerf #Performance

🔥 Simpler browser support info has landed in VS Code!

Hover over any CSS property or HTML element or attribute and now you'll see its Baseline status

📝 web.dev/blog/baselin...

🚨 Calling all web experts! 🚨

The 2025 Web Almanac is still open for contributors!

Know someone perfect for it? Mention them here and help us reach the right folks. 🙌

📢 Please help us spread the word!

🔗 Learn more: github.com/HTTPArchive/...