Friday Frontend: Bitesized CSS Nuggets Edition
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!
KBall from ZenDev
CSS & SCSS
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.
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!
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.
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.
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.
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.
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!
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.
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.
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.
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.