Matthew DiLoreto

A place to keep track of some of my things.

Libraries for Web Development

A list of neat and nifty libraries I’ve stumbled across which have piqued my interest enough for me to save them. Keeping track of them here in this list for my future reference.

In the Browser

Analytics

  • counter.dev: Simple, open-source, free (as in beer), privacy-focused analytics.

Built on React

React wins the web by converting the problem of UI to a function:

V = F(D)

Here are some projects which compose with that simple function.

  • Blitz.js: Full-stack batteries-included React Framework. 0-API. Comes with Routing, Authentication (sign-up, log in, password reset) preconfigured. Would use for a hackathon project.

Data Visualization

  • Victory: Easy to use Charts and data visualization components for React. Works with React Native too(!)
  • Highcharts: Modular library of many chart types with React or plain js bindings.
  • Charts.scss: Boom, no need for React at all. Charts directly in css baby. Could be really cool in conjuction with htmx.
  • React flow: Node editor for building flowcharts / graph-based diagrams with interactive editing, minimap, and more.
  • Textures.js: SVG patterns for data visualization. Trivial to use and beautiful.

Dates

  • JS-Joda: Lower adoption than date-fns. Immutable implementation of dates (Does not wrap the native JS Date object. Different classes of dates for different use-cases:

    • LocalDate (dates like birthdays or holidays)
    • Period (between 2 dates)
    • Duration (scalar time)

  • Date-fns: Consistent, complete, immutable.

    High adoption (recommended from moment.js (the easiest/most intuitive date library I’ve encountered)). Wraps the Native Date object. Has an FP submodule providing convenience for functional-style programming.

DOM styling

  • Styled Components: Directly associate React Components with styles without the need for global style sheets. Good for building highly modular (read standalone) components.
  • Semantic UI: words = classnames. Create highly readable “semantic” UI code with a decent selection of components
  • Tachyons: Functional terse css classes. Might be based off tailwind, not sure.
  • Rough Notation: Create + animate “hand-drawn” annotations on top of html. Super simple and cool effect.

Dope stylesheets

  • NES.css: Stylesheet to emulate old NES style interface. Certified dope.

React alternatives

Alternatives to the classic client-side rendered react SPA.

  • htmx: Build SPAs directly onto html elements using attributes.

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

small - 10k minified + gzipped. Cool author.

Misc.

  • Quotebacks: Create nice-looking and functional quotes to external resources. Mostly used in the blogosphere.

Not the Browser

Web hosting

  • Netlify: The best. use it.
  • Coolify: Open-source, indie-hacker-esque Netlify alternative. Not clear what pricing is like.
  • raw.githack.com: CDN for files hosted in github repos. Good for indie-dev type projects.

Databases

SQL

  • Walkable: hiccup-style sql (use EDN to describe SQL statements).
  • Massive.js: A powerful Node.js wrapper for (only) postgres that doesn’t get in the way.

Replication

  • litestream: Replicate SQLite databases automatically in the background as a separate process.

(Fun) Data sources

  • Rijksmuseum: Searchable compilation of over 700k high-res copies of famous paintings.

  • Tabfs: Mount browser tabs as a local filesystem. Allows easy querying of multiple open tabs, saving+reloading tabs + manipulating + communicating with browser. Your own browsing sessions become the data source. Literally endless possibilities for scripting.

  • Everynoise: Literally every spotify genre, with links to relevant artists / song snippets, and the relations between them all.

Machine learning

  • Lobe: Easiest (superlative, yes) online training of machine learning models. It’s free for now.
  • Igel: Train + fit, test + use machine learning models at the command line without writing code.
  • Meshroom: Reconstruct images as 3D models, aka Photogrammetry (your $2 word for the day). Free (as in freedom, and also beer).