Friday Frontend: The Web Is Super Flexible Edition
Hope you had a great week! This week’s articles blew me away in highlighting just how incredibly flexible this medium we call the web is.
There’s folks creating amazing illustrations & animations with pure CSS, an article showing 5 distinct (and valid) ways to set up an accordion semantically, and some very exciting new tooling for utilizing CSS Shapes. Plus all the usual helpings of tutorials and fundamentals along the way.
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
Very nice explanation of how the
:blank pseudoselectors work, along with some examples of when you might want to use them.
I’m soooo excited about the new CSS Shapes - the web has been pure rectangles since its inception, and all of the incredible diversity in in web design has happened almost in spite of that rectangular limitation. Suddenly that is breaking down, and we’re seeing new possibilities and new tools rise up to take advantage of those possibilities.
An interesting exploration of how fragile and specific CSS feature detection with
@supports can be. Since many new features actually have multiple ways to invoke them, it’s not enough to just check if the browser has support for the feature, you need to check for the exact syntax you use.
Step by step guide to creating an illustration in CSS. Makes it very easy to understand and breaks it down step by step, plus with additional posts part 2 and part 3 layering in animation and then applying the techniques to a far more advanced illustration.
A short but informative dive into the
outline property. Similar to but different from border, this article explains what you can and cannot do with it. Primarily used for accessibility/focus purposes, but I’ve also encountered designs where having yet another lever to control via
outline made something implementable in 1 elem rather than 2.
let, or the word hoisting doesn’t bring anything immediate to mind, read this through.
Very interesting article that looks at the performance impact of anonymous functions as event listeners inside React components. I think there are a lot of readability reasons to refactor event handlers out into named functions or methods on the react component, but this highlights performance reasons as well.
A solid introduction and walkthrough to codespitting components in React. While not quite as simple as Vue’s async components, it turns out to be still quite straightforward.
So many of the examples I’ve seen for intersection observers have to do with lazy-loading of images, it’s refreshing to see a different way to use it. This highlights how to build an interactive table of contents that shows where you are in the page.
Solid overview of how event emitting works in Vue, showing a couple of examples, and then calling out some antipatterns. If you’re already super comfortable with the event emitter pattern and passing data up and down the component tree you probably won’t get much new, but if you’re newer or not sure about how you’re approaching it this is a good read.
Both a compelling argument in favor of manual testing, but also a phenomenal resource for how to get started doing manual accessibility testing the types of accessibility/screen reader tools you should be testing with.
As we get a little further along in the tech industry it’s super easy to forget quite how many concepts and pieces of jargon we had to absorb as we came along. This is an outstanding step by step explanation of all the pieces that go into a website online, how a CMS works, and how to set up a local development environment.
Wow. I could look at these animations all day - so much knowledge in here, and for each comparison or demonstration there is an explanation of what the principle is and then a visual display of it. Very very cool.