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...
Mini projects built with VanillaJS. No frameworks or libraries
111–120 of 171 posts
Re: Mini projects built with VanillaJS. No frameworks or libraries
#112I 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 which is nice and clean and completely self contained. It's a perfect library.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#113I implemented an entire database in VanillaJS: It runs in-production with 10M+ monthly users! 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…
> I get a lot of hate for not-using-2ton-framework-of-the-month.
I'm not sure I understand, it doesn't look like there's any DOM code included. What would you be using a framework for?
Re: Mini projects built with VanillaJS. No frameworks or libraries
#114I 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.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#115I like the approach, but it breaks as soon as you have to support IE11.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#116Love these!
Here's Emoji Tetris in 240 lines. Live demo: https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed89...
Can also run in NodeJS like so:
$ node tetris.htmlRe: Mini projects built with VanillaJS. No frameworks or libraries
#117Earlier quoted context omitted.
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); }
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.
A long time ago we just implemented two methods:
Q.exports(a, b, c)
Q.require(src, callback)
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/plugin...
Re: Mini projects built with VanillaJS. No frameworks or libraries
#118Here's a simple no-framework points calculator for the sport of Powerlifting: 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.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#119We built a lot of things with Vanilla JS. You can find them all here:
https://github.com/Qbix/Platform/blob/master/platform/plugin...
And the documentation:
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)
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/plugin...
Re: Mini projects built with VanillaJS. No frameworks or libraries
#120I 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 which is nice and clean and completely self contained. It's a perfect library.
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]