Tweets
- Tweets, current page.
- Tweets & replies
- Media
You blocked @addyosmani
Are you sure you want to view these Tweets? Viewing Tweets won't unblock @addyosmani
-
Pinned Tweet
Native <img> lazy-loading is coming to the web! https://bit.ly/loading-attribute … <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://bit.ly/loading-i2s pic.twitter.com/luCHEfLkKD
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tip:
@ChromeDevTools has a CSS Animations inspector! Modify timing, delays, durations and more.pic.twitter.com/4OvUVW7u1ZThanks. Twitter will use this to make your timeline better. UndoUndo -
Browsers can animate at least 4 things cheaply: position, scale, rotation & opacity. https://csstriggers.com/ is still useful for checking if CSS triggers re-layouts or reflows.pic.twitter.com/fqhKWCo8ji
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tip: highlight images missing alt text with img:not([alt])pic.twitter.com/zgjdE5iTU6
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Addy Osmani Retweeted
*Works on fixing a bug for 3 hours with no progress and a multitude of contempt for programming* ... *Wakes up the next morning and fixes the bug in 2 minutes*
Thanks. Twitter will use this to make your timeline better. UndoUndo -
~"We think old code is a mess because of a cardinal law of programming: It’s harder to read code than to write it":http://bit.ly/old-code
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Idea: Turn off animations if users are on a slow device. Demo with React (Next.js), Framer Motion & react-adaptive-hooks: https://glitch.com/~next-motion (forces low-memory mode)pic.twitter.com/cdzOoMznkg
Thanks. Twitter will use this to make your timeline better. UndoUndo -
"If you can't measure it, you can't improve it" http://web.dev/metrics covers how to measure modern web performance metrics & optimize for them.pic.twitter.com/yvBO2FQ6Ds
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tip:
@ChromeDevTools can take full size screenshots of websites. Press Cmd + Shift + P and type "Capture full size screenshot"pic.twitter.com/YpXlXHdYVF
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Bubble sort visualization (by u/pedrovhb)pic.twitter.com/9KGASP1p0E
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tip:
@ChromeDevTools has a Shadow Editor built in!pic.twitter.com/NptZeGQWTyThanks. Twitter will use this to make your timeline better. UndoUndo -
Cool interactive CSS Grid builder: http://bit.ly/grid-build Supports template areas, line names and outputs to
@codepen!pic.twitter.com/XHTTSCc779
Thanks. Twitter will use this to make your timeline better. UndoUndo -
eBay had a big year of performance optimization: http://bit.ly/ebayspeed ~ 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!
pic.twitter.com/4z4OPo0Vfp
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Breadth-first search visualization (by /u/pedrovhb)pic.twitter.com/JJuXgDmUAP
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tips on debugging React performance with: * Chrome DevTools * React DevTools * React Profiler API http://bit.ly/measure-react and http://bit.ly/profiling-rp pic.twitter.com/qLGd7wBNnr
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Tip: With
@ChromeDevTools open, click/hold the Reload button for bonus Empty Cache & Hard Reload options:pic.twitter.com/kFv8evxwPn
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Adaptive Media Loading with React & Next.js: http://bit.ly/adaptive-next
Slow network? Low-memory?
> Light experience.
Fast network? High-memory?
> Full experience.
Built with
Client Hints (server) & react-adaptive-hooks (client)pic.twitter.com/VYzaYPmUhA
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Learn how and *why* things work the way they do. Scratch beyond the surface. This prepares you to use knowledge in a lot more situations.
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
Yearly reminder: "Is this element in view?" can be efficiently solved with Intersection Observer: http://bit.ly/iobserver ~ You probably don't want getBoundingClientRect()pic.twitter.com/zjgewdYHmP
Thanks. Twitter will use this to make your timeline better. UndoUndo -
Q: Why's our page's Time-to-Interactive high?
A: It's often Long (JavaScript) Tasks keeping the main thread busy
@ChromeDevTools visualizes Long Tasks, making it easier to see what to optimize: https://web.dev/long-tasks-devtools/ …pic.twitter.com/BpCwFTaap2
Thanks. Twitter will use this to make your timeline better. UndoUndo
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.