@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.

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 <dialog>, 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

harris, to 11ty
@harris@social.coop avatar

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.

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)

collinsworth, to random
@collinsworth@hachyderm.io avatar

I think we're focused on the wrong thing when we look at what tech works for a company like Amazon or Facebook or Netflix.

We should be looking at what tech works when you don't have a small army of staff engineers optimizing it. I want to know what I can scale without paying someone a half million dollar salary to do it.

There should be more case studies on things that don't have a billion-dollar company propping them up, humming along quietly on a cheap-ass VPS somewhere.

ryantownsend,
@ryantownsend@webperf.social avatar

@collinsworth this was essentially my message from my PerfNow talk: https://youtu.be/f5felHJiACE?si=eCLusFP4iWa-_BRw – I included how my teams were burned by this, so somewhat of a case study.

ryantownsend, to random
@ryantownsend@webperf.social avatar

Going to be interesting to see the WebKit/Safari/Apple position on this 🍿🍿🍿
https://botsin.space/@intenttoship/112258950961744422

ryantownsend,
@ryantownsend@webperf.social avatar

@duffeh that went out in 17.4, didn’t it?

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

Is that … a View Transition in Safari?

Why yes it is! Safari Technology Preview 192 has Same-Document View Transitions enabled, ready for testing.

Demo: https://view-transitions.netlify.app/stack-navigator/spa/

Recording of the linked to demo

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus @igalia the Navigation API can't come soon enough!

ryantownsend, to random
@ryantownsend@webperf.social avatar

CustomStateSet is going to be enabled in Firefox by default 1 – another great platform feature (basically custom CSS pseudo-classes) that'll be available in all browsers 🎉

ryantownsend,
@ryantownsend@webperf.social avatar

@duffeh pretty cool, huh?

ryantownsend,
@ryantownsend@webperf.social avatar

@duffeh do you mean to detect whether a flex container has had to wrap it's children or similarly detecting whether a child within a flex container has been wrapped (i.e. line 2+)? In either case, I'm sure you could, but you'd need Resize and Mutation observers so tread lightly with performance.

ryantownsend, to random
@ryantownsend@webperf.social avatar

@ksylor thanks for highlighting I’d sent a DM publicly 🤦‍♂️

That was the last part of a new talk summary I’m prepping for Smashing Conf / Front Conf.

My new title is “Our Websites Need a Lifestyle Change, Not a Diet”

It’ll be a similar focus on the Web Platform to my perfnow talk but I’m gonna go a little deeper on INP and convincing people perf is a problem, given the audience is more of a broad spread of specialisms.

ryantownsend,
@ryantownsend@webperf.social avatar

@ksylor …and I’ve done it again! 🤦‍♂️

Mastodon really needs a better UI than this ‘private mention’ malarkey.

Nevermind, the talk outline will be public shortly anyway 😅

PSA: don’t toot before coffee.

ryantownsend,
@ryantownsend@webperf.social avatar

@sangster @ksylor there are so many possible metaphors, I’m going to have to be careful not to take it too far 😅

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