nanoid VS size-limit

Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:

Our API is in node. And God, how I suffered to import nanoid in an esmodule project. I had to vendor it, since using a previous version was not ideal. With bun, we can no longer worry about that. Just import what you need and done.

No thread about UUID is complete without a plug for NanoID! https://github.com/ai/nanoid/blob/main/README.md

Generate a unique file name using the nanoid library.

The syntax should read similar to SQL itself. We’re using a Python port of nanoid to generate our IDs. There’s only one thing missing… how do we actually create the table?

I usually go for Nano Id for new projects https://github.com/ai/nanoid

Nano ID

In another comment I mentioned I use nanoid in my projects now. It has a default space of 64^21 and has an a page where you can play with key lengths and alphabet sizes and see the probability of collisions :

https://zelark.github.io/nano-id-cc/

At the default 64 character alphabet with a 21 character key length it would take ~41 million years in order to have a 1% probability of at least one collision if you generated 1000 ids per second.

Using randomly generated IDs like Nano ID could be a good alternative, however, as a developer, we must understand what Nano ID really does in our application. Defining the number of characters in the generated IDs is also important, to help with that Nano ID has a Collision Calculator to give us how many years in order to have a 1% probability of collision.

However, you can use the Size Limit library to control the size of a bundle or individual exports. Here’s an example configuration:

It's always good to keep track of these things over time so performance doesn't slide. Parcel, which I used for this project, has a helpful bundle analyzer (similar to the one for Webpack) that gives a nice visual overview of a project's bundle. This is especially helpful for identifying bundled dead code coming from packages that could be avoided with tree-shaking. There are also plenty of tools you can integrate with CI to enforce bundle size.

TSDX is a great package for npm packages like this and even bundles with size-limit to check your gzipped final bundle size. Keeping a tiny package was really important to me so there are 0 dependencies and size-limit made me realise that simplifying all of my checking functions into 1 or 2 core functions that took options would be a better strategy and help reduce the code size.

Small. 130 bytes (minified and gzipped). No dependencies Size Limit controls the size.

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users, and throws an error if the cost exceeds the limit. Link: https://github.com/ai/size-limit

-Mark Erikson and Joel Hooks talk on Redux -When and when not to reach for Redux -Redux Introduction -Egghead course by Dan Abramov on Fundamentals of Redux -RDD article by Tom Preston Werner -Another Article on RDD -Article on writing a great Readme -RDD Readme Example: size-limit