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:
color-mix and relative color
How to modify the hue, saturation, lightness and opacity of colors with CSS
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
There are 10 more of these. I thought I'd save you some scrolling, but if you want you can…
Articles & Experiments by Roman Komarov
Personal site, blog and experiments with CSS and other front-end technologies.
Using the View Transition API in a React App
Discover how to use the View Transition API in your React apps to create engaging and fluid navigati
Common design patterns at Stripe
If you haven’t read the previous article on the importance of design patterns, I suggest you start..
Modern CSS in Real Life
Hey! Chris Coyier here. This is a blog-itized version of a presentation I created. It started life a
Create complex animation curves in CSS with the `linear()` easing function
Introducing linear(), an easing function in CSS that interpolates linearly between its points, allow
Routing: I’m not smart enough for a SPA
Retreating to classic navigation may be cowardice, but it’s INFORMED cowardice
Delivering BBC Online using Serverless
Delivering BBC Online using Serverless
What happened when we disabled Google AMP at Tribune Publishing?
Ahead of its June 2021 algorithm update, Google made a significant announcement as part of its shift
React component as prop: the right way™️
Originally published at https://www.developerway.com. The website has more articles like this...
Discriminated Unions are a Frontend Dev's Best Friend
Discriminated Unions make frontend development easier by representing the different application stat
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 pop punk (Taking Back Sunday), metropopolis (Lorde), dancefloor dnb (Wilkinson), uk pop punk (Neck Deep), big beat (Mint Royale) and anthem emo (State Champs) 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.
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 106 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 755 Favourite 38 Permalink to Toot
Happy Badger-Mushroom-Versary! #weeblsstuff
Boost 117 Favourite 8 Permalink to Toot
There are 4 more of these (!) I thought I'd save you some scrolling, but if you want you can…
I forgot about CSS Naked Day (https://css-naked-day.github.io) this year, but there's always a link in my personal site's footer to https://wolstenhol-no-css.philgw.workers.dev which is a version of my site with all the CSS removed.
Boost Favourite Permalink to Toot
👋 I'm back with a somewhat compiled list of research on which input types are accessible.
🔗 https://www.ellyloel.com/garden/input-types-a11y/
Thanks @hi_mayank for suggesting I should put it together! Definitely helped me get over the imposter syndrome of not thinking I was the right person to put together a list like this 😅
As mentioned in the post, feedback is welcome, I want to make the list as "correct" as possible.
#A11y #Accessibility :a11y:
Boost 25 Favourite 4 Permalink to Toot
Goodness gracious this is well written:
https://johan.hal.se/wrote/2023/02/17/what-to-expect-from-your-framework/
Boost 21 Favourite 7 Permalink to Toot
Does anyone have a nice method of feature detecting CSS cascade layer support? I have a fun idea of using the Postcss polyfill to create a polyfilled (but verbose) fallback CSS file, and the original CSS file with @layer. In a non-polyfilled bit of CSS I'll use background-image inside a layer (so browsers without support ignore it) to make a HTTP request that sets a cookie. Then, in subsequent page loads, an edge function will read the cookie and swap out the polyfilled file for the original.
Boost Favourite 1 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…