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.
There’s also a bunch of other great stuff… the CSS mindset post is a good one especially for developers who are newer to CSS, the JavaScript Transducers article totally blew my mind, and the Vue RFC for a hooks-inspired API got me more excited about the future of webdev than I have been in a while. Enjoy!
Best,
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
One of the biggest challenges a lot of new developers have with CSS is that it takes a very different mental model than more “traditional” programming languages. CSS is declarative, fault-friendly, and intended for an environment with many variable unknowns (content length/size/format/etc). The ideas behind it and best practices are therefor very different than behind something like JavaScript. That said, there definitely are a set of bigger picture concepts there that can be grasped, and this article does a good job of listing out some of them.
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.
JavaScript
Magical, mystical JavaScript transducers
A fascinating read on how transducers work, building them up from scratch from reducers using JavaScript, then showing how to use built-in transducers from Ramda. And if all that sounds like gobbledygook, you’re not alone - but read this article and it will start to make sense. :) It’s a super powerful approach that lets you combine simple functions to create a powerful and efficient data processing pipeline.
Level up your .sort game
Step by step tutorial on how to use the builtin Array.sort method for a range of different scenarios, getting gradually more complicated. A solid addition to your repertoire of JavaScript fundamentals.
Everything You Need to Know About Date in JavaScript
OMG dates in JavaScript are such a headache. I’ve been using moment.js a lot to make it easy, but moment is a surprisingly heavy library (52K minified, even without locales). If you don’t want that kind of weight, it may well be worth it to master working with native Dates, and if you want to do that… this article is the most thorough I’ve seen on it.
8 Useful JavaScript Tricks
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.
This is a fascinating read. It’s an RFC for a new set of APIs for Vue inspired by React’s Hooks, but taking advantage of Vue’s reactivity model to create something that us much more “Vue-like”. The cross-pollination of ideas and improvements across the major JavaScript frameworks here is really amazing to watch, and reading through this got me super excited about the future of front-end development.
Other Awesomeness
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.
Micro Frontends
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)