Hope you had a great week! Happy July 4th to those of you in the US. We’ve got a bunch of great stuff for you this week; some great architectural pieces both on the CSS and the JavaScript side. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

CSS Custom Properties In The Cascade

A brilliant deep-dive look into CSS custom properties and how they enable you to utilize inheritance and the cascade while still getting a lot of isolation. I’ve been more in the JS world than the CSS world of late, but posts like this get me soooo excited to get back into styles & CSS architecture with the wonderful new tools we have now.

CSS Architecture for Multiple Websites

A great look at how to think about styles and architecting your CSS in layers. That layered approach is also a great way to think about application architecture and design - some things truly are shared and global, while others are extremely specific to a particular component.

CSS :focus-within

Short, straightforward, tightly scoped article talking about the :focus-within property and how you can use it to improve the accessibility of your site or application. If you’re using :hover to expose information or actionable elements and not yet also applying :focus-within, you should definitely read this article.

CSS Shorthand vs. Longhand – Which to Use

Useful rundown of some of the differences between shorthand and longhand in CSS properties, what you give up when you go to shorthand, and the pros and cons of each.

JavaScript

The cost of JavaScript in 2019

An update from Addy Osmani about the impact of JavaScript on the web and performance in 2019, and things you can do to impact it. Interesting because the number one things to pay attention to have changed from the conventional wisdom of a couple years back. According too Osmani, parse & compile time are no longer big issues. In 2019, the dominant costs of processing scripts are now download and CPU execution time.

The 10 Component Commandments

Component-based architectures are one of the major megatrends happening right now in front-end development, and I love to see articles like this focused on how to create usable, high quality components. Some of the “commandments” in this article are React specific, while others are more generally applicable. Recommend this to everyone working in a modern JS framework.

The State of Angular in 2019

A fascinating look at the “enterprise-focused” player in the JavaScript framework ecosystem. Definitely some items that surprised me (given the overall lack of buzz, it’s kind of shocking to hear they’re seeing 50% y/y growth). Lots of good stuff, especially if you’re already using TypeScript and interested in an batteries-included framework.

Design patterns in Node.js: a practical guide

While the title says Node.js,these are really just JavaScript design patterns. I’ve used every one of these in client-side code as well. And they are well worth knowing.

RxJS: A Simple Introduction

RxJS has been embraced by the Angular community as one of the core event-handling patterns in Angular, but it is really applicable quite globally. I really like the mental model, though the API surface area of the library is pretty large and can be hard to pick up. This article does a good job introducing it.

Other Awesomeness

HTML can do that?

This is great. I’ve seen a lot of articles about the benefits of semantic HTML for accessibility and machine parsing and analysis, but nothing like this that systematically shows the capabilities of HTML. There are some items on here that I would have sworn you needed JavaScript to do, but no! Just HTML!

Adding a WebAssembly component to a React App

Very cool example of how quick and easy it is to integrate WebAssembly (in this example generated from AssemblyScript) into a web app. I think this sort of ‘polyglot’ language approach is going to be a big part of the future for big applications. Glue & UI code in JavaScript, and importing performance intensive and/or specialized code as WASM from applications written in languages like C++ or Rust.

How accessibility trees inform assistive tech

Great look at how what accessibility trees are, how different HTML, CSS, and JavaScript influence them, and how you can take a look at the accessibility tree generated by your code within Firefox.

The Layout Instability API

I’m sure I’m not the only one who gets super annoyed by content jumping around while I’m reading it - and I’d never intentionally create that experience for my users. But sometimes you just don’t know how your code behaves “in the wild”, and you can’t exactly ride-along with every user. The Layout Instability API aims to address this issue.

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