Friday Frontend: Post Thanksgiving Edition

Hey there,

This last week was my birthday, as well as yesterday being the Thanksgiving holiday, and for both I took the excuse to think back through the last year, look back at goals I had set myself, and look forward to the new year.

You know what? Looking back at my 2020 goals, I have achieved almost NONE of them. One early year goal I finished in February, but other than that it’s a big fat goose egg. The pandemic and all of the other shit that came up this year completely obliterated every goal I was aiming at.

I think this is a good highlight that we don’t have control over outcomes, all we have is control over what we do ourselves and our process. The big lesson I’m taking away from this year is to focus on process over outcomes. Figure out what is going to take me in the direction I want to go, and keep investing in that process over and over again. And that’s helped me be at peace with the fact that all of the things I intended to achieve this year didn’t happen, because turns out a massive pandemic + family health issues + political turmoil means that just surviving and keeping things moving forward is a massive achievement.

I hope you too are able to give yourself some grace this year for anything that you’ve struggled with. We’re coming to the end of it. We have news of multiple working vaccines for COVID-19, and while it will take a while yet to manufacture them, distribute them and get this under control, the timelines I’ve seen indicate we’re closer to the end than the beginning.

Best,

KBall from ZenDev

CSS & SCSS

Under-Engineered Responsive Tables

The beauty of this article is it takes a topic that sometimes feels overly complex -- How do you make a table for data that works responsively on all devices and doesn’t break for screen reader users -- and bring it down to the simplest possible solution with a few lines of HTML and CSS.

Building Flexible Components With Transparency

Super useful approach for creating components that work well across a range of backgrounds, so that you can reuse them in multiple contexts.

Thinking Outside the Box with CSS Grid

Three beautiful layout examples that highlight different ways you can push CSS grid to create less boxy web pages.

JavaScript

console.log({ myVariable });

Super quick hit, simple debugging tactic, but makes for a quick route to some very readable console logs.

Creating UI Components in SVG

I love SVGs. So much so I even quite a while ago published an intro course on them. And as this article highlights, with JavaScript frameworks like React and Vue it is now super easy to create dynamic SVGs that fit naturally right into your application. 

A Thoughtful Way To Use React’s useRef() Hook

When I first started using React again, I had a habit of thinking of refs purely as a way to reference elements in the DOM. But it turns out, they are much more flexible - they are a way to create storage consistent across renders that does not force rerendering in the way state does. This dramatically increases the usefulness of the tool. This article will get you started, though honestly the examples are pretty trivial. Think of things like incrementing to create unique ids across duplicated components, tracking mouse and keyboard movements, and more.

How React Uses Closures to Avoid Bugs

Buried within this generally interesting article is another usecase for refs -- refactoring class components where there are complex instance values. But even outside of that, this is well worth reading through to think about the benefits of moving to functions over classes as a model for our UI code.

The case for Weak Dependencies in JS

Super interesting article (and below in the comments discussion) about a pattern that is not currently supported in JavaScript, but that could make for better progressively enhancing libraries. I think this is a must read for folks who maintain libraries, but a good read for everyone else because it will expand how you think about the language and what it could do.

Other Awesomeness

How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy

I love web fonts today compared to when I started doing web development -- so many more options and so much easier to use. But the naive ‘drop the Google fonts snippet in the head’ approach does still have substantial performance drawbacks. This article does a nice job walking through a more performant approach.

Relax Into Structure in Your Day

The approach highlighted in this article -- creating structure in your day and blocking off time for important things that get neglected -- is something that I wish I’d learned earlier. For me, the way to creating these structured blocks in an effective way actually came from shifting my schedule. I now wake up super early (~5am) and work from 5:30 until 2:00. This both helps with some pandemic related childcare complications (I take the kids after 2), but also creates a natural block in my calendar every morning from when I get started until other folks start coming online more around 8:30 or 9:00am. It’s not perfect; we do have some spread across timezones so there are other people awake too. But generally speaking, every morning I get a solid block of concentrated heads down time from 5:30 until 8:30 or 9:00, and it has skyrocketed my productivity.

The Evolution of GraphQL at Scale

My use of GraphQL has not evolved beyond the ‘glorious monolith’ stage, but I can see how it is going to end, and I love that there is a lot of innovation and thinking going into how we can scale up GraphQL in a world of many different services.