If you, like me, love finding small gems in the NPM directory to improve your development process, today is your lucky day.
I am starting a new series of articles where I will showcase some small and less-known libraries that I found and use every day that will save you more than one headache.
So, let's start!
1. Urlcat
Urlcat is a tiny Javascript library that makes building URLs very convenient and prevents common mistakes.
Yeah, you could use the URL API to build your URLs. But still, you will have to take care of some details for yourself instead of just building the URL.
That is why I love this library. It is just "plug-and-play." You don't need to learn complicated patterns or spend hours on documentation.
So, feel free to give it a try: https://github.com/balazsbotond/urlcat.
2. UseHooks-ts
If you are a React developer, you are using hooks (I hope). If that is the case, there are probably lots of times you have to create a custom hook for very little things. For example, for handling the dark mode. Or for the window resize event. Or lots of other cases.
UseHooks is a small library with well-coded, well-documented, and fully typed (for Typescript users) hooks for all those small cases, so you focus on the project itself.
You can check it here: https://github.com/juliencrn/usehooks-ts.
3. Logt
I like to have logs everywhere, so when there is some need to know what is going on, I can check them.
And when I code the front end, I also want those logs. But with some requisites:
- It must be fully typed (so I can use it in Typescript without any headache)
- It must be small
- It must have colorful labels (so I know the log type quickly)
- It must have log levels
- It must have some way to hide some logs according to conditions (like if it is a production build or not)
- It must be possible to send those logs somewhere else (like to Sentry)
After a lot of time spent researching (and almost starting to code my own one), I found Logt, which meets all my requirements, plus a few more.
100% recommended! https://github.com/sidhantpanda/logt
4. Loadable Components
If you are trying to optimize your React app, you are probably using React.lazy and Suspense to lazy-load the components.
That is fine.
But there are even better ways! For example, this library. Obviously, in this article, I can not give a full explanation about why you should switch from React.lazy to this library but feel free to check this post from the author.
Basically, a few key things are it supports SSR (Server Side Rendering), Library Splitting, and even full dynamic import. Not bad, huh?
And the best thing. It is really easy to use. Almost plug-and-play. So, give it a try! https://github.com/gregberge/loadable-components
5. Emoji Mart
When working on different projects, I always have to deal with emojis. It is something used everywhere right now. And I usually have to add some emoji picker component in the project.
That is not complicated. But then you start to receive more requirements: it must lazy-load the emojis, it must support internationalization, it must allow searching, it must allow using the same query text as Slack…
And that takes time. I can do it. But the clients usually prefer me to focus on the project itself. So… I found this little library. A beautiful and useful one.
Let me show you, Emoji Mart! https://github.com/missive/emoji-mart
If you are like me, you love finding these kinds of little and useful libraries, easy to use and perfect to integrate with your projects. So, don't worry. I have a big list already ready to share. This is the first 5 of this series. Be sure to follow me to be notified soon when I publish the next ones!
In the meanwhile…
Top comments (24)
Thanks for sharing, surely loved this especially the emoji package, will try it out.
Thanks for sharing.
Thanks for sharing :)
Glad it helped you!
Thanks for sharing!
I’ll take the change to share my module here npmjs.com/package/@dannyman/use-store , I’ve been using it on many apps that are on production right now and it becomes really helpful on them.
Why do you base64 encode the data?
To make it non readable to most of the non tech users in case there is something sensitive there
Doesn't seem worth it. The hit to performance or the inconvenience for debugging.
Also, why shouldn't you be able to read your own data? What's sensitive about that? And it doesn't even stop a and actor from easily reading the data.
Imagine you are debugging and you just use console.log(oneObject, anotherObject, oneVar, "The code took X time to run");
That is not that organized. I am not telling in the article that it will be more comfortable to use. But it will be a little more organized.
And since you should never deploy console.log to a production build, no bad actor should be see them.
In the end, it depends on you if using these methods or not, in this post I am just bringing attention to a few extra functions.
Will think about adding it as an option.
For the business logic when created, it was needed. Don’t want to give out data easily to everyone if you are in a shared computer , the idea is to add better encryption later.
Thanks, Really helpful.
👉 Kindly check my blog too and suggest any improvements dev.to/lovepreetsingh/what-is-dock...
Thanks for the post. I have bookmarked it because I will be exploring that Logt package in more detail.
I have a counter offer for you: Instead of
urlcat
, use wj-config. It will do whaturlcat
does, but it does this from per-environment configuration values. It takes care of your configuration data in the same way .Net Configuration does, relieving you from having a million fake environment variables in.env
files, plus you get the URL functions that do route value replacement and query string addition.Oh, sounds like a package I need to try! I will check it tomorrow, hopefully in the next chapter of this series it will be added
React-loadable literally says that you should migrate to React.lazy since its not maintained for quite long time. Please do not recommend others a deprecated libraries, Reading docs does not hurts.
Yeah, React-loadable is deprecated. Loadable-components is not the same library. In fact, React-loadable recommends to migrate to React.lazy or loadable-components. This is the one you say (npmjs.com/package/react-loadable) and this is the one I talk about: github.com/gregberge/loadable-comp...
Ohohohoho! Sick burn!
Please read the docs yourself? react-loadable is not the same as @loadable/components
urlcat looks cute. Nonetheless, it is not tiny - 10.5 KB minified and gzipped. I would expect 'tiny' to be below 1 KB or something similar, especially for such a specific low functionality library.
This one too for preparation -
github.com/Vasu7389/ReactJs-Interv...
Source - codinn.dev/reactjs/reactjs-intervi...