javascript

libs

axios

npm install axios
npm install @types/axios

data: string, object, ArrayBuffer, ..., FormData (browser), File (browser), Blob (browser) responseType: 'arraybuffer', 'document', 'json' (default), 'text', 'stream', 'blob' (browser)

date-fns

npm install date-fns

Editors WYSIWYG

Choice: CKEditor

CKEditor

pros: major, stable, compatabile with old browsers
cons:
npm install @ckeditor/ckeditor5-build-classic

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

ClassicEditor.create(element).then((newObject) => { editor1 = newObject })
editor1.set_data(text)

Quill

pros: neat
cons: messing things by injecting <p>, <br&gy; everywhere (nogo), modern browsers only

TinyMCE

pros: major, stable, compatible with old browsers
cons: cloud based (nogo)

TipTap

pros: based on ProseMirror, simplier
cons: no styling, need to create CSS from scratch (nogo), modern browsers only

docs
Install js-cookie and @types/js-cookie

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7, path: '')
Cookies.remove('name')      // give path is set with it

jsPDF

leaflet

Install leaflet and @types/leaflet

localForage

Handler for browser storage (by priority: IndexedDB, WebSQL, localStorage)
docs

lodash

npm install lodash
npm install @types/lodash

High-level lib for Array, Math, Object, Seq, String manipulation.
For Array, useful functions like flatten(), remove(), suffle()...

page.js

SPA routing

npm install page
npm install @types/page

QR Code (generation): qrcode

docs

npm install qrcode
npm install @types/qrcode

Error correction levels: L: 7%, M: 15%, Q: 25%, H: 30%

QR Code (scan): jsQR

jsQR

npm install jsqr

qr-scanner

Warning

Avoid qr-scanner, as of 1.4.2, it fails to scan codes that jsQR succeed.

docs
pros: based on Cosmo's jsQR, use browser's ShareDetection API if available
npm install qr-scanner

import QrScanner from 'qr-scanner'

const qrScanner = new QrScanner(
  document.getElementByID('videoContainer'),
  result => callbackFn(result),
  { options }
)
qrScanner.start()
qrScanner.stop()
qrScanner.destroy()
qrScanner = null

tables

Choice: Tabulator (if lib really needed)

Tabulator

pros: modern lib
cons: no obvious advantage vs custom html for most cases
npm install tabulator-tables @types/tabulator-tables

import { Tabulator, PageModule, SortModule } from 'tabulator-tables'
// import BS5 theme
import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css'
// register for pagination and sorting
Tabulator.registerModule([PageModule, SortModule])

Tabulator(<element>, {
    data: data,
    autocolumn: true,
    pagination: true,
    paginationSide: 20,
    rowHeight: 24
})

datatables.net

npm install datatables.net-dt cons: no @types

tips

Map vs Object.create()

JS objects are often used as dictionnaries. But on top of parameters, they have prototype boilerplate.
Two methods exists to get dict-like features without prototype:

// Object.create()
let account = Object.create(null, {
  owner: { value: 'John Smith' },
  balance: { value: 1000 }
}
// Map
let account = new Map()
account.set('owner', 'John Smith')
account.set('balance': 1000)

Warning

JSON.stringify does not handle any of those, so it is not possible to store them on browser storage.
Map offers more flexibility since key can have different types (Object keys are string only)

misc

npm-check-updates

docs

$ npm install npm-check-updates
$ ncu -u -g

tools

runkit
js interpreter on browser

remoteJS
Console.log() on browser. Must have for smartphone dev.

browserstack
To test on 3000+ different browsers