Answer with a blog post
September 25, 2023 • Internet
I was working through my pile of unreads in Feedbin this morning, like you do, and Trys Mudford’s feed was lit up with “A quick guide to destructuring”.
(I use destructuring a lot, but I’m always down to read more on subjects even if I feel like I probably know all there is to know.)
The post begins:
I was pairing with a junior engineer and we came across a piece of code that confused them.
[Rather] than send a slack message, I thought I’d write a quick blog post on the subject.
What a simple but wonderful choice! Rather than trap the knowledge being imparted inside Slack, Trys wrote it up in a way the whole world could access. (This is made even more impactful, I’d argue, by the fact Trys’s blog has an RSS feed 🧡)
Bonus twist ending! It turns out I don’t know everything there is to know about JavaScript(!??), and I picked up a cool trick about initializing variables using nested object properties when using destructuring assigment. Jump over to the post to learn more!
Oisín’s big adventure
September 9, 2023 • Links
Oisín Prendiville — who you might know as one half of the late-great Supertop, creators of Castro — has an adventurous spirit I find deeply admirable, and has been on a long-distance trip since April:
Trying to cycle from Vancouver to Ireland with the help of just a few boats.
After leaving B.C. he cycled across the entire continental U.S., documenting his adventure in Instagram stories along the way, and it’s genuinely one of my favorite things on the internet.
Oisín has a knack for making really lovely travel videos: something that could easily become boring, repetitive navel-gazing never does. Instead, his videos are funny, artistic, and awe-inspiring, often all at once.
I highly recommend going back through the archive before following along as he closes in on Ireland.
classnames
August 5, 2023 • Eleventy
A couple of months ago I released version 0.2.0 of my classnames
plugin for Eleventy, a port of the popular package by JedWatson. I thought I’d talk a little bit about what it does, and why I find it so dang useful even in a non-React environment.
Conditional class names
I work with Nunjucks components in Eleventy a lot, both at work and in my personal projects. A very common need is to build class
attribute strings whose values are dependent upon some condition or other. For example:
- A component might have one or more variants, like
my-component--secondary
or my-component--large
- It might also support scoping when nested inside another component — ex.,
my-component
might be scoped as hero__my-component
if that specific context necessitated an explicit, dedicated selector
- We might want to support defining custom class names on the component verbatim to ensure the greatest amount of future flexibility
One way to approach this in Nunjucks is with inline conditional blocks. Here, we’re giving the component a my-component
class and setting my-component--<variant>
if the variant
variable is defined:
<div class="my-component {% if variant -%}my-component--{{ variant }}{%- endif %}">
This is just a single conditional class name, but I already find it hard to read. I also find it challenging to maintain,especially as a component’s class names grow and change over time.
I was working on a React project last year when my teammate Dan introduced me to classnames
, a package built specifically for building a single class
attribute string out of a variety of potentially truthy or non-truthy constituent strings.
I found this tremendously useful for building React components — so do a lot of people, I suspect; it’s currently coming in at 12 million weekly downloads 😮 — and started tinkering on a shortcode for Eleventy that I used in some personal projects. I eventually packaged it up as a proper Eleventy plugin and got it published on NPM.
Here’s the same component as above, using the classnames
shortcode instead of inline conditionals:
<div class="{% classnames
"my-component",
"my-component--" + variant if variant
%}">
This is much, much more legible, at least for my old eyes and brain wiring. It really starts to shine as class name composition becomes more complex:
<div class="{% classnames
"my-component",
"my-component--" + variant if variant,
scope + "__my-component" if scope,
className
%}">
Like the original classnames
package, the Eleventy plugin joins truthy strings and removes falsy ones:
---
variant: secondary
scope: hero
---
<div class="{% classnames
"my-component",
"my-component--" + variant if variant,
scope + "__my-component" if scope,
className
%}">
producing a nice, compact sequence of classes in the resulting HTML:
<div class="my-component my-component--secondary hero__my-component">
What I like
A lot of our preferences about how to write code come down to personal taste, and this may not be an exception, but I find this has some direct benefits — especially when working on a team:
- It’s easier to scan the rule set for an element’s classes on a line-by-line basis
- Diffs become more meaningful when each class name condition is defined on its own line
- As a result, PRs are easier and quicker to review
If you find yourself wrestling with unwieldy solutions to building class strings in Eleventy, give the classnames
plugin a whirl 💫