Week Notes 11
This week has been a busy week in terms of producing content. With three articles and a Piccalilli issue going out, I’ve spent a lot of free-time writing. After a reasonably quiet period on my blog, it’s been nice to feel inspired to write again, though. It’s also been really nice to write about CSS.
With work, I’ve had a mixed week. I spent a day chasing my tail where Vue and form elements were fighting each other. It was incredibly frustrating, but I managed to come up with a solution. It’s part and parcel of using frameworks and insisting on using semantic elements. The way I see it: a day of hell for me makes everyone’s experience better, so it’s well worth it.
I ended the week on a real high. This project requires some sliders, mainly for collections of card elements. I started off by looking at popular open source solutions, but I quickly discovered "dead" projects and accessibility issues. I chose to practice what I preach and tackle the issue with progressive enhancement instead. Using modern CSS like snap-points, it’s actually pretty trivial to achieve a recognisable effect. Even for old browsers, using overflow and flexbox gives you pretty much a full experience alone. The JavaScript enhances the CSS and provides state management, rather than doing all of the work.
Sometimes it works out really well to take a step back, fire up CodePen and prototype something new, rather than wrestle something that’s not up to standard, into shape. I think after the project is done I’ll explore the idea more and maybe open source a portable slider Web Component that you can drop into your projects, because as much as we all hate them, they’ll continue to stick around.
Speaking of Web Components: I had a very good chat about working on a project with someone I have heaps of respect for. We have a very similar outlook on things, so it should be exciting. More to come, later in the year.
Digest permalink
- 📝 It’s everyone’s job
- 📝 Build your next design system with Web Components
- 📝 Avoid default field validation
- 📝 Led by Donkeys: How four dads made asses out of Westminster
- 🛠 Awesome one-liners you might find useful while coding
- 💸 Eleventy on Open Collective
- 📝 Trainers
- 📝 Dev perception
- ✍️ A progressive disclosure component
- ✍️ Creating a full bleed CSS utility
- ✍️ Break out of the echo chamber
- 💌 Piccalilli Issue #2
Hi 👋, I’m Andy — an educator and web designer
I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.