|
Hello Reader,
I’m going to keep the intro short on this ones because there is a lot going on in the What I’ve Been up to section, but before we jump into into that, two quick things:
As an experiment for Interop 2026, Jake Archibald and the team at Firefox habe put together a way to gather more feedback on what features matter most to developers. So, if you head on over here, you can pick the proposals that are important to you, and then rank them.
They mention that 10 or so would be plenty, but I did end up with about 20 on my list, which made ranking them hard 😅.
If you aren’t familiar with Interop, it’s an initiative where a selection of browser features are picked for all browsers to get working bug free. Some are new features that aren’t in all browsers yet, others are existing features that still are prefixed, or which have buggy implementations. This can help them not only know what’s important to developers, but which features are most important.
Second, I’m going to be a judge, along with David Prenteli and Cassidy Williams, of the Bad UX World Cup!
There are a lot of bad date pickers out there, but the point of this is to create the worst possible date picker. There are already a fair number of impressively bad entries, but there is plenty of time for you to submit something if you have a good idea for it.
If you’re interested, you can see the current submissions, get additional details, and submit your entry right here.
🙋♂️ What I’ve been up to this week
Directionally aware button effect without JavaScript
 A little while ago I saw a codepen that had a directionally aware hover effect… the only issue was, it was only directionally aware on mouse-in. If you left in another direction, it went back to the starting location… this got a bug in my head, and I wanted to see if I could make it work in any direction, and it turns out you can!
In this video I explore my solution, which looks at some fun modern css tips, but also some cool stuff you can do with transition delays.
- LukyVJ’s original codepen: https://codepen.io/LukyVj/pen/PwwrYRR
- My finished version: https://codepen.io/kevinpowell/pen/VYvWKBV
- Anchor positioning polyfill: https://github.com/oddbird/css-anchor-positioning
Auth & backend so simple even this CSS dev gets it
 I’d been working on a color theme picker thing when Supabase reached out because they were having their Select Conference last Friday.
I already use Supabase for the platform I built for HTML & CSS for Absolute Beginners (which I’ll be moving all my courses to eventually), and it gave me the idea of using them to add auth and the ability to save themes to that project, so I took a look at how I could do that!
A pragmatic guide to modern CSS colours - part one
It’s been a while since I’ve written an article, but I think this one turned out pretty good (and as the title promises, there is a part two in the works as well).
For most developers, the only time they touch colour values is when they copy them from a design file and paste them into their editor. We are developers and not designers, after all.
However, there have been a lot changes to colours in CSS over the last few years — from updates to the syntax of familiar features to all new ways of working with colours — that even copy/pasters can take advantage of, and that’s exactly what this article explores.
Is CSS a Programming Language?
I was also a guest over on the Whiskey Web and Whatnot podcast this week, where I had a bit of whiskey and then nerded out about CSS with Adam Argyle and Robbie Wagner for an hour.
|
🎙️ Podcast
Conferences & Community: A Chat with Henri Helvetica
In this episode I chat with Henri Helvetica, a performance engineer and active member of the web community. We dive into the significance of conferences and meetups, and how COVID-19 has affected in-person events. Henri offers insights on event organizing, the need for new in-person experiences, and what makes a good event. We also explore the value of community and networking, and how to find events and meetups in today's landscape.
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB
|
|
📝 Quiz time!
Which of the following CSS properties allows us to resize image elements within their boxes, the same way we can do `background-size: cover` or `background-size: contain` for background images?
- image-position
- image-size
- object-fit
- object-size
As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.
|
|
Have a fantastic week!
Kevin
|
Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇
Beginner friendly (and free)
HTML & CSS for Absolute Beginners
A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.
Enroll →
|
|
Intermediate
CSS Demystified
For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!
Enroll →
|
|
Intermediate (Frontend Masters)
Build a Modern Site from Scratch
Build a fully responsive site using modern CSS features, along with some polished animations.
Enroll → (25% off first month of Frontend Masters if you use this affiliate link)
|
|
|
|
|
If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205 |
|
|
