Addy Osmani
@addyosmani.bsky.social
Engineering lead working on Google Chrome.
I want you to win :) For more on what I'm up to, I'm at addyosmani.com
I want you to win :) For more on what I'm up to, I'm at addyosmani.com
View Transitions are now in all browsers! They also landed in React! developer.chrome.com/blog/view-tr...
October 23, 2025 at 5:50 AM
View Transitions are now in all browsers! They also landed in React! developer.chrome.com/blog/view-tr...
Announcing Chrome DevTools MCP! 🚀
Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease.
Learn more: developer.chrome.com/blog/chrome-...
Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease.
Learn more: developer.chrome.com/blog/chrome-...
September 23, 2025 at 3:25 PM
Announcing Chrome DevTools MCP! 🚀
Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease.
Learn more: developer.chrome.com/blog/chrome-...
Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease.
Learn more: developer.chrome.com/blog/chrome-...
New in Chrome DevTools: Instantly check CSS feature compatibility with Baseline!
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
August 22, 2025 at 6:04 PM
New in Chrome DevTools: Instantly check CSS feature compatibility with Baseline!
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
Chrome DevTools now displays the Baseline status for CSS properties right in the Elements panel - Baseline gives you clear info about which web features are ready to use today.
New in ChromeDevTools: Debug complex CSS values more easily! 🎉
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
July 14, 2025 at 4:43 PM
New in ChromeDevTools: Debug complex CSS values more easily! 🎉
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source!
✨ Modify and fix CSS within the Elements panel.
🧪 Instantly test changes live.
💾 Save changes back to your source files with a connected workspace folder.
Learn more: developer.chrome.com/blog/new-in-...
✨ Modify and fix CSS within the Elements panel.
🧪 Instantly test changes live.
💾 Save changes back to your source files with a connected workspace folder.
Learn more: developer.chrome.com/blog/new-in-...
June 8, 2025 at 11:11 PM
New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source!
✨ Modify and fix CSS within the Elements panel.
🧪 Instantly test changes live.
💾 Save changes back to your source files with a connected workspace folder.
Learn more: developer.chrome.com/blog/new-in-...
✨ Modify and fix CSS within the Elements panel.
🧪 Instantly test changes live.
💾 Save changes back to your source files with a connected workspace folder.
Learn more: developer.chrome.com/blog/new-in-...
Advanced React: Production case studies from ambitious web projects: largeapps.dev/case-studies... - our latest write-up!
April 15, 2025 at 10:22 AM
Advanced React: Production case studies from ambitious web projects: largeapps.dev/case-studies... - our latest write-up!
Using AI in software development is not about writing more code faster - it's about building better software.
I wrote a free ~60m read on leading effective teams through the age of GenAI: bit.ly/leet-ai ✍️
I wrote a free ~60m read on leading effective teams through the age of GenAI: bit.ly/leet-ai ✍️
March 24, 2025 at 6:36 PM
Using AI in software development is not about writing more code faster - it's about building better software.
I wrote a free ~60m read on leading effective teams through the age of GenAI: bit.ly/leet-ai ✍️
I wrote a free ~60m read on leading effective teams through the age of GenAI: bit.ly/leet-ai ✍️
We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀
Try it out: gemini.google.com
Try it out: gemini.google.com
March 22, 2025 at 7:08 PM
We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀
Try it out: gemini.google.com
Try it out: gemini.google.com
New in Chrome DevTools: Accurately emulate CPU performance of a low/mid tier phone with Automatic CPU throttling calibration! 📲
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
February 23, 2025 at 5:40 AM
New in Chrome DevTools: Accurately emulate CPU performance of a low/mid tier phone with Automatic CPU throttling calibration! 📲
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
This feature calculates slow-downs for your specific device. Wanted this for years! We just shipped it.
Tip: Chrome DevTools can emulate a focused page! Great for debugging elements that disappear when they lose focus.
February 15, 2025 at 8:03 PM
Tip: Chrome DevTools can emulate a focused page! Great for debugging elements that disappear when they lose focus.
New in Chrome DevTools: Skip irrelevant scripts in the Flame Chart! Debugging is faster and more actionable 🙏
February 2, 2025 at 8:31 PM
New in Chrome DevTools: Skip irrelevant scripts in the Flame Chart! Debugging is faster and more actionable 🙏
Introducing "Copy console" in Chrome DevTools: one-click copy all console messages.
Useful for pasting into LLMs / AI Code Editors for better fixes.
Useful for pasting into LLMs / AI Code Editors for better fixes.
January 23, 2025 at 5:02 PM
Introducing "Copy console" in Chrome DevTools: one-click copy all console messages.
Useful for pasting into LLMs / AI Code Editors for better fixes.
Useful for pasting into LLMs / AI Code Editors for better fixes.
"Your UI doesn't need to map one-to-one with your data's fields and values". Great thinking on simplicity from Steve Schoger
January 16, 2025 at 5:55 PM
"Your UI doesn't need to map one-to-one with your data's fields and values". Great thinking on simplicity from Steve Schoger
Must reads for web developers - how modern browsers work:
1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4
and browser.engineering a free to read book on the topic
1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4
and browser.engineering a free to read book on the topic
January 12, 2025 at 11:57 AM
Must reads for web developers - how modern browsers work:
1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4
and browser.engineering a free to read book on the topic
1️⃣ bit.ly/browsers-pt1
2️⃣ bit.ly/browsers-pt2
3️⃣ bit.ly/browsers-pt3
4️⃣ bit.ly/browsers-pt4
and browser.engineering a free to read book on the topic
January 7, 2025 at 6:17 AM
January 1, 2025 at 12:26 AM
Tip: Chrome DevTools can override the content of Fetch/XHR requests! Useful for mocking APIs without waiting on backend changes.
December 29, 2024 at 11:15 PM
Tip: Chrome DevTools can override the content of Fetch/XHR requests! Useful for mocking APIs without waiting on backend changes.
Quickly turn a GitHub repository into text for LLMs with Gitingest ⚡️ Replace "hub" with "ingest" in any GitHub URL for a text version of the codebase.
gitingest.com
github.com/cyclotruc/gi...
gitingest.com
github.com/cyclotruc/gi...
December 21, 2024 at 8:58 PM
Quickly turn a GitHub repository into text for LLMs with Gitingest ⚡️ Replace "hub" with "ingest" in any GitHub URL for a text version of the codebase.
gitingest.com
github.com/cyclotruc/gi...
gitingest.com
github.com/cyclotruc/gi...
It’s never too late to start.
December 10, 2024 at 2:32 AM
It’s never too late to start.
Great to hear form you, Ateş! Thanks for the feedback! I'm going to play around with the hover effect and border to make that look more clear. Apprec you checking it out!
December 8, 2024 at 10:55 PM
Great to hear form you, Ateş! Thanks for the feedback! I'm going to play around with the hover effect and border to make that look more clear. Apprec you checking it out!
"Free background-image remover in the browser!" ⚡️
Excited to announce bg.addy.ie, a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js, RMBG-1.4 & MODNet.
Excited to announce bg.addy.ie, a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js, RMBG-1.4 & MODNet.
December 8, 2024 at 8:25 PM
"Free background-image remover in the browser!" ⚡️
Excited to announce bg.addy.ie, a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js, RMBG-1.4 & MODNet.
Excited to announce bg.addy.ie, a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js, RMBG-1.4 & MODNet.
✍️ "Hard truths about AI-assisted coding" tips & tricks in my latest article: bit.ly/ai-assisted
While AI-Assisted coding can get you 70% of the way there (great for prototypes or MVPs), the final 30% requires significant human intervention for quality and maintainability.
While AI-Assisted coding can get you 70% of the way there (great for prototypes or MVPs), the final 30% requires significant human intervention for quality and maintainability.
December 5, 2024 at 12:07 AM
✍️ "Hard truths about AI-assisted coding" tips & tricks in my latest article: bit.ly/ai-assisted
While AI-Assisted coding can get you 70% of the way there (great for prototypes or MVPs), the final 30% requires significant human intervention for quality and maintainability.
While AI-Assisted coding can get you 70% of the way there (great for prototypes or MVPs), the final 30% requires significant human intervention for quality and maintainability.
Tip: In Chrome DevTools, we added a new AI Assistance panel. Debug & tweak CSS using natural language prompts!
November 27, 2024 at 8:27 PM
Tip: In Chrome DevTools, we added a new AI Assistance panel. Debug & tweak CSS using natural language prompts!
"Soft skill books that will make you a better developer"
open.substack.com/pub/addyo/p/...
Takeaways from some favorite books that have helped me grow over time.
open.substack.com/pub/addyo/p/...
Takeaways from some favorite books that have helped me grow over time.
November 26, 2024 at 7:14 PM
"Soft skill books that will make you a better developer"
open.substack.com/pub/addyo/p/...
Takeaways from some favorite books that have helped me grow over time.
open.substack.com/pub/addyo/p/...
Takeaways from some favorite books that have helped me grow over time.