Enhance Your Web Apps: Best JS Libraries 🔧
Table of contents
Hi There 👋,
As a full-stack web developer, I'm thrilled to share my favorite JavaScript libraries, which I've used in the past and strongly suggest for any new project. Throughout this post, I'll highlight the libraries I favor, I'd also want to hear your recommendations in the comments section. If you have any suggestions for great libraries, I'm all ears! Let's start and look at some tools to help us on our web development path. Happy coding and exploring!
Nano ID
A tiny, secure, URL-friendly, unique string ID generator for JavaScript.
Nano ID has proven to be a game changer when it comes to generating slugs and unique pathways for user data such as projects and forums. Nano ID is a must-have tool if you work with dynamic URLs and need to construct user-generated items that may be shown on different sites or formats.
One of the major advantages of using Nano ID over other generators includes:
Small. 130 bytes (minified and gzipped). No dependencies. Size Limit controls the size.
Safe. It uses a hardware random generator. Can be used in clusters.
Short IDs. It uses a larger alphabet than UUID (A-Za-z0-9_-). So ID size was reduced from 36 to 21 symbols.
Portable. Nano ID was ported to 20 programming languages.
Working with Nano ID is straightforward. Generating IDs is a breeze, just follow the example below:
import { nanoid } from 'nanoid'
model.id = nanoid() //=> "some_thing_unique"
Have you ever used forms before? If you have a lengthy form with certain restrictions, such as a title that must be 20 characters long or a password that must be long enough, processing user data might be difficult. Setting things up traditionally takes time, and some wise individuals previously cautioned never to trust user data. I have two devoted libraries to assist you here.
ZOD
TypeScript-first schema validation with static type inference
Zod is a schema definition and validation library written entirely in TypeScript. I used the word "schema" to refer to any sort of data, from a basic text to a sophisticated nested object.
Zod was created to be as developer-friendly as possible. The purpose is to eliminate redundant type declarations. With Zod, you specify a validator once and Zod will infer the static TypeScript type for you. Simpler kinds can be easily combined to form more sophisticated data structures.
Other noteworthy features include:
There are no dependencies.
Node.js and all contemporary browsers are supported.
8kb minified and zipped
Immutable Methods (for example,.optional()) create a new instance
Interface that is concise and chainable
The functional approach is to parse but not validate.
It also works with simple JavaScript! TypeScript is not required.
JOI
The most powerful schema description language and data validator for JavaScript.
Joi lets you describe your data using simple, intuitive, and readable language.
I've used both of the aforementioned in a variety of projects, and I found ZOD to be more user-friendly in my situation. However, Joi may be a better choice for you.
Please tell me which of Zod and Joi you prefer. You can also include any comparable choices that are available:)
I was constantly looking for a way to display markdown material as a dev. does. The following library, on the other hand, is capable of performing this function. Where you may write a markdown and it will be rendered as HTML with suitable GitHub-style styling
React Markdown Editor
A basic markdown editor with preview built with React.js and TypeScript. This React Component attempts to provide a basic Markdown editor with syntax highlighting.
I recall searching for options for rendering markdown in NextJS and coming across this package, which worked well. It aided me in getting my blog site up and running.
Features
📑 Indent line or selected text by pressing the tab key, with customizable indentation.
♻️ Based on textarea encapsulation, does not depend on any modern code editors.
😻 GitHub flavored markdown support.
🌒 Support dark mode/night mode.
💡 Support next.js.
Handling Loading states in a Nextjs application is critical if your app relies on an external data source and so on for your browser to generate the page.
I discovered this library while participating in an open-source project through Hacktoberfest.
Next Js TopLoader
A Next.js Top Loading Bar component
This package does one thing extremely well: it provides feedback to users as they navigate across websites.
A progress bar appears on top of the HTML tree and goes away as the page loads on the client side. This provided some input to the end user, which I thought was useful when I needed to make the user feel that something was on the way :D.
You may also configure the loader based on your application theme and the behavior you wish to put up.
color: to change the default color of TopLoader.
initialPosition: to change initial position for the TopLoader in percentage, : 0.08 = 8%.
crawlSpeed: increment delay speed in ms.
speed: animation speed for the TopLoader in ms
easing: animation settings using easing (a CSS easing string).
height: height of TopLoader in px.
crawl: auto-incrementing behavior for the TopLoader.
show spinner: to show a spinner or not.
shadow: a smooth shadow for the TopLoader. (set to false to disable it)
When you work on a large project with few mates, it is important to communicate well through your commitment and sometimes we are lazy, which makes us put not a structured commitment for others that they can understand. To solve this issue we need a way to describe a set of rules that are applied to every commit you do on the project.
YES!! We are talking about HUSKY 😀
HUSKY
Husky improves your commits and more 🐶 woof!
You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.
To learn more you can refer to this doc.
These are a few libraries that I've found useful and prefer to utilize in my projects. If you appreciated this post and find any new useful libraries, please leave a comment 💬 and a like 👍.
Thank you 😍 for reading to the end. If you find this useful, please share it with your developer friends.