This is one of those borderline posts that I'm not always sure how to treat. Stripe, as a commercial service with this specific post being very close to an ad for the service, is off-topic for the site. But since the series has been good, and it's an ongoing part of that, I'm letting it stand.
It's nearly 70k minified... this is somewhat massive for the job at hand... 3/4 of that comes from the Velocity Animate library. It isn't *REALLY* vanilla js, it's a bundle built with webpack, and a rather large one at that. I would suggest using a micro option[1] and/or straight CSS transitions. Animatelo comes in at 2.9k and is pretty feature rich.
Contrast a datepicker[2] that includes modal and date picker functionality, and includes preact in the bundle and comes in at 19k.
I know that 70k won't make or break a project... That said, it's mostly bloat. Those looking for "vanilla js" would be better off going through the microjs site to look for libraries that fit their needs. For that matter, devs should really consider trying to get site payloads back under 250k for JS, 100k for css, and heavily optimize for mobile images as well. Libraries like this are why the typical webapp is now well over 2mb of JS content alone.
1. http://microjs.com/#animate
1. http://tracker1.github.io/md-datepicker/
First, the example as posted uses the same quotes for all three.
Second, since you can't control for external factors like garbage collection, task schedulers etc. It's not really a good test unless run *many* times.
Third, after a pass through the language parser, they're all the same anyway...
Max for a 32-bit signed integer value, IIRC some browsers have/do allow for negative values... don't recall the behavior of any, as nobody really does this in practice.
Tip: ~~VALUE will always give you a 32bit signed integer value from the VALUE... 0 when it's not a clean conversion. Don't use this for Date, since it will overflow and cut off the value.
Should probably start with var statement, then expand on closures, and note that undeclared variables are assigned global by default, and historically the only closure in JS was inside a function. Then expand into const and let as closure based declarations.
I do use a separate context for Theme (via Material-UI) as well as my localization (strings). I still use Redux as it solves more than just simple isolated/specialized state. When you need/want more bits to state that don't fit well in an isolation model, doing what Redux does with context directly becomes more burdensome... not to mention the developer tooling around Redux is very good.