Friday Frontend: Global Grieving Edition

Hey there,

My grandmother passed away this week. It was reasonably expected, she was 102 after all, but it’s still hitting me pretty hard. And it got me thinking about the way this year has been such a grief-heavy year. The combination of more people being more online than ever before, celebrity deaths like Kobe Bryant and Eddie Van Halen, and of course the mass deaths caused by COVID have led to a year where so many of us are grieving at the same time, publicly and privately.

I don’t have anything particularly enlightening to say about it. Grief hurts. It has many different appearances. Sometimes it’s sadness, sometimes just pure numbness, sometimes restlessness. It goes away for a time and then sneaks in when you least expect it. As someone said to me this week - give yourself a little grace - when you’re grieving, you can’t expect yourself to be “on your game” in the same way you might otherwise. You’re not alone.

Best,

KBall from ZenDev

CSS & SCSS

Full bleed layout using simple CSS

Sometimes it is really easy to get caught up in all the latest and greatest fanciness. It’s nice to see an article that highlights how simple you can go and still achieve a common beautiful layout.

Declarative Shadow DOM

This is a really interesting step forward for web components and the Shadow DOM. The ability to set up a shadow DOM root as a part of the statically parsed template helps make web components much simpler to use in a server side rendered context, and potentially lays the groundwork for much more performant web components as well.

Why Tailwind CSS

I’m still not convinced about Tailwind, but that may be because I haven’t actually used it to build anything yet. Certainly it is a fascinatingly contrarian take on CSS that has been gaining massive momentum recently, and this writeup explains some of the reasons why that might be happening.

CSS Variables 101

Super useful exhaustive run-down of CSS Variable functionality. I found a couple of the color related use cases super useful - the work with HSL colors and the storing of a base RGB variable but then embedding it with different opacities. Very cool!

JavaScript

A Simple Explanation of JavaScript Iterators

I like this. It takes a concept that sometimes feels a little obscure and hard to grasp - iterators in JavaScript - and makes it feel easy. I like the emphasis on which methods and operations we already use every day work nicely with iterators, and which JavaScript types we already use support the iterable interface.

Detached window memory leaks

Super interesting dive into one source of memory leaks. Given the tendency to have long-lived single page applications (I think it’s now increasingly common to have a single page loaded and not refreshed for days or even weeks at a time), memory leaks are a huge point of concern. This particular article focuses on detached windows (e.g. opened with window.open), but reading it will also help you in thinking about and reasoning about other patterns that can lead to memory leaks in your application.

Announcing MobX 6

I think MobX is one of the most interesting state management libraries out there - in particular, because it takes a very similar approach to UI reactivity to how Vue does, but packages it in a framework-agnostic way. Interesting to see how they are adjusting to the continually shifting landscape of the JavaScript language and ecosystem.

Myths about useEffect

Super useful article that not only breaks down a number of common mistakes related to the useEffect hook, but also provides a simple and useful mental model: “useEffect is not a lifecycle hook. It's a mechanism for synchronizing side effects with the state of your app.”

Other Awesomeness

Developing For The Semantic Web

A look back at the idea of the Semantic web, what some of the benefits are of adding structured data to your websites, and then briefly talks about some of the tooling available to do so in an automated manner.

Emulate vision deficiencies in DevTools

This is super useful. There’s nothing like emulating the experience of a disability to generate understanding and empathy. I recently saw a video on twitter that did this for nearsightedness, and sharing it with my wife & kids went further towards their understanding of my vision than any explanations I had previously made. (If you check out that video - my eyes clock in at around -4.5)

Geometric composition

Super interesting in-depth article on using geometric composition as a technique for layout design. Goes into how to use code to generate these different layouts (and talks about ‘designing in code’), but I think most interesting for those of us not trained as designers to understand techniques we can use to create visually appealing layouts.

A Better Way to use GraphQL Fragments in React

This matches pretty closely with how we use GraphQL at my work, and I can vouch for it being a useful mental model that keeps data & the code that uses it near to each other, while still letting you do the efficient batched queries that GraphQL enables.