Figbird is an effortless realtime data management library for React + Feathers applications. Used in production at Humaans, Figbird uses live queries that work with Feathers realtime events and local data mutations. When records are created, modified, or removed, all queries referencing those records get updated automatically.
The benefits of Figbird include automatic realtime updates across components, intelligent caching with reference counting, granular control over query behavior (merge, refetch, or disabled), and instant propagation of mutations to all components referencing the same objects. Fetch some data with useFind(‘notes’) and your components will rerender in realtime as the data changes upstream.
Kinfolk is a more powerful context for React that allows sharing state across wide parts of the application widht granular subscriptions. The granularity of atoms and selectors can be seen as an alternative to signals, because of how it allows to create granular fine tuned re-renders.
Space Router is a framework agnostic router for single page apps that packs all the features you need to keep your app in sync with the url. The functionality Space Router provides is listening to url changes using popstate or hashchange event, extracting url parameters and parsing query strings, supporting nested routes and arbitrary route metadata, fitting into a wide range of application architectures and frameworks, and having no dependencies while weighing less than 2kb. This library has been stable since 2017 and continues to power real world applications.
React Space Router is a set of hooks and components for keeping your app in sync with the url and performing page navigations. Built atop Space Router, a framework agnostic tiny core that handles url listening, route matching and navigation.
The hope here is that you’ll find React Space Router refreshingly simple compared to the existing alternatives, while still offering enough extensibility following the philosophy that “Perfection is achieved when there is nothing left to take away.”
Jetpack is one of these projects that aims to help developer productivity. Over the years I’ve seen the same pattern being used over and over for bootstrapping Single Page Apps. Here’s what you do with jetpack.
Install it into a fresh repo. Create index.js with some code. For example, React.render(...). And now run jetpack. And that’s it, you have a working and ready to ship to production application setup. You can add a Node.js based API into this same repo. And once you’re ready – jetpack can build the app’s assets for you to deploy to your favorite hosting provider or your internal company infra. Touching webpack config wasn’t necessary.
By default, Next.js or Webpack doesn’t help you with optimizing images. This means custom configuration or scripting, processing images by hand, using an image CDN or not optimising images at all. next-img provides and alternative streamlined approach for adding images to your Next.js projects. It combines a Next.js plugin, a custom webpack loader and a React component to make serving images in an optimal fashion in a way that is almost as easy as typing <img src='foo.png' />.
I have been a long time fan of Standard – the JavaScript Style Guide. It removed a lot of decisions and discussions from the teams I’ve worked with. And it became an essential tool for every single JavaScript project I’ve worked on for the last several years. One dependency and you get consistent code style and catch a lot bugs right in your editor.
Prettier, another tool that was created to boost productivity, came out in 2017 and I’ve had a serious look at it more recently. And it is amazing. Not only it takes away having to make decisions about your code style, but it also formats code for you and does that really well. This really speeds up development.
The issue with Standard is that it’s just a linter, it can’t format your code nearly as well as Prettier can. The issue with Prettier is that it’s only a formatter and it doesn’t tell you about potential bugs in your code. And the issue with trying to use them both is that their incompatible, Prettier formats the code in a way that doesn’t match Standard’s Style Guide.
This is where Healthier comes in. It’s just like Standard in pretty much every aspect, but with all of the style linting rules removed. This way you can format your code with Pretter and lint it with Healthier.
Tiny Atom is a React state management library. Actually, it’s framework agnostic, but there you go. Yes, yes, it’s a little bit like Redux. Yes, I’m one of those people. To be honest, it is a little frustrating, this whole topic.
I long believed that Redux had and still has a good idea behind it. It’s a very powerful idea of modeling your application’s state and transitions. But I’ve also long believed that Redux API is less than optimal. The issue I think is that it was simply created, worked well enough, and then too quickly got too popular, essentially freezing the API. Why is it so popular then if it’s not that good? I don’t know, maybe because of the docs? Tutorials? Momentum? Ecosystem? Cargo cult? Dan?
Tiny Atom is not perfect. I am always thinking about how to develop the next version, it hasn’t clicked 100%. But for now, it’s a library I choose commonly for the task and it hasn’t disappointed.
Spaceboard is a free to post and free to read job board for techies. It takes inspiration from the timeless utility and familiarity of sites such as Hacker News. It tries to remove all the noise and leave you with a focused stream of job posts. It’s a little experiment we launched out of Zero. It hasn’t gained much traction yet – distribution of products is much more challenging than building them. But it was a good practise round and we have a lot more to give.
PolyChrome is an extension for Firefox that can run Standard ML programs embedded in HTML documents. The extension provides a foreign function interface to JavaScript. As a result, JavaScript libraries and interfaces provided by the browser, such as DOM and Canvas, can be used from Standard ML.
This project is a fun memory, especially since the compile to JS use cases have gained huge popularity in recent years. Back in 2011 it wasn’t clear if compiling ML to JS was the most performant approach or whether it was better to utilise FFI. The mechanic of how the language got executed in the browser was less interesting, the focus and the fun part was exploring how UIs would get built using a pure functional language.
And now, years later, we have Reason (ML family) using React (a functional approach to UI) and even React Native (a message bridge between JavaScript and a native host).