Vanilla is the best flavour

This, but without the plant

I know. There were even jokes about it. But this is a little story about how and why I learned to love the web platform. There are no accouterments, no hint-of-cardamom, and not even a sprig of mint.

The first thing I realised is that the web platform is really high quality vanilla. We are not talking about that yellow crap you get from the supermarket, or even that Mr Whippy (soft serve) human-rights violation. This is hand-made Cornish creamy-with-black-specs.

It wasn’t always like this. The first time I wrote web apps in anger was around 2001, where everything was beyond repair. The next time was around 2007 when it was better but still awful. Things have come a long way, but these hideous experiences of browser incompatibilities, JavaScript being plainly hideous, and total lack of sane tooling left an awful taste, and left an aversion that lasted the best of 10 more years.

So, what’s great?

HTML5 came, and stayed, and matured. Now, HTML5 is one of the worst named things ever. It should have been called a sane thing like DOM2 or, let’s see “Better Web APIs” or something, but HTML5 has almost nothing to do with HTML, which has barely changed apart from some semantic elements that don’t really matter to me: <nav>, <section>, etc.

HTML5 came with some incredible APIs:

  1. History API. Again, a brutally honest, but terrible name. It can be used as the router for your single-page progressive web app. I tried a few excellent routing libraries before I tried Vanilla. Crossroads, Path.js, Vue’s router etc. are fully featured and great. I used them, then realised that actually the vanilla, hard-coded, implementation for my specific use-case was a lot simpler and smaller than the reported “OMG <1Kb minifigzipped”. In fact, it was 25 lines of JavaScript. That was my first taste.
  2. IndexedDB API. Again, no idea what this means from the name, but IndexedDB is a local object like key-value store with indexes and transactions. It is available on just about any modern browser. I tried idb-keyval, Dexie.js, and others. Again good libraries all around. This time my vanilla implementation was about 40 lines. I have one database, 2 tables, and very simple get and set requirements. No deletes are required and I use transactions very naively.
  3. AppCache. I’m going to get some heat for this, because AppCache is broken. But AppCache is a way of telling browsers to “cache this shit” and for extremely basic use-cases of storing html, css, js, and other assets, it works extremely well. Oh sure, it can’t handle re-entrant querystring blah blah blah, but it is available on iOS Safari. The use-case for AppCache has more recently been solved by Service Worker which is a more complex and flexible API, and certainly the future. But I challenge anyone to tell me how “Service worker is not available on iOS Safari” is LESS broken than “AppCache is a bit broken everywhere”. There is literally no comparison. I need to drive to the supermarket. I have a broken car OR I have no car.
  4. Events. I love js-signals. It’s a fantastic library which is well thought out, mature and tiny. I was using it exactly for two separate signals. But, I didn’t use any of the fancy features. In fact, I realised all I needed is: window.dispatchEvent(new Event(‘my-event’)). Goodness me. That’s all. Since then, I stopped using js-signals.
  5. InnerHTML/textContent. Yeah, I know. I was using Vue, which is again an amazing library. It is compact and has a huge number of awesome features. But I was using it to update exactly 3 divs at a very predictable time, i.e., when I receive my data from the web or local storage. This was quickly replaced with myElement.textContent = mydata;. Yes, that’s all. 3 lines of code and no brain power required to know what my data object is, reactive properties, Vue’s model, etc. etc.

As I learn the web platform more and more, I find more of these areas where I eventually save time and space just eating vanilla. The true benefit is that I am learning something. I am not learning how to use your awesome libraries, which is awesome in itself. I am learning how to use the web platform, which has specifications that will be around for many years. I am future proofing my knowledge, and making a sound educational investment.

Thanks for reading.




Google Developer Platform. Advanced Trauma Life Support. Open Source. Abominator Class.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ali Afshar

Ali Afshar

Google Developer Platform. Advanced Trauma Life Support. Open Source. Abominator Class.

More from Medium

The #1 technique to write less cruft in your Front-end projects

What makes up the structure of a Website?

How to get better at building JavaScript projects as a beginner developer

My career(Front end developer) so far…