Hope you’re staying warm during the record cold weather we’re having across most of the US. Even over here in California where the recent polar vortex hasn’t hit us as much, it’s been much chillier and definitely feeling like winter.

This week, my favorite articles are the early look at the Vue composition API and the dive into design patterns we can learn from newspapers.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

CSS Logical Properties

Great overview of what CSS logical properties are, why you’d want to use them, and some examples in action. As we move to an ever-more global world, it’s great to see CSS catching up to the needs of languages that aren’t all left to right.


Two-Value Display Syntax (and Sometimes Three)

A much shorter read than the deep dive I sent out 2 weeks ago, this looks at how the upcoming multi-value version of the display property makes CSS more logical and easier to explain.


8 CSS image filters with code examples

A look through what is possible with some simple CSS filters on images. I think for visual impact my favorite is the inversion filter, though I suspect grayscale and sepia will have far more examples of real-world use.


Some Things You Oughta Know When Working with Viewport Units

A nice quick-hit followup to an article I sent out last month, looks at some of the drawbacks/gotchas to using viewport units, and does a little bit of exploration into how you can address them.


aria-label Does Not Translate

Interesting look at the intersection between accessibility and language translation. The title is a little incorrect - in fact, Chrome does appear to include aria-label in its auto-translation, and given the 57% market share of Chrome worldwide, that is not insignificant.


JavaScript

An Early Look at the Vue 3 Composition API in the Wild

There’s been a lot of back and forth about the Composition API that is upcoming in Vue 3, and through the magic of plugins you can try it out now in Vue 2. This article does a nice job of showing how moving from the existing Vue 2 options API to the composition API can improve your code legibility.


The Wise Guide to React useState() Hook

React Hooks are now the norm for handling state within React, yet they can be pretty confusing to folks still used to a component-based syntax. This is a well-done in depth guide to the most common hook, useState.


JavaScript's try-catch hid my bugs! 🐞

A dive into error handling gotchas and better patterns in JavaScript using try/catch. Does a nice job going through the thinking around where to put error handling.


Attributes of object properties in JavaScript

This one is a bit of work to wrap your head around, but it dives deep into how object properties work in JavaScript. We love to think of properties as just being values we write, but they are not - they can be wrapped by getters and setters, they can be made readonly, and more.


Other Awesomeness

Location, Privilege and Performant Websites

A look at real-life consequences of disregarding performance in websites. Also, the website referred to is a shocking example of how naively including libraries adds up. Doing some quick digging into what they’re loading, I see 2 independent versions of jQuery (one conveniently renamed ‘xaquery’ to not do a name conflict), moment.js, lodash, plus over a megabyte of JavaScript from a 3rd party vendor called Coveo. Wow.


How to Fully Optimize Webpack 4 Tree Shaking

It’s a little bit down in the weeds, but if you’re inspired by the previous article to do something to reduce the amount of JavaScript you’re shipping, you may well want to dig into tree shaking. And if you are using webpack, you’ll find that it isn’t quiiiiiiite plug and play. That’s where this article comes in.


What I’ve learned about accessibility in SPAs

Solid look at accessibility patterns, some of which are unique to SPAs but others which are global. That said, I think my favorite thing is this takeaway: “Working on accessibility has improved the overall usability of my app in a number of ways, leading to unforeseen benefits such as KaiOS arrow key navigation and better integration tests.”


The Front-End Tooling Survey 2019 - Results

This survey deserves some of the same caveats and skepticism that many surveys of dev tools do - they have not done anything to figure out how representative the answers are of the broader community, and not done much in terms of exposing demographic info about who answered it. That said, there’s some interesting stuff in here. Don’t take it as gospel, but rather uses it to shine light on tools that maybe you will want to look into.


What Newspapers Can Teach Us About Web Design

Creativity is often the act of taking concepts from one domain into another. While newspapers are certainly not the only good source of inspiration for web design, they have had to grapple with many of the same information architecture problems, and over the centuries (!) they have been around have developed some very strong patterns.