I build date and range picker from scratch so you don't have to

ziga

ziga

Posted on November 16, 2017

I build date and range picker from scratch so you don't have to

Don't you hate to repeat yourself? For example, I hate working on anything related to user authentication or authorization that isn't directly related to the system I'm working on. I see it as necessary evil, an accidental complexity.

Fortunately, web components are coming and soon we'll get to choose from even more and better UI components and we won't need to reinvent common components from scratch all the time. We are reinventing components because we're always switching to new JS frameworks.

As Ben Issa puts it: assemblers first, crafts people second.

Motivation

  • must be significantly smaller than moment.js + jQuery combo or even moment.js + custom elements combo
    • ~170 kB (~140 kB for moment + ~30 kB for jQuery, not including calendar library size at all) vs 4.2 kB for nanocal
  • must be reusable anywhere on web
    • use it with or without frameworks
    • use it with or without build tools

Decisions

  • I used svelte because it compiles down to plain javascript which makes this library able to run with no runtime or build tool dependencies
  • I ripped-off Airbnb's style, because I am no designer nor I wanted to spend time re-inventing calendar style
  • For testing I use tape (and not jest or ava) because I want to run tests inside real browser which is targeted runtime

Future plans

  • once web components are available everywhere ™, I'll probably rewrite front-end part into custom element or use svelte's compile to custom elements
  • add more style customizations or remove some

I hope my UI decisions will work for some of you. I build this library for myself, documented and open-sourced it for you.

Here's the repo: ⭐️ https://github.com/zigomir/nanocal ⭐️

💖 💪 🙅 🚩
ziga
ziga

Posted on November 16, 2017

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related