Friday Frontend: Entering Holiday Craziness Edition
Happy holiday season! It’s entering the crazy time - lots of traveling and family abound, so stay safe out there and enjoy!
I’m celebrating by running around like a chicken with my head cut off getting all of our travel and holiday stuff lined up, especially for the kids.
However you're celebrating, make sure you take the time to do it right. Cut off from work for a bit and enjoy the holidays!
KBall from ZenDev
P.S. I’ll still be publishing over the next couple weeks, but we may run a few fewer links each week while life is crazy with holidays, and I may be a bit slower to respond to any questions. Enjoy the season, and we’ll be back to 100% in the new year!
CSS & SCSS
An alternate take on BEM inspired by Atomic CSS. I particularly like their approach to modifier classes - this slight deviation from the rigid “single class API” approach of BEM to me leads to a more intuitive, expressive syntax without causing undue complexity.
This one is potentially a bit controversial. According to the website, iota is “A responsive micro-framework for the grid spec powered by CSS custom properties.” There’s lots of folks who say that CSS Grid obviates the need for any sort of grid framework, because the framework is now the spec. That said, the spec can feel a bit overwhelming I think there’s room for a toolkit that encapsulates common patterns… does iota fit that description? I’m on the fence - check it out and let me know what you think!
If you’re trying to improve the structure of your CSS… or even just understand what it is you’ve got, this can be very helpful! Just drop in your CSS and get a visualization of the specificity graph instantly.
This is exactly the type of post that I was hoping we’d see with CSS Grid starting to get wider usage - an investigation and ideation session around real use cases for Grid. We’re no longer just in the realm of the hypothetical and starting to be able to figure out exactly the problem domains where this is going to make all of our lives better.
This is super cool! I’ve been doing CSS a long time and used some of the tools in this article, but it lays out the conceptual model for a “Block Formatting Context” within CSS in a way I’d never heard or had labeled for me before. Definitely improved my understanding of CSS.
Another bite-sized tidbit, this is a library for playing with manipulating colors. You put in a color, along with some options, and get back a palette of related colors. For a static color palette I’d use scss
darken, but especially now that with CSS custom properties more dynamic palettes are looking easier and easier, this could prove very useful indeed.
Overview of the Virtual DOM that underlies Vue’s approach to views, what it is, why its used, and some of the benefits of use.
The Fronteers Conference has put all of their talks online in a single Vimeo stream. I haven’t had the chance to do more than skim the titles yet, but there’s talks on everything from the history of CSS to WebVR and WebAssembly.
It’s like caniuse but specifically for the web accessibility functionality in HTML5, giving you a quick and easy reference to what you can use where.
This is very interesting! Talking through the benefits of being able to play video formats like mp4 within an image tag, as demonstrated by Safari Technology Preview. Far more performant than GIFs, but preserving the nice image semantics we’ve come to expect for gif-style animations, rather than forcing into video semantics.
A discussion of why accessibility is about more than just screen readers, but really about creating inclusivity for all. Covers different reasons one might need accessible content, and the reasons for creating it.