This past summer I came across a tweet from Kitze about starting a project with a limitation of five dependencies:
You're working on a frontend project. You can install max. 5 dependencies. Which ones do you pick?— Kitze (@thekitze) July 19, 2019
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-visibleis focus states the way you want them, decoupled from click focus. It’s a “prollyfill” for an emerging standard.
wicg-inertis another “prollyfill” and the middle ground between
[hidden]and visible; useful in accessibility work.
nodelist-foreachis something I’ve written about before, but it’s a 211b polyfill mostly needed for IE11.
picturefillis for responsive images for IE11.
sassis 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.