6 ms·

Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit

73 points by jer0me 4y ago

laundermaf 4y ago
Fun fact: this site is so old that Moment.js was on it as a brand-new micro library. Back then we didn’t have bower nor npm. We barely had GitHub. Finding these libraries meant scouring the blogosphere
- antifa 4y ago
  Ironically, where I work, multiple copies of momentjs, each embedding the full folder of it's own language files, is the biggest space waster in our final webpack build.
  - laundermaf 4y ago
    There’s a webpack plugin for that. You can use it to drop all the locales.
ourmandave 4y ago
Do I have to learn a dozen separate microframework apis or can I just use jQuery? If I only new a few right now, then jQuery (or jQuery-like lib) will have me covered when the time comes. jQuery, the VBscript of 2006 (tm).
- djbusby 4y ago
  If you still have jQuery but are looking for a "lighter" library maybe Zepto would work for you. It cannot carry jQuery-UI.
  - selcuka 4y ago
    What is the advantage of Zepto? Is it faster? I can't seem to find any benchmarks.
- spoils19 4y ago
  What features do you need from jQuery that isn't covered by the modern browser API?
  - franga2000 4y ago
    Not OP, but binding data to elements is pretty nice (how $("#thingy").select2() always works on the same instance of the plugin without me having to store a reference somewhere). Also things like fade and animate for when CSS transitions aren't enough and the ability to perform operations on multiple elements without a look are very convenient.
no_wizard 4y ago
Most of the libraries are sampled are 5-10 years old, for the most part. Not sure if you just consider them "feature complete" or if thats a bad thing (mix of both?) but it does mean most are not written in ES Module syntax, which can bloat bundles potentially
- JustSomeNobody 4y ago
  Considering they are “micro” libraries, I would guess feature complete.
- lloydatkinson 4y ago
  I'm getting real sick of the state of npmjs.org and the lack of ES modules. Or, the lack of documentation on ES modules. So many examples, even for brand new 2022 libraries, show using require() and other gross syntax. It's simply unacceptable in <current year> that require, commonjs, etc are being used. Take, for example, the yargs module. Somehow, a very popular library. Nowhere in the docs does it show a <working> example of how to import it as an ES module. Worse still, the typescript typings are all wrong. For example: await yargs.parseAsync() shows as valid TS as the typings indicate that is a function. In reality, you get a runtime error because that function simply does not exist on that object. It's a mess and I cannot wait for Deno to become more popular.
- antifa 4y ago
  I'm in the market for a "microts" website, basically the same but for typescript-first content.
- gitgud 4y ago
  I think this is just a super old website, I wouldn't consider them all "feature complete"
enos_feedler 4y ago
Until the sum of your micro libraries is..
- fabiospampinato 4y ago
  Equivalent to a milli library
psuedo_uuh 4y ago
I hate the phrase for fun and profit
mickael-kerjean 4y ago
The first one that showed was a wrapper on localstorage, not sure why we'd need one of those but anyhow I looked at the code, no update since 2018. I spend a lot of time at work trying to minimise the amount of unnecessary crap we pull from npm explaining people that gaining 2 minutes by npm install something might deserve us in the long run but that's a massive uphill battle. The leftpad is a great example especially since there's a standard function for it (padStart) but most frontend people I am in contact with ignore those standard and first start by npm install whatever is available
- capableweb 4y ago
  Here is 90% of all the wrapping you'll ever need over localStorage: function ls_get(k) { JSON.parse(localStorage.getItem(k)) } function ls_set(k, v) { localStorage.setItem(k, JSON.stringify(v)) }
- spyke112 4y ago
  My current customer has a designer, who claimed that we used Lottie Script[0] for animations all over the site, and we needed an animation to nudge the user to change from portrait to landscape. The animation was rotating an svg, and changing opacity on some svg children. It could all be done in pure html/svg and css, but we almost ended up bloating our, already huge bundle with all this Lottie stuff. My colleague did not consider that the designer did not know what he was talking about. Luckily this was caught in a PR. [0] https://airbnb.io/lottie/#/ https://airbnb.io/lottie/#/
drderidder 4y ago
An oldie but a goodie. The site has been around since 2011. What’s great about this site is the general idea that you don’t necessarily need a framework (ie React) for everything.
pigbearpig 4y ago
Reminds me of http://www.dynamicdrive.com/ http://www.dynamicdrive.com/ from back in the olden times
jslakro 4y ago
Reminds me an old version of https://www.javascripting.com/ https://www.javascripting.com/

73 points by jer0me 4y ago

Fun fact: this site is so old that Moment.js was on it as a brand-new micro library. Back then we didn’t have bower nor npm. We barely had GitHub. Finding these libraries meant scouring the blogosphere

antifa 4y ago
Ironically, where I work, multiple copies of momentjs, each embedding the full folder of it's own language files, is the biggest space waster in our final webpack build.
- laundermaf 4y ago
  There’s a webpack plugin for that. You can use it to drop all the locales.

ourmandave 4y ago

Do I have to learn a dozen separate microframework apis or can I just use jQuery? If I only new a few right now, then jQuery (or jQuery-like lib) will have me covered when the time comes. jQuery, the VBscript of 2006 (tm).

djbusby 4y ago
If you still have jQuery but are looking for a "lighter" library maybe Zepto would work for you. It cannot carry jQuery-UI.
- selcuka 4y ago
  What is the advantage of Zepto? Is it faster? I can't seem to find any benchmarks.
spoils19 4y ago
What features do you need from jQuery that isn't covered by the modern browser API?
- franga2000 4y ago
  Not OP, but binding data to elements is pretty nice (how $("#thingy").select2() always works on the same instance of the plugin without me having to store a reference somewhere). Also things like fade and animate for when CSS transitions aren't enough and the ability to perform operations on multiple elements without a look are very convenient.

no_wizard 4y ago

Most of the libraries are sampled are 5-10 years old, for the most part. Not sure if you just consider them "feature complete" or if thats a bad thing (mix of both?) but it does mean most are not written in ES Module syntax, which can bloat bundles potentially

JustSomeNobody 4y ago
Considering they are “micro” libraries, I would guess feature complete.
lloydatkinson 4y ago
I'm getting real sick of the state of npmjs.org and the lack of ES modules. Or, the lack of documentation on ES modules. So many examples, even for brand new 2022 libraries, show using require() and other gross syntax. It's simply unacceptable in <current year> that require, commonjs, etc are being used. Take, for example, the yargs module. Somehow, a very popular library. Nowhere in the docs does it show a <working> example of how to import it as an ES module. Worse still, the typescript typings are all wrong. For example: await yargs.parseAsync() shows as valid TS as the typings indicate that is a function. In reality, you get a runtime error because that function simply does not exist on that object. It's a mess and I cannot wait for Deno to become more popular.
antifa 4y ago
I'm in the market for a "microts" website, basically the same but for typescript-first content.
gitgud 4y ago
I think this is just a super old website, I wouldn't consider them all "feature complete"

enos_feedler 4y ago

Until the sum of your micro libraries is..

fabiospampinato 4y ago
Equivalent to a milli library

psuedo_uuh 4y ago

I hate the phrase for fun and profit

mickael-kerjean 4y ago

The first one that showed was a wrapper on localstorage, not sure why we'd need one of those but anyhow I looked at the code, no update since 2018. I spend a lot of time at work trying to minimise the amount of unnecessary crap we pull from npm explaining people that gaining 2 minutes by npm install something might deserve us in the long run but that's a massive uphill battle. The leftpad is a great example especially since there's a standard function for it (padStart) but most frontend people I am in contact with ignore those standard and first start by npm install whatever is available

capableweb 4y ago
Here is 90% of all the wrapping you'll ever need over localStorage: function ls_get(k) { JSON.parse(localStorage.getItem(k)) } function ls_set(k, v) { localStorage.setItem(k, JSON.stringify(v)) }
spyke112 4y ago
My current customer has a designer, who claimed that we used Lottie Script[0] for animations all over the site, and we needed an animation to nudge the user to change from portrait to landscape. The animation was rotating an svg, and changing opacity on some svg children. It could all be done in pure html/svg and css, but we almost ended up bloating our, already huge bundle with all this Lottie stuff. My colleague did not consider that the designer did not know what he was talking about. Luckily this was caught in a PR. [0] https://airbnb.io/lottie/#/ https://airbnb.io/lottie/#/

drderidder 4y ago

An oldie but a goodie. The site has been around since 2011. What’s great about this site is the general idea that you don’t necessarily need a framework (ie React) for everything.

pigbearpig 4y ago

Reminds me of http://www.dynamicdrive.com/ http://www.dynamicdrive.com/ from back in the olden times

jslakro 4y ago

Reminds me an old version of https://www.javascripting.com/ https://www.javascripting.com/