Addy OsmaniGeverifieerd account

@addyosmani

Engineering Manager working on • Husband & Dad • Make the web fast ⚡• Lighthouse, PageSpeed Insights, CrUX, DevTools, Frameworks, Core Web Vitals

Mountain View, CA
teejungle.net
Geregistreerd in april 2009
1.887 foto's en video's Foto's en video's

Tweets

Je hebt @addyosmani geblokkeerd

Weet je zeker dat je deze Tweets wilt bekijken? @addyosmani wordt niet gedeblokkeerd door Tweets te bekijken.

  1. Vastgemaakte Tweet
    6 apr. 2019

    Native <img> lazy-loading is coming to the web! <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75

    290 antwoorden 7.648 retweets 19.867 vind-ik-leuks
    Ongedaan maken
  2. heeft geretweet
    28 jul.

    Announcement! My Lightning-Fast Web Performance online course is now completely FREE. Thanks so much to the many folks who supported this effort over the past year. Please enjoy & share with anyone looking for a rounded intro to fast, resilient delivery 🚀

    9 antwoorden 139 retweets 393 vind-ik-leuks
    Deze collectie tonen
    Deze collectie tonen
    Ongedaan maken
  3. 25 jul.

    Find and fix tricky JavaScript memory leaks: ~ great write-up with lots of practical tips from

    Find and fix tricky memory leaks caused by detached windows.
    JavaScript code can keep a reference to an iframe's contentWindow even if the iframe is removed from the DOM or its URL changes, which prevents the document from being garbage collected.
    5 antwoorden 264 retweets 1.226 vind-ik-leuks
    Ongedaan maken
  4. 25 jul.

    Inlining critical CSS can improve how quickly a page renders. Now an opt-in feature in Next.js and the default in Angular:

    Inlining critical CSS
    The critical CSS of a page includes all of the styles used at its initial rendering. When Critters" finds a match, it considers the corresponding styles as part of the critical CSS, and inlines them.
    12 antwoorden 213 retweets 940 vind-ik-leuks
    Ongedaan maken
  5. 5 jul.

    The CSS :is() pseudo-class is useful for writing repetitive selectors in a more compact form: by covers it well!

    The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form. e.g :is(.photo, .video) .share-button:hover { }
    28 antwoorden 638 retweets 3.554 vind-ik-leuks
    Ongedaan maken
  6. 4 jul.

    Accessibility tip: in a few clicks, DevTools can suggest & apply more accessible colors for low color contrast text. Love using this.

    DevTools provides color suggestions for low color contrast text.
    Here, explore stories has low contrast text. To fix it, open the color picker in the Styles pane. After you expand the Contrast ratio section, DevTools has AA and AAA color suggestions. Click to apply
    9 antwoorden 291 retweets 1.262 vind-ik-leuks
    Ongedaan maken
  7. 3 jul.

    Name your JavaScript exports! This ensures they'll show up named in DevTools and in compile time errors.

    Default export without any name export default() => { return <counter />; } Declaration Arrow Named export export function Counter() { return <counter />; } export const Counter = () => { return <counter />; } Default export export default function Counter() { return <counter />; } const Counter = () => { return <counter />; } export default Counter;
    28 antwoorden 352 retweets 1.754 vind-ik-leuks
    Ongedaan maken
  8. heeft geretweet
    2 jul.

    💥 Introducing version 1.0 of the Web Vitals extension! - integrating field data from - upgraded to the latest web-vitals.js - sparkly new design Read all about it at

    6 antwoorden 96 retweets 309 vind-ik-leuks
    Deze collectie tonen
    Deze collectie tonen
    Ongedaan maken
  9. heeft geretweet
    15 jun.

    Next.js 11 is here. Featuring: Better DX: ◆ Faster dev ◆ Static image automation Better UX: ◆ Image blur support ◆ Script optimization ◆ Conformance with ESLint

    26 antwoorden 511 retweets 1.551 vind-ik-leuks
    Ongedaan maken
  10. 15 jun.

    Chrome has been collaborating with web frameworks to improve performance out of the box. Announcements from & our team: && at

    Our work has been focused on foundational optimizations for resources like images, JS, CSS, fonts. We've shipped a number of optimizations to improve the defaults of multiple frameworks, including: An Image component in Next.js that encapsulates best practices for image loading, followed by a collaboration with Nuxt on the same. Use of this component has resulted in significant improvements to paint times and layout shift (example: 57% reduction in Largest Contentful Paint and 100% reduction in Cumulative Layout Shift on nextjs.org/give). Automated inlining of CSS for Web Font declarations at build time. This feature has landed in Angular (Google Fonts) and Next.js (Google Fonts & Adobe Fonts) resulting in notable improvements to Largest Contentful Paint and First Contentful Paint (example). Inlining critical CSS using Critters in both Angular and Next.js to reduce paint times. Resulted in a 20-30 point improvement in Lighthouse performance scores in a typical, large-scale Angular app
    12 antwoorden 226 retweets 973 vind-ik-leuks
    Ongedaan maken
  11. 14 jun.

    The DevTools CSS Grid & Flexbox editors are super helpful for previewing and authoring grid/flexbox properties. See by to learn more.

    CSS Grid & Flexbox Editing in DevTools
    CSS Flexbox editor provides a quick way to edit the flexbox properties. When an HTML element on your page has display: grid or display: grid applied to it, click the icon to toggle the CSS grid editor
    9 antwoorden 166 retweets 730 vind-ik-leuks
    Ongedaan maken
  12. 14 jun.

    Have low-resolution images? can now enlarge both photos & illustrations (with better detail) using TensorFlow.js and waifu2x. All client-side in the browser using ML.

    Enlarge low-resolution images and improve their quality using ML
    Ojoy is a free browser-based app for upscaling that works 100% client-side. Your photos never leave your machine and you can use the app in any modern web browser. Powered by ML, UpscalerJS & TFJS.
    25 antwoorden 320 retweets 1.439 vind-ik-leuks
    Ongedaan maken
  13. 12 jun.

    AVIF is an image format that can compress up to 50% smaller than JPEG & 20% smaller than WebP. In Chrome, coming to Firefox & has a few 🔧 options: , ,

    Even though AVIF isn't support everywhere yet, we can still use the format in native HTML with the <picture> element. The <picture> element allows for progressive support as we can list the image sources in the order in which we want loaded, and the browser will load the first that it supports. If browser doesn't support <picture> at all, it will fallback to using the default <img>.
    18 antwoorden 512 retweets 2.107 vind-ik-leuks
    Ongedaan maken
  14. heeft geretweet
    8 jun.

    Our next major release is React 18. It will include out-of-the-box improvements like automatic batching, new APIs like startTransition, and a new streaming server renderer with built-in support for React.lazy.

    77 antwoorden 1.456 retweets 4.793 vind-ik-leuks
    Deze collectie tonen
    Deze collectie tonen
    Ongedaan maken
  15. heeft geretweet
    8 jun.

    📣 IT’S HERE! New Smashing Book on "Image Optimization": EVERYTHING on image optimizations, from formats and compression to delivery and maintenance. 🎉🥳 Written by . About the book 🧵 Free PDF sample 🎁

    A blue cover, with an eye representing an image compression slider.
    A Smashing Cat friendly peeking behind the book on image optimization.
    A look inside the book, with beautiful illustrations and Smashing typesetting.
    7 antwoorden 52 retweets 196 vind-ik-leuks
    Deze collectie tonen
    Deze collectie tonen
    Ongedaan maken
  16. heeft geretweet
    6 jun.

    Instead of a tweetstorm, I decided to write a listicle of various non-coding traits that are important for senior engineers. Inspired by conversations with and others

    49 antwoorden 813 retweets 2.404 vind-ik-leuks
    Deze collectie tonen
    Deze collectie tonen
    Ongedaan maken
  17. heeft geretweet
    3 jun.

    The Lighthouse Treemap lets you see what's in the JavaScript you ship and find where you can trim based on module size and execution coverage. With Lighthouse 8 it's now in PSI, Canary DevTools, and the CLI if it can see your source maps 🌳🗺️ Try it out:

    15 antwoorden 401 retweets 1.439 vind-ik-leuks
    Ongedaan maken
  18. heeft geretweet
    2 jun.

    Lighthouse 8.0 is here! ⚡️ Improved CWV balance for the Performance Score, Lighthouse Treemap and metric filtering now in PSI and Canary DevTools, and a brand new CSP audit! All that and more, detailed in the changelog:

    7 antwoorden 268 retweets 786 vind-ik-leuks
    Ongedaan maken
  19. 31 mei

    Introducing AVPress: - compress & resize videos in the browser thanks to WebAssembly and FFMPEG.WASM. Works in Firefox & Chrome (SharedArrayBuffer). Experimental for now :)

    AVPress - Compress videos in the browser using WebAssembly
    AVPress uses WebAssembly to compress videos using a range of different video and audio codecs. It also supports basic editing of videos. All of this is powered through the power of FFMPEG.WASM.
    26 antwoorden 288 retweets 1.218 vind-ik-leuks
    Ongedaan maken
  20. heeft geretweet
    28 mei

    Introducing Nuxt Image ✨ ✂️ Resize and transform 🚀 Made for performance ☑️ Standards compliant 🌈 Works with any image provider 👀 And much more...

    56 antwoorden 350 retweets 1.433 vind-ik-leuks
    Ongedaan maken
  21. 22 mei

    Excited for the CSS "size-adjust" descriptor for fonts: reduce layout shifts by matching up a fallback font and primary web font through a scale factor for glyphs (percentage). See by for a demo (Chrome Canary/FF Nightly with flags)

    With size-adjust, scale glyph sizes without impacting font-size or em
    The CSS size-adjust descriptor in @font-face helps with reducing cumulative layout shift by matching up the fallback font and primary web font using this descriptor.
    12 antwoorden 160 retweets 717 vind-ik-leuks
    Ongedaan maken

@addyosmani heeft nog niet getweet.

Het laden lijkt wat langer te duren.

Twitter is mogelijk overbelast of ondervindt een tijdelijke onderbreking. Probeer het opnieuw of bekijk de Twitter-status voor meer informatie.

    Je bent misschien ook geïnteresseerd in

    ·