This week’s edition of the newsletter has a lot of really great bite-sized nuggets of CSS, showing some pretty cool effects. Let me what you think!

There’s also some great JavaScript fundamentals articles, a look at cross-framework UI toolkits built with web components, and much more. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

How to Create and Animate Rotated Overlays

This is a super cool effect for hiding and showing content on the screen, and this tutorial makes it super simple. If you use html based slides, or do anything with carousels or other forms of hiding and showing content you’ll want to give this a read through.

Fading out siblings on hover in CSS

Very clever little nugget for fading out the siblings of an element upon hover. I thought going in it was going to use sibling selectors, but that solution has some holes and their solution does not. Love it!

How to create a multi-line text background effect

Another bite-sized tutorial, this one showing a very cool background effect-on-hover that you can use on inline elements (like links) even if the span multiple lines.

35 Inspiring Examples of CSS Animation

A whole ton of CSS animation examples, each one a codepen so you can see how it’s done. Tons of fun! I think my favorites are the drumset and the cat swinging on the rope.

Are nested grids like nested tables?

With all the talk about subgrid coming soon it’s worth thinking about what it is and what it is not. What it is most definitely not is a return to the era of nested tables… while it kinda sounds like it might be, in this article Rachel Andrew breaks down the fundamental difference.

JavaScript

JavaScript async and await

Asynchronicity is hard. It’s one of the hardest subjects for new JavaScript developers, and occasionally unexpected behavior bites even the most experienced among us. The async and await keywords gave us some nice syntactic sugar that makes it feel more approachable, but also come with some gotchas that can hit you if you’re not careful. This article does a great job talking through step by step.

What is a reducer in JavaScript?

Solid ‘from the basics’ explanation of a concept that has dramatically increased in popularity with the rise of libraries like Redux. If you’ve been seeing the word ‘reducer’ thrown around everywhere (and maybe even written a few yourself) but don’t feel solid on what exactly that means, check this out.

How to use the JavaScript console: going beyond console.log()

This is pretty wild. I use console.log a lot, particularly when trying to get a grip on what’s going on in a codebase I’m unfamiliar with. And I was somewhat aware of the ability to do things like style logs with CSS… but console.table? That is super cool!

Wrap a Vanilla JavaScript Package for Use in React

Very nice long-form article on wrapping up a vanilla package for use within React. Reminds me a lot of a similar article I wrote covering integrating JavaScript into Vue. Reading through this will give you a better understanding of how React works, as well as a useful tool in your toolkit the next time you want to use a library that is not natively integrated into your web framework of choice.

9 Web Components UI Libraries You Should Know in 2019

This is really neat. I’ve seen most UI libraries splitting into either framework-specific component libraries or CSS-only (or CSS-mostly) toolkits that avoid larger scale JavaScript, but these libraries are utilizing web components to have their cake and eat it too. Be wary of size though… as an example it looks like the material-based one is something like 300k of javascript. The polymer based one is much smaller (and is per-component) but has polymer as a dependency.

Promoted Link

20% off Wordpress.com and Jetpack

One of the most valuable things I’ve ever done for my thinking and my career is to start blogging regularly. And though as a developer I love to hack & customize my site (and my site is now a static site built with Jekyll), for a long time I actually was using Wordpress. Why? Because it got me actually writing much sooner instead of mucking around with my website. If that’s you, and you’ve been “meaning to start blogging” but keep not getting your site set up, GO USE WORDPRESS.

On Wordpress.com you can get 20% off right now with the coupon DISCOUNT20, (you can also start with the free plan) and you can be up and writing your first blog post within minutes. Then when you actually finish the custom site you’ve been working on, you can export your posts no problem. Or if you’re self-hosting a Wordpress site already, check out Jetpack for a lot of great improvements. Also 20% off with the same discount code.

Other Awesomeness

Inclusively Hidden

Great rundown of the various ways you might choose to hide and show content visually and to assistive technologies. I really enjoyed this because it not only covered the techniques but also went deep into the reasons you might choose one or another.

TDD Changed My Life

I tend to be a bit of a skeptic of full-on TDD, particularly when it comes to products with rapidly changing requirements, but this is one of the fuller-throated and more compelling arguments I’ve heard in favor.

New in Chrome 74

I don’t include browser updates very often in here, but this one is in because there’s a pretty interesting big JavaScript change. Private class fields are now on by default in Chrome! That’s pretty big!

Optimizing Performance With Resource Hints

Similar to a post we linked last month, but much more approachable, this goes into the ways you can optimize performance by hinting to the browser about how it should load resources ahead of time.

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