Meanwhile, elsewhere on the internet…
Tweets from Twitter, blog posts from DEV/Medium, talks from YouTube and beyond, photos from Instagram, music from Spotify, and nice places from Foursquare (lol, I know, but I've built the API integration now so Foursquare lives on on this website!).
Words
Blog posts I've posted on DEV Community or Medium (one day I'll build my own blog, I promise…)
Reading
Some things I've been reading recently and some random items from the vaults:
The modern way of serving images
Technical in-depth guide for the <picture> & <img> srcset and sizes attributes to create responsive
Tools for better thinking
Collection of thinking tools and frameworks to help you solve problems, make decisions and understan
WICG/close-watcher: A web API proposal for watching for close requests (e.g. Esc, Android back button, ...)
A web API proposal for watching for close requests (e.g. Esc, Android back button, ...) - GitHub - W
CSS Blend Modes
What are CSS blend modes. How to use background-blend-mode and mix-blend-mode. Interactive examples.
color-mix and relative color
How to modify the hue, saturation, lightness and opacity of colors with CSS
There are 10 more of these. I thought I'd save you some scrolling, but if you want you can…
Compound Components
Compound components provide a declarative API that can allow for some impressive solutions to everyd
Future of CSS: Scroll Animations
Today we're going to be looking at scroll based animations as a part of animation-timeline, at the..
Debugging Like A Pro-xy
Learn how to use Proxies to debug tricky issues in JavaScript.
Fit-to-Width Text [with scroll-driven animations]
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded par
The Ballad of Text Overflow
The text-overflow property can be used to show visual indication of truncated text. I’m not a fan, a
I wrote an HTML canvas data grid so you don’t have to
HTML 5 canvas is an incredibly powerful and woefully underutilized tool for web developers. It is al
The problem with automatically focusing the first input and what to do instead
Adam Silver – interaction designer - London, UK
First Experiments with View Transitions for Multi-page Apps
Experimenting and learning about view transitions for multi-page apps
Introducing FormKit: A Vue 3 form building framework
Web forms are the connective tissue of the internet. Without them people can’t request their health.
Speaking
Talks I've given at conferences or other events. I'll link to slides or videos where they are available.
According to the Spotify API, I've been listening to a bit of bedroom pop (PinkPantheress), post-hardcore (Finch), british alternative rock (Enter Shikari), progressive electro house (Eric Prydz), alternative metal (The Used) and uk pop punk (Neck Deep) over the last few weeks (their genre names, not mine!)
You can click the cards above to play a little preview of the artist, courtesy of the Spotify API. I also use the Spotify API to get the tempo/BPM of the preview song, and I use this to influence the speed that a card bops at while its playing.
Press the pause icon or the esc key on your keyboard to stop the previews.
Tweets and toots*
Tweets and toots by me, @philw_ and/or philw_@hachyderm.io.
🪩 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/
Boost 2 Favourite Permalink to Toot
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/
Boost 5 Favourite 1 Permalink to Toot
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.
Boost 4 Favourite 2 Permalink to Toot
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/
Boost 4 Favourite Permalink to Toot
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
Boost 31 Favourite 5 Permalink to Toot
There are 4 more of these (!) I thought I'd save you some scrolling, but if you want you can…
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
Boost 104 Favourite 6 Permalink to Toot
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/
Boost 3 Favourite 2 Permalink to Toot
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:
Boost Favourite Permalink to Toot
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
Boost 718 Favourite 38 Permalink to Toot
Places
A randomised asortment of places I've liked on Foursquare at one point - it could be somewhere from a holiday, or it could be a random bar in Manchester that closed three years ago…