Multiline
Comment

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 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.

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 💫