@umaar
Account based inUnited Kingdom!
About this account
- Account based in
- United Kingdom
- Connected via
- Web
X says this location may be affected by a proxy or VPN.
Account-level information from X, not a live location or the device used for a specific post.
• I tweet developer tips and tricks • Made https://nitter.cf/t.co/BNg6jxTWZV • Developer tips https://nitter.cf/t.co/8Ofj0P4de9
London
Joined November 2008
- Tweets4.1K
- Following1.4K
- Followers20.1K
- Likes1.6K
Umar Hansa retweeted
Neat lil learning from today’s @PerfNowConf (via @umaar):
You can now throttle individual requests in Chrome!
Neat for experimenting with stuff like
- lazy-loading: does the UI look okay if this chunk takes MUCH longer to arrive?
- resilience: what happens if this specific CDN is extremely slow?
- etc
📢 The Chrome DevTools flame chart has just become *much* easier to use.
I wrote about these new features (for DebugBear), and other new DevTools features you probably didn't know about.
debugbear.com/blog/favourite…
Claude 3.7 drawing pelicans with SVG
Noticeable improvements with each new model
> Generate an SVG of a pelican riding a bicycle. Make it look like the pelican is riding the bike with an animation. Also make the bike do a wheelie every few seconds
nitter.cf/simonw/status/18498542…
Playing with a new LLM benchmark: how good are they at drawing an SVG of a pelican on a bicycle?
Here's the difference between Claude 3.5 Sonnet new and Claude 3.5 Sonnet previous
ALT Claude 3.5 Sonnet (2024-06-20) - it's clearly a bicycle but the pelican has a pretty small beak
ALT Claude 3.5 Sonnet (2024-10-22) The pelican here has a better sized beak and is also colored an off-white
Shared some DevTools tricks that I use, you'll want to expand the thread!
nitter.cf/umaar/status/185961266…
🆕 Made a quick video that teaches you how to add in View Transitions on your website via @ChromeDevTools, so you can prototype it locally
Takes less than a minute! ⬇️
youtube.com/watch?v=L-TZPDkq…
Umar Hansa retweeted
🆕 Enabling SSR in your JavaScript framework can make your web performance worse
I discuss JavaScript hydration, amongst other topics, in this new blog post
In case you're wondering, no, the solution is not to ditch SSR
developer.mozilla.org/en-US/…
🆕 Enabling SSR in your JavaScript framework can make your web performance worse
I discuss JavaScript hydration, amongst other topics, in this new blog post
In case you're wondering, no, the solution is not to ditch SSR
developer.mozilla.org/en-US/…
I've been using Ruby on Rails recently, everything's server-side by default, minimal JS.
Got me thinking about the govuk guidance:
> If you use a JavaScript framework you should be able to justify with evidence, how using JavaScript would benefit users
gov.uk/service-manual/techno…
ALT Useful information from gov.uk on factors to consider when using a JavaScript framework
Umar Hansa retweeted
TIL.
Chrome DevTools: Improve page accessibility by emulating vision deficiencies.
This is neat!
Two examples:
Protanopia - Colour blindness resulting from insensitivity to red light
Deuteranopia - Red-green colorblindness
umaar.com/dev-tips/231-emula…
ALT Chrome DevTools, Umaar showcasing emulation of vision deficiencies.
"Please zoom your browser to 80%" 🤷♂️
PSA to web devs: test and use your website at different zoom levels. Is your website still usable?
Big fan of this, found on govuk "You should be able to zoom up to 300% without text spilling off the screen" from:
platforms.service.gov.uk/hel…
Wrote a guide on collecting web performance metrics from JavaScript, and sending those metrics to a @CloudflareDev Worker.
Workers are great. Was able to store metrics in a database, and send an email when performance degrades - all for free!
debugbear.com/blog/core-web-…
Umar Hansa retweeted
This treemap feature in Lighthouse is useful and @umaar has done a great job explaining it- you can visualize your js deps, including unused js: umaar.com/dev-tips/270-devto…
ALT Umar Hansa exploring lighthouse treemap, all of the bundles visualized
Still see the question pop up every now and then
Here's why JavaScript might not be available in your web application
Service workers, View Transitions, Speculation Rules...you can get instant page loads and SPA-like behaviour with these APIs. Use them!
piccalil.li/blog/a-handful-o…
Umar Hansa retweeted
Great video by @umaar on the new performance panel in Chrome DevTools, interesting and insightful youtube.com/watch?v=aTb5eTiA…
People seem to like the Modern DevTools Debugging post from yesterday, so here's a new video to watch and follow along.
If the DevTools Performance Panel feels overwhelming, this video is for you ⬇️
youtube.com/watch?v=aTb5eTiA…
🆕 Just wrote a new article about performance debugging with DevTools
Lots of new features in the Performance Panel, has made finding performance issues *much* easier
Check it out
debugbear.com/blog/fix-web-p…
🆕 Just made a new in-depth video: The Ultimate Website Optimization Guide.
💡 Practical workflows to fixing a slow website
youtube.com/watch?v=_ZCpE0Aa…
Umar Hansa retweeted
Just made a new video about image performance on the web! Lots of practical tips and tricks covered in this one ⬇️
- Lazy loading (when to use / when not to use)
- Chrome DevTools tips and tricks
- How to fix layout shifts
youtube.com/watch?v=aTjlv0g_…
Just made a new video about image performance on the web! Lots of practical tips and tricks covered in this one ⬇️
- Lazy loading (when to use / when not to use)
- Chrome DevTools tips and tricks
- How to fix layout shifts
youtube.com/watch?v=aTjlv0g_…