Friday Frontend: Very Cold Edition
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.
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.
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,
Location, Privilege and Performant Websites
How to Fully Optimize Webpack 4 Tree Shaking
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.