Addy OsmaniOvjeren akaunt

@addyosmani

Engineering Manager working on • Husband & Dad • Make the web fast ⚡• Lighthouse, PageSpeed Insights, DevTools • Founder TeeJungle

Mountain View, CA
Vrijeme pridruživanja: travanj 2009.

Medijski sadržaj

  1. Tip: has a CSS Animations inspector! Modify timing, delays, durations and more.

  2. 2. velj
    Odgovor korisnicima

    We're removing First CPU Idle in the next release (~sometime this month) in favor of more actionable interactivity metrics like Total Blocking Time. Love to hear what you think once it's out.

  3. 2. velj

    Browsers can animate at least 4 things cheaply: position, scale, rotation & opacity. is still useful for checking if CSS triggers re-layouts or reflows.

  4. 2. velj
    Odgovor korisniku/ci

    I kinda like img:not([alt]) { opacity: 0.5; }

  5. 2. velj
    Odgovor korisniku/ci

    I can indeed! Here's img:not([alt]) { filter: blur(5px); }

    img:not([alt]) {
  filter: blur(5px);
}
  6. 2. velj

    Tip: highlight images missing alt text with img:not([alt])

    Using img:not([alt]) to highlight images missing alt text. You can also use Lighthouse or editor plugins to detect the same.
  7. 1. velj

    Idea: Turn off animations if users are on a slow device. Demo with React (Next.js), Framer Motion & react-adaptive-hooks: (forces low-memory mode)

  8. 31. sij

    "If you can't measure it, you can't improve it" covers how to measure modern web performance metrics & optimize for them.

  9. 31. sij

    Tip: can take full size screenshots of websites. Press Cmd + Shift + P and type "Capture full size screenshot"

  10. 29. sij
    Odgovor korisnicima

    Also works kinda nice on text shadows :)

  11. 29. sij

    Bubble sort visualization (by u/pedrovhb)

  12. 29. sij

    Tip: has a Shadow Editor built in!

  13. 28. sij

    Cool interactive CSS Grid builder: Supports template areas, line names and outputs to !

  14. 28. sij

    eBay had a big year of performance optimization: ~ smaller payloads, smart prefetching & edge-caching had an impact. For every 100ms improvement in search page loading time, they saw a 0.5% increase in Add to Cart count! ⚡️

  15. 27. sij

    Breadth-first search visualization (by /u/pedrovhb)

  16. 27. sij

    Tips on debugging React performance with: * Chrome DevTools * React DevTools * React Profiler API and

  17. 26. sij

    Tip: With open, click/hold the Reload button for bonus Empty Cache & Hard Reload options:

  18. 26. sij

    Adaptive Media Loading with React & Next.js: 🐌 Slow network? Low-memory? > Light experience. 💨 Fast network? High-memory? > Full experience. 🔧 Built with Client Hints (server) & react-adaptive-hooks (client)

  19. 25. sij

    The life of a project

  20. 24. sij
    Odgovor korisnicima

    Whoa. This is all kinds of impressive. aside: are the large payloads here mostly video and images?

Čini se da učitavanje traje već neko vrijeme.

Twitter je možda preopterećen ili ima kratkotrajnih poteškoća u radu. Pokušajte ponovno ili potražite dodatne informacije u odjeljku Status Twittera.

    Možda bi vam se svidjelo i ovo:

    ·