Friday Frontend: Emphasis on Accessibility Edition
Happy halfway through June! This week we had a number of great articles focused on accessibility - both at a philosophical level and with specific tactics to use or avoid. I particularly loved the article on web accessibility in context.
KBall from ZenDev
P.S. Next week I’ll be hosting a panel at NodeConf Columbia - if you happen to be at the conference, shoot me a note and let’s meet up for a coffee!
CSS & SCSS
The CSS Mindset
Grid, content re-ordering and accessibility
As the ease of ordering & moving things around on the page has gone up with CSS Grid and Flexbox, the tools for how those things get read by assistive technologies have not kept up. It is now super easy to create a beautiful layout that is completely disjointed and usable in a screen reader. This is a very important read, with both a warning about what to watch for and a call for improvements at the tooling level.
Build a Static Portfolio With Advanced CSS Bar Chart
Great step by step tutorial on building out a bar chart with CSS. Covers a lot of topics - flexbox, custom properties, transforms, transitions, and more. If tutorials are your preferred way to learn, there’s a lot to like in this one.
Top 20 CSS Buttons (+ animations)
On the other hand, if you like learning by example (after example after example) then this may be more your alley. A massive 20 different examples of CSS buttons with some very cool animations, all in their own codepen so you can play and tinker (or just straight-up swipe) any you like.
Level up your .sort game
Pretty cool list of tricks! I particularly like some of the tricks with spread & destructuring. The example of using destructuring to split an object into two objects is super neat.
Vue RFC: Expose logic-related component options via function-based APIs instead.
Let's Talk Testing: 4 quick lessons on the philosophy of testing
(Bias alert: I wrote this) Tools like Mocha, Jasmine and Jest have made writing tests far easier… But there’s still a gap. It’s extremely hard to find information on the philosophy of testing. What to test and why. How much is enough? What type of tests should I be writing, and when does it fit into my process? This article pulls out some key lessons on the philosophy of testing from a conversation on a recent JSParty episode.
What’s the front-end equivalent of a micro-services architecture? A micro-frontends architecture of course. This approach makes a ton of sense, though in my opinion you will definitely want to have an internal components library and some cross-frontend coordination so your UI doesn’t degrade into a series of disconnected, disjointed experiences.
Web Accessibility In Context
A fascinating read that highlights both some of the historical context for accessibility and assistive technologies and also dives into the way we do accessibility in the web today. I highly recommend reading through this.
Indicating focus to improve accessibility
A look at the importance of focus styles, a discussion of ways to style focus (for goodness sake don’t remove them entirely, but you’re not the only one who finds default focus rings to be ugly), and some discussion of future improvements to managing focus styles.
The Anatomy of Accessible Forms: The Problem with Placeholders
A look through some of the accessibility (and general usability) problems with placeholders. I think this is a great example of how good accessibility practices are often actually good usability practices for all. While the problems highlighted are most impactful on those who have challenges, I found every single alternative suggested improved usability for me as well.
Avoiding Burn Out as a Web Developer
Overwhelm is one of the most common challenges I’ve heard from you about web development today, and overwhelm can often feed directly into burnout. But there are other factors as well, and a lot of them contribute to high levels among burnout among web developers. This article talks about some of those factors, how to see them coming, and some tactics for trying to avoid burnout.