@ryantownsend@webperf.social
@ryantownsend@webperf.social avatar

ryantownsend

@ryantownsend@webperf.social

Product-led Fractional CTO • Web & eCommerce Consultant • Public Speaker

This profile is from a federated server and may be incomplete. Browse more on the original instance.

simevidas, (edited ) to random
@simevidas@mastodon.social avatar

Is <img loading=lazy> good enough for your websites, or do you still need to use a JavaScript lazy-loading library for advanced functionality, consistency, or other reasons?

ryantownsend,
@ryantownsend@webperf.social avatar

@Schepp any idea what causes it? I've never seen experienced a page crash before!

ryantownsend, to webdev
@ryantownsend@webperf.social avatar

Oliver Lingberg just published an interview with me about the #webperf industry and my upcoming talk at his conference Pixel Pioneers on June 14th: https://pixelpioneers.co/blog/speaker-spotlight-ryan-townsend

If you're considering coming you can get 10% off with the code 'Friends10', making the price just ~£140 ex VAT. Student tickets are also available for £60 – exceptional value! Full details 👉 https://pixelpioneers.co/

#webdev #webdesign #ux

A talking-head video with Ryan Townsend sat at a desk.

ryantownsend, to random
@ryantownsend@webperf.social avatar

Building on the already awesome scroll snap functionality in CSS, we're getting some super useful JavaScript events to help synchronise elements with snaps (such as indicators on carousels): https://groups.google.com/a/chromium.org/g/blink-dev/c/-naLTco_PEo/m/GwL4OA6dAQAJ?pli=1 ❤️

ryantownsend, to random
@ryantownsend@webperf.social avatar

Many executives I come across are under the misguided assumption that Scrum is some magical tool that conjures more productivity out of staff, rather than taking responsibility for removing obstacles their teams face.

Sound familiar? Check out my latest 'Lessons of a CTO' video 🎬

Full transcript: https://lessonsofacto.com/videos/027-the-most-important-part-of-scrum-isnt-the-responsibility-of-developers/

video/mp4

bramus, to random
@bramus@front-end.social avatar

Did a rehearsal run of my deck for tomorrow's #jsheroes and now I'm suddenly busy overhauling the entire thing ... 😬

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus you’re basically inducing speaker nightmares in me with these toots!

I had one recently where the contents of all my slides had suddenly become left-aligned so I had to swap slot with another speaker while I sorted them out 🙃

ryantownsend, to random
@ryantownsend@webperf.social avatar

Finally got myself a ‘new’ phone today, it’s an absolute banger.

No, it’s not an iPhone 15 Pro Max, it’s a Samsung A51 for #webperf testing and it scores less than half an iPhone 7 on Geekbench 😬 you can feel the input lag even during device setup!

Hat tip to @slightlyoff for the recommendation. Worth reading: https://infrequently.org/2024/01/performance-inequality-gap-2024/

ryantownsend,
@ryantownsend@webperf.social avatar

I’m not sure why it needed to know my age during setup but jeez, what brutal age ranges to use 😭

scottjehl, to random
@scottjehl@mstdn.social avatar

I have a bunch of writing and old talks that mention button elements as "meaningless outside of a form until JavaScript makes them do something" that are now technically incorrect due to popovertarget.
Nice problem to have though!

ryantownsend,
@ryantownsend@webperf.social avatar

@scottjehl and soon to be even more meaningful with the introduction of the Invokers API (or whatever it ends up called once WebKit agree upon something)

kizu, to random
@kizu@front-end.social avatar

I wish it was possible to insert the same element into multiple slots in web components.

Given there are other use cases for the “duplication” of something in DOM (see the selectedoption in the styleable selects as an example — https://open-ui.org/components/selectlist/#the-selectedoption-element), I wonder if we need this as a concept in DOM in general, and if this was ever proposed anywhere.

It would be awesome to be able to create a clone of an element, with an ability to automatically mirror all or some of the attributes.

ryantownsend,
@ryantownsend@webperf.social avatar

@kizu 💯 I’ve definitely come across use-cases for duplication like this.

Thankfully, text duplication compresses well (gzip et al) and HTML is streamed, so I’ve not been too concerned about the network.

My main curiosity for improvements are around:

  • duplication in the codebase
  • any impact around runtime
sachagreif, to random
@sachagreif@hachyderm.io avatar

In case you missed it yesterday: the State of HTML 2023 survey results are now available: https://2023.stateofhtml.com/

ryantownsend,
@ryantownsend@webperf.social avatar

@sachagreif definitely wouldn’t surprise me!

I’m curious how many respondents were there across the different surveys?

ryantownsend, to random
@ryantownsend@webperf.social avatar

@bramus reading through the Virtual Keyboard shenanigans and your name pops up a lot. Firstly, thank you for trying to make some sense of it all / standardise 🙏

Is there a reason there's no viewport unit for this? (kinda like a modified svh) or has that idea been proposed/rejected for some reason?

Unless I'm missing something, it seems overly complex to change how the viewport behaves across a whole site just for the occasional situation you need something to float above a keyboard?

ryantownsend,
@ryantownsend@webperf.social avatar

@Schepp @bramus yeah, having to listen on resize makes me sad. Especially as Safari seems to fire events sporadically so there’s a noticeable delay.

Something like vvh/vvw (Visible Viewport Height/Width) would be ideal, but I’d just be happy to see env(keyboard-inset-height) supported without needing any other changes.

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus @Schepp the trouble is you can't (presumably) have elements positioned using both behaviours at once.

If there was control via a viewport unit in CSS, then we could position individual elements without having to change browser behaviour? e.g. some could react to the visual viewport, while others may not.

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus @Schepp an example use-case:

I’d want an action button to remain within the visual viewport but a non-dismissed floating cookie banner to remain attached to the layout viewport as it should be unobtrusive.

ryantownsend, (edited )
@ryantownsend@webperf.social avatar

@bramus @Schepp sure thing!

Update: added https://github.com/w3c/csswg-drafts/issues/7475#issuecomment-2091089243

joshtumath, to random
@joshtumath@mastodon.social avatar

First we've got @sophie talking about something we know all too well at the BBC: technical migrations.

As we all know, migrations are a complicated business.

image/jpeg

ryantownsend,
@ryantownsend@webperf.social avatar

💯 💯 💯

@sophie based on these two slides alone, I'm looking forward to seeing this talk at @smashingconf in Freiburg!

ryantownsend, to random
@ryantownsend@webperf.social avatar

MPA View Transitions are exiting the experimental stage on Chrome 🎉🎉🎉
https://botsin.space/@intenttoship/112361791762490199

ryantownsend, to webdev
@ryantownsend@webperf.social avatar

Looks like we're close to getting @starting-style in Firefox Nightly: https://bugzilla.mozilla.org/show_bug.cgi?id=1834876

If you're building animated dialogs/menus, you should be building them with this and transition-behavior: allow-discreet, workarounds/hacks should only be used where absolutely necessary as they will rapidly become deadweight.

Accept where we are today, but build with the near future in mind.

tomayac, to random
@tomayac@toot.cafe avatar

🎉 The Popover API is now supported in all browsers! @Una summarizes what it can do, the differences to &lt;dialog&gt;, and why you may want to use it: https://web.dev/blog/popover-api.

ryantownsend,
@ryantownsend@webperf.social avatar

@tomayac @Una we're getting some awesome APIs this year!

Think I found a tiny typo in "Can be opened with a declarative invoked", I think should that be "invoker"?

ryantownsend, to webdev
@ryantownsend@webperf.social avatar

It doesn’t have to be this way.

https://youtu.be/aWfYxg-Ypm4

#webplatform #webdevelopment #webdev

harris, to 11ty

Indieweb and static-site generator lovers, how do you host and organizelarge media? I want to share videos and photosets on the web but I don’t love the idea of just hosting them with YouTube, etc. Git isn’t great for large files and GitHub charges to host them so I don’t feel like I can just add them to my 11ty repo.

What solutions are out there? Ideally something that can be cheaply hosted and easy to integrate with 11ty, mirror, and migrate freely.

#indieweb #11ty

ryantownsend,
@ryantownsend@webperf.social avatar

@harris you could consider hosting somewhere like AWS S3 or Cloudflare R2 and then use your host/CDN/web server to cache and proxy the files, serving them as 1st party resources.

ryantownsend, to random
@ryantownsend@webperf.social avatar

@keithamus FYI I've got a need for invokeaction=set on an input field.

I figured it may have already been considered but I can't see any prior discussion around this so I've opened an issue: https://github.com/openui/open-ui/issues/1038

Obviously I can patch it in manually by listening for invoke events, but I feel it could be useful platform-native behavior.

ppk, (edited ) to random
@ppk@front-end.social avatar

I'm now at day 8 of not smoking.

If it continues like this, I'm going to succeed in quitting smoking permanently. Though I thank the stars for bits of nicotine chewing gum when I really need it.

Meanwhile, a funny story is attached to my quitting ...

ryantownsend,
@ryantownsend@webperf.social avatar

@ppk 👏🏻👏🏻👏🏻 keep powering through!

brad_frost, to random
@brad_frost@mastodon.social avatar

It feels like CSS has come such a long way. Nearly all of the major pain points that developers have faced for decades are either resolved or well on their way. This is a good thing!

Of course the web is never done, but it does feel like an inflection point.

ryantownsend,
@ryantownsend@webperf.social avatar

@brad_frost 💯

Things like scoped selectors should mean we can finally end (at least most) debates on where CSS should live and, combined with nesting, we can vastly simplify how we write it.

adactio, to random
@adactio@mastodon.social avatar

Journal: Displaying HTML web components

You might want to use display: contents …maybe.

🔗https://adactio.com/journal/21055

ryantownsend,
@ryantownsend@webperf.social avatar

@adactio I really wish there was an :custom-element state selector in CSS so you could default all custom elements to display: contents and just override on a case-by-case basis.

(unfortunately :defined targets native elements too, otherwise :defined, :not(:defined) would work to target custom elements)

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • mdbf
  • everett
  • tacticalgear
  • magazineikmin
  • thenastyranch
  • rosin
  • tester
  • Youngstown
  • khanakhh
  • slotface
  • ngwrru68w68
  • kavyap
  • DreamBathrooms
  • JUstTest
  • InstantRegret
  • osvaldo12
  • GTA5RPClips
  • ethstaker
  • normalnudes
  • Durango
  • cisconetworking
  • anitta
  • modclub
  • cubers
  • Leos
  • provamag3
  • lostlight
  • All magazines
    •