
Mini projects built with VanillaJS. No frameworks or libraries - jonifico
https://github.com/bradtraversy/vanillawebprojects
======
baxuz
Here's one I did as an assignment for a job interview:
[https://github.com/ivancuric/hn-scroll](https://github.com/ivancuric/hn-
scroll)

You can see it in action here: [https://hn-scroll.netlify.com/](https://hn-
scroll.netlify.com/)

The task was to build an offline capable site which displayed the latest
Hacker News posts, and loaded more lazily when scrolling. I had to use the
official HN API, and I couldn't have any middleware or caching. Everything had
to be done client-side.

The app ended up being 1.4kb in total, with support for practically streaming
in the items, batching them by network response times and render frames, while
keeping the order.

You can see the batched items in this version:
[https://codesandbox.io/s/hardcore-
stonebraker-8m8fx](https://codesandbox.io/s/hardcore-stonebraker-8m8fx)

~~~
wackget
There's an irony about posting in a topic about simple, vanilla, no-framework
scripting and then linking to a repository with the following unnecessary
ancillary files:

    
    
        .gitignore
        .prettierrc
        README.md
        REQUIREMENTS.md
        manifest.webmanifest
        package.json
        tsconfig.json
        yarn.lock
    

Plus the actual source code is spread over four TypeScript files, JavaScript,
CSS, and HTML.

This isn't meant as criticism of your code specifically but of "modern" web
development which hypocritically espouses simplicity but actually increases
complexity of development.

My point is your app could have been a single HTML file (or HTML, JavaScript,
and CSS if you want to split hairs). Instead there's 15+ files because that's
the state of modern development.

~~~
apazzolini
Right, OP totally should have included the interview question requirements as
a commented block at the top of index.html instead of separating it out. It's
way too complex as is.

And definitely, .gitignore is well known to be responsible for the "complexity
of web development." Maybe we should include .gitignore in index.html too?

~~~
anarchodev
GitIgnore.jsx IMO

------
errantspark
I'm so glad to see this and projects like this getting attention. I'm
responsible for several tools at my current job using nothing but straight JS,
including a couple which have had a significant (positive) impact on the
special projects team here.

I love JS. I love it's ubiquity (F12 in any browser and you've got a REPL). I
love the freedom I have when I write in it to do whatever the fuck I want and
shoot myself in the foot in all sorts of strange ways. It's a very expressive
language that lends itself to all sorts of fun. I love being able to inline C
functions as WASM. I love manually managing memory with typed arrays. I love
the filth of it all. It's liberating to give up all your dignity and just
fling mud with a big grin on your face because your ridiculous 5 lines are a
functional standin for a templating engine.

    
    
        let applyTemplate = template => object => {
          let keys = Object.keys(object)
          return new Function('input' , `let {${keys.join(',')}} = input
        return \`${template}\``)(object)
        }

~~~
skrebbel
Woa there! Why would JavaScript have `with` if you weren't intended to use it‽
How about:

    
    
        let applyTemplate = template => object => {
            with(object) { 
                return eval("`"+template+"`"); 
            }
        }

~~~
dgb23
From the MDN docs:

> Use of the with statement is not recommended, as it may be the source of
> confusing bugs and compatibility issues. See the "Ambiguity Contra"
> paragraph in the "Description" section below for details.

[https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Refe...](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/with)

~~~
bigblind
"Living a little" is not recommended, because it may lead to confusing
situations.

------
adrianh
Soundslice ([https://www.soundslice.com/](https://www.soundslice.com/)) — a
website built around interactive/responsive sheet music, rendering the music
entirely in client-side JS — doesn't use JavaScript frameworks or libraries.

I'm the developer of Soundslice and continue to be happy with the vanilla JS
decision, 8+ years into the company. It means better performance, clearer
code, smaller JS filesizes.

I gave a talk about it here:
[https://www.youtube.com/watch?v=VvOsegaN9Wk](https://www.youtube.com/watch?v=VvOsegaN9Wk)
("A framework author's case against frameworks") and here:
[https://www.youtube.com/watch?v=XH5EtQge_Bg](https://www.youtube.com/watch?v=XH5EtQge_Bg)
("How I optimized my JavaScript sheetmusic rendering engine")

~~~
baxuz
Amazing site. I noticed one thing that could easily improve the feel of the
site — the sheet music playhead which is outside of the canvas.

You are using fractional units to position it, but you're also using
left/top/height properties which can't be fractional.

If you convert these to GPU translated layers via translate, you'll get a
smoother playhead since these can be positioned fractionally, plus you'll cut
down on the repaints!

Here's an example: [https://codesandbox.io/s/magical-wind-
mptqn?fontsize=14&hide...](https://codesandbox.io/s/magical-wind-
mptqn?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fstyles.css&theme=dark)

~~~
PudgePacket
The bars are identical for me. 4k monitor with firefox on windows. Could it be
something to do with resolution?

~~~
baxuz
It's a firefox bug. I needed to add a very fine rotation for it to render
subpixel, so you can try again. You can also see the repaints if you open up
the dev tools:
[https://i.imgur.com/A8btxpu.png](https://i.imgur.com/A8btxpu.png)

------
marknadal
I implemented an entire database in VanillaJS:

It runs in-production with 10M+ monthly users!

[https://github.com/amark/gun](https://github.com/amark/gun) ~13KB

I get a lot of hate for not-using-2ton-framework-of-the-month.

But I think prioritizing performance is worth the flack.

Seeing repos/articles like this deeply warm my heart, maybe us VanillaJS devs
are not alone after all!

Does anybody have other favorite VanillaJS projects, that they could share?

~~~
catchbepis22
Cool 3 letter names. Reminds me of the commands in Bloomberg Terminal/some old
HCI. I really like how you've built a whole stack of custom tech there.

That's my aim too. My work is all Vanilla. I hate to use external frameworks
and libraries in the browser, but love to use stuff on npm. I prefer to write
something I like to use, rather than use something that exists that I don't
like working with.

You can see portfolio here:
[https://github.com/cris691/Portfolio](https://github.com/cris691/Portfolio).
Bepis and Dumbass are vanilla front-end alternatives to frameworks.

I'm really interested on what you think the hate for not-using-2ton-framework-
of-the-month is about?

~~~
marknadal
Nice work!

------
Ndymium
Lately I've really enjoyed writing small apps in vanilla TypeScript. Since the
TS compiler generates JavaScript that works in modern browsers and those also
support the module syntax natively, you can get away without using NPM and a
bundler like Webpack at all. Of course this starts to fall down when you get
over a certain size but it works well and is quick to get going with for
simple things like this lunch menu I built: [https://gitlab.com/Nicd/sodexo-
menu](https://gitlab.com/Nicd/sodexo-menu)

The only gripe I have there is that you need to write imports with a JS
extension as the TS compiler won't change them. So to import `foo.ts`, you
need to write `"./foo.js"`. The compiler understands it and it also allows the
browser to understand it too.

~~~
EGreg
Too bad we can’t have php style autoloading in JS.

Actually what I really want is to lazy-load modules on demand! So if something
is concatenated into a giant file then I don’t need to load modules anymore.

Like maybe this:

    
    
      function load(module) {
        if (load.loaded[module]) return;
        import(module)
        .then(() => load.loaded[module] = true);
      }

~~~
frozenlettuce
You can create a function to dinamycally add script tags to load other pieces
of code, but you would end up implementing a whole module system.

~~~
EGreg
A long time ago we just implemented two methods:

    
    
      Q.exports(a, b, c)
      Q.require(src, callback)
    

Following node but just async. It’s simple and it works. We were able to know
the name of the latest loaded js file in exports() by a trick of throwing an
exception and catching it to see what script was on the top of the stack. All
browsers seem to support this.

Since it worked back then, we didn’t need anything else. It is super simple to
just keep using those things and replace the middleware underneath to whatever
is the standard du jour.

It's super short and simple, you can implement similar things in your
projects:

[https://github.com/Qbix/Platform/blob/master/platform/plugin...](https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7842)

[https://github.com/Qbix/Platform/blob/master/platform/plugin...](https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7826)

------
antonios
It's interesting that vanilla JS feels like a breath of fresh air nowadays. I
guess the JS cycle is now complete (?)

~~~
quickthrower2
It depends on the scale of your project. Not using a cement mixer is a breath
of fresh air if you just need the mortar to fix a single brick.

~~~
6510
I feel the analogy is more like: You need to fix a single brick so you buy 72
pallets of bricks, buy a fork lift, 5 cement trucks, buy a garage to park
them, try to acquire at least 2 cement factories, hire 4 people to do
logistics, someone to do HR, 12 truck drivers and 4 fork lift chauffeurs.
Placing the brick is outsourced.

~~~
quickthrower2
I like that this comment is from “6510”. I loved the old 6502 and did a teeny
bit of assembly programming on that back in the day.

~~~
6510
I ran into a 13 year old master glue coder on irc one time. Since he was 9 he
touched/used 3 js/php frameworks/modules/libraries per day. He said he didn't
know any programming. (not entirely true ofc) He knew how to ask for
something. There was always someone willing to write the data transformation
after he broke down the problem properly. He showed a bunch of hilarious
things he made. I praised him for keeping all of his projects. He said it was
to embarrassing and deleted pretty much everything. I ask him things like,
what do you do when things don't work, they stop working or stuff gets really
slow. His solution was to delete everything and start from scratch using
different modules where possible or just delete the project. I learn from him
that the glue-ables are for the most part not high level enough. I wish I had
learned to just delete everything and start over, regularly, just like that.
ha-ha

------
jasonkester
There’s no need for these projects to be “mini”. Javascript and html is a good
choice for big things too. It’s still my go to “frontend stack” for lots of
stuff today.

Here’s a pretty big “VanillaJS” project I built back in 2006, back when we
called these things web apps:

[https://www.twiddla.com/](https://www.twiddla.com/)

~~~
jay_kyburz
Here is my VanillaJS project from 2010.
[http://np.ironhelmet.com](http://np.ironhelmet.com)

(OK, there is a bit of jquery in there.)

~~~
robocaptain
Hi! Off topic but I love love love Neptune's Pride. :)

~~~
jay_kyburz
THanks Robocaptain!

------
rikroots
Some Javascript frameworks I like; some I tolerate. Some
(<cough>angular</cough>) I learned to despise.

I reserve my love only for VanillaJS.

My library for playing with the canvas element[1] is entirely VanillaJS. 0%
dependencies. 1000% a learning experience for me, having to seek into the
darkest corners of the language to find solutions to problems I didn't even
know existed!

[1] Scrawl-canvas - [https://github.com/KaliedaRik/Scrawl-
canvas/tree/v8-alpha](https://github.com/KaliedaRik/Scrawl-
canvas/tree/v8-alpha)

~~~
b3kart
> 1000% learning experience for me, having to seek into the darkest corners of
> the language to find solutions to problems I didn't even know existed.

Sounds like the experience has been beneficial for you, but this excerpt reads
like a cautionary tale for using "ValillaJS" for real projects. :-)

------
hilti
I love these type of showcases. It‘s been a wonderful time when simply upload
files via SFTP and had a running application. No need of webpack bundles,
vendor libraries to achieve a simple functionality that could be solved in a
few lines of code ...

I really do hope this kind of developer attitude (writing pure VanillaJS) is
coming back.

~~~
applecrazy
There's a reason why a lot of those libraries and tools are used though.
Webpack bundles are used to strip down multiple JS files and libraries into a
single bundle that contains only what is needed to run a particular
application. Libraries like React serve a purpose too, particularly when
you're building large applications that need to be maintained by many people
all at once, or when you need insane compatibility (e.g. IE 11, the old Edge,
etc.)

Is there a need for these tools all the time? No. But are there valid use
cases? Absolutely yes.

~~~
6510
Right, its so funny! This is why I cant/wont/refuse to find a job of this
type. I can write JS just fine. In employment I would have to glue bloated
libraries (which takes me forever!) and then wait for tools to purge the
unwanted garbage from the creation. The end result is slow and I feel clueless
what is actually going on. Of course this also means I'm impossible to work
with which only adds to the joke.

I do have a sense of humor about it.
[https://jsfiddle.net/gaby_de_wilde/c8bhcatj/](https://jsfiddle.net/gaby_de_wilde/c8bhcatj/)

~~~
austincheney
Yeah it’s really frustrating. My metric of the moment is total NPM package
count that comprises a project. Since Angular, out of the box, is greater than
1100 packages I ignore all job postings that mention Angular. I am extremely
hesitant whenever I see things like Webpack or Babel.

------
wffurr
I wish more NPM modules were vanilla JS; then it wouldn't be quite so hellish
to audit your dependencies or vendor them.

I needed a lib to measure text for layout recently, and ran across
[https://github.com/soulwire/FontMetrics](https://github.com/soulwire/FontMetrics)
which is nice and clean and completely self contained. It's a perfect library.

~~~
moojd
Yep, I wish either nmpjs.com or npms.io would list the total number of
transitive dependencies in their search so I could sort by it.

npmjs.com shows the number of dependencies at the top but doesn't total in
dev-dependencies unless you dive in further. At first glance, npmjs.com leads
you to believe webpack has only 24 dependencies when they have 52 additional
dev dependencies leading to ~300 transitive deps with ~200 maintainers I now
have to either constantly audit or implicitly trust[0]

[0] [http://npm.broofa.com/?q=webpack](http://npm.broofa.com/?q=webpack)

------
bitL
Isn't the whole draw.io written in VanillaJS as well? That looks like a
massive project:

[https://old.reddit.com/r/javascript/comments/9p826q/how_draw...](https://old.reddit.com/r/javascript/comments/9p826q/how_drawio_is_made/e806uf3/)

------
dep_b
I did a project around 2018 if I remember correctly where I did all of the
code in inlined vanilla JS. It was simply firing off timed API calls for a pop
quiz but it was resilient up to the point where a page reload would simply
continue where the last question left off. Maybe 300 lines of code, max.
Literally anybody that had to work on it kept asking why I didn't at least use
jQuery or another flavor of the month framework.

"Can you point out in this code where using a framework is necessary?"

Never got an answer to that, still people were so _nervous_ about the lack of
JS frameworks.

------
tlbsofware
When I was working for the USGS I was tasked with making a stream tracer to
help the national park service fight oil spills at mammoth cave. However I
wasn’t allowed to write any server code due to security issues so I wrote the
whole algorithm in javascript. It would take about 1 min to parse all the
geojson streams into what what I called a node array which contained all the
nodes containing the info of where streams connect and which stream they
either flow downwards or upwards into. I eventually learned how to use node.js
to allow me to run the node processor on the computer and then to just load
the output files into the algorithm to allow the website to bypass this
processing. I made a big push to try and open source my algorithm (minus all
the confidential data the project had), however the website doesn’t have all
the fancy controls that I created for the real project as I was hired by
another company fairly quickly once I started applying around with this and a
d3.js choropleth under my belt as my 2 first professional projects.

Tlbsoftware.github.io/StreamTracer.html

GitHub.com/tlbsoftware/streamtracer

------
abraxas
Interesting. As a developer who's done no front end work since the nineties
and has had little appetite for getting back into it (after having seen what
modern front end devs seem to contend with) I surmise that all those crap.js
frameworks of the month don't do a whole lot of useful stuf after all.

I suspected as much but was always too timid to speak up when I observed how
much noise and fury in the office produced so little UI.

~~~
ng12
I always find it interesting that the people who unabashedly admit they have
minimal front-end experience usually have the strongest condemnation of the
current tools.

~~~
mosselman
Don’t worry. People with a lot of front-end experience, in this case me, also
condemn the current tools.

~~~
oggadog
Can I ask what sort of front-end frameworks/tools you use that you also
condemn?

~~~
austincheney
Most of them are merely abstraction layers for capabilities the browsers
already provide. Rarely do they offer anything more. The big selling point is
that they help organize the logic in a declarative way or automate a bunch of
tiresome tasks that wouldn’t be there in the first place had you not used a
mountain of tooling.

There are only 2 APIs in the browser: DOM and the web APIs. As far as writing
cohesive logic that does wonderful things that’s on you. Most JS developers
would rather it _not be on them_ and instead adopt an _Invented Here Syndrome_
mentality. The fear of writing any original code is very real.

[https://en.m.wikipedia.org/wiki/Invented_here](https://en.m.wikipedia.org/wiki/Invented_here)

------
EGreg
We built a lot of things with Vanilla JS. You can find them all here:

[https://github.com/Qbix/Platform/blob/master/platform/plugin...](https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js)

And the documentation:

[https://qbix.com/platform/guide/javascript](https://qbix.com/platform/guide/javascript)

It's open source so feel free to rip the code from there, or just use the full
Q.js !

For loading code, a long time ago we just implemented two methods:

    
    
      Q.exports(a, b, c)
      Q.require(src, callback)
    

Following node but just async. It’s simple and it works. We were able to know
the name of the latest loaded js file in exports() by a trick of throwing an
exception and catching it to see what script was on the top of the stack. All
browsers seem to support this.

Since it worked back then, we didn’t need anything else. It is super simple to
just keep using those things and replace the middleware underneath to whatever
is the standard du jour.

It's super short and simple, you can implement similar things in your
projects:

[https://github.com/Qbix/Platform/blob/master/platform/plugin...](https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7842)

[https://github.com/Qbix/Platform/blob/master/platform/plugin...](https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7826)

------
thrownaway954
so happy to see brad and traversy media get some attention on hacker news.
been watching his youtube channel for a long time and learned so much from
him.

[https://traversymedia.com/](https://traversymedia.com/)

~~~
Timpy
I agree, I'm glad to see him on HN. Brad is great for beginners, and I still
use him for my "how to I get some boilerplate up and running" type things for
languages and frameworks I'm not familiar with.

------
tasogare
I just finished coding a few functions in pure Javascript I need for a project
(parsing turtle files I have ownership one). After searching for libraries and
having read their Github project's Readme, I choose to implement them by
myself because making them working in browser (most target Node) and
understanding their API would have take longer than doing it myself anyway.
The front-end tooling has became a huge mess of tools (none of which I have
experience with) so I always keep it to vanilla JS (or TS) to progress on my
project instead of learning a tool that might not exists in 3 or 5 years.

------
naikus
Cool! I've build a couple of vanilla js projects, a widget and a framework.

[https://github.com/naikus/svg-gauge](https://github.com/naikus/svg-gauge)
This one is all in one widget completely in vanilla js. Zero deps. An
interesting thing is there is an angular-js wrapper that someone else built on
top of this.

This one is actually a view lifecycle management framework for simple SPAs and
mobile web apps
[https://naikus.github.io/stage/](https://naikus.github.io/stage/) (This site
is actually built using the stage)

~~~
layoutIfNeeded
A framework by definition cannot be vanilla JS...

------
IMTDb
Quick / dumb question : in the breakout game example
([https://github.com/bradtraversy/vanillawebprojects/blob/mast...](https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-
game/script.js)) wouldn't the game feel fast/slow depending on the power of
your computer since the physics loop does not make use of the elapsed time
between updates ?

~~~
bArray
The function `requestAnimationFrame(update)` on line 191 [1], typically
updates at 60 frames per second [2]. When it fires, it re-calls the `update()`
function starting on line 184 [3].

As you say though, it's not 100% reliable in terms of speed, but I imagine
90%+ who play the game get a good experience.

[1]
[https://github.com/bradtraversy/vanillawebprojects/blob/mast...](https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-
game/script.js#L191)

[2] [https://developer.mozilla.org/en-
US/docs/Web/API/window/requ...](https://developer.mozilla.org/en-
US/docs/Web/API/window/requestAnimationFrame)

[3]
[https://github.com/bradtraversy/vanillawebprojects/blob/mast...](https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-
game/script.js#L184)

~~~
rypskar
True when using a normal monitor, but could be a problem if using a 120Hz
monitor or if the previous call didn't finish fast enough. The best is to use
the timestamp requestAnimationFrame sends in to the callback to find time-
delta since last call

>> The number of callbacks is usually 60 times per second, but will generally
match the display refresh rate in most web browsers as per W3C recommendation.

~~~
SahAssar
I thought basically all browsers still capped FPS at 60HZ?

~~~
bArray
Yeah I think it typically only gets slower, not faster. But it's a good point
- if you're going to run your physics loop in the update loop (not ideal) then
your movements should be time based.

------
rishav_sharan
Great to see Vanillajs get more attention. I also wrote an article on this
topic a while ago; using VanillaJS to create a basic spa

[https://dev.to/rishavs/making-a-single-page-app-in-ye-
good-o...](https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-
es6-3eng)

------
fergie
Its striking how clean a lot of the js code is for these projects. They do so
much with so little

~~~
protonfish
Right now I am working with a React app that is even more striking - how
little it does with so much code. Though I am starting to see the trick. Keep
making wrappers that only reference other wrappers.

------
cryptozeus
This is good for practice and learning but honestly what is the point of going
backwards. Some of these demos don’t even work on safari in mobile. Frameworks
are there for a reason. If one must learn in plain ja then sure go for it but
no point knocking down frameworka

~~~
verifex
Most of these didn't work on Firefox either or fail gracefully, so no cross-
browser support. I'd say that the more "stuff" you need to do on a web app,
the more likely those features will need to be cross-browser compatible, and
having done that in the past, I can say that VanillaJS is a fine thing for
simple straightforward web apps, but when you start needing more features, it
can be a load-off to outsource it to a framework.

If you understand what the framework is doing, used sparingly, some frameworks
can save you some time. JS libraries have the same deal, there are some
features that I would prefer not rewrite every time I write an app. For
instance, PDF.js is quite indispensable at reading PDFs in the browser and I
think someone would spend quite a bit of time re-writing all the features you
need from that library.

Anyways, I guess it just all comes down to using the right tool for the job.

------
allenu
I normally do iOS development and have been building a few fun sites in the
last few years and because I'm not familiar with web front-end frameworks and
tooling, all the stuff I've done[1] is done in vanilla javascript. I've found
it pretty easy to build things just using it alone, although my apps are just
mini projects.

[1] See
[https://www.ussherpress.com/synthiejs/](https://www.ussherpress.com/synthiejs/)
for a simple synth player using web audio or my request-a-drawing site
[https://www.drommysommy.com](https://www.drommysommy.com)

------
Aperocky
A ‘mini’ simulation that I have in pure JavaScript:

[http://aperocky.com/prehistoric](http://aperocky.com/prehistoric)

(Mobile not fully supported)

Did use Pixi for sprites and display, but that’s kind of unavoidable.

------
evolveyourmind
Here is my 120 lines vanillajs neuroevolution flappy bird
[https://evolveyourmind.github.io/flappyai/](https://evolveyourmind.github.io/flappyai/)

------
jypepin
A few years ago my work environment became so complex that I felt like I was
spending more time trying to code, than actually coding. So I started that
thing where on Sunday mornings, I would give myself a couple hours, in bed, to
code something simple in vanilla js.

It was super fun, and here's the result:
[http://jypepin.com/lolz](http://jypepin.com/lolz)

A few of those were harder than others and forced me to re-learn some basic
maths. I really recommend doing such a thing sometimes!

------
carlmungz
I love seeing vanilla JS projects getting some love. I started one last year
([https://github.com/CarlMungazi/aprender-
js](https://github.com/CarlMungazi/aprender-js)) and I feel it has made me a
better programmer.

If anyone wants to learn more vanilla JS stuff, you should check out
[https://gomakethings.com](https://gomakethings.com) by Chris Ferdinandi.

------
limaho
Here’s a simple game I wrote in vanilla js (client side) two summers ago

[https://www.mouse-movement.liammahoney.dev](https://www.mouse-
movement.liammahoney.dev)

Heads up it doesn’t work on mobile. Also there some bugs at the end of the
game I never got around to ironing out.

Code: [https://github.com/LiamMahoney/mouse-
movement](https://github.com/LiamMahoney/mouse-movement)

------
sstangl
Here's a simple no-framework points calculator for the sport of Powerlifting:
[https://www.ipfpointscalculator.com/](https://www.ipfpointscalculator.com/)

The page is 11KB, loads in 96ms, and makes three requests to one network, two
of which are favicon-related.

This turns out to actually matter in practice because many of our users are
from countries with extremely slow connections.

~~~
SahAssar
I love vanilla/minimal js frontends, but I don't think this is a prime
example. The basic function of it could basically be a math function, and it
does not not include any accessibility features, and if smallness is what you
prioritize it could be smaller by using the form API's more, especially for
things like radiobuttons (for example, a selected radio value for `units` can
be found with `form.units.value`, the same can be done for other inputs).

My point is mostly: do vanillajs but also understand what api's are actually
available for you from the start. There is a lot built into the browser, use
it. Usually it already has better performance and accessibility than whatever
you would write yourself.

------
maggit
I have recently experimented with writing dependency-free JS. I ended up using
Webpack and Babel, but no frameworks or libraries, and I find it quite nice to
work with. These are my tips for making the best of it:
[https://magnushoff.com/blog/dependency-free-
javascript/](https://magnushoff.com/blog/dependency-free-javascript/)

------
tomaspollak
I'm not sure if this qualifies as "mini", but mi chiptune/MIDI player [1] was
written without the use of any big frameworks, even though it relies _heavily_
on Javascript, both for navigation, visuals, and of course audio synthesis
(via Emscripten).

[1] [https://muki.io](https://muki.io)

------
mariocesar
It's not VanillaJS but it feels like it
[https://github.com/alpinejs/alpine/](https://github.com/alpinejs/alpine/) I
have been using alpinejs and is really easy to start and complete! something
that is difficult to have together.

------
mLuby
Love these!

Here's Emoji Tetris in 240 lines. Live demo:
[https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed89...](https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed890a#gistcomment-3075305)

Can also run in NodeJS like so:

    
    
        $ node tetris.html

------
beardedman
We need more of these!

~~~
ZiiS
Blatant self-promotion; I just did a asteroids style game:
[https://github.com/BarnabyShearer/kibblekhaos](https://github.com/BarnabyShearer/kibblekhaos)
WebGL, Web workers, Web Audio but no libraries.

------
erikbye
Very simple new tab replacement with todos for Firefox using vanilla js.

[https://addons.mozilla.org/en-
US/firefox/addon/newtabtodo/](https://addons.mozilla.org/en-
US/firefox/addon/newtabtodo/)

------
aliswe
I'm making an open source .NET Core CMS where the UI is written in non-
transpiled ES6 run natively in the browser - including imports through
Javascript modules

------
klundqist
I like the approach, but it breaks as soon as you have to support IE11.

------
godmode2019
Many of these did not work on mobile. Samsung S5 for context

~~~
benbristow
6 year old phone. What Android version are you running?

