Friday Frontend: Pandemic Halloween Edition

Hey there,

It’s another wild and crazy time in the year of 2020: Figuring out how to let kids celebrate Halloween safely in a pandemic. Our approach is we’re just going to have a small, out-door get together with the one family that we’ve podded up with, and then leave candy in a bowl out in front, but definitely a reminder of the bizarre landscape we’re in.

In terms of articles this week: The leading article on CSS in 3D completely blew my mind, I enjoyed the trivia of breaking down the stupid JavaScript problem, and the discussion on keeping learning is key in my mind right now.

Best,

KBall from ZenDev

P.S. I am considering discontinuing this newsletter, for 3 reasons. One: my day to day work and learning have moved more and more away from front-end development. Two: The pandemic and related responsibilities continue to stretch my ability to fit everything in. And three: over time, fewer and fewer of you seem to be engaging with the newsletter.

I get it; as I mentioned in reasons one and two, I’m in the same boat. But I also don’t want to be misinterpreting the data I’m getting, or letting folks down just because I’m stretched thin, so please let me know. If you value this newsletter and would miss it if it went away, please respond and let me know. 

CSS & SCSS

CSS in 3D: Learning to Think in Cubes Instead of Boxes

This totally blew my mind. I have zero uses for this in my day to day work, but the idea of building out not just a single 3D object but an entire 3D scene in CSS, and the tooling discussed here to make it a tractable problem… wow.

Prevent layout shifts with CSS grid stacks

Useful technique for preventing layout shifts using CSS Grid. Given the rise of Google’s ‘web vital’ metric of cumulative layout shift, this is an important tool to add to your toolkit.

Creating CSS Shapes with Emoji

A delightful exploration of things you can do with CSS Shapes. I particularly liked the exercise with a centered image, showing how to work around the limitation of shape-outside only working on a floated image, which pushes you into a left/right world.

JavaScript

Getting Started With Next.js

Some of the most interesting innovation happening right now in the front-end world is in the “higher level framework” space. These are frameworks that take one of the big JavaScript frameworks like React or Vue and build a more opinionated application framework on top of them. Frameworks like Redwood, Nuxt.js, and the subject of this article: Next.js. If you’re not already using one, you should definitely read this article and try out Next.

Observer APIs in JavaScript — Part II

A nice breakdown and tutorial about resize observers and performance observers. Part 1, published last month, covers mutation observes and intersection observers. All extremely useful tools when using JavaScript in a browser context. 

Solving a stupid JavaScript problem

An exploration of operator precedence and some other weird quirks of the JavaScript language, by using an absolutely stupid problem as an example. Fun!

What Vue.js Does Better Than React

A breakdown of some of the nice features and sugar that Vue has that React does not. Written from the perspective of a React developer, but with openness to inspiration and hoping some of these get adopted in the React world as well. I will say that one additional thing that the writer missed in my opinion is the power of truly embracing the reactive system  -- it leads to much more elegant., declarative feeling components in my opinion. I get the impression you could possibly do something similar with MobX in React, but most React code I’ve seen is extremely imperative within the component, even while the components themselves build up to a more declarative approach.

Other Awesomeness

How to Think Like a Front-End Developer

A collection of interesting articles ranging from philosophical musings on front-end development to extremely tactical and technical articles, breaking down approaches. A great resource if you’re relatively new to this world for wrapping your head around the unique aspects of front-end development.

The most useful accessibility testing tools and techniques

A great list of tools and resources. We’ve recently started using axe at work, and are looking at integrating it into end to end tests with webdriver, and it is super helpful in terms of being able to build a lot of accessibility tests into your every day workflow and CI.

Keep Learning

This is a topic area that is super key to think about in our industry. While it is more and more common to have lifelong learning be something needed in any line of work, there are few jobs that have it as extreme as software development and tech. The rate of change is crazy fast, and you must keep learning to stay relevant and employed. I think the author is pointing in the right direction -- the time and money for that learning shouldn’t all just come from you and your extra time. There needs to be a distribution between you and your employer. One thing I do is I try to keep myself at about 90% capacity at work most of the time, leaving 10% for learning and exploration. It doesn’t always work -- sometimes I overshoot or there’s a crunch -- but in the long run, it’s a better deal for both me *and* my employer.