Image
user avatar
Addy Osmani
@addyosmani
Director, @GoogleCloud AI. Gemini ✨ Agents. Prev: Eng. leader, @GoogleChrome • Author • Great user, developer & AI experiences • @GoogleAI @GoogleDeepMind
Mountain View, CA
addyosmani.com
Joined April 2009
2,565
Following
399.7K
Followers
  • Pinned
    user avatar
    Addy Osmani
    @addyosmani
    Dec 24, 2023
    "First do it, then do it right, then do it better." Just start. The journey to success often begins with a single step, but that first step can be the hardest to take. It's easy to get caught up in the fear of failure or the desire for perfection, but I hope this quote I first
    First do it, then do it right, then do it better.
    486K
  • user avatar
    Addy Osmani
    @addyosmani
    Sep 10, 2022
    Be careful with legacy code :)
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    Apr 7, 2019
    Native <img> lazy-loading is coming to the web! bit.ly/loading-attrib… <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 bit.ly/loading-i2s
    Image
  • user avatar
    Addy Osmani
    @addyosmani
    Nov 18, 2022
    Front-end developer and back-end developer.
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    Apr 25, 2020
    A fun generator for CSS-only section separators! bit.ly/css-sections
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    Jun 24, 2020
    border: 1px solid red; is the console.log of CSS
  • user avatar
    Addy Osmani
    @addyosmani
    Mar 27, 2019
    remove.bg is amazing. Free service to remove the background of any photo 100% automatically.
    Image
  • user avatar
    Addy Osmani
    @addyosmani
    Jun 23, 2020
    TIL CSS "background-repeat: round" bit.ly/bgroundtips ~ repeats background images without clipping ✂️
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    Aug 17, 2019
    A black hole simulation in 140 bytes of JavaScript: frankforce.com/?p=6378 🤯 for(i=0;i<2e3;x.fillRect(i?960+i*S(F=260*(t+9)/i+S(i*i)):0,i?500+.2*(2*i*C(F)+2e4/i):0,K=i++?S(i)*9:2e3,K))x.fillStyle=R(99*i,2*i,i,i?1:.4)
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    May 1, 2022
    The "Software Engineering at Google" book is now free to read online: bit.ly/swe-book. Great insights on improving code quality & scaling engineering teams.
    Today, software engineers need to know not only how to program effectively but also how to develop proper engineering practices to make their codebase sustainable and healthy. This book emphasizes this difference between programming and software engineering. How can software engineers manage a living codebase that evolves and responds to changing requirements and demands over the length of its life? Based on their experience at Google, software engineers Titus Winters and Hyrum Wright, along with technical writer Tom Manshreck, present a candid and insightful look at how some of the world’s leading practitioners construct and maintain software. This book covers Google’s unique engineering culture, processes, and tools and how these aspects contribute to the effectiveness of an engineering organization.
  • user avatar
    Addy Osmani
    @addyosmani
    Sep 4, 2021
    VSCode now has bracket pair colorization natively baked in! Aims to be faster than the popular Bracket Pair Colorizer extension. Smooth so far: bit.ly/vscbp
    Image
  • user avatar
    Addy Osmani
    @addyosmani
    Mar 7, 2021
    CSS "content-visibility:auto" is amazing: skip rendering & painting offscreen content until needed. I got a ~1s faster render on a long HTML document on desktop, ~3s on mobile. web.dev/content-visibi…
    The CSS content-visibility property enables the browser to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. In this screenshot, to the left is a partial screenshot of a long web page with a high rendering and painting time. To the right is a version with content-visibility used on sections of the page, heavily reducing overall rendering times.
  • user avatar
    Addy Osmani
    @addyosmani
    Jan 29, 2020
    Tip: @ChromeDevTools has a Shadow Editor built in!
    Image
    00:00
  • user avatar
    Addy Osmani
    @addyosmani
    Feb 17, 2019
    Understand JavaScript's async/await in 7 seconds by @manekinekko: async-await.xyz
    Image
    00:00