I don't know about you, but I like to keep my console logs in my JavaScript projects look good. And since not all terminals support emojis, what better way do I have than colouring the console output?
Well, you can go about it by googling the ANSI escape code for each console style that you want. Or maybe memorize some of them from a page like W3Docs. But I love making my logs look good, I'm definitely not a person who can memorize lots of stuff, and I like to have one way that works everywhere.
Well, I usually only use colored logs for JS, so no need for something that works literally everywhere. But at least something that works wherever there's JavaScript involved.
So I decided to write my own script that contains every possible ANSI escape code that I could ever possibly need, in the form of functions. But then I realized it would be annoying to copy the same script over and over again in all my projects. So, as a person who never worked with an npm command besides npm i and init, I decided to learn more and create a private NPM package that I could just install in my projects (or clone its GitHub repository for non-NodeJS projects).
I didn't want to deal with NPM authentication every time I installed the package, so I just made it public.
And that's what we're here for today: javascript-console-styling is a package that I made to ease this process on me.
Indeed, similar packages to mine have been made before (which is a fact that I had only realized after making it). But I noticed that my own solution was still better for me, or anyone like me:
My package took only 14KB of space, according to npm. While other similar packages took up to 50 times the same amount (more than 500 kilobytes). Even though they're both under a megabyte, it's still better to have a smaller package because you can manage all of its files easily (or even fork it and modify it easily if you wish)
My package could nest different styles and decorations since they are functions... And even if you have an entire styled string that contains a substring with a different style then you could just concatenate the substring (including the substring inside the parent string will stop any styles from applying after it due to the reset that each styling function does)
My package had easy testing tools that showed all possible colour and decoration combinations so that users could verify its output in their terminal (Test functions are not included in the default package, but are available on the NPM page and on GitHub)
Example test:
So overall, I prefer to use my own code. But a part of owning a public package is making sure people know how it can help them so that they can choose for themselves if they need it.
I don't think this will be the last NPM package I create, but it was a good way to get me motivated about the entire NPM thing!
Make sure to check out the package, and happy hacking!
Top comments (5)
Nice 👍 would be great if you could add some screenshots here (and in the readme) to get a look of it before installing
Sure, but colours look different on different consoles (according to the liking of the developers of those consoles). I'll just attach screenshots of my terminal (Ubuntu Gnome Terminal)
Done! I've added screenshots to the article and the README file on the GitHub repository 👍
i am gonna try it. Here's my library
npmjs.com/package/classic-react-hooks
It seems promising, I'll check it out!