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

:empty and :blank

Very nice explanation of how the :empty and :blank pseudoselectors work, along with some examples of when you might want to use them.

Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor

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.

Is your CSS feature detection robust enough?

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.

How to create pure CSS illustrations and animate them - Part 1

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.

CSS Quick Tip: Using Outline

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.

JavaScript

Hoisting in Modern JavaScript — let, const, and var

A deep dive into what’s actually going on in JavaScript with different types of variable and class definitions. If you’re not really sure what the difference is between var and let, or the word hoisting doesn’t bring anything immediate to mind, read this through.

Cache your React event listeners to improve performance.

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.

Lessons Learned: Code Splitting with Webpack and React

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.

Building a Table of Contents with the Intersection Observer API

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.

How to Emit Data in Vue: Beyond the Vue.js Documentation

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.

Other Awesomeness

How do you mark up an accordion?

Fascinating discussion of the semantics of various ways to create an accordion on the web. Looks at implication for assistive technologies, styling, and adding interactivity with JavaScript.

The Importance Of Manual Accessibility Testing

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.

What's New In DevTools (Chrome 70)

I don’t normally include these little release notes for browsers, but occasionally there’s something super cool that catches my eye. In this case it’s the Live Expression feature in devtools. Set up arbitrary JavaScript that updates every 250 ms and show you the value. I think this is going to be a huge help for types of debugging where you might otherwise be using console.log all over the place.

Helping a Beginner Understand Getting a Website Live

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.

The ultimate guide to proper use of animation in UX

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.

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