Five packages

November 22, 2019

This past summer I came across a tweet from Kitze about starting a project with a limitation of five dependencies:

I enjoyed reading the replies and getting a whiff of people’s different preferences. Brad Frost had a somewhat tongue-in-cheek response on choosing tools that ultimately gets to a “right tools for the right job” type of message. I agree with that, but also was stumped on the initial premise of the question and flustered why I didn’t have even half an answer.

You might laugh, but I’ve been thinking about this question since the summer and I finally got an answer! A few weeks ago when a greenfield project came across my desk I was reminded of Kitze’s question when I installed these five packages:

focus-visible    (997B)
wicg-inert       (2.2kB)
nodelist-foreach (211B)  // IE11
picturefill      (4.9kB) // IE11
sass

Here’s a break down of what that 8.3kB gzipped of packages get me:

  • focus-visible is focus states the way you want them, decoupled from click focus. It’s a “prollyfill” for an emerging standard.
  • wicg-inert is another “prollyfill” and the middle ground between [hidden] and visible; useful in accessibility work.
  • nodelist-foreach is something I’ve written about before, but it’s a 211b polyfill mostly needed for IE11.
  • picturefill is for responsive images for IE11.
  • sass is because I’m still pretty dependent on nesting and partials.

With these I can get pretty far. I could probably copy-paste that nodelist-foreach polyfill and get one more slot, but I like having polyfills registered as a dependency so that I can better manage them and remove them when browser support changes.

In fact, this probably says quite a bit about me as well as the kind of development I like, all of these tools are designed to disappear at some point. They build on some sort of emerging standard. I didn’t plan that whatsoever, but I find something poetic in the fact that the dependencies I rely on the most will eventually not be needed.

Sass is probably the biggest lingering dependency, but I could see myself moving away from it in favor of some CSS-in-WC (Web Component) type of thing in the near future. If I had more slots, it would probably be the details-element-polyfill and the dialog-polyfill even though it has problems and Scott O’Hara says I shouldn’t use dialog… I just want it that bad. lit-element might make the list too.

Anyways, this was just a silly tweet from six months ago, I’m embarrassed it took so long to figure out, but I’m glad I did. I even learned a little bit about myself along the way.