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

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 😅

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

An opinion: things like <br /> are ok, and even <div /> is fine when in certain contexts, where there is some preprocessing before outputting proper HTML.

For any case of developers actually outputting invalid HTML into their code, it is browsers that should help them. Like, I strongly think that all dev tools must highlight all non-valid HTML and CSS.

Yes, browsers should render things as usual, but I don't understand why are we ok with not surfacing this in the inspector etc.

ryantownsend,
@ryantownsend@webperf.social avatar

@kizu 💯

I really wish there were warnings in the inspector against elements where the browser has 'fixed' broken HTML.

A few times I've wondered why something wasn't working only to find my IDE/tooling had missed that I had a mismatched closing tag.

belldotbz, to random
@belldotbz@mastodon.social avatar

I can't believe there are still tickets left for All Day Hey! I'm sure there's not going to be many left for long either. It's by far one of my favourite events in the calendar both to speak at and to attend.

This lineup is outrageously good too. Get tickets while you can and I'll see you there! https://heypresents.com/conferences/2024

ryantownsend,
@ryantownsend@webperf.social avatar

@belldotbz I won’t be at the event, but we should definitely grab a coffee/lunch if you have some free time!

slightlyoff, to random
@slightlyoff@toot.cafe avatar

The promise of frontend frameworks was that a local snapshot of the app's data model would be faster to operate on than a server round-trip.

This is a measurable question, and for nearly every class of app, the reality is that you should keep your data on the server and send partials to innerHTML if you want "interactivity".

ryantownsend,
@ryantownsend@webperf.social avatar

@slightlyoff Rails has had it right for almost 2 decades.

It's still the most productive tool I've worked with at all but the smallest scale projects.

ryantownsend,
@ryantownsend@webperf.social avatar

@slightlyoff and before anyone gives the "you're most productive in whatever you know best" excuse, I should clarify: I'm not talking about myself in isolation, I'm describing being someone managing multiple dev teams, not being hands-on, and optimising their net productivity over years.

We tried Big JS™ and it failed to deliver for both our developers AND our users.

ryantownsend,
@ryantownsend@webperf.social avatar

@slightlyoff when people come to terms with the fact you only need a little on the client this ceases to be a real problem, but admitting that would upset a lot of fragile egos that secretly crave the complexity to remain relevant.

ryantownsend, to random
@ryantownsend@webperf.social avatar

A nice little bug in @jordyscholing's RUMvision Core Web Vitals History Checker...

I love improving CLS by Infinity%! 😅

ryantownsend,
@ryantownsend@webperf.social avatar

@jordyscholing this should never be fixed.

Performance wins should be celebrated to the maximum.

belldotbz, to random
@belldotbz@mastodon.social avatar

is the new css-tricks post ai generated or what 😬

https://css-tricks.com/accessible-forms-with-pseudo-classes/

ryantownsend,
@ryantownsend@webperf.social avatar

@belldotbz even looks like the visuals have been designed by Devin 😂

zachleat, to random
@zachleat@zachleat.com avatar

the spiciest web performance leaderboard would rank saas company home pages making “blazingly fast”-esque claims 👀

ryantownsend,
@ryantownsend@webperf.social avatar

@zachleat post this on the bird site... I dare you 😉

ryantownsend, to random
@ryantownsend@webperf.social avatar

@bramus sorry I'm consuming your time today, but you might be able to save me a day of research on Scroll-driven Animation:

Do you know if there's a way to effectively detect whether a position:sticky element is currently stuck? e.g. if I have the element half way down a page, I want the animation to start when it hits/nears the top of the viewport and finish Npx after that?

Kinda like your fixed header demo (https://scroll-driven-animations.style/demos/cover-to-fixed-header/css/) but with variable content above the header element.

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus I'm thinking something like: animation-range: entry calc(100dvh - 10px) entry calc(100dvh + 10px) but I'm struggling to get this working 🤔

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus found it! animation-timeline: view() not scroll() 💪

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus @kizu I knew I'd seen it somewhere!

Huge +1 to having a :stuck state selector of some kind!

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

We sent out the “Intent to Ship” for view-transition-class!

https://groups.google.com/a/chromium.org/g/blink-dev/c/cYoXygoSrNM/m/gJJZWB72AwAJ

This addition to View Transitions is going to be so helpful!

Here’s why! 👇

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus looks like support has a long way to go... https://caniuse.com/css3-attr 😅

ryantownsend,
@ryantownsend@webperf.social avatar

@bramus thanks, will have a read!

Not sure if there's overlap here, but do you know of any work going towards allowing duplicate view-transition-names per page with MPAs?

For example, on lessonsofacto.com I have "Latest Episodes" and then collections of episodes beneath, so one card can appear twice on the home page.

I currently add the view-transition-name with JavaScript on click, which works for the forward navigation, but when navigating backwards this doesn't work.

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