Phil Wolstenholme

🪩 Web Performance calendar day 2 with @kurtextrem
⏱️ revisiting a study on parsing large chunks of JSON, e.g. those used to pass state in SPA-like apps
🙀 surprise: things in 2023 look different than 2019
🔗 https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/

If you're using CSS cascade layers on your site, how are you handling support for older browsers these days? Do you still reach for a polyfill? Serve up a degraded visual experience? Nothing? 🤔

More on the polyfill here: https://www.oddbird.net/2022/06/21/cascade-layers-polyfill/

Finally had a chance to use scroll-timeline and view-timeline and they're such good examples of how taking a platform-first approach drastically reduces the amount of "knowledge churn" you take on as a developer.

Everything you ever learned about animating with CSS is still 100% valid. Just swap a fixed duration with a scroll or view timeline, and you're off to the races.

No hard earned knowledge that's now useless, no having learn an entirely new thing from scratch.

Great case study from @aaronpeters on using Speculation Rules to speed up TTFB! 👏

https://www.cdnplanet.com/blog/how-improve-ttfb-on-cloudflare-with-speculation-rules/

#webperf

Scroll Detection, that’s something you need JavaScript for, right?

Guess again! Thanks to Scroll-Driven Animations you can extract the scroll velocity, allowing you to style elements based on the active scroll direction and scroll speed 🤯

Article with demos: https://brm.us/css-scroll-detection

The inaugural #StateOfHTML 2023 Survey has launched!

Read my blog post for background:
https://lea.verou.me/blog/2023/state-of-html-2023/

Or take the survey directly: https://survey.devographics.com/en-US/survey/state-of-html/2023/?source=leaverou

If you currently use #docker with Docker Desktop or Colima on the Mac for #craftcms projects, definitely check out @OrbStack

It's a drop-in zero config replacement that still uses Docker… but it's significantly faster, and uses less much less energy. https://orbstack.dev/

It's not perfect and needs more testing with different input types, but I'm pretty pleased with this use of a relatively small amount of JavaScript paired with a scroll driven animation to make a 'sticky only when scrolling up' header that feels native-esque and nicer than just watching the scroll direction and flinging a fixed speed translateY transition on the header:

https://codepen.io/philwolstenholme/full/MWZOGrx

Never in my life would I expected a cybersecurity issue (at least not a non-food safety issue) to result in a food recall

Add this to your risk assessments