DEV Community 👩‍💻👨‍💻

Cover image for Useful JS libs in my web developments
Benjamin Petetot
Benjamin Petetot

Posted on • Originally published at petetot.netlify.com

Useful JS libs in my web developments

Useful JS libraries I'm using in my web projects, some are famous, some should be. None are framework oriented, you can use it with React, Angular, Vue, JQuery etc.

lodash

Always useful, lodash is a set of utilities to handle strings, iterables, collections, functions. Don't reinvent the wheel, you will find what you need in lodash. 2 things to keep in mind when you use it in a webapp.

  1. Don't forget to import only the module you need. You don't want to import all lodash utilities in your final bundle.
  2. lodash/fp module will you give the ability to use it in a functional programming style.
// import only the debounce function from lodash/fp
import debounce from 'lodash/fp/debounce'

const debounced = debounce(250)(search) // debounce the search function
Enter fullscreen mode Exit fullscreen mode

date-fns

Like lodash, date-fns has a bunch of functions but dedicated to handle dates. This is a great alternative to moment.js It uses the native Javascript Date object and you can import only the modules you need. Formatting, parsing, operations... most of date use cases can be done with date-fns.

import formatRelative from 'date-fns/formatRelative'
import subDays from 'date-fns/subDays'

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."
Enter fullscreen mode Exit fullscreen mode

Day.js is also a good alternative to moment.js. It is a minimalist lib (only 2KB) with almost the same complete API.

validator.js

In web development, you always need to validate user's inputs. validator.js contains all the validation functions you need: email, alpha, currency, credit cards, MAC address, etc. More than 60 validators!

import isEmail from 'validator/lib/isEmail'

isEmail('foo@bar.com') // true
Enter fullscreen mode Exit fullscreen mode

intl-messageformat

intl-messageformat provides a way to manage and format your app's string messages into localized strings. It uses the ICU Message syntax and works for all CLDR languages which have pluralization rules defined.

import IntlMessageFormat from 'intl-messageformat';

const photos = `You have {numPhotos, plural,
    =0 {no photos.}
    =1 {one photo.}
    other {# photos.}
}`

const messages = new IntlMessageFormat(photos, 'en-US');

console.log(msg.format({numPhotos: 0}));    // => "You have no photos."
console.log(msg.format({numPhotos: 1}));    // => "You have one photo."
console.log(msg.format({numPhotos: 1000})); // => "You have 1,000 photos."
Enter fullscreen mode Exit fullscreen mode

DOMPurify

In some webapp, I needed to sanitize HTML string coming from the user or external sources. Most of libs I found were very heavy. DOMPurify is one of the lowest and fastest sanitizer. Very easy to use, you can also override its default configuration.

DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe/\/src=jAva&Tab;script:alert(3)>def'); // becomes <p>abcdef</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
Enter fullscreen mode Exit fullscreen mode

Feather icons

Feather icons is just an awesome set of beautiful open source icons.

Feather icons

Faker.js

You are tired to use lorem ipsum text or foo, bar, baz in your unit tests and mockups. So. You have to check faker.js. It can generate addresses, company names, account numbers, phone numbers, images and so on. It supports multiple languages and locales. Here a complete demo

import faker from 'faker'

faker.name.findName() // Rowan Nikolaus
faker.internet.email() // Kassandra.Haley@erich.biz
faker.helpers.createCard() // random contact card containing many properties
Enter fullscreen mode Exit fullscreen mode

And you. Which lib do you use in your web projects?

Top comments (4)

Collapse
 
tbetous profile image
Thomas Betous

Nice post Benjamin !

Note that you may not always need those libs ! A trivial example : you don't need loadash if you want map an array.

Sometime I use that repository that gives some hints to know if you really need lodash, date-fns and even javascript !

Collapse
 
bradmgarrison profile image
bradmgarrison

Hi Benjamin,

Nice post!
You presented a really useful set of libraries.

I'm more focused on React.
I recently entered in 3D world, started with three.js (react-three-fiber in React projects), and I'm really satisfied.
For localization, I'm mostly using react-intl.
In some cases, when I need to deal with very complex and clumsy ICU messages, I'm using a free online ICU Editor.

Collapse
 
ama profile image
Adrian Matei

Hey Benjamin,

Thank you for putting up this list - most of them are now bookmarked at bookmarks.dev/tags/javascript

Cheers,
Adrian

Collapse
 
bpetetot profile image
Benjamin Petetot Author

Thanks Adrian. bookmarks.dev seems great!

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post