Friday Frontend: New CSS Techniques Edition

Hey there,

I hope you had a great week, and you’re staying safe as we endure what looks like a strong rise in COVID-19 cases across the US and Latin America.

I’ve got some pretty interesting articles for you below across all segments, but the theme that emerged for me is how new capabilities in CSS around things like grid, properties, and clipping are now driving new techniques. Love to see the progress!

Best,

KBall from ZenDev

CSS & SCSS

Using Custom Property “Stacks” to Tame the Cascade

I love this. Fascinating deep dive into how to use “stacks” of CSS custom properties applied at different levels of the cascade and using backups and fallbacks to create an incredibly flexible yet understandable CSS system.

Building a hexagonal grid using CSS grid

This is a little bit older than most of the articles I send out, so some of you may have seen it already, but I just found it and it is a super cool example of using the overlap capabilities of Grid to do something unexpected: Create a hexagonal grid such as you might see in games like Civilization or Settlers of Catan. Very neat!

Advice for Complex CSS Illustrations

Incredibly fun and detailed article of techniques for CSS illustration. Most of these techniques won’t be useful outside of the illustration context, but some of them will help with problems you might encounter in regular web design/development work. I particularly like some of the advice around creating your own units (CSS vars will let you do that in a scoped way!) and dealing with awkward shapes.

CSS Custom Properties Fail Without Fallback

Short and easy to parse. Highlights an unintuitive (though it makes sense after reading this) way in which CSS Custom Properties can fail by behaving differently than you’d expect from having learned CSS generally.

JavaScript

How to Make localStorage Reactive in Vue

Super interesting exploration of how Vue’s reactivity system works via the example of implementing it for localStorage. I would love to see another version of this using the reactive tools exposed by Vue 3; I bet it would be simpler and more elegant.

An Introduction To SWR: React Hooks For Remote Data Fetching

This looks really nice! It reminds me a lot of some of the utilities I’ve been finding super useful about using Apollo with GraphQL recently - seamless support for caching of repeated queries, handling loaded states, and more all wrapped up in a nice clean hook-based API.

React Hook Form VS Formik

As long as I have been in web development, dealing with forms has been painful and verbose. And for that whole time, folks keep coming up with new ways to try to make them less painful. This post looks at two tools for that purpose in React.

What is Next.js Incremental Static (Re)Generation?

This is a really interesting development in the progression towards more and more edge computing. Rather than a full pre-compute SSG like Gatsby or a full on-the-fly server side rendered approach, Next.js now makes it easy to have static pre-computation that updates periodically without requiring a new deploy. This has interesting implications both for things like speeding up deploys of mostly static sites or adding a bit more dynamism without sacrificing performance.

Go async in Vue 3 with Suspense

I love the way different parts of the front-end ecosystem learn from each other. In this case, it looks like Vue 3 is pretty much directly implementing the same approach as React for dealing with asynchronous loading states, though what gets me even more excited is when the frameworks tweak and refine the approaches based on their own contexts (how the Vue functions API takes hooks and refines them further for Vue’s approach).

Other Awesomeness

Patternico

Interesting tool for creating patterns as images you can then use as background images.

Rough Notation

Super cool little JavaScript library for doing sketch-like rough drawing on a website. Opens some really neat interaction possibilities.

The Return of the 90s Web

Everything old is new again! All the big trends of today are things we saw in the 90s! … I’m joking some, the author doesn’t go quite that far, but he does highlight how many trends do have analogues in the past, and perhaps by looking at what happened then we can figure out some ways to approach things better now. As Mark Twain is often attributed to have said, “History doesn’t repeat itself, but it does rhyme”.

A Cheatsheet for User Interview and Follow Ups Questions

If there’s one thing you could do to have the biggest influence on the usability of your application, it is to consistently do user trials and interviews. Put the software in front of someone who is in your target audience but who has never used it, ask them to do things, and watch them struggle. You will learn so much. If that sounds too intimidating or vague, this cheatsheet will help… it gives you useful questions that you can use to structure and guide that conversation.