DEV Community 👩‍💻👨‍💻

Cover image for 20+ JavaScript Utilities to Boost Your Productivity As a Developer
Olubisi Idris Ayinde💡
Olubisi Idris Ayinde💡

Posted on • Updated on • Originally published at

20+ JavaScript Utilities to Boost Your Productivity As a Developer

In software development, utilities are software tools that add functionality to your code or improve the performance of your application.

In this article, we'll go through a fantastic selection of tools that will help you be more productive as a software developer.

1. Webpack

A module bundler is Webpack. Its primary function is to bundle JavaScript files for browser use, but it may also convert, bundle, or package almost any resource or object.

2. Cypress

Cypress is a modern web-based next-generation front-end testing tool.

Although Cypress is frequently compared to Selenium, the two are fundamentally and structurally distinct. Cypress isn't limited in the same way that Selenium is.

3. RXJs

RxJS is a reactive programming library that uses Observables to make asynchronous or callback-based applications easier to compose. This project rebuilds Reactive-Extensions/RxJS, improving efficiency, modularity, and debugability while remaining mainly backward compatible, with some breaking changes that minimize the API surface.

4. Jest

Jest is a fun JavaScript testing framework with a focus on ease of use.

It works with Babel, TypeScript, Node, React, Angular, Vue, and more frameworks.

5. NestJs

Nest is a framework for creating Node.js server-side applications that are both efficient and scalable. It is designed with TypeScript (to maintain compatibility with pure JavaScript) and incorporates parts of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Resource Programming) (Functional Reactive Programming).

Nest uses Express behind the hood, but it also has interoperability with various other libraries, such as Fastify, allowing for easy usage of the numerous third-party plugins available.

6. Date-fns

date-fns is a suite of tools for manipulating JavaScript dates in a browser and Node.js that are extensive and consistent.

7. Electron

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML, and CSS. It is based on Node.js and Chromium and is used by the Atom editor and many other apps.

8. NG-Mocks

Mock components, services, and more out of annoying dependencies for simplification of Angular testing

9. Nanoid

A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

10. Redux

Redux is a state management system for JavaScript programs.
(Not to be confused with the Redux Framework, a WordPress framework.)

It enables you to create apps that operate consistently across environments (client, server, and native) and are simple to test. It also offers a fantastic developer experience, with live code editing and a time-traveling debugger.

11. Husky

Husky improves your commits and more.

When you commit or push, you can use it to lint your commit messages, run tests, lint code, etc.

12. Axios

Promise based HTTP client for the browser and node.js

13. Faker

faker.js - generate massive amounts of fake data in the browser and node.js

14. DayJs

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with an essentially Moment. Js-compatible API. If you use Moment.js, you already know how to use Day.js.

15. Webpack

A module bundler is Webpack. Its primary function is to bundle JavaScript files for browser use, but it may also convert, bundle, or package almost any resource or object.

16. Puppeteer

Puppeteer is a Node module that allows you to manipulate Chrome or Chromium using the DevTools Protocol. Puppeteer is configured to run full (non-headless) Chrome or Chromium by default, although this can be changed.

17. Light House

Lighthouse analyzes web apps and web pages, collecting current performance metrics and insights on developer best practices.

18. React Query

Hooks for fetching, caching, and updating asynchronous data in React

19. Nodemon

Nodemon is a program that aids in the development of node.js apps by automatically restarting them when file changes in the directory are detected.

No additional changes to your code or development technique are required with nodemon. nodemon is a wrapper for node.js that can be used instead of node.js.

20. React Error Overlay

react-error-overlay is an overlay that displays when there is a runtime error.

21. HTTP Proxy Middleware

Node.js proxying made simple. Configure proxy middleware with ease for connecting, express, browser-sync, and many more.

22. Underscore

Underscore.js is a utility-belt library for JavaScript that supports the usual functional suspects (each, map, reduce, filter.) without extending any core JavaScript objects.

23. Parcel

The parcel is a zero-configuration build tool for the web. It combines a tremendous out-of-the-box development experience with a scalable architecture that can take your project from just getting started to a massive production application.

24. Pm2

PM2 is a load balancer-assisted production process manager for Node.js applications. It lets you keep programs alive indefinitely, reload them without causing downtime, and simplify typical system administration duties.

I hope you find these resources helpful 😊

I'd love to connect with you at Twitter | LinkedIn | GitHub | Portfolio

See you in my next blog article. Take care!!!

Top comments (5)

reikrom profile image
Rei Krom

Sorry, is this bot generated?

olanetsoft profile image
Olubisi Idris Ayinde💡


rodelta profile image
Ro De la Rivera

Sorry, bug how is this related to productivity?
They're just js libraries, several which are exclusive to each other

manoszalokostas profile image

You forgot to mention Webpack :o

olanetsoft profile image
Olubisi Idris Ayinde💡

I mentioned it twice right 😄

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.