Lots of good stuff in this week’s edition. One of the best BEM articles I’ve ever read, a mindboggling piece of CSS art, some solid JavaScript tutorials, and a bunch of other awesome webby stuff.

Best,

KBall from ZenDev

CSS & SCSS

Using CSS Grid the right way

A useful set of best practices for using CSS Grid. Rather than try to categorically cover the entire spec, the author highlights a subset of available properties and usecases that have worked well for them.

Of Mice and BEM: Getting Past Common Problems With CSS Organization

This is one of the best articles on BEM I’ve seen, assuming you’re already a little familiar with BEM. It doesn’t introduce the concept or give you the intro, but rather it tackles some common challenges and gives you tools for thinking about how you structure and write your CSS. Well done.

How @supports Works

Fascinating look at the usecases (or lack there of) for the @supports flag, as compared to other forms of fallback built into CSS.

CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

A challenge we looked at a lot when I was working on ZURB Foundation was how we could automatically generate matching sets of colors (for example a button with border and text colors) from a single color, while not violating visual accessibility guidelines. It’s a hard problem! This is an interesting take on the tools now available to you using modern CSS.

Pure CSS Still Life - Water and Lemons

This is mindboggling. It looks not just like an art piece, but like a freaking photograph. Entirely with HTML and CSS. I’ve frankly been staring at this for the last 10 minutes, inspecting it with the DOM inspector, more and I still feel like I have no idea how they’re doing it. Wow.

JavaScript

Everything You Need to Create a Custom React Hook

Now that Hooks is live and public, I expect more and more of these tutorials to come out. This is still pretty basic, but a good, simple, and relatively self-contained tutorial to get you going.

The Magic of React-Based Multi-Step Forms

A solid tutorial showing how simple it is to implement multi-step forms (aka wizards) using a React. And while the tutorial uses React, this general approach translates will to other modern frameworks like Vue or Angular.

Turn Your Static SVG Drawings Into Interactive Widgets and Infographics With Vue.js

Now this is just fun! Y’all know I love SVG, and using a first-class JavaScript framework like Vue to manipulate your SVG takes it to a whole ‘nother level.

Learn pure functions with JavaScript

Back to basics look at the concept of pure functions and how they work within JavaScript. Nothing magical, but a solid tutorial and then a whole bunch of links for more info if you want to go deeper.

Promoted Link

(Note: I’m putting this under promoted because it’s not our standard content, and it is an affiliate link so if you buy something from him later I will benefit, but this particular content is 100% free and I highly recommend it if you’re at all interested in online business or marketing)

LAST CHANCE: Jeff Walker's Product Launch Formula

I‘ve been plugging this in the promoted spot for the last couple weeks, this is the last day it’s available. If you’ve been holding off on watching the videos I’ve been sharing here… now’s your time! Jeff Walker just took down the "firewall" that was hiding these videos… and it won’t cost you one single cent to watch. Not even your email address. Until midnight today, Friday. I’m sure Jeff would love you to buy his full-blown course (I did in 2016, I loved it, can tell you more if you want just shoot me an email), but these videos are free right now and they really show you how to structure your product or business launch.

Other Awesome

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%

Very interesting library (and concept) - make your site seem to react faster by automatically preloading links when someone hovers over them. Pretty cool!

An Introduction To WebBluetooth

In the panel discussion I moderated at JSConf Hawai’i we talked a lot about the benefits that the web platform can bring to all sorts of environments outside the web. Things like sandboxing, security, and incredible ease of development. The question is how do we continue to expand the web platform to let it touch all the things that right now require native hookups, and right here is an article on an API that does exactly that. Learn how to access bluetooth straight from a web app in a PWA. Very very neat!

Deep Dive Into GraphQL Queries

GraphQL is on my list of the top 5 things to learn this year, and this tutorial is not a bad place to do it. Looks at all of the different pieces that make up queries inside of GraphQL.

Third Party Web

A fascinating look at the relative cost of different 3rd party JavaScript utilities. Breaks things down in a number of ways, including looking at analytics providers ad networks, and social solutions. I hadn’t realized quite how expensive disqus is for example! I might need to look at other commenting solutions.

Uncanny A11y

Clever pun, and a look at how oftentimes by attempting to over-solve for accessibility we actually end up shooting ourselves in the foot. It gives some great examples of common missteps, followed by some concrete recommendations for improvement.

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