loading...

What JS Libraries Have You Made?

tamb profile image Tamb ・1 min read
  • What libraries are you proud of?
  • What did they seek to accomplish?
  • How successful do you think they are?
  • What did you learn?

Share the repository links below:

Discussion

pic
Editor guide
 

Currently the count is 26 in Non Org-scoped.

Some of my favourites are

liteorm A simple wrapper for sqlite; with typings based on TypeScript decorators and reflect-metadata.

  • I learnt escaping strings for SQL, and avoiding using reserved keywords.
  • TypeScript decorators and Reflect-Metadata

@patarapolw/qsearch Search a database with a string. Designed for end-users.

  • String tokenization
  • How to avoid too complex algorithms

any-serialize Serialize / Deserialize any JavaScript objects, as long as you provides how-to. I have already provided Date, RegExp, Set and Function.

@patarapolw/sql-easyquery Easily query SQL (currently only support SQLite), with a string or a mongo-like query.

  • How to convert JSON to SQL queries

hyperpug Pug for browser/Electron, based on Hyperscript. With Pug filters' support.

  • Indented string processing

@patarapolw/deepfind Deep find a primitive or a plain Object inside an Array or a plain Object. Always return a Object (an Array or a plain Object), so that the Object (an Array or a plain Object) can be tweaked.

  • How can I make use of Mutability

@patarapolw/prettyprint This project shows how we can prettyprint beyond JSON.stringify(obj, null, 2) in Node.js -- with colors and multiline strings

  • Tweaking util.inspect

@types/async-eventemitter

  • YOU can contribute to @types/ as well!
 

jquery-csv
The first RFC compliant CSV parser for JS. My most popular lib w/ 500+ stars and 500k+ downloads.


ES Module Libs

csv-es
A modern ESM rewrite of jquery-csv optimized for size/speed

absurdum
Like lodash but every operator is implemented using reduce. Started out as sort of a joke but now it has 62 operators.

The rest can be found at VanillaES


Web Component Libs

wc-markdown
Render markdown w/ syntax highlighting

wc-monaco-editor
Easily embed a Monaco editor. Monaco is the code editor used by VSCode.

The rest can be found at VanillaWC


What libraries are you proud of?

All of them? They all address a specific need.

I kill off all my projects that don't see much use and/or are too much of a pain to maintian (ex framework-specific components).

What did they seek to accomplish?

Jquery-csv raised the bar for all CSV parsers in the JS ecosystem. I tried out dozens of half-baked CSV parsers before writing this one. The goal was to do one that is 100% spec compliant. Now the majority of CSV libs target spec compliance as a baseline.

The VanillaWC org demonstrates that you don't need any build tools (ex webpack) or libs (ex lit-html) to build web components. It has the potential to really lower the bar for develoment and adoption.

The VanillaES org will only become more relevant as the entire JS ecosystem shifts over to using ESM. The impact of JS becomes a LOT smaller when the code os 50% the size and 80% of that can be tree-shaken out. We have just barely started to see the full potential of ESM.

How successful do you think they are?

Not successful enough. If I put in a LOT more effort into promoting my projects they'd be much more successful.

But, I don't get paid to work on Open Source so the incentive isn't really there.

What did you learn?

The CSV parser and other parsers I've written inspired me to learn advanced RegEx and Formal Language Theory. My approach is non-traditional but I write some of the fastest parsers in the entire JS ecosystem.

The ESM peojects helped me practice and develop really great workflows for working w/ bleeding-edge JS and participate on the node/modules team. I'm planning to write a whole series of articles about this soon.

The web component projects helped me really refine my understanding of the platform. There is a ridiculous amount of untapped potential in this space. I hope to build my career on this soon.

 

The CSV parser is something I wish I had looked up like a few months ago when I was scraping data. So cool!

 

IMO, CSV-ES is a good option but I've had to hold back on promoting the ESM stuff for the past 8 months until Node + ESM was no longer experimental.

The big shift to ESM in the Node ecosyste won't happen until Node 14.x hits LTS in October.

That's gonna be great. I've been fine with UMDing my libraries but ultimately it's annoying. TypeScript does cover that issue though, at least that's what I've found. Your markdown component is sick too! Nice stuff!

UMD is probably the best universal target until IE can be dropped.

I don't use TS for library dev but all my libs are TS compatible. I kinda hope TS overtakes Webpack for compilation b/c its output is a lot more faithful to the spec. ESM in webpack is pretty much just CommonJS w/ ESM syntax and a lot of Node-specific behavior.

Spec ESM is damn good. Tree-shaking to remove dead code works beautifully. The major downside is you can't use non-strict JS w/ modules so it'll obsolete a ton of older libraries. That and pre-ESM libs that yeet their namespace onto the global context are painful to integrate.

For lib dev I use JS to lower the barrier-to-entry for contributors, add JSDoc types that compile to TS typings for all the type checking/intellisense goodies, and ship CommonJS for Node backward compat. Tooling w/ ESM support (ex testing) is still lagging but that should get better as time goes on.

Thanks! The wc-markdown is my favorite of the collection. It's what loads all of the content on my personal website. Hopefullt, one day I'll finish that markdown-es parser so I can optimize the heck out of it.

 

Not a big deal but something.

GitHub logo pagalprogrammer / funtabify

A javascript library to change page title (text visible on tab) when user switches tab of a browser.

funtabify v1.0

GitHub GitHub top language GitHub file size in bytes GitHub release (latest by date)

A javascript library to change page title (text visible on tab) when user switches tab of a browser.

Requirement

  1. jQuery Library

Usage

  1. Download Minified Funtabify Library
  2. Include it at the end of your webpage before closing body tag:
 <script src="<path-to-funatbify.min.js"></script>
 <script>new funtabify("<Text-to-display-on-tab-switch>");</script>

Licenced under GNU GPLv3




 

Libraries or apps?

 

I'd say libraries. Something that can help out other devs

 

What libraries are you proud of?

Is not exactly a library. It's a cli utility.
URL: tinytina

What did they seek to accomplish?

Replace a bunch of bash script with curl commands inside. It's an http client that reads data from a json file and makes the request. At first it was just a thing I did to replace curl but then I added other commands and I think it went well.

How successful do you think they are?

I'm the only known user so it's going great.

What did you learn?

Nothing. But I did get to do some crazy stuff for no particular reason.

 

I've written tons over the years, the several I'm most proud of are things like 3d mesh decimation for both Unity and PlayCanvas. Github

I've just recently been building stuff for React including a very fast virtual dynamic list that has properties that make it ideal for circumstances other projects don't cover. Github

Just published a cool library for quickly writing async components in React, article here

 

I was working on two small libraries earlier this year but I haven't had time to write some tests and do a final review, so I haven't published them yet. Some feedback would be great though!

github.com/jpantunes/jsbloom
First one is a re-write of JSBloom with LZ-String compression algorithm support. I did it because I wanted to understand how a bloom filter works and the module I found on Mozilla's repo had enough "holes" on it that it was fun to refactor.

github.com/jpantunes/nano-ethereum...
Second on is the world's smallest Ethereum signer! It allows cryptographically signing and verifying messages as well as generating wallets from a given PK. Vitor Maia had gotten it down to 52k (compressed) while my version is 39K... uncompressed. I incorporated the noble-secp256k1's code because it uses the native BigInt type instead of the huge and messy BN module most commonly used in crypto libraries and it allowed me to refactor away more than 5000 LOC :-)

 

One library I recently "finished" was github.com/vinaypillai/ac-colors. I wanted to solve some the issues with picking colors with HSL color pickers, like how changing the hue in HSL might make colors seem brighter or darker (read more about that here). The color library I wrote was meant to address these issues, and offer a few common utilities that developers often need, like contrast ratio checking and random color generation. I think as a whole I was pretty successful, but there are still more features I want to add, like additional support for the LUV and LCHuv color spaces.