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.

Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Breaking CSS Custom Properties out of :root Might Be a Good Idea

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.

Managing Z-Index In A Component-Based Web Application

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!

How To Align Things In CSS

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.

A Guide to CSS counter

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.

JavaScript

12 JavaScript Tricks You Won’t Find in Most Tutorials

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.)

What is this? The Inner Workings of JavaScript Objects

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.

10 React Hooks you Should Have in Your Toolbox

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.

Modern and clean routing with hooks

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.

Free Nuxt.js Tutorial — Vue Mastery Course

The last two major client projects I’ve built, the front-end has been built with Nuxt.js. This is a higher-level framework built on top of Vue.js that makes setting up a “Universal JavaScript” (SSR with client-side hydration) super easy, with a lot of additional great features as well. I highly recommend exploring Nuxt, and if you haven’t yet this article is a decent place to start.

Other Awesome

Morning Cup of Coding

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.

14 of the best JavaScript APIs

The title is slightly misleading, these are really more browser APIs than JavaScript broadly (most wouldn’t make any sense in Node) but this is still a super-cool look at a set of new and in some cases still-under-development browser capabilities that we can start to use in our websites and applications.

Stop using so many divs! An intro to semantic HTML

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.

Responsible JavaScript: Part I

Another look at the cost of framework-first development practices and the downsides of the developer ergonomic focused approach to web development. Interesting read.

How to use JSDelivr

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.

A Future Without Webpack

A provocative title, and an interesting idea. A look at how we might be able to use the fact that JavaScript now has native modules to back away from the bundler requirement and be able to ship modern web apps (with dependencies) without a bundler. Interested readers might also check out this interview with the author on the same subject.

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