Friday Frontend: Hooks Are Appearing Everywhere Edition
Happy April! This week’s newsletter includes a couple really interesting examples of how React Hooks are starting to explode into prominence. The API has been live in a production release for just 2 months, but we’re starting to see a ton of really interesting open source packages providing custom hooks.
KBall from ZenDev
CSS & SCSS
As CSS Properties have become more common, we’ve seen tutorial after tutorial defining them at the
:root level. This is fine, and consistent with the typically global nature of CSS (and the way most folks have used SCSS variables), but it’s neat to see an article digging into the ways we can actually scope CSS variables and use that to create encapsulation without any fancy CSS-in-JS or even BEM-style naming.
Both an in-depth explanation of z-index and stacking contexts and a solid recommended approach for preventing z-index problems in a component-based application. Very much worth a read!
A great look at the various ways we can align things on the page with CSS. Doesn’t go super in depth on any one way, but highlights the different approaches, when you’d use them, and what some common sticking points are before pointing off to other resources for anyone who wants to go deeper on a particular approach.
CSS Counters are a really weird thing to wrap your head around… they are implicitly incremented based on matching of selectors… this article will give you all the info about how they work, though I still am not sure I understand when you’d want to use them.
A great set of short recipes and tricks for writing more concise and performant code. Some of these I use every day, but there’s some that were still new to me (the bitwise ‘or’ as a shortcut for rounding is something I’d never seen before. TIL.)
A fascinating mind-bender of an article that gets you exploring how well you really understand
this. Take a look at this when you have a little time because you will get exponentially more out of it if you try the exercises than just read through.
Hooks have only been truly “production live” for a couple months now but we’re starting to see a rich ecosystem of open source custom hooks emerging. This post goes through a set of nice ones.
Another very interesting example of what folks are starting to do with hooks. This time, they’re used to implement a super simple routing system for a React application.
For those who can't get enough learning and aren't restricting themselves to the frontend I highly recommend this newsletter. Morning Cup of Coding is a newsletter of similar structure to this one but covering all fields of programming. Curated by Pek and delivered every workday, it is designed to be your morning reading list.
An excellent introduction to semantic tags and HTML. If your web sites (or components) still look like div soup, you should definitely give this a read through.
Another look at the cost of framework-first development practices and the downsides of the developer ergonomic focused approach to web development. Interesting read.
One of the frequently bemoaned issues with modern web development is how build & CLI intensive it is. You need to understand npm, and build systems, and so much stuff just to get a simple web app up? In fact, for many things you do not… and you can load most open source packages straight from free CDNs like JSDelivr. This post explains that and how to go about doing it.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!