diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..5cbc582 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +build +node_modules +docs +static diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..abe5493 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,21 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint"], + "rules": {} +} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..3c7e6b6 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,29 @@ +name: CI +on: [push, pull_request] +jobs: + build: + name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} + + runs-on: ${{ matrix.os }} + strategy: + matrix: + node: ['12.x', '14.x'] + os: [ubuntu-latest, windows-latest, macOS-latest] + + steps: + - name: Checkout repo + uses: actions/checkout@v2 + + - name: Use Node ${{ matrix.node }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node }} + + - name: Install deps and build (with cache) + uses: bahmutov/npm-install@v1 + + - name: Lint + run: npm run lint + + - name: Build + run: npm run build diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..a7160cd --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules +# Ignore artifacts: +build diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..3cccc47 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "none", + "tabWidth": 4, + "semi": false, + "singleQuote": true +} diff --git a/README.md b/README.md index b8f4b47..6c96103 100644 --- a/README.md +++ b/README.md @@ -57,4 +57,4 @@ All-In-One, free resources and collections related to javascript. we provide use ## 📝 License Copyright © 2021 [salah alhashmi](https://github.com/alguerocode).
-This project is [Apache-2.0](https://github.com/devSupporters/masterJS/blob/master/LICENSE) licensed. +This project is [Apache-2.0](https://github.com/devSupporters/masterJS/blob/master/LICENSE) licensed. \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index e00595d..2acbeee 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], -}; + presets: [require.resolve('@docusaurus/core/lib/babel/preset')] +} diff --git a/blog/2019-05-28-first-blog-post.md b/blog/2019-05-28-first-blog-post.md deleted file mode 100644 index 02f3f81..0000000 --- a/blog/2019-05-28-first-blog-post.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: first-blog-post -title: First Blog Post -authors: - name: Gao Wei - title: Docusaurus Core Team - url: https://github.com/wgao19 - image_url: https://github.com/wgao19.png -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2019-05-29-long-blog-post.md b/blog/2019-05-29-long-blog-post.md deleted file mode 100644 index 26ffb1b..0000000 --- a/blog/2019-05-29-long-blog-post.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -slug: long-blog-post -title: Long Blog Post -authors: endi -tags: [hello, docusaurus] ---- - -This is the summary of a very long blog post, - -Use a `` comment to limit blog post size in the list view. - - - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx deleted file mode 100644 index c04ebe3..0000000 --- a/blog/2021-08-01-mdx-blog-post.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -slug: mdx-blog-post -title: MDX Blog Post -authors: [slorber] -tags: [docusaurus] ---- - -Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). - -:::tip - -Use the power of React to create interactive blog posts. - -```js - -``` - - - -::: diff --git a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg deleted file mode 100644 index 11bda09..0000000 Binary files a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg and /dev/null differ diff --git a/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md deleted file mode 100644 index 9455168..0000000 --- a/blog/2021-08-26-welcome/index.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -slug: welcome -title: Welcome -authors: [slorber, yangshun] -tags: [facebook, hello, docusaurus] ---- - -[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). - -Simply add Markdown files (or folders) to the `blog` directory. - -Regular blog authors can be added to `authors.yml`. - -The blog post date can be extracted from filenames, such as: - -- `2019-05-30-welcome.md` -- `2019-05-30-welcome/index.md` - -A blog post folder can be convenient to co-locate blog post images: - -![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) - -The blog supports tags as well! - -**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. diff --git a/blog/authors.yml b/blog/authors.yml deleted file mode 100644 index bcb2991..0000000 --- a/blog/authors.yml +++ /dev/null @@ -1,17 +0,0 @@ -endi: - name: Endilie Yacop Sucipto - title: Maintainer of Docusaurus - url: https://github.com/endiliey - image_url: https://github.com/endiliey.png - -yangshun: - name: Yangshun Tay - title: Front End Engineer @ Facebook - url: https://github.com/yangshun - image_url: https://github.com/yangshun.png - -slorber: - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png diff --git a/docs/backend.md b/docs/backend.md new file mode 100644 index 0000000..dcd63f0 --- /dev/null +++ b/docs/backend.md @@ -0,0 +1,863 @@ +--- +sidebar_position: 12 +--- + +# Backend + +:::info + +[**Node.js**](https://en.wikipedia.org/wiki/Node.js) is an open-source, cross-platform, JavaScript runtime for writing servers and command-line tools. + +this page from: [sindresorhus](https://github.com/sponsors/sindresorhus) +::: + + +- [Official](#official) +- [Packages](#packages) + - [Mad science](#mad-science) + - [Command-line apps](#command-line-apps) + - [Functional programming](#functional-programming) + - [HTTP](#http) + - [Debugging / Profiling](#debugging--profiling) + - [Logging](#logging) + - [Command-line utilities](#command-line-utilities) + - [Build tools](#build-tools) + - [Hardware](#hardware) + - [Templating](#templating) + - [Web frameworks](#web-frameworks) + - [Documentation](#documentation) + - [Filesystem](#filesystem) + - [Control flow](#control-flow) + - [Streams](#streams) + - [Real-time](#real-time) + - [Image](#image) + - [Text](#text) + - [Number](#number) + - [Math](#math) + - [Date](#date) + - [URL](#url) + - [Data validation](#data-validation) + - [Parsing](#parsing) + - [Humanize](#humanize) + - [Compression](#compression) + - [Network](#network) + - [Database](#database) + - [Testing](#testing) + - [Security](#security) + - [Benchmarking](#benchmarking) + - [Minifiers](#minifiers) + - [Authentication](#authentication) + - [Authorization](#authorization) + - [Email](#email) + - [Job queues](#job-queues) + - [Node.js management](#nodejs-management) + - [Natural language processing](#natural-language-processing) + - [Process management](#process-management) + - [Automation](#automation) + - [AST](#ast) + - [Static site generators](#static-site-generators) + - [Content management systems](#content-management-systems) + - [Forum](#forum) + - [Blogging](#blogging) + - [Weird](#weird) + - [Serialization](#serialization) + - [Miscellaneous](#miscellaneous) +- [Resources](#resources) + - [Tutorials](#tutorials) + - [Discovery](#discovery) + - [Articles](#articles) + - [Newsletters](#newsletters) + - [Videos](#videos) + - [Books](#books) + - [Blogs](#blogs) + - [Courses](#courses) + - [Cheatsheets](#cheatsheets) + - [Tools](#tools) + - [Community](#community) + - [Miscellaneous](#miscellaneous-1) +- [Related lists](#related-lists) + +## Official + +- [Website](https://nodejs.org) +- [Documentation](https://nodejs.org/dist/latest/docs/api/) +- [Repository](https://github.com/nodejs/node) + +## Packages + +### Mad science + +- [webtorrent](https://github.com/feross/webtorrent) - Streaming torrent client for Node.js and the browser. +- [peerflix](https://github.com/mafintosh/peerflix) - Streaming torrent client. +- [dat](https://github.com/datproject/dat-node) - Real-time replication and versioning for data sets. +- [ipfs](https://github.com/ipfs/js-ipfs) - Distributed file system that seeks to connect all computing devices with the same system of files. +- [stackgl](https://github.com/stackgl) - Open software ecosystem for WebGL, built on top of browserify and npm. +- [peerwiki](https://github.com/mafintosh/peerwiki) - All of Wikipedia on BitTorrent. +- [peercast](https://github.com/mafintosh/peercast) - Stream a torrent video to Chromecast. +- [BitcoinJS](https://github.com/bitcoinjs/bitcoinjs-lib) - Clean, readable, proven Bitcoin library. +- [Bitcore](https://github.com/bitpay/bitcore) - Pure and powerful Bitcoin library. +- [PDFKit](https://github.com/devongovett/pdfkit) - PDF generation library. +- [turf](https://github.com/Turfjs/turf) - Modular geospatial processing and analysis engine. +- [webcat](https://github.com/mafintosh/webcat) - p2p pipe across the web using WebRTC that uses your GitHub private/public key for authentication. +- [NodeOS](https://github.com/NodeOS/NodeOS) - The first operating system powered by npm. +- [YodaOS](https://github.com/yodaos-project/yodaos) - AI operating system. +- [Brain.js](https://github.com/BrainJS/brain.js) - Machine-learning framework. +- [Pipcook](https://github.com/alibaba/pipcook) - Front-end algorithm framework to create a machine learning pipeline. +- [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) - Graph theory (a.k.a. network) modeling and analysis. +- [Kadence](https://gitlab.com/deadcanaries/kadence) - Kademlia distributed hash table. +- [seedshot](https://github.com/twobucks/seedshot) - Temporary P2P screenshot sharing from your browser. +- [js-git](https://github.com/creationix/js-git) - JavaScript implementation of Git. +- [skale](https://github.com/skale-me/skale-engine) - High performance distributed data processing engine. +- [xlsx](https://github.com/sheetjs/js-xlsx) - Pure JS Excel spreadsheet reader and writer. +- [isomorphic-git](https://github.com/isomorphic-git/isomorphic-git) - Pure JavaScript implementation of Git. + +### Command-line apps + +- [np](https://github.com/sindresorhus/np) - Better `npm publish`. +- [npm-name](https://github.com/sindresorhus/npm-name) - Check a package name's availability on npm. +- [gh-home](https://github.com/sindresorhus/gh-home) - Open the GitHub page of the repo in the current directory. +- [npm-home](https://github.com/sindresorhus/npm-home) - Open the npm page of a package. +- [trash](https://github.com/sindresorhus/trash) - Safer alternative to `rm`. +- [speed-test](https://github.com/sindresorhus/speed-test) - Test your internet connection speed and ping. +- [pageres](https://github.com/sindresorhus/pageres) - Capture website screenshots. +- [cpy](https://github.com/sindresorhus/cpy) - Copy files. +- [vtop](https://github.com/MrRio/vtop) - More better top, with nice charts. +- [empty-trash](https://github.com/sindresorhus/empty-trash) - Empty the trash. +- [is-up](https://github.com/sindresorhus/is-up) - Check whether a website is up or down. +- [is-online](https://github.com/sindresorhus/is-online) - Check if the internet connection is up. +- [public-ip](https://github.com/sindresorhus/public-ip) - Get your public IP address. +- [clipboard-cli](https://github.com/sindresorhus/clipboard-cli) - Copy & paste on the terminal. +- [XO](https://github.com/xojs/xo) - Enforce strict code style using the JavaScript happiness style. +- [ESLint](https://github.com/eslint/eslint) - The pluggable linting utility for JavaScript. +- [David](https://github.com/alanshaw/david) - Tells you when your package npm dependencies are out of date. +- [http-server](https://github.com/indexzero/http-server) - Simple, zero-config command-line HTTP server. +- [Live Server](https://github.com/tapio/live-server) - Development HTTP-server with livereload capability. +- [bcat](https://github.com/kessler/node-bcat) - Pipe command output to web browsers. +- [normit](https://github.com/pawurb/normit) - Google Translate with speech synthesis in your terminal. +- [fkill](https://github.com/sindresorhus/fkill-cli) - Fabulously kill processes. Cross-platform. +- [pjs](https://github.com/danielstjules/pjs) - Pipeable JavaScript. Quickly filter, map, and reduce from the terminal. +- [license-checker](https://github.com/davglass/license-checker) - Check licenses of your app's dependencies. +- [browser-run](https://github.com/juliangruber/browser-run) - Easily run code in a browser environment. +- [tmpin](https://github.com/sindresorhus/tmpin) - Adds stdin support to any CLI app that accepts file input. +- [wifi-password](https://github.com/kevva/wifi-password-cli) - Get the current wifi password. +- [wallpaper](https://github.com/sindresorhus/wallpaper) - Change the desktop wallpaper. +- [pen](https://github.com/noraesae/pen) - Live Markdown preview in the browser from your favorite editor. +- [dark-mode](https://github.com/sindresorhus/dark-mode) - Toggle the macOS Dark Mode. +- [Jsome](https://github.com/Javascipt/Jsome) - Pretty prints JSON with configurable colors and indentation. +- [mobicon](https://github.com/samverschueren/mobicon-cli) - Mobile app icon generator. +- [mobisplash](https://github.com/samverschueren/mobisplash-cli) - Mobile app splash screen generator. +- [diff2html-cli](https://github.com/rtfpessoa/diff2html-cli) - Pretty git diff to HTML generator. +- [trymodule](https://github.com/VictorBjelkholm/trymodule) - Try out npm packages in the terminal. +- [jscpd](https://github.com/kucherenko/jscpd) - Copy/paste detector for source code. +- [atmo](https://github.com/Raathigesh/Atmo) - Server-side API mocking. +- [auto-install](https://github.com/siddharthkp/auto-install) - Auto installs dependencies as you code. +- [lessmd](https://github.com/linuxenko/lessmd) - Markdown in the terminal. +- [cost-of-modules](https://github.com/siddharthkp/cost-of-modules) - Find out which dependencies are slowing you down. +- [localtunnel](https://github.com/localtunnel/localtunnel) - Expose your localhost to the world. +- [svg-term-cli](https://github.com/marionebl/svg-term-cli) - Share terminal sessions via SVG. +- [gtop](https://github.com/aksakalli/gtop) - System monitoring dashboard for the terminal. +- [themer](https://github.com/mjswensen/themer) - Generate themes for your editor, terminal, wallpaper, Slack, and more. +- [carbon-now-cli](https://github.com/mixn/carbon-now-cli) - Beautiful images of your code — from right inside your terminal. +- [cash-cli](https://github.com/xxczaki/cash-cli) - Convert between 170 currencies. +- [taskbook](https://github.com/klauscfhq/taskbook) - Tasks, boards & notes for the command-line habitat. +- [discharge](https://github.com/brandonweiss/discharge) - Easily deploy static websites to Amazon S3. +- [npkill](https://github.com/voidcosmos/npkill) - Easily find and remove old and heavy node_modules folders. + +### Functional programming + +- [lodash](https://github.com/lodash/lodash) - Utility library delivering consistency, customization, performance, & extras. A better and faster Underscore.js. +- [immutable](https://github.com/facebook/immutable-js) - Immutable data collections. +- [Ramda](https://github.com/ramda/ramda) - Utility library with a focus on flexible functional composition enabled by automatic currying and reversed argument order. Avoids mutating data. +- [Mout](https://github.com/mout/mout) - Utility library with the biggest difference between other existing solutions is that you can choose to load only the modules/functions that you need, no extra overhead. +- [RxJS](https://github.com/reactivex/rxjs) - Functional reactive library for transforming, composing, and querying various kinds of data. +- [Kefir.js](https://github.com/kefirjs/kefir) - Reactive library with focus on high performance and low memory usage. + +### HTTP + +- [got](https://github.com/sindresorhus/got) - Nicer interface to the built-in `http` module. +- [undici](https://github.com/nodejs/undici) - High performance HTTP client written from scratch with zero dependencies. +- [ky-universal](https://github.com/sindresorhus/ky-universal) - Universal HTTP client based on Fetch. +- [node-fetch](https://github.com/bitinn/node-fetch) - `window.fetch` for Node.js. +- [axios](https://github.com/mzabriskie/axios) - Promise based HTTP client (works in the browser too). +- [superagent](https://github.com/visionmedia/superagent) - HTTP request library. +- [http-fake-backend](https://github.com/micromata/http-fake-backend) - Build a fake backend by providing the content of JSON files or JavaScript objects through configurable routes. +- [cacheable-request](https://github.com/lukechilds/cacheable-request) - Wrap native HTTP requests with RFC compliant cache support. +- [gotql](https://github.com/khaosdoctor/gotql) - GraphQL request library built on [got](https://github.com/sindresorhus/got). +- [global-agent](https://github.com/gajus/global-agent) - Global HTTP/HTTPS proxy agent that is configurable using environment variables. +- [smoke](https://github.com/sinedied/smoke) - File-based HTTP mock server with recording abilities. +- [purest](https://github.com/simov/purest) - REST client. + +### Debugging / Profiling + +- [debug](https://github.com/visionmedia/debug) - Tiny debugging utility. +- [why-is-node-running](https://github.com/mafintosh/why-is-node-running) - Node.js is running but you don't know why? +- [njsTrace](https://github.com/valyouw/njstrace) - Instrument and trace your code, see all function calls, arguments, return values, as well as the time spent in each function. +- [vstream](https://github.com/joyent/node-vstream) - Instrumentable streams mix-ins to inspect a pipeline of streams. +- [stackman](https://github.com/watson/stackman) - Enhance an error stacktrace with code excerpts and other goodies. +- [locus](https://github.com/alidavut/locus) - Starts a REPL at runtime that has access to all variables. +- [0x](https://github.com/davidmarkclements/0x) - Flamegraph profiling. +- [ctrace](https://github.com/automation-stack/ctrace) - Well-formatted and improved trace system calls and signals. +- [leakage](https://github.com/andywer/leakage) - Write memory leak tests. +- [llnode](https://github.com/nodejs/llnode) - Post-mortem analysis tool which allows you to inspect objects and get insights from a crashed Node.js process. +- [thetool](https://github.com/sfninja/thetool) - Capture different CPU, memory, and other profiles for your app in Chrome DevTools friendly format. +- [swagger-stats](https://github.com/slanatech/swagger-stats) - Trace API calls and monitor API performance, health, and usage metrics. +- [NiM](https://github.com/june07/nim) - Manages DevTools debugging workflow. +- [dats](https://github.com/immobiliare/dats) - Minimalistic and zero-dependencies [StatsD](https://github.com/statsd/statsd) client. + +### Logging + +- [pino](https://github.com/pinojs/pino) - Extremely fast logger inspired by Bunyan. +- [winston](https://github.com/winstonjs/winston) - Multi-transport async logging library. +- [console-log-level](https://github.com/watson/console-log-level) - The most simple logger imaginable with support for log levels and custom prefixes. +- [storyboard](https://github.com/guigrpa/storyboard) - End-to-end, hierarchical, real-time, colorful logs and stories. +- [consola](https://github.com/nuxt/consola) - Console logger. + +### Command-line utilities + +- [chalk](https://github.com/chalk/chalk) - Terminal string styling done right. +- [meow](https://github.com/sindresorhus/meow) - CLI app helper. +- [yargs](https://github.com/yargs/yargs) - Command-line parser that automatically generates an elegant user-interface. +- [ora](https://github.com/sindresorhus/ora) - Elegant terminal spinner. +- [get-stdin](https://github.com/sindresorhus/get-stdin) - Easier stdin. +- [log-update](https://github.com/sindresorhus/log-update) - Log by overwriting the previous output in the terminal. Useful for rendering progress bars, animations, etc. +- [Ink](https://github.com/vadimdemedes/ink) - React for interactive command-line apps. +- [listr](https://github.com/samverschueren/listr) - Terminal task list. +- [conf](https://github.com/sindresorhus/conf) - Simple config handling for your app or module. +- [ansi-escapes](https://github.com/sindresorhus/ansi-escapes) - ANSI escape codes for manipulating the terminal. +- [log-symbols](https://github.com/sindresorhus/log-symbols) - Colored symbols for various log levels. +- [figures](https://github.com/sindresorhus/figures) - Unicode symbols with Windows CMD fallbacks. +- [boxen](https://github.com/sindresorhus/boxen) - Create boxes in the terminal. +- [terminal-link](https://github.com/sindresorhus/terminal-link) - Create clickable links in the terminal. +- [terminal-image](https://github.com/sindresorhus/terminal-image) - Display images in the terminal. +- [string-width](https://github.com/sindresorhus/string-width) - Get the visual width of a string - the number of columns required to display it. +- [cli-truncate](https://github.com/sindresorhus/cli-truncate) - Truncate a string to a specific width in the terminal. +- [blessed](https://github.com/chjj/blessed) - Curses-like library. +- [Inquirer.js](https://github.com/SBoudrias/Inquirer.js) - Interactive command-line prompt. +- [yn](https://github.com/sindresorhus/yn) - Parse yes/no like values. +- [cli-table3](https://github.com/cli-table/cli-table3) - Pretty unicode tables. +- [drawille](https://github.com/madbence/node-drawille) - Draw on the terminal with unicode braille characters. +- [ascii-charts](https://github.com/jstrace/chart) - ASCII bar chart in the terminal. +- [progress](https://github.com/tj/node-progress) - Flexible ascii progress bar. +- [insight](https://github.com/yeoman/insight) - Helps you understand how your tool is being used by anonymously reporting usage metrics to Google Analytics. +- [cli-cursor](https://github.com/sindresorhus/cli-cursor) - Toggle the CLI cursor. +- [cli-columns](https://github.com/shannonmoeller/cli-columns) - Columnated unicode and ansi-safe text lists. +- [cfonts](https://github.com/dominikwilkowski/cfonts) - Sexy ASCII fonts for the console. +- [multispinner](https://github.com/codekirei/node-multispinner) - Multiple, simultaneous, individually controllable CLI spinners. +- [omelette](https://github.com/f/omelette) - Shell autocompletion helper. +- [cross-env](https://github.com/kentcdodds/cross-env) - Set environment variables cross-platform. +- [shelljs](https://github.com/shelljs/shelljs) - Portable Unix shell commands. +- [sudo-block](https://github.com/sindresorhus/sudo-block) - Block users from running your app with root permissions. +- [sparkly](https://github.com/sindresorhus/sparkly) - Generate sparklines `▁▂▃▅▂▇`. +- [Bit](https://github.com/teambit/bit) - Create, maintain, find and use small modules and components across repositories. +- [gradient-string](https://github.com/bokub/gradient-string) - Beautiful color gradients in terminal output. +- [oclif](https://github.com/oclif/oclif) - CLI framework complete with parser, automatic documentation, testing, and plugins. +- [term-size](https://github.com/sindresorhus/term-size) - Reliably get the terminal window size. +- [Cliffy](https://github.com/drew-y/cliffy) - Framework for interactive CLIs. + +### Build tools + +- [parcel](https://github.com/parcel-bundler/parcel) - Blazing fast, zero config web app bundler. +- [webpack](https://github.com/webpack/webpack) - Packs modules and assets for the browser. +- [rollup](https://github.com/rollup/rollup) - Next-generation ES2015 module bundler. +- [gulp](https://github.com/gulpjs/gulp) - Streaming and fast build system that favors code over config. +- [Broccoli](https://github.com/broccolijs/broccoli) - Fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions. +- [Brunch](https://github.com/brunch/brunch) - Front-end web app build tool with simple declarative config, fast incremental compilation, and an opinionated workflow. +- [FuseBox](https://github.com/fuse-box/fuse-box) - Fast build system that combines the power of webpack, JSPM and SystemJS, with first-class TypeScript support. +- [pkg](https://github.com/zeit/pkg) - Package your Node.js project into an executable. + +### Hardware + +- [johnny-five](https://github.com/rwaldron/johnny-five) - Firmata based Arduino Framework. +- [serialport](https://github.com/voodootikigod/node-serialport) - Access serial ports for reading and writing. +- [usb](https://github.com/nonolith/node-usb) - USB library. +- [i2c-bus](https://github.com/fivdi/i2c-bus) - I2C serial bus access. +- [onoff](https://github.com/fivdi/onoff) - GPIO access and interrupt detection. +- [spi-device](https://github.com/fivdi/spi-device) - SPI serial bus access. +- [pigpio](https://github.com/fivdi/pigpio) - Fast GPIO, PWM, servo control, state change notification, and interrupt handling on the Raspberry Pi. +- [gps](https://github.com/infusion/GPS.js) - NMEA parser for handling GPS receivers. + +### Templating + +- [marko](https://github.com/marko-js/marko) - HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. +- [nunjucks](https://github.com/mozilla/nunjucks) - Templating engine with inheritance, asynchronous control, and more (jinja2 inspired). +- [handlebars.js](https://github.com/wycats/handlebars.js) - Superset of Mustache templates which adds powerful features like helpers and more advanced blocks. +- [EJS](https://github.com/mde/ejs) - Simple unopinionated templating language. +- [Pug](https://github.com/pugjs/pug) - High-performance template engine heavily influenced by Haml. + +### Web frameworks + +- [Fastify](https://github.com/fastify/fastify) - Fast and low overhead web framework. +- [Next.js](https://github.com/zeit/next.js) - Minimalistic framework for server-rendered universal JavaScript web apps. +- [Nuxt.js](https://github.com/nuxt/nuxt.js) - Minimalistic framework for server-rendered Vue.js apps. +- [Hapi](https://github.com/hapijs/hapi) - Framework for building applications and services. +- [Micro](https://github.com/zeit/micro) - Minimalistic microservice framework with an async approach. +- [Koa](https://github.com/koajs/koa) - Framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. +- [Express](https://github.com/expressjs/express) - Web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. +- [Feathers](https://github.com/feathersjs/feathers) - Microservice framework built in the spirit of Express. +- [LoopBack](https://github.com/strongloop/loopback-next) - Powerful framework for creating REST APIs and easily connecting to backend data sources. +- [Meteor](https://github.com/meteor/meteor) - An ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework. _(You might like [awesome-meteor](https://github.com/Urigo/awesome-meteor))_ +- [Restify](https://github.com/restify/node-restify) - Enables you to build correct REST web services. +- [ThinkJS](https://github.com/thinkjs/thinkjs) - Framework with ES2015+ support, WebSockets, REST API. +- [ActionHero](https://github.com/actionhero/actionhero) - Framework for making reusable & scalable APIs for TCP sockets, WebSockets, and HTTP clients. +- [seneca](https://github.com/senecajs/seneca) - Toolkit for writing microservices. +- [AdonisJs](https://github.com/adonisjs/core) - A true MVC framework for Node.js built on solid foundations of Dependency Injection and IoC container. +- [Moleculer](https://github.com/moleculerjs/moleculer) - Fast & powerful microservices framework. +- [Nest](https://github.com/nestjs/nest) - Angular-inspired framework for building efficient and scalable server-side apps. +- [TypeGraphQL](https://github.com/19majkel94/type-graphql) - Modern framework for creating GraphQL APIs with TypeScript, using classes and decorators. +- [Tinyhttp](https://github.com/talentlessguy/tinyhttp) - Modern and fast Express-like web framework. +- [Marble.js](https://github.com/marblejs/marble) - Functional reactive framework for building server-side apps, based on TypeScript and RxJS. +- [Lad](https://github.com/ladjs/lad) - Framework made by a former Express TC and Koa member that bundles web, API, job, and proxy servers. +- [Ts.ED](https://github.com/typedproject/tsed) - Intituive TypeScript framework for building server-side apps on top of Express.js or Koa.js. + +### Documentation + +- [documentation.js](https://github.com/documentationjs/documentation) - API documentation generator with support for ES2015+ and flow annotation. +- [Docco](https://github.com/jashkenas/docco) - Documentation generator which produces an HTML document that displays your comments intermingled with your code. +- [JSDoc](https://github.com/jsdoc3/jsdoc) - API documentation generator similar to JavaDoc or PHPDoc. +- [Docusaurus](https://github.com/facebook/docusaurus) - Documentation website generator that leverages React and Markdown, and comes with translation and versioning features. + +### Filesystem + +- [del](https://github.com/sindresorhus/del) - Delete files/folders using globs. +- [globby](https://github.com/sindresorhus/globby) - Glob files with support for multiple patterns. +- [cpy](https://github.com/sindresorhus/cpy) - Copy files. +- [chokidar](https://github.com/paulmillr/chokidar) - Filesystem watcher which stabilizes events from `fs.watch` and `fs.watchFile` as well as using native `fsevents` on macOS. +- [find-up](https://github.com/sindresorhus/find-up) - Find a file by walking up parent directories. +- [proper-lockfile](https://github.com/IndigoUnited/node-proper-lockfile) - Inter-process and inter-machine lockfile utility. +- [load-json-file](https://github.com/sindresorhus/load-json-file) - Read and parse a JSON file. +- [write-json-file](https://github.com/sindresorhus/write-json-file) - Stringify and write JSON to a file atomically. +- [fs-write-stream-atomic](https://github.com/npm/fs-write-stream-atomic) - Like `fs.createWriteStream()`, but atomic. +- [filenamify](https://github.com/sindresorhus/filenamify) - Convert a string to a valid filename. +- [lnfs](https://github.com/kevva/lnfs) - Force create symlinks like `ln -fs`. +- [istextorbinary](https://github.com/bevry/istextorbinary) - Check if a file is text or binary. +- [fs-jetpack](https://github.com/szwacz/fs-jetpack) - Completely redesigned file system API for convenience in everyday use. +- [fs-extra](https://github.com/jprichardson/node-fs-extra) - Extra methods for the `fs` module. +- [pkg-dir](https://github.com/sindresorhus/pkg-dir) - Find the root directory of an npm package. +- [filehound](https://github.com/nspragg/filehound) - Flexible and fluent interface for searching the file system. +- [move-file](https://github.com/sindresorhus/move-file) - Move a file, even works across devices. +- [tempy](https://github.com/sindresorhus/tempy) - Get a random temporary file or directory path. + +### Control flow + +- Promises + - [pify](https://github.com/sindresorhus/pify) - Promisify a callback-style function. + - [delay](https://github.com/sindresorhus/delay) - Delay a promise a specified amount of time. + - [promise-memoize](https://github.com/nodeca/promise-memoize) - Memoize promise-returning functions, with expire and prefetch. + - [valvelet](https://github.com/lpinca/valvelet) - Limit the execution rate of a promise-returning function. + - [p-map](https://github.com/sindresorhus/p-map) - Map over promises concurrently. + - [More…](https://github.com/sindresorhus/promise-fun) +- Observables + - [RxJS](https://github.com/ReactiveX/RxJS) - Reactive programming. + - [observable-to-promise](https://github.com/sindresorhus/awesome-observables) - Convert an Observable to a Promise. + - [More…](https://github.com/sindresorhus/awesome-observables) +- Streams + - [Highland.js](https://github.com/caolan/highland) - Manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams. + +### Streams + +- [get-stream](https://github.com/sindresorhus/get-stream) - Get a stream as a string or buffer. +- [from2](https://github.com/hughsk/from2) - Convenience wrapper for ReadableStream, inspired by `through2`. +- [into-stream](https://github.com/sindresorhus/into-stream) - Convert a buffer/string/array/object into a stream. +- [duplexify](https://github.com/mafintosh/duplexify) - Turn a writeable and readable stream into a single streams2 duplex stream. +- [pumpify](https://github.com/mafintosh/pumpify) - Combine an array of streams into a single duplex stream. +- [peek-stream](https://github.com/mafintosh/peek-stream) - Transform stream that lets you peek the first line before deciding how to parse it. +- [binary-split](https://github.com/maxogden/binary-split) - Newline (or any delimiter) splitter stream. +- [byline](https://github.com/jahewson/node-byline) - Super-simple line-by-line Stream reader. +- [first-chunk-stream](https://github.com/sindresorhus/first-chunk-stream) - Transform the first chunk in a stream. +- [pad-stream](https://github.com/sindresorhus/pad-stream) - Pad each line in a stream. +- [multistream](https://github.com/feross/multistream) - Combine multiple streams into a single stream. +- [stream-combiner2](https://github.com/substack/stream-combiner2) - Turn a pipeline into a single stream. +- [readable-stream](https://github.com/nodejs/readable-stream) - Mirror of Streams2 and Streams3 implementations in core. +- [through2-concurrent](https://github.com/almost/through2-concurrent) - Transform object streams concurrently. + +### Real-time + +- [µWebSockets](https://github.com/uWebSockets/uWebSockets) - Highly scalable WebSocket server & client library. +- [Socket.io](https://github.com/socketio/socket.io) - Enables real-time bidirectional event-based communication. +- [Faye](https://github.com/faye/faye) - Real-time client-server message bus, based on Bayeux protocol. +- [SocketCluster](https://github.com/SocketCluster/socketcluster) - Scalable HTTP + WebSocket engine which can run on multiple CPU cores. +- [Primus](https://github.com/primus/primus) - An abstraction layer for real-time frameworks to prevent module lock-in. +- [deepstream.io](https://github.com/deepstreamIO/deepstream.io-client-js) - Scalable real-time microservice framework. +- [Kalm](https://github.com/kalm/kalm.js) - Low-level socket router and middleware framework. +- [MQTT.js](https://github.com/mqttjs/MQTT.js) - Client for MQTT - Pub-sub based messaging protocol for use on top of TCP/IP. +- [rpc-websockets](https://github.com/elpheria/rpc-websockets) - JSON-RPC 2.0 implementation over WebSockets. +- [Aedes](https://github.com/mcollina/aedes) - Barebone MQTT server that can run on any stream server. + +### Image + +- [sharp](https://github.com/lovell/sharp) - The fastest module for resizing JPEG, PNG, WebP and TIFF images. +- [image-type](https://github.com/sindresorhus/image-type) - Detect the image type of a Buffer/Uint8Array. +- [gm](https://github.com/aheckmann/gm) - GraphicsMagick and ImageMagick wrapper. +- [lwip](https://github.com/EyalAr/lwip) - Lightweight image processor which does not require ImageMagick. +- [pica](https://github.com/nodeca/pica) - High quality & fast resize (lanczos3) in pure JS. Alternative to canvas drawImage(), when no pixelation allowed. +- [jimp](https://github.com/oliver-moran/jimp) - Image processing in pure JavaScript. +- [probe-image-size](https://github.com/nodeca/probe-image-size) - Get the size of most image formats without a full download. +- [qrcode](https://github.com/soldair/node-qrcode) - QR code and bar code generator. +- [ImageScript](https://github.com/matmen/ImageScript) - Image processing in JavaScript, utilizing WebAssembly for performance. + +### Text + +- [iconv-lite](https://github.com/ashtuchkin/iconv-lite) - Convert character encodings. +- [string-length](https://github.com/sindresorhus/string-length) - Get the real length of a string - by correctly counting astral symbols and ignoring ansi escape codes. +- [camelcase](https://github.com/sindresorhus/camelcase) - Convert a dash/dot/underscore/space separated string to camelCase: foo-bar → fooBar. +- [escape-string-regexp](https://github.com/sindresorhus/escape-string-regexp) - Escape RegExp special characters. +- [splice-string](https://github.com/sindresorhus/splice-string) - Remove or replace part of a string like `Array#splice`. +- [indent-string](https://github.com/sindresorhus/indent-string) - Indent each line in a string. +- [strip-indent](https://github.com/sindresorhus/strip-indent) - Strip leading whitespace from every line in a string. +- [detect-indent](https://github.com/sindresorhus/detect-indent) - Detect the indentation of code. +- [he](https://github.com/mathiasbynens/he) - HTML entity encoder/decoder. +- [i18n-node](https://github.com/mashpie/i18n-node) - Simple translation module with dynamic JSON storage. +- [babelfish](https://github.com/nodeca/babelfish) - i18n with very easy syntax for plurals. +- [matcher](https://github.com/sindresorhus/matcher) - Simple wildcard matching. +- [unhomoglyph](https://github.com/nodeca/unhomoglyph) - Normalize visually similar unicode characters. +- [i18next](https://github.com/i18next/i18next) - Internationalization framework. +- [nanoid](https://github.com/ai/nanoid) - Tiny, secure, URL-friendly, unique string ID generator. +- [StegCloak](https://github.com/kurolabs/stegcloak) - Conceal secrets within strings, in plain sight. + +### Number + +- [random-int](https://github.com/sindresorhus/random-int) - Generate a random integer. +- [random-float](https://github.com/sindresorhus/random-float) - Generate a random float. +- [unique-random](https://github.com/sindresorhus/unique-random) - Generate random numbers that are consecutively unique. +- [round-to](https://github.com/sindresorhus/round-to) - Round a number to a specific number of decimal places: `1.234` → `1.2`. + +### Math + +- [ndarray](https://github.com/scijs/ndarray) - Multidimensional arrays. +- [mathjs](https://github.com/josdejong/mathjs) - An extensive math library. +- [math-clamp](https://github.com/sindresorhus/math-clamp) - Clamp a number. +- [algebra](https://github.com/fibo/algebra) - Algebraic structures. +- [multimath](https://github.com/nodeca/multimath) - Core to create fast image math in WebAssembly and JS. + +### Date + +- [Luxon](https://github.com/moment/luxon) - Library for working with dates and times. +- [date-fns](https://github.com/date-fns/date-fns) - Modern date utility. +- [Day.js](https://github.com/iamkun/dayjs) - Immutable date library alternative to Moment.js. +- [dateformat](https://github.com/felixge/node-dateformat) - Date formatting. +- [tz-format](https://github.com/samverschueren/tz-format) - Format a date with timezone: `2015-11-30T10:40:35+01:00`. +- [cctz](https://github.com/floatdrop/node-cctz) - Fast parsing, formatting, and timezone conversation for dates. + +### URL + +- [normalize-url](https://github.com/sindresorhus/normalize-url) - Normalize a URL. +- [humanize-url](https://github.com/sindresorhus/humanize-url) - Humanize a URL: http://sindresorhus.com → sindresorhus.com. +- [url-unshort](https://github.com/nodeca/url-unshort) - Expand shortened URLs. +- [speakingurl](https://github.com/pid/speakingurl) - Generate a slug from a string with transliteration. +- [linkify-it](https://github.com/markdown-it/linkify-it) - Link patterns detector with full unicode support. +- [url-pattern](https://github.com/snd/url-pattern) - Easier than regex string matching patterns for URLs and other strings. +- [embedza](https://github.com/nodeca/embedza) - Create HTML snippets/embeds from URLs using info from oEmbed, Open Graph, meta tags. + +### Data validation + +- [joi](https://github.com/hapijs/joi) - Object schema description language and validator for JavaScript objects. +- [is-my-json-valid](https://github.com/mafintosh/is-my-json-valid) - JSON Schema validator that uses code generation to be extremely fast. +- [property-validator](https://github.com/nettofarah/property-validator) - Easy property validation for Express. +- [schema-inspector](https://github.com/Atinux/schema-inspector) - JSON API sanitization and validation. +- [ajv](https://github.com/epoberezkin/ajv) - The fastest JSON Schema validator. Supports v5, v6 and v7 proposals. +- [Superstruct](https://github.com/ianstormtaylor/superstruct) - Simple and composable way to validate data in JavaScript (and TypeScript). + +### Parsing + +- [remark](https://github.com/wooorm/remark) - Markdown processor powered by plugins. +- [markdown-it](https://github.com/markdown-it/markdown-it) - Markdown parser with 100% CommonMark support, extensions and syntax plugins. +- [parse5](https://github.com/inikulin/parse5) - Fast full-featured spec compliant HTML parser. +- [@parcel/css](https://github.com/parcel-bundler/parcel-css) - A CSS parser, transformer, and minifier written in Rust. +- [strip-json-comments](https://github.com/sindresorhus/strip-json-comments) - Strip comments from JSON. +- [strip-css-comments](https://github.com/sindresorhus/strip-css-comments) - Strip comments from CSS. +- [parse-json](https://github.com/sindresorhus/parse-json) - Parse JSON with more helpful errors. +- [URI.js](https://github.com/medialize/URI.js) - URL mutation. +- [JSONStream](https://github.com/dominictarr/JSONStream) - Streaming JSON.parse and stringify. +- [neat-csv](https://github.com/sindresorhus/neat-csv) - Fast CSV parser. Callback interface for the above. +- [csv-parser](https://github.com/mafintosh/csv-parser) - Streaming CSV parser that aims to be faster than everyone else. +- [PEG.js](https://github.com/pegjs/pegjs) - Simple parser generator that produces fast parsers with excellent error reporting. +- [x-ray](https://github.com/lapwinglabs/x-ray) - Web scraping utility. +- [nearley](https://github.com/Hardmath123/nearley) - Simple, fast, powerful parsing for JavaScript. +- [binary-extract](https://github.com/juliangruber/binary-extract) - Extract a value from a buffer of JSON without parsing the whole thing. +- [Stylecow](https://github.com/stylecow/stylecow) - Parse, manipulate and convert modern CSS to make it compatible with all browsers. Extensible with plugins. +- [js-yaml](https://github.com/nodeca/js-yaml) - Very fast YAML parser. +- [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) - XML to JavaScript object converter. +- [Jison](https://github.com/zaach/jison) - Friendly JavaScript parser generator. It shares genes with Bison, Yacc and family. +- [google-libphonenumber](https://github.com/seegno/google-libphonenumber) - Parse, format, store and validate phone numbers. +- [ref](https://github.com/TooTallNate/ref) - Read/write structured binary data in Buffers. +- [xlsx-populate](https://github.com/dtjohnson/xlsx-populate) - Read/write Excel XLSX. +- [Chevrotain](https://github.com/Chevrotain/chevrotain) - Very fast and feature rich parser building toolkit for JavaScript. +- [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) - Validate and parse XML. + +### Humanize + +- [pretty-bytes](https://github.com/sindresorhus/pretty-bytes) - Convert bytes to a human readable string: `1337` → `1.34 kB`. +- [pretty-ms](https://github.com/sindresorhus/pretty-ms) - Convert milliseconds to a human readable string: `1337000000` → `15d 11h 23m 20s`. +- [ms](https://github.com/rauchg/ms.js) - Tiny millisecond conversion utility. +- [pretty-error](https://github.com/AriaMinaei/pretty-error) - Errors with less clutter. +- [read-art](https://github.com/Tjatse/node-readability) - Extract readable content from any page. + +### Compression + +- [yazl](https://github.com/thejoshwolfe/yazl) - Zip. +- [yauzl](https://github.com/thejoshwolfe/yauzl) - Unzip. +- [Archiver](https://github.com/archiverjs/node-archiver) - Streaming interface for archive generation, supporting ZIP and TAR. +- [pako](https://github.com/nodeca/pako) - High speed zlib port to pure js (deflate, inflate, gzip). +- [tar-stream](https://github.com/mafintosh/tar-stream) - Streaming tar parser and generator. Also see [tar-fs](https://github.com/mafintosh/tar-fs). +- [decompress](https://github.com/kevva/decompress) - Decompression module with support for `tar`, `tar.gz` and `zip` files out of the box. + +### Network + +- [get-port](https://github.com/sindresorhus/get-port) - Get an available port. +- [ipify](https://github.com/sindresorhus/ipify) - Get your public IP address. +- [getmac](https://github.com/bevry/getmac) - Get the computer MAC address. +- [DHCP](https://github.com/infusion/node-dhcp) - DHCP client and server. +- [netcat](https://github.com/roccomuso/netcat) - Netcat port in pure JS. + +### Database + +- Drivers + - [PostgreSQL](https://github.com/brianc/node-postgres) - PostgreSQL client. Pure JavaScript and native libpq bindings. + - [Redis](https://github.com/luin/ioredis) - Redis client. + - [LevelUP](https://github.com/Level/levelup) - LevelDB. + - [MySQL](https://github.com/mysqljs/mysql) - MySQL client. + - [couchdb-nano](https://github.com/apache/couchdb-nano) - CouchDB client. + - [Aerospike](https://github.com/aerospike/aerospike-client-nodejs) - Aerospike client. + - [Couchbase](https://github.com/couchbase/couchnode) - Couchbase client. + - [MongoDB](https://github.com/mongodb/node-mongodb-native) - MongoDB driver. +- ODM / ORM + - [Sequelize](https://github.com/sequelize/sequelize) - Multi-dialect ORM. Supports PostgreSQL, SQLite, MySQL, and more. + - [Bookshelf](https://github.com/bookshelf/bookshelf) - ORM for PostgreSQL, MySQL and SQLite3 in the style of Backbone.js. + - [Mongoose](https://github.com/Automattic/mongoose) - Elegant MongoDB object modeling. + - [Waterline](https://github.com/balderdashy/waterline) - Datastore-agnostic tool that dramatically simplifies interaction with one or more databases. + - [OpenRecord](https://github.com/PhilWaldmann/openrecord) - ORM for PostgreSQL, MySQL, SQLite3 and RESTful datastores. Similar to ActiveRecord. + - [pg-promise](https://github.com/vitaly-t/pg-promise) - PostgreSQL framework for native SQL using promises. + - [slonik](https://github.com/gajus/slonik) - PostgreSQL client with strict types, detailed logging and assertions. + - [Objection.js](https://github.com/Vincit/objection.js) - Lightweight ORM built on the SQL query builder Knex. + - [TypeORM](https://github.com/typeorm/typeorm) - ORM for PostgreSQL, MariaDB, MySQL, SQLite, and more. + - [MikroORM](https://github.com/mikro-orm/mikro-orm) - TypeScript ORM based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, PostgreSQL, MySQL and SQLite. + - [Prisma](https://github.com/prisma/prisma) - Modern database access (ORM alternative). Auto-generated and type-safe query builder in TypeScript. Supports PostgreSQL, MySQL & SQLite. +- Query builder + - [Knex](https://github.com/tgriesser/knex) - Query builder for PostgreSQL, MySQL and SQLite3, designed to be flexible, portable, and fun to use. +- Other + - [NeDB](https://github.com/louischatriot/nedb) - Embedded persistent database written in JavaScript. + - [Lowdb](https://github.com/typicode/lowdb) - Small JavaScript database powered by Lodash. + - [Keyv](https://github.com/lukechilds/keyv) - Simple key-value storage with support for multiple backends. + - [Finale](https://github.com/tommybananas/finale) - RESTful endpoint generator for your Sequelize models. + - [database-js](https://github.com/mlaanderson/database-js) - Wrapper for multiple databases with a JDBC-like connection. + - [Mongo Seeding](https://github.com/pkosiec/mongo-seeding) - Populate MongoDB databases with JavaScript and JSON files. + - [@databases](https://github.com/ForbesLindesay/atdatabases) - Query PostgreSQL, MySQL and SQLite3 with plain SQL without risking SQL injection. + - [pg-mem](https://github.com/oguimbal/pg-mem) - In-memory PostgreSQL instance for your tests. + +### Testing + +- [AVA](https://github.com/avajs/ava) - Futuristic test runner. +- [Mocha](https://github.com/mochajs/mocha) - Feature-rich test framework making asynchronous testing simple and fun. +- [nyc](https://github.com/bcoe/nyc) - Code coverage tool built on istanbul that works with subprocesses. +- [tap](https://github.com/isaacs/node-tap) - TAP test framework. +- [tape](https://github.com/substack/tape) - TAP-producing test harness. +- [power-assert](https://github.com/power-assert-js/power-assert) - Provides descriptive assertion messages through the standard assert interface. +- [Mochify](https://github.com/mantoni/mochify.js) - TDD with Browserify, Mocha, PhantomJS and WebDriver. +- [trevor](https://github.com/vdemedes/trevor) - Run tests against multiple versions of Node.js without switching versions manually or pushing to Travis CI. +- [loadtest](https://github.com/alexfernandez/loadtest) - Run load tests for your web application, with an API for automation. +- [Sinon.JS](https://github.com/sinonjs/sinon) - Test spies, stubs and mocks. +- [navit](https://github.com/nodeca/navit) - PhantomJS / SlimerJS wrapper to simplify browser test scripting. +- [Nock](https://github.com/pgte/nock) - HTTP mocking and expectations. +- [intern](https://github.com/theintern/intern) - Code testing stack. +- [toxy](https://github.com/h2non/toxy) - Hackable HTTP proxy to simulate failure scenarios and network conditions. +- [hook-std](https://github.com/sindresorhus/hook-std) - Hook and modify stdout/stderr. +- [testen](https://github.com/egoist/testen) - Run tests for multiple versions of Node.js locally with NVM. +- [Nightwatch](https://github.com/nightwatchjs/nightwatch) - Automated UI testing framework based on Selenium WebDriver. +- [WebdriverIO](https://github.com/webdriverio/webdriverio) - Automated testing based on the WebDriver protocol. +- [Jest](https://github.com/facebook/jest) - Painless JavaScript testing. +- [TestCafe](https://github.com/DevExpress/testcafe) - Automated browser testing. +- [abstruse](https://github.com/bleenco/abstruse) - Continuous Integration server. +- [CodeceptJS](https://github.com/Codeception/CodeceptJS) - End-to-end testing. +- [Puppeteer](https://github.com/GoogleChrome/puppeteer) - Headless Chrome. +- [Playwright](https://github.com/microsoft/playwright) - Headless Chromium, WebKit, and Firefox with a single API. +- [nve](https://github.com/ehmicky/nve) - Run any command on multiple versions of Node.js locally. +- [axe-core](https://github.com/dequelabs/axe-core) - Accessibility engine for automated Web UI testing. +- [testcontainers-node](https://github.com/testcontainers/testcontainers-node) - Provides lightweight, throwaway instances of common databases, Selenium web browsers, or anything else that can run in a Docker container. + +### Security + +- [upash](https://github.com/simonepri/upash) - Unified API for all password hashing algorithms. +- [themis](https://github.com/cossacklabs/themis) - Multilanguage framework for making typical encryption schemes easy to use: data at rest, authenticated data exchange, transport protection, authentication, and so on. +- [GuardRails](https://github.com/apps/guardrails) - GitHub app that provides security feedback in pull requests. +- [rate-limiter-flexible](https://github.com/animir/node-rate-limiter-flexible) - Brute-force and DDoS attack protection. +- [crypto-hash](https://github.com/sindresorhus/crypto-hash) - Async non-blocking hashing. +- [jose-simple](https://github.com/davesag/jose-simple) - Encryption and decryption of data using the JOSE (JSON Object Signing and Encryption) standard. + +### Benchmarking + +- [Benchmark.js](https://github.com/bestiejs/benchmark.js) - Benchmarking library that supports high-resolution timers and returns statistically significant results. + +### Minifiers + +- [babel-minify](https://github.com/babel/minify) - ES2015+ aware minifier based on the Babel toolchain. +- [UglifyJS2](https://github.com/mishoo/UglifyJS2) - JavaScript minifier. +- [clean-css](https://github.com/jakubpawlowicz/clean-css) - CSS minifier. +- [minimize](https://github.com/Swaagie/minimize) - HTML minifier. +- [imagemin](https://github.com/imagemin/imagemin) - Image minifier. + +### Authentication + +- [Passport](https://github.com/jaredhanson/passport) - Simple, unobtrusive authentication. +- [Grant](https://github.com/simov/grant) - OAuth providers for Express, Koa, Hapi, Fastify, AWS Lambda, Azure, Google Cloud, Vercel, and many more. + +### Authorization + +- [CASL](https://github.com/stalniy/casl) - Isomorphic authorization for UI and API. +- [node-casbin](https://github.com/casbin/node-casbin) - Authorization library that supports access control models like ACL, RBAC and ABAC. + +### Email + +- [Nodemailer](https://github.com/andris9/Nodemailer) - The fastest way to handle email. +- [emailjs](https://github.com/eleith/emailjs) - Send text/HTML emails with attachments to any SMTP server. +- [email-templates](https://github.com/niftylettuce/email-templates) - Create, preview, and send custom email templates. +- [MJML](https://github.com/mjmlio/mjml) - Markup language designed to reduce the pain of creating responsive emails. + +### Job queues + +- [bull](https://github.com/OptimalBits/bull) - Persistent job and message queue. +- [agenda](https://github.com/rschmukler/agenda) - MongoDB-backed job scheduling. +- [idoit](https://github.com/nodeca/idoit) - Redis-backed job queue engine with advanced job control. +- [node-resque](https://github.com/taskrabbit/node-resque) - Redis-backed job queue. +- [rsmq](https://github.com/smrchy/rsmq) - Redis-backed message queue. +- [bee-queue](https://github.com/bee-queue/bee-queue) - High-performance Redis-backed job queue. +- [RedisSMQ](https://github.com/weyoss/redis-smq) - Simple high-performance Redis message queue with real-time monitoring. +- [sqs-consumer](https://github.com/bbc/sqs-consumer) - Build Amazon Simple Queue Service (SQS) based apps without the boilerplate. +- [better-queue](https://github.com/diamondio/better-queue) - Simple and efficient job queue when you cannot use Redis. + +### Node.js management + +- [n](https://github.com/tj/n) - Node.js version management. +- [nave](https://github.com/isaacs/nave) - Virtual Environments for Node.js. +- [nodeenv](https://github.com/ekalinin/nodeenv) - Node.js virtual environment compatible to Python's virtualenv. +- [nvm for Windows](https://github.com/coreybutler/nvm-windows) - Version management for Windows. +- [nodenv](https://github.com/nodenv/nodenv) - Version manager that is similar to Ruby's rbenv. It supports auto version switching. +- [fnm](https://github.com/Schniz/fnm) - Cross-platform Node.js version manager built in Rust. + +### Natural language processing + +- [retext](https://github.com/wooorm/retext) - An extensible natural language system. +- [franc](https://github.com/wooorm/franc) - Detect the language of text. +- [leven](https://github.com/sindresorhus/leven) - Measure the difference between two strings using the Levenshtein distance algorithm. +- [natural](https://github.com/NaturalNode/natural) - Natural language facility. +- [nlp.js](https://github.com/axa-group/nlp.js) - Building bots, with entity extraction, sentiment analysis, automatic language identify, and more. + +### Process management + +- [PM2](https://github.com/Unitech/pm2) - Advanced Process Manager. +- [nodemon](https://github.com/remy/nodemon) - Monitor for changes in your app and automatically restart the server. +- [node-mac](https://github.com/coreybutler/node-mac) - Run scripts as a native Mac daemon and log to the console app. +- [node-linux](https://github.com/coreybutler/node-linux) - Run scripts as native system service and log to syslog. +- [node-windows](https://github.com/coreybutler/node-windows) - Run scripts as a native Windows service and log to the Event viewer. +- [supervisor](https://github.com/petruisfan/node-supervisor) - Restart scripts when they crash or restart when a `*.js` file changes. +- [Phusion Passenger](https://github.com/phusion/passenger) - Friendly process manager that integrates directly into Nginx. + +### Automation + +- [robotjs](https://github.com/octalmage/robotjs) - Desktop Automation: control the mouse, keyboard and read the screen. +- [nut.js](https://github.com/nut-tree/nut.js) - Cross-platform native GUI automation / testing framework with image matching capabilities which integrates with Jest. + +### AST + +- [Acorn](https://github.com/ternjs/acorn) - Tiny, fast JavaScript parser. +- [babel-parser](https://github.com/babel/babel/tree/master/packages/babel-parser) - JavaScript parser used in Babel. + +### Static site generators + +- [DocPad](https://github.com/docpad/docpad) - Static site generator with dynamic abilities and huge plugin ecosystem. +- [docsify](https://github.com/QingWei-Li/docsify) - Markdown documentation site generator with no statically built HTML files. +- [Charge](https://github.com/brandonweiss/charge) - Opinionated, zero-config static site generator using JSX and MDX. + +### Content management systems + +- [KeystoneJS](https://github.com/keystonejs/keystone) - CMS and web application platform built on Express and MongoDB. +- [ApostropheCMS](https://github.com/apostrophecms/apostrophe) - Content management system with an emphasis on intuitive front end content editing and administration built on Express and MongoDB. +- [Strapi](https://github.com/strapi/strapi) - Content Management Framework (headless-CMS) to build powerful APIs. +- [Tipe](https://github.com/tipeio/tipe) - Developer-first content management system with GraphQL and REST API from a schema file. +- [Factor](https://github.com/fiction-com/factor) - Vue.js dashboard framework and headless CMS. +- [AdminBro](https://github.com/SoftwareBrothers/admin-bro) - Auto-generated admin panel with CRUD for all your resources. + +### Forum + +- [nodeBB](https://github.com/NodeBB/NodeBB) - Forum platform for the modern web. + +### Blogging + +- [Ghost](https://github.com/TryGhost/Ghost) - Simple, powerful publishing platform. +- [Hexo](https://github.com/hexojs/hexo) - Fast, simple and powerful blogging framework. + +### Weird + +- [cows](https://github.com/sindresorhus/cows) - ASCII cows. +- [superb](https://github.com/sindresorhus/superb) - Get superb like words. +- [cat-names](https://github.com/sindresorhus/cat-names) - Get popular cat names. +- [dog-names](https://github.com/sindresorhus/dog-names) - Get popular dog names. +- [superheroes](https://github.com/sindresorhus/superheroes) - Get superhero names. +- [supervillains](https://github.com/sindresorhus/supervillains) - Get supervillain names. +- [cool-ascii-faces](https://github.com/maxogden/cool-ascii-faces) - Get some cool ascii faces. +- [cat-ascii-faces](https://github.com/melaniecebula/cat-ascii-faces) - `₍˄·͈༝·͈˄₎◞ ̑̑ෆ⃛ (=ↀωↀ=)✧ (^･o･^)ﾉ”`. +- [nerds](https://github.com/SkyHacks/nerds) - Get data from nerdy topics like Harry Potter, Star Wars, and Pokémon. + +### Serialization + +- [snappy](https://github.com/kesla/node-snappy) - Native bindings for Google's Snappy compression library. +- [protobuf](https://github.com/dcodeIO/protobuf.js) - Implementation of Protocol Buffers. +- [compactr](https://github.com/compactr/compactr.js) - Implementation of the Compactr protocol. + +### Miscellaneous + +- [execa](https://github.com/sindresorhus/execa) - Better `child_process`. +- [cheerio](https://github.com/cheeriojs/cheerio) - Fast, flexible, and lean implementation of core jQuery designed specifically for the server. +- [open](https://github.com/sindresorhus/open) - Opens stuff like websites, files, executables. +- [hasha](https://github.com/sindresorhus/hasha) - Hashing made simple. Get the hash of a buffer/string/stream/file. +- [dot-prop](https://github.com/sindresorhus/dot-prop) - Get a property from a nested object using a dot path. +- [onetime](https://github.com/sindresorhus/onetime) - Only run a function once. +- [mem](https://github.com/sindresorhus/mem) - Memoize functions - an optimization technique used to speed up consecutive function calls by caching the result of calls with identical input. +- [strip-bom](https://github.com/sindresorhus/strip-bom) - Strip UTF-8 byte order mark (BOM) from a string/buffer/stream. +- [os-locale](https://github.com/sindresorhus/os-locale) - Get the system locale. +- [ssh2](https://github.com/mscdex/ssh2) - SSH2 client and server module. +- [adit](https://github.com/markelog/adit) - SSH tunneling made simple. +- [file-type](https://github.com/sindresorhus/file-type) - Detect the file type of a Buffer. +- [Bottleneck](https://github.com/SGrondin/bottleneck) - Rate limiter that makes throttling easy. +- [ow](https://github.com/sindresorhus/ow) - Function argument validation for humans. +- [webworker-threads](https://github.com/audreyt/node-webworker-threads) - Lightweight Web Worker API implementation with native threads. +- [clipboardy](https://github.com/sindresorhus/clipboardy) - Access the system clipboard (copy/paste). +- [node-pre-gyp](https://github.com/mapbox/node-pre-gyp) - Makes it easy to publish and install Node.js C++ addons from binaries. +- [opencv](https://github.com/peterbraden/node-opencv) - Bindings for OpenCV. The defacto computer vision library. +- [dotenv](https://github.com/motdotla/dotenv) - Load environment variables from .env file. +- [semver](https://github.com/npm/node-semver) - Semantic version parser. +- [nodegit](https://github.com/nodegit/nodegit) - Native bindings to Git. +- [json-strictify](https://github.com/pigulla/json-strictify) - Safely serialize a value to JSON without data loss or going into an infinite loop. +- [jsdom](https://github.com/tmpvar/jsdom) - JavaScript implementation of HTML and the DOM. +- [@sindresorhus/is](https://github.com/sindresorhus/is) - Type check values. +- [env-dot-prop](https://github.com/simonepri/env-dot-prop) - Get, set, or delete nested properties of process.env using a dot path. +- [emittery](https://github.com/sindresorhus/emittery) - Simple and modern async event emitter. +- [node-video-lib](https://github.com/gkozlenko/node-video-lib) - Pure JavaScript library for working with MP4 and FLV video files and creating MPEG-TS chunks for HLS streaming. +- [basic-ftp](https://github.com/patrickjuchli/basic-ftp) – FTP/FTPS client. +- [cashify](https://github.com/xxczaki/cashify) - Currency conversion. +- [genepi](https://github.com/Geode-solutions/genepi) - Automatically generate a native Node.js addon from C++ code. +- [husky](https://github.com/typicode/husky) - Create Git hook scripts. +- [patch-package](https://github.com/ds300/patch-package) - Make and preserve fixes to npm dependencies. +- [editly](https://github.com/mifi/editly) - Declarative video editing API. + +## Resources + +### Tutorials + +- [Node.js Best Practices](https://github.com/i0natan/nodebestpractices) - Summary and curation of the top-ranked content on Node.js best practices, available in multiple languages. +- [Nodeschool](https://github.com/nodeschool) - Learn Node.js with interactive lessons. +- [The Art of Node](https://github.com/maxogden/art-of-node/#the-art-of-node) - An introduction to Node.js. +- [stream-handbook](https://github.com/substack/stream-handbook) - How to write Node.js programs with streams. +- [module-best-practices](https://github.com/mattdesl/module-best-practices) - Some good practices when writing new npm modules. +- [The Node Way](http://thenodeway.io) - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read. +- [You Don't Know Node.js](https://github.com/azat-co/you-dont-know-node) - Introduction to Node.js core features and asynchronous JavaScript. +- [Portable Node.js guide](https://github.com/ehmicky/portable-node-guide) - Practical guide on how to write portable/cross-platform Node.js code. +- [Build a real web app with no frameworks](https://frameworkless.js.org/course) - A set of video tutorials/livestreams to help you build and deploy a real, live web app using a handful of simple libraries and the core Node.js modules. + +### Discovery + +- [npms](https://npms.io) - Superb package search with deep analysis of package quality using a [myriad of metrics](https://npms.io/about). +- [npm addict](https://npmaddict.com) - Your daily injection of npm packages. +- [npmcompare.com](https://npmcompare.com) - Compare and discover npm packages. + +### Articles + +- [Error Handling in Node.js](https://www.joyent.com/node-js/production/design/errors) +- [Teach Yourself Node.js in 10 Steps](https://ponyfoo.com/articles/teach-yourself-nodejs-in-10-steps) +- [Mastering the filesystem in Node.js](https://medium.com/@yoshuawuyts/mastering-the-filesystem-in-node-js-4706b7cb0801) +- [Semver: A Primer](https://nodesource.com/blog/semver-a-primer/) +- [Semver: Tilde and Caret](https://nodesource.com/blog/semver-tilde-and-caret/) +- [Why Asynchronous?](https://nodesource.com/blog/why-asynchronous/) +- [Understanding the Node.js Event Loop](https://nodesource.com/blog/understanding-the-nodejs-event-loop/) +- [Understanding Object Streams](https://nodesource.com/blog/understanding-object-streams/) +- [Art of README](https://github.com/noffle/art-of-readme) - Learn the art of writing quality READMEs. +- [Using Express to Quickly Build a GraphQL Server](https://snipcart.com/blog/graphql-nodejs-express-tutorial) + +### Newsletters + +- [Node Weekly](http://nodeweekly.com) - Weekly e-mail round-up of Node.js news and articles. +- [Node Module Of The Week!](https://nmotw.in) - Weekly dose of hand picked node modules. + +### Videos + +- [Introduction to Node.js with Ryan Dahl](https://www.youtube.com/watch?v=jo_B4LTHi3I) +- [Hands on with Node.js](https://learn.bevry.me/hands-on-with-node.js/preface) +- [Nodetuts](http://nodetuts.com) - Series of talks, including TCP & HTTP API servers, async programming, and more. +- [V8 Garbage Collector](https://v8.dev/blog/trash-talk) - Trash talk about the V8 garbage collector. +- [10 Things I Regret About Node.js by Ryan Dahl](https://www.youtube.com/watch?v=M3BM9TB-8yA) - Insightful talk by the creator of Node.js about some of its limitions. +- [Mastering REST APIs in Node.js: Zero-To-Hero](https://www.manning.com/livevideo/mastering-rest-apis-in-nodejs) - Video course on how to make REST APIs using Node.js. +- [Make a vanilla Node.js REST API](https://www.youtube.com/watch?v=_1xa8Bsho6A) - Building a REST API without using a framework like Express. +- [Google I/O 2009 - V8: High Performance JavaScript Engine](https://www.youtube.com/watch?v=FrufJFBSoQY) - The basics of V8 architecture and how it optimizes JavaScript execution. +- [Google I/O 2012 - Breaking the JavaScript Speed Limit with V8](https://www.youtube.com/watch?v=UJPdhx5zTaw) - How V8 optimizes JavaScript execution. +- [Google I/O 2013 - Accelerating Oz with V8: Follow the Yellow Brick Road to JavaScript Performance](https://www.youtube.com/watch?v=VhpdsjBUS3g) - How to detect app bottlenecks and optimize performance with V8 knowledge. +- [Node.js Internal Architecture | Ignition, Turbofan, Libuv](https://www.youtube.com/watch?v=OCjvhCFFPTw) - How Node.js works internally, with a focus on V8 and libuv. +- [Introduction to libuv: What's a Unicorn Velociraptor?](https://www.youtube.com/watch?v=_c51fcXRLGw) - `libuv` architecture, thread pool, and event loop, with its source code. +- [libuv Cross platform asynchronous i/o](https://www.youtube.com/watch?v=kCJ3PFU8Ke8) - `libuv` architecture in detail, such as where it's actually using threads. +- [You Don't Know Node - ForwardJS San Francisco](https://www.youtube.com/watch?v=oPo4EQmkjvY) - Explaining Node.js internals with quizzes about V8, libuv, event loop, module, stream, and cluster. + +### Books + +- [Node.js in Action](https://www.manning.com/books/node-js-in-action-second-edition) +- [Node.js in Practice](http://www.amazon.com/Node-js-Practice-Alex-R-Young/dp/1617290939) +- [Mastering Node](http://visionmedia.github.io/masteringnode/) +- [Node.js 8 the Right Way](https://pragprog.com/book/jwnode2/node-js-8-the-right-way) +- [Professional Node.js: Building JavaScript Based Scalable Software](http://www.amazon.com/Professional-Node-js-Building-Javascript-Scalable-ebook/dp/B009L7QETY/) +- [Practical Node.js: Building Real-World Scalable Web Apps](http://practicalnodebook.com) +- [Mixu's Node book](http://book.mixu.net/node/) +- [Pro Express.js](http://proexpressjs.com) +- [Secure Your Node.js Web Application](http://www.amazon.com/Secure-Your-Node-js-Web-Application/dp/1680500856) +- [Express in Action](https://www.manning.com/books/express-in-action) +- [Practical Modern JavaScript](https://www.amazon.com/Practical-Modern-JavaScript-Dive-Future/dp/149194353X) +- [Mastering Modular JavaScript](https://www.amazon.com/Mastering-Modular-JavaScript-Nicolas-Bevacqua/dp/1491955686/) +- [Get Programming with Node.js](https://www.manning.com/books/get-programming-with-node-js) +- [Node.js Cookbook](https://www.amazon.com/dp/1838558756) +- [Node.js Design Patterns](https://www.nodejsdesignpatterns.com) + +### Blogs + +- [Node.js blog](https://nodejs.org/en/blog/) +- [webapplog.com](http://webapplog.com/tag/node-js/) - Blog posts on Node.js and JavaScript from the author of Practical Node.js and Pro Express.js Azat Mardan. + +### Courses + +- [Learn to build apps and APIs with Node.js](https://learnnode.com/friend/AWESOME) - Video course by Wes Bos. +- [Real Time Web with Node.js](https://www.codeschool.com/courses/real-time-web-with-node-js) +- [Learn and Understand Node.js](https://www.udemy.com/understand-nodejs) + +### Cheatsheets + +- [Express.js](https://github.com/azat-co/cheatsheets/blob/master/express4) +- [Stream FAQs](https://github.com/stephenplusplus/stream-faqs) - Answering common questions about streams, covering pagination, events, and more. +- [Strong Node.js](https://github.com/jesusprubio/strong-node) - Checklist for source code security analysis of a Node.js web service. + +### Tools + +- [OctoLinker](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) - Chrome extension that linkifies dependencies in package.json, .js, .jsx, .coffee and .md files on GitHub. +- [npm-hub](https://chrome.google.com/webstore/detail/npm-hub/kbbbjimdjbjclaebffknlabpogocablj) - Chrome extension to display npm dependencies at the bottom of a repo's readme. +- [RunKit](http://blog.tonicdev.com/2015/09/30/embedded-tonic.html) - Embed a Node.js environment on any website. +- [github-npm-stats](https://chrome.google.com/webstore/detail/github-npm-stats/oomfflokggoffaiagenekchfnpighcef) - Chrome extension that displays npm download stats on GitHub. +- [npm semver calculator](https://semver.npmjs.com) - Visually explore what versions of a package a semver range matches. +- [CodeSandbox](https://codesandbox.io/s/node-http-server-node) - Online IDE and prototyping. + +### Community + +- [`#node.js` on Freenode](http://webchat.freenode.net/?channels=node.js) +- [Stack Overflow](http://stackoverflow.com/questions/tagged/node.js) +- [Reddit](https://www.reddit.com/r/node) +- [Twitter](https://twitter.com/nodejs) +- [Hashnode](https://hashnode.com/n/nodejs) +- [Discord](https://discordapp.com/invite/96WGtJt) + +### Miscellaneous + +- [nodebots](http://nodebots.io) - Robots powered by JavaScript. +- [node-module-boilerplate](https://github.com/sindresorhus/node-module-boilerplate) - Boilerplate to kickstart creating a node module. +- [modern-node](https://github.com/sheerun/modern-node) - Toolkit for creating node modules with Jest, Prettier, ESLint, and Standard. +- [generator-nm](https://github.com/sindresorhus/generator-nm) - Scaffold out a node module. +- [Microsoft Node.js Guidelines](https://github.com/Microsoft/nodejs-guidelines) - Tips, tricks, and resources for working with Node.js on Microsoft platforms. +- [Module Requests & Ideas](https://github.com/sindresorhus/module-requests) - Request a JavaScript module you wish existed or get ideas for modules. +- [v8-perf](https://github.com/thlorenz/v8-perf) - Notes and resources related to V8 and thus Node.js performance. + +## Related lists + +- [awesome-npm](https://github.com/sindresorhus/awesome-npm) - Resources and tips for using npm. +- [awesome-cross-platform-nodejs](https://github.com/bcoe/awesome-cross-platform-nodejs) - Resources for writing and testing cross-platform code. diff --git a/docs/blogs-documenations.md b/docs/blogs-documenations.md new file mode 100644 index 0000000..8e76d9e --- /dev/null +++ b/docs/blogs-documenations.md @@ -0,0 +1,45 @@ +--- +sidebar_position: 4 +--- + +# Blogs and Documentations + +- [🗞️ Blog & Articles](#%EF%B8%8F-blogs--articles-websites) +- [📜 Documenations Websites](#-documenations-websites) +- [📑 Cheat sheets](#-cheat-sheets) + + +### 🗞️ Blogs & Articles Websites + +- [**DevDojo**](https://devdojo.com/) lets you join 46,000+ developers learn, build, and grow together. + +- [**Hashnode**](https://hashnode.com/@RAHULISM/joinme) is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our global dev community! 👩‍💻👨‍💻 + +- [**Dev.to**](https://dev.to/) is a community of software developers getting together to help one another out. + +- [**daily.dev**](https://daily.dev/) Get a feed of the hottest developer news. Read more quality articles. Stay up to date. Save time. + +- [**Hackernoon**](https://hackernoon.com/) An Independent Tech Media Site + +### 📜 Documenations Websites + +- [**freeCodeCamp.org**](https://www.freecodecamp.org/) freeCodeCamp.org is a 501(c)3 non-profit organisation that can help you learn to code for free, build real-world projects, and prepare for getting your first (or nth) developer job. + +- [**Mozilla Developer Network**](https://developer.mozilla.org/) or MDN is more like documentation that developers can read and learn from. + +- [**Dev Docs**](https://devdocs.io/) is free and open source project that's maintained by freeCodeCamp. + +- [**JSDoc**](https://jsdoc.app/) JSDoc is an open source project that has tons of info about JavaScript. On this website, you is a bunch of documentation about JavaScript. + +- [**JavaScript.info**](https://javascript.info/) Learn JavaScript from the basics to advanced topics with simple yet detailed explanations. + +### 📑 Cheat sheets + +- [**modern-js-cheatsheet**](https://github.com/mbeaudru/modern-js-cheatsheet) Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects. + +- [**awesome-cheatsheetsPublic**](https://github.com/LeCoupa/awesome-cheatsheets) books Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file. + + +- [**Frontend-Cheat-Sheets**](https://github.com/logeshpaul/Frontend-Cheat-Sheets) Collection of cheat sheets(HTML, CSS, JS, Git, Gulp, etc.,) for your frontend development needs & reference + + diff --git a/docs/clean-code.md b/docs/clean-code.md new file mode 100644 index 0000000..fb62b2f --- /dev/null +++ b/docs/clean-code.md @@ -0,0 +1,2362 @@ +--- +sidebar_position: 22 +--- +# Clean Code + +:::info +this page from: [ryanmcdermott](https://github.com/ryanmcdermott) +::: + +## Table of Contents + +1. [Introduction](#introduction) +2. [Variables](#variables) +3. [Functions](#functions) +4. [Objects and Data Structures](#objects-and-data-structures) +5. [Classes](#classes) +6. [SOLID](#solid) +7. [Testing](#testing) +8. [Concurrency](#concurrency) +9. [Error Handling](#error-handling) +10. [Formatting](#formatting) +11. [Comments](#comments) +12. [Translation](#translation) + +## Introduction + +![Humorous image of software quality estimation as a count of how many expletives +you shout when reading code](https://www.osnews.com/images/comics/wtfm.jpg) + +Software engineering principles, from Robert C. Martin's book +[_Clean Code_](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882), +adapted for JavaScript. This is not a style guide. It's a guide to producing +[readable, reusable, and refactorable](https://github.com/ryanmcdermott/3rs-of-software-architecture) software in JavaScript. + +Not every principle herein has to be strictly followed, and even fewer will be +universally agreed upon. These are guidelines and nothing more, but they are +ones codified over many years of collective experience by the authors of +_Clean Code_. + +Our craft of software engineering is just a bit over 50 years old, and we are +still learning a lot. When software architecture is as old as architecture +itself, maybe then we will have harder rules to follow. For now, let these +guidelines serve as a touchstone by which to assess the quality of the +JavaScript code that you and your team produce. + +One more thing: knowing these won't immediately make you a better software +developer, and working with them for many years doesn't mean you won't make +mistakes. Every piece of code starts as a first draft, like wet clay getting +shaped into its final form. Finally, we chisel away the imperfections when +we review it with our peers. Don't beat yourself up for first drafts that need +improvement. Beat up the code instead! + +## **Variables** + +### Use meaningful and pronounceable variable names + +**Bad:** + +```javascript +const yyyymmdstr = moment().format("YYYY/MM/DD"); +``` + +**Good:** + +```javascript +const currentDate = moment().format("YYYY/MM/DD"); +``` + +**[⬆ back to top](#table-of-contents)** + +### Use the same vocabulary for the same type of variable + +**Bad:** + +```javascript +getUserInfo(); +getClientData(); +getCustomerRecord(); +``` + +**Good:** + +```javascript +getUser(); +``` + +**[⬆ back to top](#table-of-contents)** + +### Use searchable names + +We will read more code than we will ever write. It's important that the code we +do write is readable and searchable. By _not_ naming variables that end up +being meaningful for understanding our program, we hurt our readers. +Make your names searchable. Tools like +[buddy.js](https://github.com/danielstjules/buddy.js) and +[ESLint](https://github.com/eslint/eslint/blob/660e0918933e6e7fede26bc675a0763a6b357c94/docs/rules/no-magic-numbers.md) +can help identify unnamed constants. + +**Bad:** + +```javascript +// What the heck is 86400000 for? +setTimeout(blastOff, 86400000); +``` + +**Good:** + +```javascript +// Declare them as capitalized named constants. +const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; + +setTimeout(blastOff, MILLISECONDS_PER_DAY); +``` + +**[⬆ back to top](#table-of-contents)** + +### Use explanatory variables + +**Bad:** + +```javascript +const address = "One Infinite Loop, Cupertino 95014"; +const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; +saveCityZipCode( + address.match(cityZipCodeRegex)[1], + address.match(cityZipCodeRegex)[2] +); +``` + +**Good:** + +```javascript +const address = "One Infinite Loop, Cupertino 95014"; +const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; +const [_, city, zipCode] = address.match(cityZipCodeRegex) || []; +saveCityZipCode(city, zipCode); +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid Mental Mapping + +Explicit is better than implicit. + +**Bad:** + +```javascript +const locations = ["Austin", "New York", "San Francisco"]; +locations.forEach(l => { + doStuff(); + doSomeOtherStuff(); + // ... + // ... + // ... + // Wait, what is `l` for again? + dispatch(l); +}); +``` + +**Good:** + +```javascript +const locations = ["Austin", "New York", "San Francisco"]; +locations.forEach(location => { + doStuff(); + doSomeOtherStuff(); + // ... + // ... + // ... + dispatch(location); +}); +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't add unneeded context + +If your class/object name tells you something, don't repeat that in your +variable name. + +**Bad:** + +```javascript +const Car = { + carMake: "Honda", + carModel: "Accord", + carColor: "Blue" +}; + +function paintCar(car, color) { + car.carColor = color; +} +``` + +**Good:** + +```javascript +const Car = { + make: "Honda", + model: "Accord", + color: "Blue" +}; + +function paintCar(car, color) { + car.color = color; +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Use default arguments instead of short circuiting or conditionals + +Default arguments are often cleaner than short circuiting. Be aware that if you +use them, your function will only provide default values for `undefined` +arguments. Other "falsy" values such as `''`, `""`, `false`, `null`, `0`, and +`NaN`, will not be replaced by a default value. + +**Bad:** + +```javascript +function createMicrobrewery(name) { + const breweryName = name || "Hipster Brew Co."; + // ... +} +``` + +**Good:** + +```javascript +function createMicrobrewery(name = "Hipster Brew Co.") { + // ... +} +``` + +**[⬆ back to top](#table-of-contents)** + +## **Functions** + +### Function arguments (2 or fewer ideally) + +Limiting the amount of function parameters is incredibly important because it +makes testing your function easier. Having more than three leads to a +combinatorial explosion where you have to test tons of different cases with +each separate argument. + +One or two arguments is the ideal case, and three should be avoided if possible. +Anything more than that should be consolidated. Usually, if you have +more than two arguments then your function is trying to do too much. In cases +where it's not, most of the time a higher-level object will suffice as an +argument. + +Since JavaScript allows you to make objects on the fly, without a lot of class +boilerplate, you can use an object if you are finding yourself needing a +lot of arguments. + +To make it obvious what properties the function expects, you can use the ES2015/ES6 +destructuring syntax. This has a few advantages: + +1. When someone looks at the function signature, it's immediately clear what + properties are being used. +2. It can be used to simulate named parameters. +3. Destructuring also clones the specified primitive values of the argument + object passed into the function. This can help prevent side effects. Note: + objects and arrays that are destructured from the argument object are NOT + cloned. +4. Linters can warn you about unused properties, which would be impossible + without destructuring. + +**Bad:** + +```javascript +function createMenu(title, body, buttonText, cancellable) { + // ... +} + +createMenu("Foo", "Bar", "Baz", true); + +``` + +**Good:** + +```javascript +function createMenu({ title, body, buttonText, cancellable }) { + // ... +} + +createMenu({ + title: "Foo", + body: "Bar", + buttonText: "Baz", + cancellable: true +}); +``` + +**[⬆ back to top](#table-of-contents)** + +### Functions should do one thing + +This is by far the most important rule in software engineering. When functions +do more than one thing, they are harder to compose, test, and reason about. +When you can isolate a function to just one action, it can be refactored +easily and your code will read much cleaner. If you take nothing else away from +this guide other than this, you'll be ahead of many developers. + +**Bad:** + +```javascript +function emailClients(clients) { + clients.forEach(client => { + const clientRecord = database.lookup(client); + if (clientRecord.isActive()) { + email(client); + } + }); +} +``` + +**Good:** + +```javascript +function emailActiveClients(clients) { + clients.filter(isActiveClient).forEach(email); +} + +function isActiveClient(client) { + const clientRecord = database.lookup(client); + return clientRecord.isActive(); +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Function names should say what they do + +**Bad:** + +```javascript +function addToDate(date, month) { + // ... +} + +const date = new Date(); + +// It's hard to tell from the function name what is added +addToDate(date, 1); +``` + +**Good:** + +```javascript +function addMonthToDate(month, date) { + // ... +} + +const date = new Date(); +addMonthToDate(1, date); +``` + +**[⬆ back to top](#table-of-contents)** + +### Functions should only be one level of abstraction + +When you have more than one level of abstraction your function is usually +doing too much. Splitting up functions leads to reusability and easier +testing. + +**Bad:** + +```javascript +function parseBetterJSAlternative(code) { + const REGEXES = [ + // ... + ]; + + const statements = code.split(" "); + const tokens = []; + REGEXES.forEach(REGEX => { + statements.forEach(statement => { + // ... + }); + }); + + const ast = []; + tokens.forEach(token => { + // lex... + }); + + ast.forEach(node => { + // parse... + }); +} +``` + +**Good:** + +```javascript +function parseBetterJSAlternative(code) { + const tokens = tokenize(code); + const syntaxTree = parse(tokens); + syntaxTree.forEach(node => { + // parse... + }); +} + +function tokenize(code) { + const REGEXES = [ + // ... + ]; + + const statements = code.split(" "); + const tokens = []; + REGEXES.forEach(REGEX => { + statements.forEach(statement => { + tokens.push(/* ... */); + }); + }); + + return tokens; +} + +function parse(tokens) { + const syntaxTree = []; + tokens.forEach(token => { + syntaxTree.push(/* ... */); + }); + + return syntaxTree; +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Remove duplicate code + +Do your absolute best to avoid duplicate code. Duplicate code is bad because it +means that there's more than one place to alter something if you need to change +some logic. + +Imagine if you run a restaurant and you keep track of your inventory: all your +tomatoes, onions, garlic, spices, etc. If you have multiple lists that +you keep this on, then all have to be updated when you serve a dish with +tomatoes in them. If you only have one list, there's only one place to update! + +Oftentimes you have duplicate code because you have two or more slightly +different things, that share a lot in common, but their differences force you +to have two or more separate functions that do much of the same things. Removing +duplicate code means creating an abstraction that can handle this set of +different things with just one function/module/class. + +Getting the abstraction right is critical, that's why you should follow the +SOLID principles laid out in the _Classes_ section. Bad abstractions can be +worse than duplicate code, so be careful! Having said this, if you can make +a good abstraction, do it! Don't repeat yourself, otherwise you'll find yourself +updating multiple places anytime you want to change one thing. + +**Bad:** + +```javascript +function showDeveloperList(developers) { + developers.forEach(developer => { + const expectedSalary = developer.calculateExpectedSalary(); + const experience = developer.getExperience(); + const githubLink = developer.getGithubLink(); + const data = { + expectedSalary, + experience, + githubLink + }; + + render(data); + }); +} + +function showManagerList(managers) { + managers.forEach(manager => { + const expectedSalary = manager.calculateExpectedSalary(); + const experience = manager.getExperience(); + const portfolio = manager.getMBAProjects(); + const data = { + expectedSalary, + experience, + portfolio + }; + + render(data); + }); +} +``` + +**Good:** + +```javascript +function showEmployeeList(employees) { + employees.forEach(employee => { + const expectedSalary = employee.calculateExpectedSalary(); + const experience = employee.getExperience(); + + const data = { + expectedSalary, + experience + }; + + switch (employee.type) { + case "manager": + data.portfolio = employee.getMBAProjects(); + break; + case "developer": + data.githubLink = employee.getGithubLink(); + break; + } + + render(data); + }); +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Set default objects with Object.assign + +**Bad:** + +```javascript +const menuConfig = { + title: null, + body: "Bar", + buttonText: null, + cancellable: true +}; + +function createMenu(config) { + config.title = config.title || "Foo"; + config.body = config.body || "Bar"; + config.buttonText = config.buttonText || "Baz"; + config.cancellable = + config.cancellable !== undefined ? config.cancellable : true; +} + +createMenu(menuConfig); +``` + +**Good:** + +```javascript +const menuConfig = { + title: "Order", + // User did not include 'body' key + buttonText: "Send", + cancellable: true +}; + +function createMenu(config) { + let finalConfig = Object.assign( + { + title: "Foo", + body: "Bar", + buttonText: "Baz", + cancellable: true + }, + config + ); + return finalConfig + // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true} + // ... +} + +createMenu(menuConfig); +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't use flags as function parameters + +Flags tell your user that this function does more than one thing. Functions should do one thing. Split out your functions if they are following different code paths based on a boolean. + +**Bad:** + +```javascript +function createFile(name, temp) { + if (temp) { + fs.create(`./temp/${name}`); + } else { + fs.create(name); + } +} +``` + +**Good:** + +```javascript +function createFile(name) { + fs.create(name); +} + +function createTempFile(name) { + createFile(`./temp/${name}`); +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid Side Effects (part 1) + +A function produces a side effect if it does anything other than take a value in +and return another value or values. A side effect could be writing to a file, +modifying some global variable, or accidentally wiring all your money to a +stranger. + +Now, you do need to have side effects in a program on occasion. Like the previous +example, you might need to write to a file. What you want to do is to +centralize where you are doing this. Don't have several functions and classes +that write to a particular file. Have one service that does it. One and only one. + +The main point is to avoid common pitfalls like sharing state between objects +without any structure, using mutable data types that can be written to by anything, +and not centralizing where your side effects occur. If you can do this, you will +be happier than the vast majority of other programmers. + +**Bad:** + +```javascript +// Global variable referenced by following function. +// If we had another function that used this name, now it'd be an array and it could break it. +let name = "Ryan McDermott"; + +function splitIntoFirstAndLastName() { + name = name.split(" "); +} + +splitIntoFirstAndLastName(); + +console.log(name); // ['Ryan', 'McDermott']; +``` + +**Good:** + +```javascript +function splitIntoFirstAndLastName(name) { + return name.split(" "); +} + +const name = "Ryan McDermott"; +const newName = splitIntoFirstAndLastName(name); + +console.log(name); // 'Ryan McDermott'; +console.log(newName); // ['Ryan', 'McDermott']; +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid Side Effects (part 2) + +In JavaScript, some values are unchangeable (immutable) and some are changeable +(mutable). Objects and arrays are two kinds of mutable values so it's important +to handle them carefully when they're passed as parameters to a function. A +JavaScript function can change an object's properties or alter the contents of +an array which could easily cause bugs elsewhere. + +Suppose there's a function that accepts an array parameter representing a +shopping cart. If the function makes a change in that shopping cart array - +by adding an item to purchase, for example - then any other function that +uses that same `cart` array will be affected by this addition. That may be +great, however it could also be bad. Let's imagine a bad situation: + +The user clicks the "Purchase" button which calls a `purchase` function that +spawns a network request and sends the `cart` array to the server. Because +of a bad network connection, the `purchase` function has to keep retrying the +request. Now, what if in the meantime the user accidentally clicks an "Add to Cart" +button on an item they don't actually want before the network request begins? +If that happens and the network request begins, then that purchase function +will send the accidentally added item because the `cart` array was modified. + +A great solution would be for the `addItemToCart` function to always clone the +`cart`, edit it, and return the clone. This would ensure that functions that are still +using the old shopping cart wouldn't be affected by the changes. + +Two caveats to mention to this approach: + +1. There might be cases where you actually want to modify the input object, + but when you adopt this programming practice you will find that those cases + are pretty rare. Most things can be refactored to have no side effects! + +2. Cloning big objects can be very expensive in terms of performance. Luckily, + this isn't a big issue in practice because there are + [great libraries](https://facebook.github.io/immutable-js/) that allow + this kind of programming approach to be fast and not as memory intensive as + it would be for you to manually clone objects and arrays. + +**Bad:** + +```javascript +const addItemToCart = (cart, item) => { + cart.push({ item, date: Date.now() }); +}; +``` + +**Good:** + +```javascript +const addItemToCart = (cart, item) => { + return [...cart, { item, date: Date.now() }]; +}; +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't write to global functions + +Polluting globals is a bad practice in JavaScript because you could clash with another +library and the user of your API would be none-the-wiser until they get an +exception in production. Let's think about an example: what if you wanted to +extend JavaScript's native Array method to have a `diff` method that could +show the difference between two arrays? You could write your new function +to the `Array.prototype`, but it could clash with another library that tried +to do the same thing. What if that other library was just using `diff` to find +the difference between the first and last elements of an array? This is why it +would be much better to just use ES2015/ES6 classes and simply extend the `Array` global. + +**Bad:** + +```javascript +Array.prototype.diff = function diff(comparisonArray) { + const hash = new Set(comparisonArray); + return this.filter(elem => !hash.has(elem)); +}; +``` + +**Good:** + +```javascript +class SuperArray extends Array { + diff(comparisonArray) { + const hash = new Set(comparisonArray); + return this.filter(elem => !hash.has(elem)); + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Favor functional programming over imperative programming + +JavaScript isn't a functional language in the way that Haskell is, but it has +a functional flavor to it. Functional languages can be cleaner and easier to test. +Favor this style of programming when you can. + +**Bad:** + +```javascript +const programmerOutput = [ + { + name: "Uncle Bobby", + linesOfCode: 500 + }, + { + name: "Suzie Q", + linesOfCode: 1500 + }, + { + name: "Jimmy Gosling", + linesOfCode: 150 + }, + { + name: "Gracie Hopper", + linesOfCode: 1000 + } +]; + +let totalOutput = 0; + +for (let i = 0; i < programmerOutput.length; i++) { + totalOutput += programmerOutput[i].linesOfCode; +} +``` + +**Good:** + +```javascript +const programmerOutput = [ + { + name: "Uncle Bobby", + linesOfCode: 500 + }, + { + name: "Suzie Q", + linesOfCode: 1500 + }, + { + name: "Jimmy Gosling", + linesOfCode: 150 + }, + { + name: "Gracie Hopper", + linesOfCode: 1000 + } +]; + +const totalOutput = programmerOutput.reduce( + (totalLines, output) => totalLines + output.linesOfCode, + 0 +); +``` + +**[⬆ back to top](#table-of-contents)** + +### Encapsulate conditionals + +**Bad:** + +```javascript +if (fsm.state === "fetching" && isEmpty(listNode)) { + // ... +} +``` + +**Good:** + +```javascript +function shouldShowSpinner(fsm, listNode) { + return fsm.state === "fetching" && isEmpty(listNode); +} + +if (shouldShowSpinner(fsmInstance, listNodeInstance)) { + // ... +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid negative conditionals + +**Bad:** + +```javascript +function isDOMNodeNotPresent(node) { + // ... +} + +if (!isDOMNodeNotPresent(node)) { + // ... +} +``` + +**Good:** + +```javascript +function isDOMNodePresent(node) { + // ... +} + +if (isDOMNodePresent(node)) { + // ... +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid conditionals + +This seems like an impossible task. Upon first hearing this, most people say, +"how am I supposed to do anything without an `if` statement?" The answer is that +you can use polymorphism to achieve the same task in many cases. The second +question is usually, "well that's great but why would I want to do that?" The +answer is a previous clean code concept we learned: a function should only do +one thing. When you have classes and functions that have `if` statements, you +are telling your user that your function does more than one thing. Remember, +just do one thing. + +**Bad:** + +```javascript +class Airplane { + // ... + getCruisingAltitude() { + switch (this.type) { + case "777": + return this.getMaxAltitude() - this.getPassengerCount(); + case "Air Force One": + return this.getMaxAltitude(); + case "Cessna": + return this.getMaxAltitude() - this.getFuelExpenditure(); + } + } +} +``` + +**Good:** + +```javascript +class Airplane { + // ... +} + +class Boeing777 extends Airplane { + // ... + getCruisingAltitude() { + return this.getMaxAltitude() - this.getPassengerCount(); + } +} + +class AirForceOne extends Airplane { + // ... + getCruisingAltitude() { + return this.getMaxAltitude(); + } +} + +class Cessna extends Airplane { + // ... + getCruisingAltitude() { + return this.getMaxAltitude() - this.getFuelExpenditure(); + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid type-checking (part 1) + +JavaScript is untyped, which means your functions can take any type of argument. +Sometimes you are bitten by this freedom and it becomes tempting to do +type-checking in your functions. There are many ways to avoid having to do this. +The first thing to consider is consistent APIs. + +**Bad:** + +```javascript +function travelToTexas(vehicle) { + if (vehicle instanceof Bicycle) { + vehicle.pedal(this.currentLocation, new Location("texas")); + } else if (vehicle instanceof Car) { + vehicle.drive(this.currentLocation, new Location("texas")); + } +} +``` + +**Good:** + +```javascript +function travelToTexas(vehicle) { + vehicle.move(this.currentLocation, new Location("texas")); +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid type-checking (part 2) + +If you are working with basic primitive values like strings and integers, +and you can't use polymorphism but you still feel the need to type-check, +you should consider using TypeScript. It is an excellent alternative to normal +JavaScript, as it provides you with static typing on top of standard JavaScript +syntax. The problem with manually type-checking normal JavaScript is that +doing it well requires so much extra verbiage that the faux "type-safety" you get +doesn't make up for the lost readability. Keep your JavaScript clean, write +good tests, and have good code reviews. Otherwise, do all of that but with +TypeScript (which, like I said, is a great alternative!). + +**Bad:** + +```javascript +function combine(val1, val2) { + if ( + (typeof val1 === "number" && typeof val2 === "number") || + (typeof val1 === "string" && typeof val2 === "string") + ) { + return val1 + val2; + } + + throw new Error("Must be of type String or Number"); +} +``` + +**Good:** + +```javascript +function combine(val1, val2) { + return val1 + val2; +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't over-optimize + +Modern browsers do a lot of optimization under-the-hood at runtime. A lot of +times, if you are optimizing then you are just wasting your time. [There are good +resources](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers) +for seeing where optimization is lacking. Target those in the meantime, until +they are fixed if they can be. + +**Bad:** + +```javascript +// On old browsers, each iteration with uncached `list.length` would be costly +// because of `list.length` recomputation. In modern browsers, this is optimized. +for (let i = 0, len = list.length; i < len; i++) { + // ... +} +``` + +**Good:** + +```javascript +for (let i = 0; i < list.length; i++) { + // ... +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Remove dead code + +Dead code is just as bad as duplicate code. There's no reason to keep it in +your codebase. If it's not being called, get rid of it! It will still be safe +in your version history if you still need it. + +**Bad:** + +```javascript +function oldRequestModule(url) { + // ... +} + +function newRequestModule(url) { + // ... +} + +const req = newRequestModule; +inventoryTracker("apples", req, "www.inventory-awesome.io"); +``` + +**Good:** + +```javascript +function newRequestModule(url) { + // ... +} + +const req = newRequestModule; +inventoryTracker("apples", req, "www.inventory-awesome.io"); +``` + +**[⬆ back to top](#table-of-contents)** + +## **Objects and Data Structures** + +### Use getters and setters + +Using getters and setters to access data on objects could be better than simply +looking for a property on an object. "Why?" you might ask. Well, here's an +unorganized list of reasons why: + +- When you want to do more beyond getting an object property, you don't have + to look up and change every accessor in your codebase. +- Makes adding validation simple when doing a `set`. +- Encapsulates the internal representation. +- Easy to add logging and error handling when getting and setting. +- You can lazy load your object's properties, let's say getting it from a + server. + +**Bad:** + +```javascript +function makeBankAccount() { + // ... + + return { + balance: 0 + // ... + }; +} + +const account = makeBankAccount(); +account.balance = 100; +``` + +**Good:** + +```javascript +function makeBankAccount() { + // this one is private + let balance = 0; + + // a "getter", made public via the returned object below + function getBalance() { + return balance; + } + + // a "setter", made public via the returned object below + function setBalance(amount) { + // ... validate before updating the balance + balance = amount; + } + + return { + // ... + getBalance, + setBalance + }; +} + +const account = makeBankAccount(); +account.setBalance(100); +``` + +**[⬆ back to top](#table-of-contents)** + +### Make objects have private members + +This can be accomplished through closures (for ES5 and below). + +**Bad:** + +```javascript +const Employee = function(name) { + this.name = name; +}; + +Employee.prototype.getName = function getName() { + return this.name; +}; + +const employee = new Employee("John Doe"); +console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe +delete employee.name; +console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined +``` + +**Good:** + +```javascript +function makeEmployee(name) { + return { + getName() { + return name; + } + }; +} + +const employee = makeEmployee("John Doe"); +console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe +delete employee.name; +console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe +``` + +**[⬆ back to top](#table-of-contents)** + +## **Classes** + +### Prefer ES2015/ES6 classes over ES5 plain functions + +It's very difficult to get readable class inheritance, construction, and method +definitions for classical ES5 classes. If you need inheritance (and be aware +that you might not), then prefer ES2015/ES6 classes. However, prefer small functions over +classes until you find yourself needing larger and more complex objects. + +**Bad:** + +```javascript +const Animal = function(age) { + if (!(this instanceof Animal)) { + throw new Error("Instantiate Animal with `new`"); + } + + this.age = age; +}; + +Animal.prototype.move = function move() {}; + +const Mammal = function(age, furColor) { + if (!(this instanceof Mammal)) { + throw new Error("Instantiate Mammal with `new`"); + } + + Animal.call(this, age); + this.furColor = furColor; +}; + +Mammal.prototype = Object.create(Animal.prototype); +Mammal.prototype.constructor = Mammal; +Mammal.prototype.liveBirth = function liveBirth() {}; + +const Human = function(age, furColor, languageSpoken) { + if (!(this instanceof Human)) { + throw new Error("Instantiate Human with `new`"); + } + + Mammal.call(this, age, furColor); + this.languageSpoken = languageSpoken; +}; + +Human.prototype = Object.create(Mammal.prototype); +Human.prototype.constructor = Human; +Human.prototype.speak = function speak() {}; +``` + +**Good:** + +```javascript +class Animal { + constructor(age) { + this.age = age; + } + + move() { + /* ... */ + } +} + +class Mammal extends Animal { + constructor(age, furColor) { + super(age); + this.furColor = furColor; + } + + liveBirth() { + /* ... */ + } +} + +class Human extends Mammal { + constructor(age, furColor, languageSpoken) { + super(age, furColor); + this.languageSpoken = languageSpoken; + } + + speak() { + /* ... */ + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Use method chaining + +This pattern is very useful in JavaScript and you see it in many libraries such +as jQuery and Lodash. It allows your code to be expressive, and less verbose. +For that reason, I say, use method chaining and take a look at how clean your code +will be. In your class functions, simply return `this` at the end of every function, +and you can chain further class methods onto it. + +**Bad:** + +```javascript +class Car { + constructor(make, model, color) { + this.make = make; + this.model = model; + this.color = color; + } + + setMake(make) { + this.make = make; + } + + setModel(model) { + this.model = model; + } + + setColor(color) { + this.color = color; + } + + save() { + console.log(this.make, this.model, this.color); + } +} + +const car = new Car("Ford", "F-150", "red"); +car.setColor("pink"); +car.save(); +``` + +**Good:** + +```javascript +class Car { + constructor(make, model, color) { + this.make = make; + this.model = model; + this.color = color; + } + + setMake(make) { + this.make = make; + // NOTE: Returning this for chaining + return this; + } + + setModel(model) { + this.model = model; + // NOTE: Returning this for chaining + return this; + } + + setColor(color) { + this.color = color; + // NOTE: Returning this for chaining + return this; + } + + save() { + console.log(this.make, this.model, this.color); + // NOTE: Returning this for chaining + return this; + } +} + +const car = new Car("Ford", "F-150", "red").setColor("pink").save(); +``` + +**[⬆ back to top](#table-of-contents)** + +### Prefer composition over inheritance + +As stated famously in [_Design Patterns_](https://en.wikipedia.org/wiki/Design_Patterns) by the Gang of Four, +you should prefer composition over inheritance where you can. There are lots of +good reasons to use inheritance and lots of good reasons to use composition. +The main point for this maxim is that if your mind instinctively goes for +inheritance, try to think if composition could model your problem better. In some +cases it can. + +You might be wondering then, "when should I use inheritance?" It +depends on your problem at hand, but this is a decent list of when inheritance +makes more sense than composition: + +1. Your inheritance represents an "is-a" relationship and not a "has-a" + relationship (Human->Animal vs. User->UserDetails). +2. You can reuse code from the base classes (Humans can move like all animals). +3. You want to make global changes to derived classes by changing a base class. + (Change the caloric expenditure of all animals when they move). + +**Bad:** + +```javascript +class Employee { + constructor(name, email) { + this.name = name; + this.email = email; + } + + // ... +} + +// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee +class EmployeeTaxData extends Employee { + constructor(ssn, salary) { + super(); + this.ssn = ssn; + this.salary = salary; + } + + // ... +} +``` + +**Good:** + +```javascript +class EmployeeTaxData { + constructor(ssn, salary) { + this.ssn = ssn; + this.salary = salary; + } + + // ... +} + +class Employee { + constructor(name, email) { + this.name = name; + this.email = email; + } + + setTaxData(ssn, salary) { + this.taxData = new EmployeeTaxData(ssn, salary); + } + // ... +} +``` + +**[⬆ back to top](#table-of-contents)** + +## **SOLID** + +### Single Responsibility Principle (SRP) + +As stated in Clean Code, "There should never be more than one reason for a class +to change". It's tempting to jam-pack a class with a lot of functionality, like +when you can only take one suitcase on your flight. The issue with this is +that your class won't be conceptually cohesive and it will give it many reasons +to change. Minimizing the amount of times you need to change a class is important. +It's important because if too much functionality is in one class and you modify +a piece of it, it can be difficult to understand how that will affect other +dependent modules in your codebase. + +**Bad:** + +```javascript +class UserSettings { + constructor(user) { + this.user = user; + } + + changeSettings(settings) { + if (this.verifyCredentials()) { + // ... + } + } + + verifyCredentials() { + // ... + } +} +``` + +**Good:** + +```javascript +class UserAuth { + constructor(user) { + this.user = user; + } + + verifyCredentials() { + // ... + } +} + +class UserSettings { + constructor(user) { + this.user = user; + this.auth = new UserAuth(user); + } + + changeSettings(settings) { + if (this.auth.verifyCredentials()) { + // ... + } + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Open/Closed Principle (OCP) + +As stated by Bertrand Meyer, "software entities (classes, modules, functions, +etc.) should be open for extension, but closed for modification." What does that +mean though? This principle basically states that you should allow users to +add new functionalities without changing existing code. + +**Bad:** + +```javascript +class AjaxAdapter extends Adapter { + constructor() { + super(); + this.name = "ajaxAdapter"; + } +} + +class NodeAdapter extends Adapter { + constructor() { + super(); + this.name = "nodeAdapter"; + } +} + +class HttpRequester { + constructor(adapter) { + this.adapter = adapter; + } + + fetch(url) { + if (this.adapter.name === "ajaxAdapter") { + return makeAjaxCall(url).then(response => { + // transform response and return + }); + } else if (this.adapter.name === "nodeAdapter") { + return makeHttpCall(url).then(response => { + // transform response and return + }); + } + } +} + +function makeAjaxCall(url) { + // request and return promise +} + +function makeHttpCall(url) { + // request and return promise +} +``` + +**Good:** + +```javascript +class AjaxAdapter extends Adapter { + constructor() { + super(); + this.name = "ajaxAdapter"; + } + + request(url) { + // request and return promise + } +} + +class NodeAdapter extends Adapter { + constructor() { + super(); + this.name = "nodeAdapter"; + } + + request(url) { + // request and return promise + } +} + +class HttpRequester { + constructor(adapter) { + this.adapter = adapter; + } + + fetch(url) { + return this.adapter.request(url).then(response => { + // transform response and return + }); + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Liskov Substitution Principle (LSP) + +This is a scary term for a very simple concept. It's formally defined as "If S +is a subtype of T, then objects of type T may be replaced with objects of type S +(i.e., objects of type S may substitute objects of type T) without altering any +of the desirable properties of that program (correctness, task performed, +etc.)." That's an even scarier definition. + +The best explanation for this is if you have a parent class and a child class, +then the base class and child class can be used interchangeably without getting +incorrect results. This might still be confusing, so let's take a look at the +classic Square-Rectangle example. Mathematically, a square is a rectangle, but +if you model it using the "is-a" relationship via inheritance, you quickly +get into trouble. + +**Bad:** + +```javascript +class Rectangle { + constructor() { + this.width = 0; + this.height = 0; + } + + setColor(color) { + // ... + } + + render(area) { + // ... + } + + setWidth(width) { + this.width = width; + } + + setHeight(height) { + this.height = height; + } + + getArea() { + return this.width * this.height; + } +} + +class Square extends Rectangle { + setWidth(width) { + this.width = width; + this.height = width; + } + + setHeight(height) { + this.width = height; + this.height = height; + } +} + +function renderLargeRectangles(rectangles) { + rectangles.forEach(rectangle => { + rectangle.setWidth(4); + rectangle.setHeight(5); + const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20. + rectangle.render(area); + }); +} + +const rectangles = [new Rectangle(), new Rectangle(), new Square()]; +renderLargeRectangles(rectangles); +``` + +**Good:** + +```javascript +class Shape { + setColor(color) { + // ... + } + + render(area) { + // ... + } +} + +class Rectangle extends Shape { + constructor(width, height) { + super(); + this.width = width; + this.height = height; + } + + getArea() { + return this.width * this.height; + } +} + +class Square extends Shape { + constructor(length) { + super(); + this.length = length; + } + + getArea() { + return this.length * this.length; + } +} + +function renderLargeShapes(shapes) { + shapes.forEach(shape => { + const area = shape.getArea(); + shape.render(area); + }); +} + +const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)]; +renderLargeShapes(shapes); +``` + +**[⬆ back to top](#table-of-contents)** + +### Interface Segregation Principle (ISP) + +JavaScript doesn't have interfaces so this principle doesn't apply as strictly +as others. However, it's important and relevant even with JavaScript's lack of +type system. + +ISP states that "Clients should not be forced to depend upon interfaces that +they do not use." Interfaces are implicit contracts in JavaScript because of +duck typing. + +A good example to look at that demonstrates this principle in JavaScript is for +classes that require large settings objects. Not requiring clients to setup +huge amounts of options is beneficial, because most of the time they won't need +all of the settings. Making them optional helps prevent having a +"fat interface". + +**Bad:** + +```javascript +class DOMTraverser { + constructor(settings) { + this.settings = settings; + this.setup(); + } + + setup() { + this.rootNode = this.settings.rootNode; + this.settings.animationModule.setup(); + } + + traverse() { + // ... + } +} + +const $ = new DOMTraverser({ + rootNode: document.getElementsByTagName("body"), + animationModule() {} // Most of the time, we won't need to animate when traversing. + // ... +}); +``` + +**Good:** + +```javascript +class DOMTraverser { + constructor(settings) { + this.settings = settings; + this.options = settings.options; + this.setup(); + } + + setup() { + this.rootNode = this.settings.rootNode; + this.setupOptions(); + } + + setupOptions() { + if (this.options.animationModule) { + // ... + } + } + + traverse() { + // ... + } +} + +const $ = new DOMTraverser({ + rootNode: document.getElementsByTagName("body"), + options: { + animationModule() {} + } +}); +``` + +**[⬆ back to top](#table-of-contents)** + +### Dependency Inversion Principle (DIP) + +This principle states two essential things: + +1. High-level modules should not depend on low-level modules. Both should + depend on abstractions. +2. Abstractions should not depend upon details. Details should depend on + abstractions. + +This can be hard to understand at first, but if you've worked with AngularJS, +you've seen an implementation of this principle in the form of Dependency +Injection (DI). While they are not identical concepts, DIP keeps high-level +modules from knowing the details of its low-level modules and setting them up. +It can accomplish this through DI. A huge benefit of this is that it reduces +the coupling between modules. Coupling is a very bad development pattern because +it makes your code hard to refactor. + +As stated previously, JavaScript doesn't have interfaces so the abstractions +that are depended upon are implicit contracts. That is to say, the methods +and properties that an object/class exposes to another object/class. In the +example below, the implicit contract is that any Request module for an +`InventoryTracker` will have a `requestItems` method. + +**Bad:** + +```javascript +class InventoryRequester { + constructor() { + this.REQ_METHODS = ["HTTP"]; + } + + requestItem(item) { + // ... + } +} + +class InventoryTracker { + constructor(items) { + this.items = items; + + // BAD: We have created a dependency on a specific request implementation. + // We should just have requestItems depend on a request method: `request` + this.requester = new InventoryRequester(); + } + + requestItems() { + this.items.forEach(item => { + this.requester.requestItem(item); + }); + } +} + +const inventoryTracker = new InventoryTracker(["apples", "bananas"]); +inventoryTracker.requestItems(); +``` + +**Good:** + +```javascript +class InventoryTracker { + constructor(items, requester) { + this.items = items; + this.requester = requester; + } + + requestItems() { + this.items.forEach(item => { + this.requester.requestItem(item); + }); + } +} + +class InventoryRequesterV1 { + constructor() { + this.REQ_METHODS = ["HTTP"]; + } + + requestItem(item) { + // ... + } +} + +class InventoryRequesterV2 { + constructor() { + this.REQ_METHODS = ["WS"]; + } + + requestItem(item) { + // ... + } +} + +// By constructing our dependencies externally and injecting them, we can easily +// substitute our request module for a fancy new one that uses WebSockets. +const inventoryTracker = new InventoryTracker( + ["apples", "bananas"], + new InventoryRequesterV2() +); +inventoryTracker.requestItems(); +``` + +**[⬆ back to top](#table-of-contents)** + +## **Testing** + +Testing is more important than shipping. If you have no tests or an +inadequate amount, then every time you ship code you won't be sure that you +didn't break anything. Deciding on what constitutes an adequate amount is up +to your team, but having 100% coverage (all statements and branches) is how +you achieve very high confidence and developer peace of mind. This means that +in addition to having a great testing framework, you also need to use a +[good coverage tool](https://gotwarlost.github.io/istanbul/). + +There's no excuse to not write tests. There are [plenty of good JS test frameworks](https://jstherightway.org/#testing-tools), so find one that your team prefers. +When you find one that works for your team, then aim to always write tests +for every new feature/module you introduce. If your preferred method is +Test Driven Development (TDD), that is great, but the main point is to just +make sure you are reaching your coverage goals before launching any feature, +or refactoring an existing one. + +### Single concept per test + +**Bad:** + +```javascript +import assert from "assert"; + +describe("MomentJS", () => { + it("handles date boundaries", () => { + let date; + + date = new MomentJS("1/1/2015"); + date.addDays(30); + assert.equal("1/31/2015", date); + + date = new MomentJS("2/1/2016"); + date.addDays(28); + assert.equal("02/29/2016", date); + + date = new MomentJS("2/1/2015"); + date.addDays(28); + assert.equal("03/01/2015", date); + }); +}); +``` + +**Good:** + +```javascript +import assert from "assert"; + +describe("MomentJS", () => { + it("handles 30-day months", () => { + const date = new MomentJS("1/1/2015"); + date.addDays(30); + assert.equal("1/31/2015", date); + }); + + it("handles leap year", () => { + const date = new MomentJS("2/1/2016"); + date.addDays(28); + assert.equal("02/29/2016", date); + }); + + it("handles non-leap year", () => { + const date = new MomentJS("2/1/2015"); + date.addDays(28); + assert.equal("03/01/2015", date); + }); +}); +``` + +**[⬆ back to top](#table-of-contents)** + +## **Concurrency** + +### Use Promises, not callbacks + +Callbacks aren't clean, and they cause excessive amounts of nesting. With ES2015/ES6, +Promises are a built-in global type. Use them! + +**Bad:** + +```javascript +import { get } from "request"; +import { writeFile } from "fs"; + +get( + "https://en.wikipedia.org/wiki/Robert_Cecil_Martin", + (requestErr, response, body) => { + if (requestErr) { + console.error(requestErr); + } else { + writeFile("article.html", body, writeErr => { + if (writeErr) { + console.error(writeErr); + } else { + console.log("File written"); + } + }); + } + } +); +``` + +**Good:** + +```javascript +import { get } from "request-promise"; +import { writeFile } from "fs-extra"; + +get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin") + .then(body => { + return writeFile("article.html", body); + }) + .then(() => { + console.log("File written"); + }) + .catch(err => { + console.error(err); + }); +``` + +**[⬆ back to top](#table-of-contents)** + +### Async/Await are even cleaner than Promises + +Promises are a very clean alternative to callbacks, but ES2017/ES8 brings async and await +which offer an even cleaner solution. All you need is a function that is prefixed +in an `async` keyword, and then you can write your logic imperatively without +a `then` chain of functions. Use this if you can take advantage of ES2017/ES8 features +today! + +**Bad:** + +```javascript +import { get } from "request-promise"; +import { writeFile } from "fs-extra"; + +get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin") + .then(body => { + return writeFile("article.html", body); + }) + .then(() => { + console.log("File written"); + }) + .catch(err => { + console.error(err); + }); +``` + +**Good:** + +```javascript +import { get } from "request-promise"; +import { writeFile } from "fs-extra"; + +async function getCleanCodeArticle() { + try { + const body = await get( + "https://en.wikipedia.org/wiki/Robert_Cecil_Martin" + ); + await writeFile("article.html", body); + console.log("File written"); + } catch (err) { + console.error(err); + } +} + +getCleanCodeArticle() +``` + +**[⬆ back to top](#table-of-contents)** + +## **Error Handling** + +Thrown errors are a good thing! They mean the runtime has successfully +identified when something in your program has gone wrong and it's letting +you know by stopping function execution on the current stack, killing the +process (in Node), and notifying you in the console with a stack trace. + +### Don't ignore caught errors + +Doing nothing with a caught error doesn't give you the ability to ever fix +or react to said error. Logging the error to the console (`console.log`) +isn't much better as often times it can get lost in a sea of things printed +to the console. If you wrap any bit of code in a `try/catch` it means you +think an error may occur there and therefore you should have a plan, +or create a code path, for when it occurs. + +**Bad:** + +```javascript +try { + functionThatMightThrow(); +} catch (error) { + console.log(error); +} +``` + +**Good:** + +```javascript +try { + functionThatMightThrow(); +} catch (error) { + // One option (more noisy than console.log): + console.error(error); + // Another option: + notifyUserOfError(error); + // Another option: + reportErrorToService(error); + // OR do all three! +} +``` + +### Don't ignore rejected promises + +For the same reason you shouldn't ignore caught errors +from `try/catch`. + +**Bad:** + +```javascript +getdata() + .then(data => { + functionThatMightThrow(data); + }) + .catch(error => { + console.log(error); + }); +``` + +**Good:** + +```javascript +getdata() + .then(data => { + functionThatMightThrow(data); + }) + .catch(error => { + // One option (more noisy than console.log): + console.error(error); + // Another option: + notifyUserOfError(error); + // Another option: + reportErrorToService(error); + // OR do all three! + }); +``` + +**[⬆ back to top](#table-of-contents)** + +## **Formatting** + +Formatting is subjective. Like many rules herein, there is no hard and fast +rule that you must follow. The main point is DO NOT ARGUE over formatting. +There are [tons of tools](https://standardjs.com/rules.html) to automate this. +Use one! It's a waste of time and money for engineers to argue over formatting. + +For things that don't fall under the purview of automatic formatting +(indentation, tabs vs. spaces, double vs. single quotes, etc.) look here +for some guidance. + +### Use consistent capitalization + +JavaScript is untyped, so capitalization tells you a lot about your variables, +functions, etc. These rules are subjective, so your team can choose whatever +they want. The point is, no matter what you all choose, just be consistent. + +**Bad:** + +```javascript +const DAYS_IN_WEEK = 7; +const daysInMonth = 30; + +const songs = ["Back In Black", "Stairway to Heaven", "Hey Jude"]; +const Artists = ["ACDC", "Led Zeppelin", "The Beatles"]; + +function eraseDatabase() {} +function restore_database() {} + +class animal {} +class Alpaca {} +``` + +**Good:** + +```javascript +const DAYS_IN_WEEK = 7; +const DAYS_IN_MONTH = 30; + +const SONGS = ["Back In Black", "Stairway to Heaven", "Hey Jude"]; +const ARTISTS = ["ACDC", "Led Zeppelin", "The Beatles"]; + +function eraseDatabase() {} +function restoreDatabase() {} + +class Animal {} +class Alpaca {} +``` + +**[⬆ back to top](#table-of-contents)** + +### Function callers and callees should be close + +If a function calls another, keep those functions vertically close in the source +file. Ideally, keep the caller right above the callee. We tend to read code from +top-to-bottom, like a newspaper. Because of this, make your code read that way. + +**Bad:** + +```javascript +class PerformanceReview { + constructor(employee) { + this.employee = employee; + } + + lookupPeers() { + return db.lookup(this.employee, "peers"); + } + + lookupManager() { + return db.lookup(this.employee, "manager"); + } + + getPeerReviews() { + const peers = this.lookupPeers(); + // ... + } + + perfReview() { + this.getPeerReviews(); + this.getManagerReview(); + this.getSelfReview(); + } + + getManagerReview() { + const manager = this.lookupManager(); + } + + getSelfReview() { + // ... + } +} + +const review = new PerformanceReview(employee); +review.perfReview(); +``` + +**Good:** + +```javascript +class PerformanceReview { + constructor(employee) { + this.employee = employee; + } + + perfReview() { + this.getPeerReviews(); + this.getManagerReview(); + this.getSelfReview(); + } + + getPeerReviews() { + const peers = this.lookupPeers(); + // ... + } + + lookupPeers() { + return db.lookup(this.employee, "peers"); + } + + getManagerReview() { + const manager = this.lookupManager(); + } + + lookupManager() { + return db.lookup(this.employee, "manager"); + } + + getSelfReview() { + // ... + } +} + +const review = new PerformanceReview(employee); +review.perfReview(); +``` + +**[⬆ back to top](#table-of-contents)** + +## **Comments** + +### Only comment things that have business logic complexity. + +Comments are an apology, not a requirement. Good code _mostly_ documents itself. + +**Bad:** + +```javascript +function hashIt(data) { + // The hash + let hash = 0; + + // Length of string + const length = data.length; + + // Loop through every character in data + for (let i = 0; i < length; i++) { + // Get character code. + const char = data.charCodeAt(i); + // Make the hash + hash = (hash << 5) - hash + char; + // Convert to 32-bit integer + hash &= hash; + } +} +``` + +**Good:** + +```javascript +function hashIt(data) { + let hash = 0; + const length = data.length; + + for (let i = 0; i < length; i++) { + const char = data.charCodeAt(i); + hash = (hash << 5) - hash + char; + + // Convert to 32-bit integer + hash &= hash; + } +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't leave commented out code in your codebase + +Version control exists for a reason. Leave old code in your history. + +**Bad:** + +```javascript +doStuff(); +// doOtherStuff(); +// doSomeMoreStuff(); +// doSoMuchStuff(); +``` + +**Good:** + +```javascript +doStuff(); +``` + +**[⬆ back to top](#table-of-contents)** + +### Don't have journal comments + +Remember, use version control! There's no need for dead code, commented code, +and especially journal comments. Use `git log` to get history! + +**Bad:** + +```javascript +/** + * 2016-12-20: Removed monads, didn't understand them (RM) + * 2016-10-01: Improved using special monads (JP) + * 2016-02-03: Removed type-checking (LI) + * 2015-03-14: Added combine with type-checking (JR) + */ +function combine(a, b) { + return a + b; +} +``` + +**Good:** + +```javascript +function combine(a, b) { + return a + b; +} +``` + +**[⬆ back to top](#table-of-contents)** + +### Avoid positional markers + +They usually just add noise. Let the functions and variable names along with the +proper indentation and formatting give the visual structure to your code. + +**Bad:** + +```javascript +//////////////////////////////////////////////////////////////////////////////// +// Scope Model Instantiation +//////////////////////////////////////////////////////////////////////////////// +$scope.model = { + menu: "foo", + nav: "bar" +}; + +//////////////////////////////////////////////////////////////////////////////// +// Action setup +//////////////////////////////////////////////////////////////////////////////// +const actions = function() { + // ... +}; +``` + +**Good:** + +```javascript +$scope.model = { + menu: "foo", + nav: "bar" +}; + +const actions = function() { + // ... +}; +``` + +**[⬆ back to top](#table-of-contents)** diff --git a/docs/concepts.md b/docs/concepts.md new file mode 100644 index 0000000..9fc13d8 --- /dev/null +++ b/docs/concepts.md @@ -0,0 +1,13 @@ +--- +sidebar_position: 10 +--- + +# Javascript Concepts + +- [**leonardomso/33-js-concepts**](https://github.com/leonardomso/33-js-concepts) scroll 33 JavaScript concepts every developer should know. + +- [**7 JavaScript Concepts**](https://www.geeksforgeeks.org/7-javascript-concepts-that-every-developer-must-know/) JavaScript is Everywhere. Millions of webpages are built on JavaScript and it’s not going anywhere at least for now. + +- [**15 JavaScript concepts that every JavaScript Programmer must know.**](https://madasamy.medium.com/15-javascript-concepts-that-every-nodejs-programmer-must-to-know-6894f5157cb7) This post covers some basic concepts in JavaScript. Every JavaScript programmer must know and master these. + +- [**JavaScript: The Advanced Concepts**](https://www.udemy.com/course/advanced-javascript-concepts/) Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. diff --git a/docs/design.md b/docs/design.md new file mode 100644 index 0000000..06a883f --- /dev/null +++ b/docs/design.md @@ -0,0 +1,503 @@ +--- +sidebar_position: 19 +--- + +# Design + +:::info +this page from: [gztchan](https://github.com/gztchan) +::: + +#### What should I do with the curated resources? + +People, including developers, designers, scientists and others, create awesome things every single day. To be honest, we who are not superheroes, can't know all best things from the world. So, for saving your time, i suggest you to pick those you like, take benefits from them, and finally put it into your kit. :smile: + +#### Contents + +**Get things done** + +- [Stock](#stock) +- [Icon and Logo](#icon-and-logo) +- [Color](#color) +- [Typography](#typography) +- [Toolkit](#toolkit) +- [Prototyping](#prototyping) +- [Mockup](#mockup) +- [User Testing](#user-testing) + +**Concepts** + +- [Read and Digest](#read-and-digest) +- [Styleguide and Branding](#styleguide-and-branding) +- [Tutorial](#tutorial) +- [Book](#book) +- [Award](#award) +- [Conference and Festival](#conference-and-festival) +- [Podcast](#podcast) +- [Community](#community) + +## Stock + +- [Albumarium](http://albumarium.com/) "The best place to find & share beautiful images." +- [The Stocks](http://thestocks.im/) "The best royalty free stock photos are delivered now along with videos, audios, icons, fonts and colors." +- [Polayoutu](http://www.polayoutu.com/collections) is community of photographers based in China who contribute photos under the Creative Common Zero License. 🌟 +- [Illusion](http://illusion.scene360.com/) +- [Baubauhaus](http://www.baubauhaus.com/) feed your daily need of design, illustration, photography, fashion and of all else art-related. +- [500px](https://web.500px.com/) over 15 million photographers from 195 countries. 🌟 +- [1x](https://1x.com/) Shop wall art by 16000+ Curated Artists. 🌟 +- [LIFE OF PIX](http://www.lifeofpix.com/) Free high-resolution photos, no copyrights restrictions for personal and commercial use. +- [Unsplash](https://unsplash.com/) +- [Stokpic](http://stokpic.com/) +- [Raumrot](https://www.howtostartanllc.org/free-stock-photos/) +- [Death to Stock](http://deathtothestockphoto.com/) +- [Gratisography](http://www.gratisography.com/) "The world’s quirkiest collection of high-resolution free stock images." +- [picjumbo](https://picjumbo.com/) Download free stock photos, backgrounds and images in high‑resolution for personal and commercial use. +- [Magdeleine](https://magdeleine.co/browse/) Hand-picked free photos for your inspiration. +- [Pexels](https://www.pexels.com/) "The best free stock photos & videos shared by talented creators." +- [imcreator](http://imcreator.com/) +- [Startup Stock Photos](http://startupstockphotos.com/) Free photos for startups, bloggers, publishers, websites, designers, developers, creators, +& everyone else. +- [New Old Stock Photos](http://nos.twnsnd.co/) Vintage photos from the public archives, free of known copyright restrictions. recapturing history. +- [Realistics Shots](http://realisticshots.com/) Free stock photos (high resolution) for personal and commercial use. 7 new photos every week. +- [SplitShire](https://www.splitshire.com/) Free stock photos for commercial use. +- [FancyCrave](http://fancycrave.com/) Free travel photos for commercial use. +- [LIBRESHOT](https://libreshot.com/) Free fine art and ordinary photography. Free images for blogs or websites even for commercial use. +No need to mention the author. +- [BARNIMAGES](https://barnimages.com/) Free high-resolution images for everyone. +- [MMT](https://mmtstock.com/) Free photos and videos for commercial use. +- [JAY MANTRI](http://jaymantri.com/) free pics. do anything(CC0). make magic. +- [FoodiesFeed](https://www.foodiesfeed.com/) is a resource of awesome naturally looking food photos that are completely free to download. +- [Little Visuals](http://littlevisuals.co/) +- [Bucketlistly Blog](http://photos.bucketlistly.com/) A free creative commons (Attribution-NonCommercial) collection of over 8000+ travel photos from all over the world anyone can use. +- [Pinterest](https://www.pinterest.com/) is a social media web and mobile application company that operates a software system designed to discover information on the World Wide Web. 🌟 +- [pixabay](https://pixabay.com/) Over 1 million+ high quality stock images and videos shared by our talented community. +- [depositphotos](https://depositphotos.com/) Over 100 million high-quality royalty-free stock images and high-definition footage at the best prices to fill all your creative needs. +- [Stocksy](https://www.stocksy.com) is home to a highly curated collection of royalty-free stock photography and video footage that is beautiful, distinctive, and highly usable. +- [butdoesitfloat](http://butdoesitfloat.com/) +- [AllTheFreeStock](http://allthefreestock.com/) +- [UI Faces](https://uifaces.co/) UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. + +## Color + +- [Coolors](https://coolors.co/) The super fast color schemes generator! +- [Colordot](https://color.hailpixel.com/) +- [Brand Colors](https://brandcolors.net/) The biggest collection of official brand color codes around. +- [Material Design Palette](https://www.materialpalette.com/) +- [Flat UI Color Picker](http://www.flatuicolorpicker.com/) +- [LOL COLORS](https://www.webdesignrankings.com/resources/lolcolors/) Curated color palette inspiration. +- [The Day's Color](http://www.thedayscolor.com/) is to find colorful inspiration from things that surround us. Daily. +- [Color Claim](http://colorclaim.tumblr.com/) +- [Color Hunt](http://colorhunt.co/) is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes. +- [CSS Colours Name](http://colours.neilorangepeel.com/) +- [rgb.to](http://rgb.to/) +- [Color Code](http://www.colourco.de/) +- [Colorrrs](http://www.webpagefx.com/web-design/hex-to-rgb/) +- [Nippon Colors](http://nipponcolors.com/) +- [Colorize](https://alexbeals.com/projects/colorize/) is a website that turns any word or phrase into a hex color. +- [Hello Color](http://jxnblk.com/hello-color/) +- [Color Lisa](http://www.colorlisa.com/) is a curated list of color palettes based on masterpieces of the worlds greatest artists. +- [ColorDrop](https://colordrop.io/) +- [colorfavs](http://www.colorfavs.com/) a place that made it easy to create and discover new colors and palettes for all of your projects. +- [uiGradients](https://uigradients.com/) +- [HTML Color Codes](http://htmlcolorcodes.com/) Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. +- [palettr](http://palettr.com/) is a web tool for designers. +- [Paletton](http://paletton.com/) +- [Palettable](http://www.palettable.io/) Generate beautiful color palettes using the knowledge of millions of designers. +- [Picular](https://picular.co/) +- [Colorable](https://colorable.jxnblk.com/) “If one says ‘Red’ (the name of the color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very different.” – Josef Albers +- [Google Colors](https://material.io/guidelines/style/color.html) The Material Design color system can be used to create a color theme that reflects your brand or style. +- [WebGradients](https://webgradients.com/) Free collection of 180 linear gradients that you can use as content backdrops in any part of your website. +- [Chinese Colors](http://zhongguose.com) is a collection of Chinese traditional colors. +- [Gradienta](https://gradienta.io/) Multicolor CSS Gradients, JPG Downloads, 100% Free! +- [Veranda Color](https://verandacolor.com) Browse color palettes made by other designers, generate and submit your own. + +## Icon and Logo + +- [macOS Icon Gallery](http://macosicongallery.com/) +- [icon54](https://icon54.com) +- [icons8](https://icons8.com/) +- [Iconfinder](https://www.iconfinder.com/) provides high-quality icons to millions of creative professionals. +- [icon dock](http://icondock.com/) +- [Genericons Neue](https://genericons.com/) generic looking icons, suitable for a blog or simple website. +- [FlatIcons.net](http://flaticons.net/) is a free flat icon maker. +- [FLATICON](http://www.flaticon.com/) +- [Evil Icons](http://evil-icons.io/) Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN. +- [Typeicons](http://typicons.com/) are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app. +- [The Noun Project](https://thenounproject.com/) +- [Nucleoapp](https://nucleoapp.com/) is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. +- [Picons](https://picons.me/) Vector Icons for iOS, Android, Websites & Apps. Icons designed to perfection. +- [Pictos](http://pictos.cc/) is back once again with Redux: all new carefully crafted interface icons. Each icon in Redux has three variations: Line, Solid & Color. +- [Smashicons](https://smashicons.com/) is the largest and most distinct Icon Pack in the World. Smashicons offers the simplest, effortless way to use icons. +- [Symbolset](https://symbolset.com/icons) +- [logofaves](http://logofaves.com/) +- [Logo of the day](http://logooftheday.com/) +- [LogoMoose](https://www.logomoose.com/) is a logo inspiration and design community showcasing logos submitted by professional logo designers. +- [Logospire](http://logospire.com/) is a logo inspiration gallery. +- [Squid.ink](http://thesquid.ink) +- [Game Icons](http://game-icons.net/) +- [svgicons.sparkk.fr](http://svgicons.sparkk.fr/) +- [Material Design Icons](https://materialdesignicons.com/) +- [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/index.html) is a full suite of material design icons (created and maintained by Google) with additional community-designed and brands icons for easy scalable vector graphics on websites or desktop. +- [Bytesize](http://danklammer.com/bytesize-icons/) is a tiny style-controlled SVG iconset. +- [NOVA Material Design Icons](http://www.webalys.com/nova/index.html) 4,000 vector icons provided in two styles: Line and Solid. +- [Free Icon Shop](https://freeiconshop.com/) is a large collection of beautiful free icons in vector formats. All icons are commercially free to use. Download free icons in PNG, SVG, Ai or PSD formats. +- [Simple Icons](https://simpleicons.org/) Free SVG icons for popular brands. +- [iconmonstr](https://iconmonstr.com/) Free, monstrously big and continuously growing source of simple icons run by one creator. +- [Octions](https://octicons.github.com/) GitHub's icons. +- [We Love Icon Fonts](http://weloveiconfonts.com/) +- [IconStore](https://iconstore.co/) Free icons by first-class designers. +- [Google Material Icons](https://design.google.com/icons/) Material icons are delightful, beautifully crafted symbols for common actions and items. 🌟 +- [Font Awesome](http://fontawesome.io/) Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit. 🌟 +- [IconMoon](https://icomoon.io/) Pixel perfect icon solutions. +- [ICONO](http://saeedalipoor.github.io/icono/) pure css icons, with only one element. +- [svg-icon](http://leungwensen.github.io/svg-icon/) is an ultimate SVG icons collection done right. +- [Iconfont+](http://www.iconfont.cn/) 阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。 +- [CoreUI Icons](http://coreui.io/icons/) Premium designed free icon set with marks in SVG, Webfont and raster formats. + +## Typography + +- [typography](https://www.typography.com/) +- [i love typography](http://ilovetypography.com/) was born on August 7, 2007. It exists because I have a passion for typography, type design, and lettering, and for the pages, words, and letters born of those disciplines. +- [Type is Beautiful](https://www.typeisbeautiful.com/) 是一个关于文字设计和视觉文化的媒体计划。我们关注的话题包括字体、排版、平面设计、公共设计、技术和视觉文化。 +- [Butterick's Practical Typography](http://practicaltypography.com/) +- [Fonts](https://www.fonts.com/) store from Monotype offers more than 150,000 desktop and Web font products for you to preview, purchase and download. You can also learn about new typeface releases and discover typographic tips and techniques. +- [Font Squirrel](https://www.fontsquirrel.com/) 100% free for commercial use. +- [Typewolf](https://www.typewolf.com/) what’s trending in type. +- [Type Novel](http://typenovel.tumblr.com/) +- [Fonts In Use](https://fontsinuse.com/) is a public archive of typography indexed by typeface, format, industry, and period. +- [My Fonts](http://www.myfonts.com/) +- [The Designers Foundry](https://www.thedesignersfoundry.com/) +- [Adobe Fonts](https://fonts.adobe.com/fonts) Enjoy quick browsing, easy use in desktop applications or on the web, and endless typographic inspiration. +- [Google Fonts](https://fonts.google.com/) +- [Google Font Combinations](https://femmebot.github.io/google-type/) +- [justfont](http://blog.justfont.com/) 是新世代字型設計暨推廣教育團隊，致力於培育台灣下一代的設計力量。 +- [Font Library](http://katydecorah.com/font-library/) +- [Type Guide](http://www.typogui.de/) A Pocket Guide to Master Every Day’s Typographic Adventures. +- [workmark](https://wordmark.it/) +- [fontfling](http://fontfling.com/) +- [Glyphr Studio](http://www.glyphrstudio.com/online/) +- [Lost Type](http://www.losttype.com/browse/) is a collaborative digital type foundry. +- [Brick](http://brick.im/) +- [Village](https://vllg.com/) +- [Klim](https://klim.co.nz/) +- [Milieu Grotesque](https://www.milieugrotesque.com/) is an independent type foundry, offering an exclusive library of digital typefaces and related products. +- [Lineto](https://lineto.com/) +- [Colophon](https://www.colophon-foundry.org/) is an international, award-winning type foundry based in London (UK) and Los Angeles (US). +- [T26](https://www.t26.com/) +- [Typ.io](https://typ.io) at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they're using and how they're using them. +- [TypeNetwork](https://www.typenetwork.com/) +- [The League of Moveable Type](https://www.theleagueofmoveabletype.com/) + +## Toolkit + +- [Sketch](https://www.sketchapp.com/) is a platform to empower designers to share and collaborate on their designs and work better, together. [Developer](http://developer.sketchapp.com/), [Sketch App Sources](https://www.sketchappsources.com/), [Sketch Repo](https://sketchrepo.com/), [Sketch Plugins](https://github.com/sketchplugins/plugin-directory), [Sketch.im](http://sketch.im/).🌟 +- [Adobe Photoshop](http://www.adobe.com/products/photoshop.html) Best imaging and design app is at the core of almost every creative project. [PSD Repo](https://psdrepo.com/), [PSDDD](https://psddd.co/). 🌟 +- [Adobe Illustrator](http://www.adobe.com/products/illustrator.html) The industry-standard vector graphics app lets you create logos, icons, sketches, typography, and complex illustrations for print, web, interactive, video, and mobile. 🌟 +- [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) Bold new ways to put your ideas in motion. v +- [Adobe Project Felix](http://www.adobe.com/products/project-felix.html) A new app for working with 3D models, materials, and lights with 2D background images to create fully rendered, high-quality images with photorealistic effects. +- [Adobe XD](https://www.adobe.com/products/xd.html) Vector-based tool for designing and prototyping user experience for web and mobile apps. 🌟 +- [Zeplin](https://zeplin.io/) Build pixel perfect apps in peace. +- [Panda](http://usepanda.com/) A smart news reader built for productivity, powered by integrations. +- [INBOARD](https://inboardapp.com/) Organize your inspiration. +- [Sip](http://sipapp.io/) The best way to collect, organize & share your colors. +- [RightFont](https://rightfontapp.com/) The future of font manager software for Mac OS X. +- [Dropbox](https://www.dropbox.com/) Get to all your files from anywhere, on any device, and share them with anyone. 🌟 +- [Iconjar](https://geticonjar.com/) Organize, search and use icons the easy way. +- [Affinity Designer](https://affinity.serif.com/en-gb/designer/) - Professional graphic design software for Mac. +- [Inkscape](https://inkscape.org/en/) Free vector graphics tool. +- [Figma](https://www.figma.com/) The first interface design tool with real-time collaboration. 🌟 +- [Gravit](https://www.gravit.io/) End-to-end web-based design platform. +- [Taskade](https://www.taskade.com/) Collaborate with clients on the same page visually with team tasks, notes and meeting agendas. +- [Framer X](https://framer.com/) Design tool for creating interactive designs, interfaces and animations. + +## Prototyping + +- [Marvel](https://marvelapp.com/) Simple design, prototyping and collaboration. +- [InVision](https://www.invisionapp.com/) The world's leading prototyping, collaboration & workflow platform. +- [Origami](http://origami.design/) Design Prototyping. +- [Haiku](https://www.haiku.ai/) Animation tool for UI components, ready for iOS, Android or Web Apps. +- [Atomic](https://www.atomic.io/) The prototyping tool designed for teams. +- [Proto.io](https://proto.io/) Prototypes that feel real. +- [Protopie](https://www.protopie.io/) Interactive prototypes with simple triggers, connects to phone features like vibration, proximity, and camera. +- [Justinmind](https://www.justinmind.com/) Prototype Faster, Communicate Better. +- [Principle](http://principleformac.com/) Animate Your Ideas, Design Better Apps. +- [Flinto](https://www.flinto.com/) App prototyping tools for designers. +- [Axure](https://www.axure.com/) Design the right solution and align your team. +- [Form](http://www.relativewave.com/form/) Build and customize native prototypes directly on device. +- [Bootstrap Studio](https://bootstrapstudio.io/) A powerful desktop app for creating responsive websites using the Bootstrap framework. +- [Adobe Experience Design](http://www.adobe.com/products/experience-design.html) Design, prototype and quickly share user experiences. +- [UXPin](https://www.uxpin.com/) High fidelity animated prototypes created in minutes. +- [MockingBot](https://modao.cc/) Mobile prototyping tool without headache. +- [POP](https://marvelapp.com/pop/?popref=1) Transform pen and paper ideas into a real working prototype. +- [Prott](https://prottapp.com/) Prototyping tool for Web, iOS, Android apps. + +## Mockup + +- [Mockup World](https://www.mockupworld.co/) handpicks and presents the best photorealistic Photoshop mockups that designers and agencies worldwide have published online. +- [Placeit](https://placeit.net/) marry design and technology to create high-quality branding and marketing tools so anyone from individuals to large companies can create amazing visual assets for their brand regardless of technical or artistic skills. +- [Epicpxls](https://www.epicpxls.com/) Free & premium curated fonts, graphics, templates, mobile app designs & UI Kits. +- [360 Mockups](https://360mockups.com/) Totally FREE to download PSD Mockups to present your works. +- [Facebook Devices](http://facebook.design/devices) Images and Sketch files of popular devices. +- [Facebook HandsKit](http://facebook.design/handskit) Photos of hands holding various phones, to be used in any presentation of your designs. +- [UINames](https://uinames.com/) is a simple tool to generate fake names for use in designs and mockups. +- [NinjaMock](https://ninjamock.com/) is a small startup based in Denmark, a country famous for its strong attitude towards design and quality. +- [Smartmockups app](https://smartmockups.com/) The #1 tool for creating stunning marketing images. +- [Froala Design Blocks](https://www.froala.com/design-blocks) Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites. +- [ScreenSpace](https://www.screenspace.io) +- [Rotato 3D mockups](https://rotato.xyz) +- [Lorem Ipsum](http://www.lipsum.com/feed/html) +- [BrowserFrame](https://browserframe.com/) is the easiest way to wrap screenshots in browser frames. Supports multiple browsers, operating systems, and themes. Great for landing pages and mockups. +- [Device Shots](https://deviceshots.com) is a tool that helps you create beautiful device mockups to share on social media platforms, with the screenshot of your website or mobile application, for free. + +## User Testing + +- [Lookback.io](https://lookback.io/) Capture exactly how users experience your product: no guesswork required. +- [UserTesting](https://www.usertesting.com/) Get videos of real people speaking their thoughts as they use your website or mobile app. Go beyond analytics and understand why users do what they do. +- [UserBrain](https://userbrain.net/) Keep getting videos of real people testing your website, web app or prototype and make it ridiculously easy to use. +- [Reflector](http://www.airsquirrels.com/reflector/) Wireless mirroring and streaming receiver. +- [User Zoom](http://www.userzoom.co.uk/) All-in-One Agile UX Research Platform. +- [Ethn.io](https://ethn.io/) Remote user testing suite. Intercept real people for user research. +- [Usabilla](https://usabilla.com/) Customer feedback and survey tool. +- [UserTest.io](https://usertest.io/) Remote, easy and simple user testing. +- [Validately](https://validately.com/) Easy way to recruit testers, launch tests, and analyze results. +- [Users Think](http://usersthink.com/) Get user feedback from real people, on demand, when you need it. +- [CrazyEgg](https://www.crazyegg.com/) Heatmapping software. +- [HotJar](https://www.hotjar.com/) Includes screen recordings, heatmapping, form and funnel analysis and user feedback polls & surveys +- [Inspectlet](https://www.inspectlet.com/) Captures user actions and browsing, generates heatmaps, records with a realtime timeline +- [Clicktale](https://www.clicktale.com) is a user experience management platform. +- [Maze Design](http://maze.design) is a great way to conduct user interviews + +## Read and Digest + +- [Design Milk](http://design-milk.com/) is an online magazine dedicated to modern design, offers what’s new in art, architecture, interior design, furniture and decor, fashion and technology. 🌟 +- [frog](https://www.frogdesign.com/) is a global Design, innovation and strategy firm. +- [Danish Design Centre](http://danskdesigncenter.dk/) +- [Google Design](https://design.google.com/) is a cooperative effort led by a group of designers, writers, and developers at Google. 🌟 +- [Google Art & Culture](https://www.google.com/culturalinstitute/beta/), explore collections and stories from around the world. +- [Airbnb Design](https://airbnb.design/) is a cross-disciplinary group of experience and production designers, researchers, technologists, writers and content strategists, graphic designers, filmmakers, producers, interior architects, project managers, photographers and more. 🌟 +- [Fast.Co Design](https://www.fastcodesign.com/) is the world’s leading business media brand, with an editorial focus on innovation in technology, leadership, world changing ideas, creativity, and design. 🌟 +- [Smashing Magazine](https://www.smashingmagazine.com/) founded in September 2006 in Germany, Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers. 🌟 +- [Design Taxi](http://designtaxi.com/) +- [Yanko Design](http://www.yankodesign.com/) +- [Swiss Miss](http://www.swiss-miss.com/) is a design blog/studio run by tina roth eisenberg. +- [UX Magazine](http://uxmag.com/) is a free community resource exploring all facets of experience design. +- [UXBooth](http://www.uxbooth.com/) is a publication by and for the user experience community. +- [IDEO](https://www.ideo.com/) +- [Design Shack](https://designshack.net/) established in 2003, Design Shack is a magazine for creatives, designers, and developers. +- [Booooooom](http://www.booooooom.com/blog/design/) was launched in 2008 by Vancouver-based artist Jeff Hamada. It is Canada’s highest traffic art platform, and one of the largest on the Internet. +- [designmodo](https://designmodo.com/inspiration/) provides articles, tutorials and industry news about trends and techniques. +- [webdesignerdepot](https://www.webdesignerdepot.com/) +- [UX Movement](http://uxmovement.com/) shows you which way gives the best user experience. +- [Speckyboy](https://speckyboy.com/) was launched with the intent of serving as an inspirational hub for web designers. +- [HUGE](http://www.hugeinc.com/) +- [Sitepoint Blog](https://www.sitepoint.com/blog/) +- [UIE](https://articles.uie.com/) helps people have the expertise they need to deliver better design. +- [Attack the Front](http://attackthefront.com) +- [codrops](https://tympanus.net/codrops/) is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. +- [The Great Discontent](https://thegreatdiscontent.com/) is a print publication and online magazine featuring inspiring conversations with today’s artists, makers, and risk-takers. +- [Underconsideration](http://underconsideration.com/) are a graphic design firm generating it own projects, initiatives, and content while taking on limited client work. +- [Little Big Details](http://littlebigdetails.com/) is a curated collection of the finer details of design, updated every day. +- [WAYS WE WORK](http://wayswework.io/) is a digital publication focused on telling stories and getting first-hand accounts of how people do the work they love. +- [Creative Review](https://www.creativereview.co.uk/) has been bringing the creative community together since 1980. +- [Creativeoverflow](http://creativeoverflow.net/) is an online design magazine for anything creative. +- [FORM UP NORTH](http://www.fromupnorth.com/) +- [Facebook](http://facebook.design/) is a facebook design blogs. +- [Facebook Design on Medium](https://medium.com/facebook-design) experiences from the people designing products billions of people use every day. +- [Hacking UI](http://hackingui.com/) is a community for designers, developers and creative entrepreneurs with a passion. +- [PixelSquid Blog](https://blog.pixelsquid.com/) +- [LOGO DESIGN LOVE](http://www.logodesignlove.com/) is a website and book devoted to the design of logos and brand identities. +- [DesignM.ag](https://designm.ag/) is a community-based website for web designers and developers. +- [HeyDesigner](http://heydesigner.com/) daily curated design knowledge. +- [Nicely Done](http://nicelydone.club/) is a curation of the nicest digital products. +- [Dropbox Design on Medium](https://medium.com/dropbox-design) Stories and musings from the Dropbox Design team. 🌟 +- [Designer News](https://www.designernews.co/) is a large, global community of people working in design and technology or those interested in the topics. 🌟 +- [Sidebar](https://sidebar.io/) has been collecting the best links about UI design, typography, CSS, user research, and all other facets of design since 2012. 🌟 +- [CodePen Blog](https://blog.codepen.io/) where CodePen post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. +- [Web Designer News](http://www.webdesignernews.com/) curated stories for designers. 🌟 +- [The UX for VR](https://www.uxofvr.com/) is a curated list of resources to help you on your journey into the User Experience of Virtual Reality. +- [Reeoo](http://reeoo.com/) provides web design inspiration and gallery for web designers. +- [CREATIVE BLOQ](http://www.creativebloq.com/) delivers a daily mix of advice and inspiration for digital and traditional artists, web designers, graphic designers, 3D and VFX artists, illustrators, and more. 🌟 +- [Pond5](https://www.pond5.com/) +- [Dexigner](https://www.dexigner.com/) +- [Nicce on Medium](https://blog.niice.co/)  Gather, share & discuss ideas with your team. +- [Artwxrk](https://www.artwxrk.com) +- [Designspiration](http://designspiration.net/) is committed to being the best product that it can. +- [Freebiesbug](https://freebiesbug.com/) Hand-picked resources for web designer and developers, constantly updated. +- [Muuuuu](http://muuuuu.org/) +- [Muzli on Medium](https://medium.muz.li/) The freshest links about design and interactive, from around the web. +- [The Best Designs](https://www.thebestdesigns.com/) +- [Flat Inspire](http://flatinspire.com/) is a curated gallery & showcase of the best websites rocking a Flat Design/UI style. +- [Site Inspire](https://www.siteinspire.com/) is a showcase of the finest web and interactive design. +- [Media Queries](https://mediaqueri.es/) +- [One Page Love](https://onepagelove.com/) is the leading showcase of beautiful One Page websites, templates and resources. +- [Admire the Web](https://www.admiretheweb.com/) +- [Pttrns](https://pttrns.com/) +- [CRAFTED BY LOVE](http://www.craftedbylove.com/#/) +- [HTTPSTER](https://httpster.net/) +- [Empty States](http://emptystat.es/) +- [Call to Idea](http://www.calltoidea.com/) +- [Siiimple](https://siiimple.com/) +- [Zurb PatternTap](http://zurb.com/patterntap) +- [Land Book](https://land-book.com/) created this place for Designers, Developers, Product Owners, Marketing Managers, Startupers, Freelancers and, really, for everyone who appreciates fine designs and well-crafted sites. +- [oozled](http://oozled.com/) +- [DESIGN DETAILS](http://www.brianlovin.com/design-details/) +- [officelovin](https://www.officelovin.com/) is an online platform about office architecture & design. +- [Best Website](https://bestwebsite.gallery/) The most beautiful websites handpicked for you — since 2008! +- [FreeDesignResources](http://freedesignresources.net/) +- [Abduzeedo](http://abduzeedo.com/) +- [Material UI](https://www.materialui.co) +- [1stwebdesigner](https://1stwebdesigner.com) By web design professionals, for web design professionals. We're on a mission to help you build a better web. +- [EMOJI CHEAT SHEET](https://www.webpagefx.com/tools/emoji-cheat-sheet/) +- [EMOJI CSS](https://afeld.github.io/emoji-css/?ref=webdesignernews.com) +- [DesignShock](https://www.designshock.com/) is the biggest bundle/subscription you can find in one place including icons, avatars, graphic elements, GUI packs, design sets and both web and print templates +- [SVG PORN](http://www.svgporn.com/) +- [Up](https://www.uplabs.com/) is the leading community of creatives, offering the best downloadable resources, every day. +- [Freebbble](http://freebbble.com/) +- [Baianat](https://www.baianat.com/resources/) +- [Graphberry](http://www.graphberry.com/) provide you with the creative graphic resources you need to transform into your personal or commercial work. +- [UX Project Checklist](http://uxchecklist.github.io/) 🌟 +- [TRIDIV](http://tridiv.com/) is a web-based editor for creating 3D shapes in CSS. +- [Mobile Mozaic](http://www.mobilemozaic.com/) +- [wwwhere](http://wwwhere.io/) +- [Lapa](http://www.lapa.ninja/) is a gallery featuring the best 1920 landing page examples from around the web. +- [Designer Mill](https://www.designermill.com/) +- [Freebiesjedi](http://freebiesjedi.com) +- [Webfieldmanual](https://webfieldmanual.com/) +- [UXTOOLS](https://uxtools.co/) +- [CodeMyUI](https://codemyui.com/) Web Design & UI Inspiration with Code Snippets. +- [A List Apart](https://alistapart.com/) has been discussing design, development and meaning of web content since 1997 and remains a great resource for designers and programmers alike. + +## Styleguide and Branding + +- [Brand Style Guide Examples](https://saijogeorge.com/brand-style-guide-examples/) +- [Mozilla](https://www.mozilla.org/en-US/styleguide/) +- [Mailchimp](http://ux.mailchimp.com/patterns/) +- [Lonely Planet](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours) +- [Starbucks](https://www.starbucks.com/static/reference/styleguide/) +- [Yelp](https://www.yelp.com/styleguide) +- [IBM](https://www.ibm.com/design/language/) +- [Uber](https://medium.com/uber-design) +- [Atlassian](https://www.atlassian.design/) +- [Dropbox](https://www.dropbox.com/branding) +- [Spotify](https://developer.spotify.com/design/) +- [Youtube](https://www.youtube.com/yt/about/brand-resources/) +- [Facebook - Brand Resource Center Book](https://en.facebookbrand.com/) +- [Vimeo](https://press.vimeo.com/brand-guidelines) +- [Ubuntu](http://design.ubuntu.com/) +- [BBC](http://www.bbc.co.uk/gel) +- [Channel4](http://styleguides.channel4.com/E4_StyleGuide.pdf) +- [Twitter](https://brand.twitter.com/) +- [Nike Pro](http://manualcreative.com/project/nike-pro-services/) +- [Medium](https://www.behance.net/gallery/7226653/Medium-Brand-Development) +- [Linkedin](https://brand.linkedin.com/) +- [Red Cross](http://www.redcross.org/images/MEDIA_CustomProductCatalog/m6440103_BrandPoster.pdf) +- [Marvel](https://marvelapp.com/styleguide/overview/introduction) +- [buffer](https://buffer.com/style-guide) +- [VSCO](http://vsco.co/id/journal/p/1) +- [Instagram](https://en.instagram-brand.com/) +- [WhatsApp](https://www.whatsappbrand.com/) +- [Snapchat](https://www.snapchat.com/brand-guidelines#general-usage-guidelines) +- [Atlassian](https://atlassian.design/) +- [Clarity](http://clarity.design) +- [Apple iOS](https://developer.apple.com/ios/human-interface-guidelines/) +- [Apple macOS](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/) +- [Google Trends](https://newslab.withgoogle.com/assets/docs/google-trends-guide.pdf) +- [Google Visual Assets Guidelines](https://www.behance.net/gallery/9028077/Google-Visual-Assets-Guidelines-Part-2) +- [Google Design for Glass](https://developers.google.com/glass/design/) +- [Google Material Design](https://material.io/guidelines/) +- [Microsoft Design](https://www.microsoft.com/en-us/design) +- [Microsoft Fluent Design System](http://fluent.microsoft.com/) +- [NASA 2011](https://sservi.nasa.gov/wp-content/uploads/2011/10/NASA_Style_Guide_v2.1.pdf) +- [NASA 1976](https://www.nasa.gov/sites/default/files/atoms/files/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf) +- [Ant Design](http://ant.design) is a design system with values of Nature and Determinacy for better user experience of enterprise applications. +- [Audi](https://www.audi.com/ci/en/renewed-brand.html) Audi Corporate Identity Portal + +## Tutorial + +- [Lynda](https://www.lynda.com/) is a leading online learning platform that helps anyone learn business, software, technology and creative skills to achieve personal and professional goals. 🌟 +- [CreativeLive](https://www.creativelive.com/) +- [DesignSchool](https://designschool.canva.com/) Anyone can make beautiful designs with Canva. +- [Envato Tuts+](https://tutsplus.com/) helps you learn creative skills and shape the life you want. +- [Udemy](https://www.udemy.com/courses/design/) The leading global marketplace for learning and instruction. +- [AboutCG](http://www.aboutcg.com/) 前身是 CG 共和国（CGGHG）, 是成立于2004年的计算机图形图像教学服务网站，也是国内最早的原创CG视频教学的制作者。 +- [DevDojo](https://devdojo.com/) +- [Platzi](https://courses.platzi.com) Growth marketing Course. +- [greyscalegorilla](https://greyscalegorilla.com/) + +## Book + +- [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-Revised-Updated/dp/1592535879/ref=sr_1_2?s=books&ie=UTF8&qid=1473096298&sr=1-2&keywords=Universal+Methods+of+Design) +- [Universal Methods of Design](https://www.amazon.com/Universal-Methods-Design-Innovative-Effective/dp/1592537561/ref=pd_sim_14_3?ie=UTF8&psc=1&refRID=2NG71RWR7MKGXE1B8GZ3) +- [Don't Make Me Think](https://www.amazon.com/gp/product/0321965515/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0321965515&linkCode=as2&tag=office03a70-20&linkId=PF4EASLP4EM62N73) +- [About Face: The Essentials of Interaction Design](https://www.amazon.com/gp/product/1118766571/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1118766571&linkCode=as2&tag=office03a70-20&linkId=I5TMKUXHZ43SHHPE) +- [How to Be a Graphic Designer without Losing Your Soul](https://www.amazon.com/Graphic-Designer-without-Losing-Expanded/dp/1568989830) +- [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.com/gp/product/0321703545) +- [Lean UX: Applying Lean Principles to Improve User Experience](https://www.amazon.com/Lean-UX-Applying-Principles-Experience/dp/1449311652) +- [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702) +- [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535) +- [The UX Book: Process and Guidelines for Ensuring a Quality User Experience](https://www.amazon.com/UX-Book-Guidelines-Ensuring-Experience/dp/0123852412) +- [Thinking with Type](https://www.amazon.com/gp/product/1568989695/) +- [The Elements of Graphic Design](https://www.amazon.com/Elements-Graphic-Design-Second/dp/1581157622/) +- [Usability Matters: Mobile-first UX for developers and other accidental designers](https://www.manning.com/books/usability-matters) +- [Design for the Mind](https://www.manning.com/books/design-for-the-mind) + +## Award + +- [Good Design Award](http://www.g-mark.org/?locale=en) has been a sole comprehensive design evaluation and commendation system in Japan sin 1957. +- [Red Dot Award](http://en.red-dot.org/) stands for belonging to the best in design and business. It's international design competition, the “Red Dot Design Award”, is aimed at all those who would like to distinguish their business activities through design. 🌟 +- [Apple Design Awards](https://developer.apple.com/design/awards/) is a special event hosted by Apple Inc. at its annual Worldwide Developers Conference. 🌟 +- [iF Product Design Award](http://ifworlddesignguide.com/) was introduced in 1954 and is annually conferred by the iF International Forum Design. The award, which spans multiple disciplines, has more than 5,500 entries from around 59 nations every year. 🌟 +- [FWA](https://thefwa.com/) to showcase cutting edge creativity, regardless of the medium or technology used. +- [CSS Design Awards](http://www.cssdesignawards.com/) is a web design & development award platform for digital folk, UI/UX peeps and inspiring leaders of the web. +- [CSS Awards](https://www.cssawards.net/) is a web designer/agency/studio inspiration gallery, where a high quality of CSS websites placed from around the world. +- [Creative AD Awards](http://www.creativeadawards.com/) Discover the Most Creative & Sophisticated Advertising Campaigns around the World. +- [D&AD](https://www.dandad.org/) +- [Awwwards](https://www.awwwards.com/) The awards for design, creativity and innovation on the Internet. 🌟 +- [CSS Winner](http://www.csswinner.com/) is a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies. + +## Conference and Festival + +- [Uideo](https://uideo.net) talks for designers from 69 ux/ui conferences all over the world. +- [MAX](https://max.adobe.com/) Get inspired. Learn skills. Play. +- [The AIGA Design Conference](http://designconference.aiga.org/#!/) +- [SXSW](https://www.sxsw.com/) founded in 1987 in Austin, Texas, SXSW is best known for its conference and festivals that celebrate the convergence of the interactive, film, and music industries. +- [ICON9](http://www.theillustrationconference.org/) brings together top illustrators, designers, educators, representatives, and art buyers to explore the future of illustration. +- [Mirror](http://www.mirrorconf.com) is a conference designed to empower designers and front-end developers who have a thirst for knowledge and want to broaden their horizons. +- [Interaction](http://interaction16.ixda.org/) +- [Offset](http://www.iloveoffset.com/) has fast become one of the world’s most inspirational, educational and vocational conferences for the design and creative industries. +- [99U](http://conference.99u.com/) Adobe 99U Conference. +- [Typographics](http://typographics.com) is a multi-part event series foc­used on con­tempo­rary typo­graphy and where its future may lie. +- [Brand New Conference](http://underconsideration.com/brandnewconference/) is a two-day event organized by UnderConsideration. +- [How Design Live](http://www.howdesignlive.com/) is one of the largest annual gatherings of creative professionals in the world, HOW Design Live is a career-changing, life-altering experience. +- [Better by Design](http://betterbydesignconference.com/) is about conference & workshops. +- [What Design Can Do](http://www.whatdesigncando.com/) is an international platform on the impact of design. +- [Design and Content](https://www.designcontentconf.com/) The Conference for Designers & Content Strategists — we're better together. +- [generate](https://www.generateconf.com/) the award winning conference for web designers returns to NYC! +- [Typo International Design Talks](https://www.typotalks.com/) is where the world’s design experts speak +- [Service Design Days](http://servicedesigndays.com/) +- [SemiPermanent](https://www.semipermanent.com) +- [Dribbble Meetups](https://dribbble.com/meetups) are a chance for designers to socialize, talk shop, and foster their local design communities. +- [CreativeMornings](https://creativemornings.com/) is a breakfast lecture series for the creative community. +- [CodePen Meetups](https://blog.codepen.io/meetups/) for like-minded code people to hang out, do show-and-tell, and bask in the lovely culture that is front end. + +## Podcast + +- [99% INVISIBLE](http://99percentinvisible.org/) +- [Shop Talk](http://shoptalkshow.com/) is an internet radio show about the internet starring [Dave Rupert](http://daverupert.com/) and [Chris Coyier](http://chriscoyier.net/). +- [workmode](http://workmode.show/) is a podcast series about being a pro. +- [UX Podcast](http://uxpodcast.com/) is a twice-monthly digital design podcast sharing insights about business, technology and people since 2011. +- [Anyway.fm - 设计杂谈](http://anyway.fm/) 是一档播客节目，由 UI 设计师 JJ Ying 和 Leon Gao 主播，我们的目标是让你的听觉更懂视觉。 +- [The Deeply Graphic Design](http://thedeependdesign.com/graphic-design-podcast/) The web + graphic design podcast that offsers both pratical and creative design advice you can use. +- [Tentative.fm](http://tentative.fm/) is a podcast about digital product design. Hosted by thoughtbot's Chief Design Officer Kyle Fiedler & Boston Design Director Jaclyn Perrone. +- [Pagebreak](http://www.pagebreakpodcast.com/) is an audio podcast hosted by [Liz Andrade](http://cmdshiftdesign.com/) and [Niki Brown](http://nikibrown.com/). +- [Design Matters](http://www.debbiemillman.com/designmatters/) The world's first podcast about design and an inquiry into the broader world of creative culture through wide-ranging conversations with designers, writers, artists, curators, musicians, and other luminaries of contemporary thought +- [The Greate Discontent Podcast](https://thegreatdiscontent.com/podcast) features in-depth conversations with today’s artists, makers, and risk-takers. +- [Design Details Podcast](https://spec.fm/podcasts/design-details) A weekly conversation about design process and culture. +- [Layout.fm](http://layout.fm/) A weekly podcast about design, technology, programming and everything else. +- [Type is Beautiful - 字谈字畅](https://itunes.apple.com/podcast/zi-tan-zi-chang/id1041704528) 是第一档用华语制作的字体排印主题播客节目，由 Eric Liu 与钱争予搭档主播。 +- [Boagworld UX Show](https://boagworld.com/show/) Every Thursday Paul Boag and Marcus Lillington are joined by a variety of guests to discuss a range of web design related topics. +- [Responsive Web Design Podcast](https://responsivewebdesign.com/podcast/) Karen and Ethan interview the people who make responsive redesigns happen. +- [Adventures in Design](http://www.adventuresindesignmarket.com/) +- [The Hacking UI Podcast](http://hackingui.com/podcast/) is hosted by Sagi Shrieber and David Tintner, who are both a designer and developer as well as entrepreneurs, bloggers, productivity/time-hacker maniacs, and all around tech geeks. +- [CodePen Radio](https://blog.codepen.io/radio/) is a podcast all about what it's like running a small web software business. The good, the bad, and the ugly. +- [UX COFFEE - 设计咖](http://www.uxcoffee.com/) 设计无处不在。在这个节目里，我们试图探寻设计的力量、这个世界被创造的过程、以及参与设计了这个世界的人们。主播：Riceman、Hoka、帆啊帆、张挠挠。 diff --git a/docs/dsa.md b/docs/dsa.md new file mode 100644 index 0000000..c187c23 --- /dev/null +++ b/docs/dsa.md @@ -0,0 +1,49 @@ +--- +sidebar_position: 5 +--- + +# Data Structure & Algorithms + +- [👨‍💻 Websites & Platforms](#-websites--platforms) +- [🎥 Youtube Vidoes](#-youtube-vidoes) +- [📦 GitHub Respositories](#-github-respositories) + +### 👨‍💻 Websites & Platforms + +- [**HACKERRANK**](https://www.hackerrank.com/dashboard) has to be the first platform you should start coding. It has problems in every language you can think of with well-categorized sections. + +- [**GEEKSFORGEEKS**](https://www.geeksforgeeks.org/) One site which has helped me improve my problem-solving skills a lot and still helping is GeeksForGeeks, or as often techies call it GFG, is the best portal for Computer Science. + +- [**CODECHEF**](https://www.codechef.com/) The popularity of Codechef is growing every day amongst the coders of every age group. + +- [**CODEFORCES**](https://codeforces.com/) This is one of the portals where the audience base is enormous in terms of numbers and skills. It's one of the most competitive portals for problem-solving. + +- [**LEETCODE**](https://leetcode.com/) One of the websites which are industry-recognized. You will see many software developers from Google, Amazon, and Facebook recommend you solve problems on LeetCode. + +### 🎥 Youtube Vidoes + +- [**CS Dojo – Data structures and algorithms**](https://youtube.com/playlist?list=PLBZBJbE_rGRV8D7XZ08LK6z-4zPoWzu5H) This 13-part video course on data structures and algorithms provides a breakdown of the concept of data structures. + +- [**Mycodeschool – Data structures**](https://youtube.com/playlist?list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P) If you’re a C or C++ programmer, this may just be the right course for you to learn data structures. + +- [**Tulesko – Data structures using Java**](https://youtube.com/playlist?list=PLsyeobzWxl7oRKwDi7wjrANsbhTX0IK0J) If you’re a Java developer, you may know or at the very least have heard of Tulesko. They provide some of the best easy to understand lessons on Java, Python, and JavaScript. + +- [**Caleb Curry – Data Structures and Algorithms**](https://youtube.com/playlist?list=PL_c9BZzLwBRLpDEpYRFXKBN-2ZCsAx0ps) Another great lesson series on Data structures and algorithms is from the channel Caleb Curry. + +- [**Freecodecamp - Algorithms and Data Structures - Full Course for Beginners from Treehouse**](https://youtu.be/8hly31xKli0) Looking to learn as much as you can about data structures and algorithms? This course essentially covers everything you need on the topic from A-Z. + +- [**Freecodecamp - Data Structures Easy to Advanced Course - Full Tutorial from a Google Engineer**](https://youtu.be/RBSGKlAvoiM) Another from Freecodecamp is the data structure from easy to advanced course. This is an 8-hour course meant to carry learners from the basic to advanced. + +- [**Dinesh Varyani – Data structures and algorithms full course**](https://youtube.com/playlist?list=PL6Zs6LgrJj3tDXv8a_elC6eT_4R5gfX4d) This course focuses on Data structures and algorithms in Java. This doesn’t mean anyone learning other languages like C#, Javascript, C++, Python, and others can’t learn data structures from this course. + +### 📦 GitHub Respositories + +- [**trekhleb/javascript-algorithms**](https://github.com/trekhleb/javascript-algorithms) Algorithms and data structures implemented in JavaScript with explanations and links to further readings + +- [**TheAlgorithms/Javascript**](https://github.com/TheAlgorithms/Javascript) Algorithms implemented in Javascript for beginners, following best practices. + +- [**tayllan/awesome-algorithms**](https://github.com/tayllan/awesome-algorithms) A curated list of awesome places to learn and/or practice algorithms. Inspired by awesome-awesomeness and all the other awesome Awesome libraries. + +- [**thepranaygupta/Data-Structures-and-Algorithms**](https://github.com/thepranaygupta/Data-Structures-and-Algorithms) An Open-Source repository that contains all the Data Structures and Algorithms concepts and their implementation in several ways, programming questions and Interview questions. The main aim of this repository is to help students who are learning Data Structures and Algorithms or preparing for an interview. + +- [**sachuverma/DataStructures-Algorithms**](https://github.com/sachuverma/DataStructures-Algorithms) This repo contains links of resources, theory subjects content and DSA questions & their solution for interview preparation from different websites like geeksforgeeks, leetcode, etc. diff --git a/docs/ebooks.md b/docs/ebooks.md new file mode 100644 index 0000000..6c914e2 --- /dev/null +++ b/docs/ebooks.md @@ -0,0 +1,148 @@ +--- +sidebar_position: 8 +--- + +# Ebooks + +:::info +this page from: [WebRTCGame/JavascriptBooks.md](https://gist.github.com/WebRTCGame/9fa80ed32a7413bd0f8d71304d6335eb) +::: + +A curated collection of awesome & free JavaScript books to help you learn the JavaScript programming language. + +## [You Don’t Know JS (Book Series)](https://github.com/getify/You-Dont-Know-JS) + +**Kyle Simpson** + +_You Don’t Know JS_ is a series of books diving deep into the core mechanisms of the JavaScript language. + +## [Eloquent JavaScript](http://eloquentjavascript.net/) + +**Marijn Haverbeke** + +_Eloquent JavaScript_ intends to make you familiar enough with the JavaScript language to be able to make a computer do what you want. Besides explaining JavaScript, the book also will introduce the basic principles of programming. + +## [Exploring ES6](http://exploringjs.com/es6/) + +**Dr. Axel Rauschmayer** + +_Exploring ES6_ is intended for people already familiar with JavaScript. It covers ECMAScript 6 in depth, but is structured so that you can also quickly get an overview if you want to. It not only tells you how ES6 works, it also tells you why it works the way it does. + +## [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml) + +The _Google JavaScript Style Guide_ holds the style guidelines that Google uses internally for their JavaScript code. + +## [Human JavaScript](http://read.humanjavascript.com/) + +**Henrik Joreteg** + +_Human JavaScript_ is a book about a specific set of tools, patterns, and approaches that the author feels are optimized for people. These approaches enable the team at **&yet**, a small consulting and product company, to quickly build and deliver high-quality JavaScript applications for humans. + +## [JavaScript Allongé](https://leanpub.com/javascriptallongesix/read) + +**Reginald Braithwaite** + +_JavaScript Allongé_ is a first and foremost, a book about programming with functions. It’s written in JavaScript, because JavaScript hits the perfect sweet spot of being both widely used, and of having proper first-class functions with lexical scope. It teaches you how to handle complex code, and it also teaches you how to simplify code without dumbing it down. + +## [JavaScript Enlightenment](http://www.javascriptenlightenment.com/JavaScript_Enlightenment.pdf) + +**Cody Lindley** + +An accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc. + +## [JavaScript for Cats](http://jsforcats.com/) + +**Max Ogden** + +_JavaScript for Cats_ is an introduction to JavaScript for new programmers. + +## [JavaScript plus a dash of jQuery](http://nicholasjohnson.com/javascript-book/) + +**Nicholas Johnson** + +_JavaScript plus a dash of jQuery_ covers the very basics of JavaScript from the ground up. These are the fundamentals that you will need to know to do the fancy schmancy stuff that you’re probably quite keen to get started on. + +## [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) + +**Ivo Wetzel, Zhang Yi Jiang, Tim Ruffles** + +_JavaScript Garden_ is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language. It does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended in order to understand the topics covered in this guide. + +## [JavaScript IRL](http://markdaggett.com/images/ExpertJavaScript-ch6.pdf) + +**Mark Daggett** + +This is not an entire book, but a single chapter from the book _Expert JavaScript_. The bulk of this chapter covers the ways in which you can interact with the world around you using machines that listen to JavaScript. + +## [JavaScript Patterns Collection](http://shichuan.github.io/javascript-patterns/) + +**Shi Chuan** + +_JavaScript Patterns Collection _is a JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns. + +## [JavaScript Spessore](https://leanpub.com/javascript-spessore/read) + +**Reginald Braithwaite** + +In _JavaScript Spessore_, you will learn to implement several different kinds of object-oriented programming language semantics, in JavaScript. It is written for the reader who has read _JavaScript Allongé_ or has equivalent experience with JavaScript, especially as it pertains to functions, closures, and prototypes. + +## [JavaScript: The Right Way](http://jstherightway.org/) + +**William Oliveira and Allan Esquina** + +_JavaScript: The Right Way_ is an easy-to-read, quick reference for JavaScript best practices and accepted coding standards. It is intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. +Despite the name, this guide doesn’t necessarily mean “the only way” to do JavaScript. + +## [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) + +**Addy Osmani** + +_Learning JavaScript Design Patterns_ explores applying both classical and modern design patterns to the JavaScript programming language. It is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Some of the concepts covered (closures, prototypal inheritance) will assume a level of basic prior knowledge and understanding. + +## [Master Space and Time With JavaScript](http://www.noelrappin.com/mstwjs/) + +**Noel Rappin** + +_Master Space and Time With JavaScript_ is a 4 book series that will help you come to to grips with modern JavaScript, including the JavaScript object model, testing, Backbone, and Ember. However, only _Book 1: The Basics_ is available for free. The other 3 books need to be purchased. + +## [Mozilla Developer Network’s JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) + +The JavaScript Guide shows you how to use JavaScript and gives an overview of the language. + +## [Patterns For Large-Scale JavaScript Application Architecture](https://addyosmani.com/largescalejavascript/) + +**Addy Osmani** + +_Patterns For Large-Scale JavaScript Application Architecture_ is based on a talk the author presented at LondonJS. It discusses an effective set of patterns for large-scale JavaScript application architecture. + +## [Programming JavaScript Applications](http://chimera.labs.oreilly.com/books/1234000000262/) + +**Eric Elliott** + +In _Programming JavaScript Applications_, author Eric Elliott shows you how to add client- and server-side features to a large JavaScript application without negatively affecting the rest of your code. + +## [Speaking JavaScript](http://speakingjs.com/es5/) + +**Dr. Axel Rauschmayer** + +_Speaking JavaScript_‘s target audience is programmers who want to learn JavaScript quickly and properly, and JavaScript programmers who want to deepen their skills and/or look up specific topics. It has been written for programmers, by a programmer. You should already know object-oriented programming via a mainstream programming language such as [Java](https://hackerlists.com/free-java-books/), PHP, C++, Python, Ruby, Objective-C, C#, or Perl. + +## [The JavaScript Tutorial](http://javascript.info/) + +**Ilya Kantor** + +HTML5 is great. jQuery is cool. Node.JS is awesome. Base them on the solid, powerful basement of pure JavaScript and you can rock the web! + +## [The Problem with Native JavaScript APIs](http://chimera.labs.oreilly.com/books/1234000001655) + +**Nicholas C. Zakas** + +In _The Problem with Native JavaScript APIs_, Nicholas Zakas—consultant and former front-end tech leader at Yahoo!—provides a case study to show how different browsers can develop native APIs for the same specification and still end up with different interpretations. You’ll discover how these APIs can tie your code to specific browsers, forcing you to upgrade application logic whenever new browsers and new browser versions are released. + +## [Understanding ECMAScript 6](https://leanpub.com/understandinges6/read) + +**Nicholas C. Zakas** + +_Understanding ECMAScript 6_ covers the changes brought about by the most recent major update to the JavaScript programming language: ECMAScript 6. + + \ No newline at end of file diff --git a/docs/free-courses.md b/docs/free-courses.md new file mode 100644 index 0000000..94a64c3 --- /dev/null +++ b/docs/free-courses.md @@ -0,0 +1,76 @@ +--- +sidebar_position: 3 +--- + +# Free Courses + +- [🎥 Javascript Courses](#-javascript-courses) +- [📺 Learn From Youtube](#-learn-from-youtube) +- [🖥️ Websites to Learn JavaScript](#%EF%B8%8F-websites-to-learn-javascript) + +### 🎥 Javascript Courses + +- [**Javascript Essentials**](https://www.udemy.com/course/javascript-essentials/?LSNPUBID=JVFxdTr9V80&ranEAID=JVFxdTr9V80&ranMID=39197&ranSiteID=JVFxdTr9V80-841ZwGpUnfHsS_CzphCw7A&utm_medium=udemyads&utm_source=aff-campaign) [Udemy FREE Couse] + This is a basic course to learn the JavaScript programming language. + +- [**Interactivity with JavaScript**](https://www.coursera.org/learn/javascript) [Coursera FREE Course] This is an awesome free course to learn JavaScript on Coursera. + +- [**CS50’s Web Programming with Python and JavaScript**](https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript?source=aw&awc=6798_1645940418_70289bd49c5398e673aa1165a8834b70&utm_source=aw&utm_medium=affiliate_partner&utm_content=text-link&utm_term=631878_javarevisited) [edX Free] This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Flask, Django, and Bootstrap. + +- [**Advanced and Object-Oriented JavaScript and ES6**](https://www.udemy.com/course/advanced-and-object-oriented-javascript/) [Udemy FREE Couse] This is another excellent free course to learn JavaScript, OOP, and ES6 in Udemy for free. + +- [**JavaScript Basics: Start Coding in 5 Minutes**](https://www.udemy.com/course/javascript-basics-start-coding-in-5-minutes-2019/) [Udemy FREE Couse] This is a massive free course to learn JavaScript completely. The course has more than 56 hours of content and covers everything a JavaScript developer needs to know. + +- [**JavaScript Introduction**](https://www.awin1.com/cread.php?awinmid=6798&awinaffid=631878&clickref=&p=%5B%5Bhttps%3A%2F%2Fwww.edx.org%2Fcourse%2Fjavascript-introduction) [Free Course by edX Team] This is another beginner-level JavaScript course you take online. This is created by w3c and I highly recommend this course to beginners. + +### 📺 Learn From Youtube + +- [**Free Code Camp**](https://www.youtube.com/watch?v=PkZNo7MFNFg&t=90s) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations. + +- [**The Net Ninja**](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) is the UK’s answer to epic programming and web development tutorials. The Net Ninja publishes a range of very insightful and easy to follow guided videos to help you learn quickly. + +- [**Double South**](https://www.youtube.com/channel/UCzroHLKLlfA-hR7S4if6qww) Double South is a YouTube channel by Itsey Sagay, a full stack developer based in Warri, Nigeria. + +- [**Programming with Mosh**](https://www.youtube.com/watch?v=W6NZfCO5SIk) Mosh (Moshfegh) Hamedani is a passionate and pragmatic software engineer with 20 years of experience specializing in web application development with ASP.NET MVC, Web API, Entity Framework, Angular, Backbone, HTML5, and CSS. + +- [**Traversy Media**](https://www.youtube.com/c/TraversyMedia/videos) Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He specializes in everything from HTML5 to front-end frameworks, such as Angular and server-side technologies, such as Node. + +- [**The New Boston**](https://www.youtube.com/watch?v=yQaAGmHNn9s&list=PL46F0A159EC02DF82) This channel provides tutorials in abundance for the following sub-topics – ReactJS, ES6 (ECMA Script), AngularJS, Working with NodeJS, Vanilla JavaScript The creator of this channel, Bucky Roberts is a Full Stack Developer and senior Software Engineer / Programmer, LH Ventures. + +- [**LearnCode.academy**](https://www.youtube.com/c/learncodeacademy/videos) This channel provides tutorials on everything web development, including but not limited to JavaScript. + +- [**Amigoscode**](https://www.youtube.com/c/amigoscode) was created by Nelson, a software engineer who graduated with 1st class honors in Computer Science. In the past few years, he has programmed in various programming languages such as PHP, Python, C# and primarily writes Java and JavaScript, focusing on Distributed Systems hosted on the cloud. + +- [**Academind**](https://www.youtube.com/watch?v=2qDywOS7VAc) offers high-quality programming video courses which helped over one million students worldwide to learn how to code. + +### 🖥️ Websites to Learn JavaScript + +- [**freeCodeCamp.org**](https://www.freecodecamp.org/) freeCodeCamp.org is a 501(c)3 non-profit organisation that can help you learn to code for free, build real-world projects, and prepare for getting your first (or nth) developer job. + +- [**JavaScript 30**](https://javascript30.com/) helps you build things with code. Lots of things. Build 1,000 things. + +- [**CodeMentor**](https://www.codementor.io/) Code Mentor offers a 4-week course to learn JavaScript. Yeah, another impressive site for JavaScript tutorials. + +- [**Educative.io – Learn HTML, CSS, and JavaScript from Scratch**](https://www.educative.io/courses/learn-html-css-javascript-from-scratch) This course is made by Educative. Learn to code and create your own web pages using HTML, CSS, and JavaScript in this interactive web development course for beginners. + +- [**JavaScript.info**](https://javascript.info/) Learn JavaScript from the basics to advanced topics with simple yet detailed explanations. + +- [**Codecademy**](https://www.codecademy.com/) Codecademy is a subscription-based website, with a lot of free courses as well. It offers a wide variety of courses taught by many different instructors. + +- [**Sololearn**](https://www.sololearn.com/home) No matter your experience level, you'll be writing real, functional code while learning with Sololearn. + +- [**TutorialRepublic**](https://www.tutorialrepublic.com/) At tutorial republic you can learn the essentials of web development technologies from basic to advanced topics, along with real life practice examples and useful references. + +- [**Learn Javascript Online**](https://learnjavascript.online/) Created by developers from Google, JavaScript online offers 40 free courses that you can dive into to start learning JS. + +- [**edX**](https://www.edx.org/learn/javascript) edX offers a bunch of free courses, including JavaScript courses that were made by different universities, like Harvard and other prestigious schools. + +- [**Mozilla Developer Network**](https://developer.mozilla.org/) or MDN is more like documentation that developers can read and learn from. + +- [**Code Combat**](https://codecombat.com/) is a platform for students to learn computer science while playing through an actual game. + +- [**Dev Docs**](https://devdocs.io/) is free and open source project that's maintained by freeCodeCamp. + +- [**Coursera**](https://www.coursera.org/in) is a learning website developed by Stanford professors. It is a mix of free and paid online courses, and it’s applicable on all levels – for beginners, juniors and even senior developers. + +- [**JSDoc**](https://jsdoc.app/) JSDoc is an open source project that has tons of info about JavaScript. On this website, you is a bunch of documentation about JavaScript. diff --git a/docs/frontend.md b/docs/frontend.md new file mode 100644 index 0000000..d763c2f --- /dev/null +++ b/docs/frontend.md @@ -0,0 +1,1057 @@ +--- +sidebar_position: 13 +--- + +# Frontend + +:::info +this page from: [sorrycc](https://github.com/sorrycc) +::: +A collection of awesome browser-side [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) libraries, resources and shiny things. + +- [Awesome JavaScript](#awesome-javascript) + - [Package Managers](#package-managers) + - [Component management](#component-management) + - [Loaders](#loaders) + - [Bundlers](#bundlers) + - [Type Checkers](#type-checkers) + - [Testing Frameworks](#testing-frameworks) + - [QA Tools](#qa-tools) + - [MVC Frameworks and Libraries](#mvc-frameworks-and-libraries) + - [Node-Powered CMS Frameworks](#node-powered-cms-frameworks) + - [Templating Engines](#templating-engines) + - [Articles/Posts](#articles-and-posts) + - [Data Visualization](#data-visualization) + - [Timeline](#timeline) + - [Spreadsheet](#spreadsheet) + - [Editors](#editors) + - [Documentation](#documentation) + - Utilities + - [Files](#files) + - [Functional Programming](#functional-programming) + - [Reactive Programming](#reactive-programming) + - [Data Structure](#data-structure) + - [Date](#date) + - [String](#string) + - [Number](#number) + - [Storage](#storage) + - [Color](#color) + - [I18n And L10n](#i18n-and-l10n) + - [Control Flow](#control-flow) + - [Routing](#routing) + - [Security](#security) + - [Log](#log) + - [RegExp](#regexp) + - [Media](#videoaudio) + - [Voice Command](#voice-command) + - [API](#api) + - [Streaming](#streaming) + - [Vision Detection](#vision-detection) + - [Browser Detection](#browser-detection) + - [Operating System](#operating-system) + - [Benchmark](#benchmark) + - [Machine Learning](#machine-learning) + - UI + - [Code Highlighting](#code-highlighting) + - [Loading Status](#loading-status) + - [Validation](#validation) + - [Keyboard Wrappers](#keyboard-wrappers) + - [Tours And Guides](#tours-and-guides) + - [Notifications](#notifications) + - [Sliders](#sliders) + - [Range Sliders](#range-sliders) + - [Form Widgets](#form-widgets) + - [Tips](#tips) + - [Modals and Popups](#modals-and-popups) + - [Scroll](#scroll) + - [Menu](#menu) + - [Table/Grid](#tablegrid) + - [Frameworks](#frameworks-1) + - [Boilerplates](#boilerplates) + - [Image](#image) + - [Gesture](#gesture) + - [Maps](#maps) + - [Typography](#typography) + - [Animations](#animations) + - [Image processing](#image-processing) + - [ES6](#es6) + - [Generators](#generators) + - [Full Text Search](#full-text-search) + - [SDK](#sdk) + - [Misc](#misc) + - [Podcasts](#podcasts) +- [Worth Reading](#worth-reading) +- [Other Awesome Lists](#other-awesome-lists) +- [Contributing](#contributing) + +--- + +## Package Managers + +_Host the JavaScript libraries and provide tools for fetching and packaging them._ + +- [npm](https://www.npmjs.com/) - npm is the package manager for JavaScript. +- [Bower](https://github.com/bower/bower) - A package manager for the web. +- [component](https://github.com/componentjs/component) - Client package management for building better web applications. +- [spm](https://github.com/spmjs/spm) - Brand new static package manager. +- [jam](https://github.com/caolan/jam) - A package manager using a browser-focused and RequireJS compatible repository. +- [jspm](https://github.com/jspm/jspm-cli) - Frictionless browser package management. +- [Ender](https://github.com/ender-js/Ender) - The no-library library. +- [volo](https://github.com/volojs/volo) - Create front end projects from templates, add dependencies, and automate the resulting projects. +- [Duo](https://github.com/duojs/duo) - Next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless. +- [yarn](https://yarnpkg.com/) - Fast, reliable, and secure dependency management. +- [pnpm](https://pnpm.io/) - Fast, disk space efficient package manager. + +## Component Management + +- [Bit](https://github.com/teambit/bit) - Create, find and reuse components (React, Angular, Node etc.) across applications. + +## Loaders + +_Module or loading system for JavaScript._ + +- [RequireJS](https://github.com/requirejs/requirejs) - A file and module loader for JavaScript. +- [browserify](https://github.com/substack/node-browserify) - Browser-side require() the node.js way. +- [SeaJS](https://github.com/seajs/seajs) - A Module Loader for the Web. +- [HeadJS](https://github.com/headjs/headjs) - The only script in your HEAD. +- [curl](https://github.com/cujojs/curl) - A small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts. +- [lazyload](https://github.com/rgrove/lazyload/) - Tiny, dependency-free async JavaScript and CSS loader. +- [script.js](https://github.com/ded/script.js) - Asynchronous JavaScript loader and dependency manager. +- [systemjs](https://github.com/systemjs/systemjs) - AMD, CJS & ES6 spec-compliant module loader. +- [LodJS](https://github.com/yanhaijing/lodjs) - Module loader based on AMD. +- [ESL](https://github.com/ecomfe/esl) - Module loader browser first, support lazy define and AMD. +- [modulejs](https://github.com/lrsjng/modulejs) - Lightweight JavaScript module system. + +## Bundlers + +- [webpack](https://github.com/webpack/webpack) - Packs CommonJs/AMD modules for the browser. +- [Rollup](https://github.com/rollup/rollup) - Next-generation ES6 module bundler. +- [Brunch](https://github.com/brunch/brunch) - Fast front-end web app build tool with simple declarative config. +- [Parcel](https://github.com/parcel-bundler/parcel) - Blazing fast, zero configuration web application bundler. +- [Microbundle](https://github.com/developit/microbundle) - Zero-configuration bundler for tiny modules. +- [FuseBox](https://github.com/fuse-box/fuse-box) - A bundler that does it right +- [Snowpack](https://www.snowpack.dev/) - A lightning-fast frontend build tool, designed for the modern web. + +## Type Checkers + +- [TypeScript](https://www.typescriptlang.org/) - A typed superset of JavaScript that compiles to plain JavaScript. +- [Flow.js](https://flow.org/en/) - A static type checker for JavaScript from Facebook. +- [Hegel](https://hegel.js.org/) - A static type checker for JavaScript with a bias on type inference an strong type system. +- [TypL](https://github.com/getify/TypL) - the JavaScript Type Linter with a bias on type inference. +- [Hindley Milner Definitions](https://github.com/xodio/hm-def) - runtime type checking for JavaScript functions using Haskell-alike Hindley Milner type signatures. + +## Testing Frameworks + +### Frameworks + +- [mocha](https://github.com/mochajs/mocha) - Simple, flexible, fun JavaScript test framework for node.js & the browser. +- [jasmine](https://github.com/jasmine/jasmine) - DOM-less simple JavaScript testing framework. +- [qunit](https://github.com/jquery/qunit) - An easy-to-use JavaScript Unit Testing framework. +- [jest](https://github.com/facebook/jest) - Painless JavaScript Unit Testing. +- [prova](https://github.com/azer/prova) - Node & Browser test runner based on Tape and Browserify +- [DalekJS](https://github.com/dalekjs/dalek) - Automated cross browser functional testing with JavaScript +- [Protractor](https://github.com/angular/protractor) - Protractor is an end-to-end test framework for AngularJS applications. +- [tape](https://github.com/substack/tape) - Tap-producing test harness for node and browsers. +- [TestCafe](https://github.com/DevExpress/testcafe) - Automated browser testing for the modern web development stack. +- [ava](https://github.com/avajs/ava) - 🚀 Futuristic JavaScript test runner +- [Cypress](https://www.cypress.io/) - Complete end-to-end testing framework for anything that runs in a browser and beyond. + +### Assertion + +- [chai](https://github.com/chaijs/chai) - BDD / TDD assertion framework for node.js and the browser that can be paired with any testing framework. +- [Enzyme](https://airbnb.io/enzyme/index.html) - Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. +- [react testing library](https://github.com/kentcdodds/react-testing-library) - Simple and complete React DOM testing utilities that encourage good testing practices. +- [Sinon.JS](https://github.com/sinonjs/sinon) - Test spies, stubs, and mocks for JavaScript. +- [expect.js](https://github.com/Automattic/expect.js) - Minimalistic BDD-style assertions for Node.JS and the browser. +- [proxyquire](https://github.com/thlorenz/proxyquire) - Stub nodejs's require. + +### Coverage + +- [istanbul](https://github.com/gotwarlost/istanbul) - Yet another JS code coverage tool. +- [blanket](https://github.com/alex-seville/blanket) - A simple code coverage library for JavaScript. Designed to be easy to install and use, for both browser and nodejs. +- [JSCover](https://github.com/tntim96/JSCover) - JSCover is a tool that measures code coverage for JavaScript programs. + +### Runner + +- [phantomjs](https://github.com/ariya/phantomjs) - Scriptable Headless WebKit. +- [slimerjs](https://github.com/laurentj/slimerjs) - A PhantomJS-like tool running Gecko. +- [casperjs](https://github.com/casperjs/casperjs) - Navigation scripting & testing utility for PhantomJS and SlimerJS. +- [zombie](https://github.com/assaf/zombie) - Insanely fast, full-stack, headless browser testing using node.js. +- [totoro](https://github.com/totorojs/totoro) - A simple and stable cross-browser testing tool. +- [karma](https://github.com/karma-runner/karma) - Spectacular Test Runner for JavaScript. +- [nightwatch](https://github.com/nightwatchjs/nightwatch) - UI automated testing framework based on node.js and selenium webdriver. +- [intern](https://github.com/theintern/intern) - A next-generation code testing stack for JavaScript. +- [yolpo](http://www.yolpo.com) - A statement-by-statement JavaScript interpreter in the browser. +- [puppeteer](https://github.com/GoogleChrome/puppeteer) - Headless Chrome Node.js API by official Google Chrome team. +- [webdriverio](https://github.com/webdriverio/webdriverio) - Next-gen WebDriver test automation framework for Node.js. +- [taiko](https://github.com/getgauge/taiko) - A Node.js library with a simple API to automate Chromium based browsers. +- [Playwright](https://github.com/microsoft/playwright) - Node.js library to automate Chromium, Firefox and WebKit with a single API. + +## QA Tools + +- [prettier](https://github.com/prettier/prettier) - Prettier is an opinionated code formatter. +- [JSHint](https://github.com/jshint/jshint/) - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code. +- [jscs](https://github.com/jscs-dev/node-jscs) - JavaScript Code Style checker. +- [jsfmt](https://github.com/rdio/jsfmt) - For formatting, searching, and rewriting JavaScript. +- [jsinspect](https://github.com/danielstjules/jsinspect) - Detect copy-pasted and structurally similar code. +- [buddy.js](https://github.com/danielstjules/buddy.js) - Magic number detection for JavaScript. +- [ESLint](https://github.com/eslint/eslint) - A fully pluggable tool for identifying and reporting on patterns in JavaScript. +- [JSLint](https://github.com/douglascrockford/JSLint) - High-standards, strict & opinionated code quality tool, aiming to keep only good parts of the language. +- [JavaScript Standard Style](https://github.com/feross/standard) - Opinionated, no-configuration style guide, style checker, and formatter +- [Pre-evaluate code at buildtime](https://github.com/kentcdodds/preval.macro) - Pre-evaluate your front end javascript code at build-time +- [JS-Beautifier](https://github.com/beautify-web/js-beautify) - Npm cli and library to format JS code. +- [husky](https://github.com/typicode/husky) - Prevents bad git commit, git push and more. + +## MVC Frameworks and Libraries + +- [angular.js](https://github.com/angular/angular.js) - HTML enhanced for web apps. (deprecated) +- [angular](https://github.com/angular/angular) - Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages. +- [aurelia](http://aurelia.io) - A JavaScript client framework for mobile, desktop and web. +- [backbone](https://github.com/jashkenas/backbone) - Give your JS App some Backbone with Models, Views, Collections, and Events. +- [ember.js](https://github.com/emberjs/ember.js) - A JavaScript framework for creating ambitious web applications. +- [meteor](https://github.com/meteor/meteor) - An ultra-simple, database-everywhere, data-on-the-wire, pure-javascript web framework. +- [ractive](https://github.com/ractivejs/ractive) - Next-generation DOM manipulation. +- [vue](https://github.com/vuejs/vue) - Intuitive, fast & composable MVVM for building interactive interfaces. +- [svelte](https://github.com/sveltejs/svelte) - Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM. +- [knockout](https://github.com/knockout/knockout) - Knockout makes it easier to create rich, responsive UIs with JavaScript. +- [spine](https://github.com/spine/spine) - Lightweight MVC library for building JavaScript applications. +- [espresso.js](https://github.com/techlayer/espresso.js) - A minimal JavaScript library for crafting user interfaces. +- [canjs](https://github.com/canjs/canjs) - Can do JS, better, faster, easier. +- [react](https://reactjs.org/) - A library for building user interfaces. It's declarative, efficient, and extremely flexible. Works with a Virtual DOM. +- [hyperapp](https://github.com/hyperapp/hyperapp) - 1kb JavaScript library for building frontend applications. +- [preact](https://github.com/developit/preact) - Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. +- [nativescript](https://github.com/NativeScript/NativeScript) - Build truly native cross-platform iOS and Android apps with JavaScript. +- [react-native](https://github.com/facebook/react-native) - A framework for building native apps with React. +- [riot](https://github.com/riot/riot) - React-like library, but with very small size. +- [thorax](https://github.com/walmartlabs/thorax) - Strengthening your Backbone. +- [chaplin](https://github.com/chaplinjs/chaplin) - An architecture for JavaScript applications using the Backbone.js library. +- [marionette](https://github.com/marionettejs/backbone.marionette) - A composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. +- [ripple](https://github.com/ripplejs/ripple) - A tiny foundation for building reactive views. +- [rivets](https://github.com/mikeric/rivets) - Lightweight and powerful data binding + templating solution. +- [derby](https://github.com/derbyjs/derby) - MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers. + - [derby-awesome](https://github.com/russll/awesome-derby) - A collection of awesome derby components +- [way.js](https://github.com/gwendall/way.js) - Simple, lightweight, persistent two-way databinding. +- [mithril.js](https://github.com/lhorie/mithril.js) - Mithril is a client-side MVC framework (Light-weight, Robust, Fast). +- [jsblocks](https://github.com/astoilkov/jsblocks) - jsblocks is better MV-ish framework. +- [LiquidLava](http://www.lava-framework.com/) - Transparent MVC framework for building user interfaces. +- [feathers](https://github.com/feathersjs/feathers) - A minimalist real-time JavaScript framework for tomorrow's apps. +- [Keo](https://github.com/Wildhoney/Keo) - Functional stateless React components with Shadow DOM support. +- [atvjs](https://github.com/emadalam/atvjs) - Blazing fast Apple TV application development using pure JavaScript. +- [Alpine.js](https://github.com/alpinejs/alpine) - offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. +- [inferno](https://github.com/infernojs/inferno) - 🔥 An extremely fast, React-like JavaScript library for building modern user interfaces. +- [FoalTS](https://foalts.org) - Elegant and all-inclusive Node.JS framework for building web applications (TypeScript). +- [Lucia](https://github.com/aidenybai/lucia) - 3kb library for tiny web apps. +- [Adonis](https://github.com/adonisjs/core) - The Node.js Framework highly focused on developer ergonomics, stability and confidence. +- [GrapesJS](https://github.com/artf/grapesjs) - Free and Open source Web Builder Framework. Next generation tool for building templates without coding. +- [Rete.js](https://github.com/retejs/rete) - A modular framework for visual programming allows to create node based editor in browser. +- [litegraph.js](https://github.com/jagenjo/litegraph.js) - A graph node engine and editor similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. +- [Drawflow](https://github.com/jerosoler/Drawflow) - This allow you to create data flows easily and quickly. +- [Blockly](https://github.com/google/blockly) - A library that adds a visual code editor to web and mobile apps by Google. +- [Million](https://github.com/aidenybai/million) - <1kb compiler-focused virtual DOM. It's fast! + +## Node-Powered CMS Frameworks + +- [KeystoneJS](https://github.com/keystonejs/keystone) - powerful CMS and web app framework. +- [Reaction Commerce](https://github.com/reactioncommerce/reaction) - reactive CMS, real-time architecture and design. +- [Ghost](https://github.com/tryghost/Ghost) - simple, powerful publishing platform. +- [Apostrophe](https://github.com/punkave/apostrophe) - CMS with content editing and essential services. +- [We.js](https://github.com/wejs/we/) - framework for real time apps, sites or blogs. +- [Hatch.js](https://github.com/inventures/hatchjs) - CMS platform with social features. +- [TaracotJS](https://github.com/xtremespb/taracotjs-generator/) - fast and minimalist CMS based on Node.js. +- [Nodizecms](https://github.com/nodize/nodizecms) - CMS for CoffeeScript lovers. +- [Cody](https://github.com/jcoppieters/cody) - CMS with WSYWYG editor. +- [PencilBlue](https://github.com/pencilblue/pencilblue/) - CMS and blogging platform. +- [Strapi](https://github.com/strapi/strapi) - Open source Node.js Headless CMS to easily build customisable APIs. +- [Factor](https://github.com/fiction-com/factor) - The Javascript CMS + +## Templating Engines + +_Templating engines allow you to perform string interpolation._ + +- [mustache.js](https://github.com/janl/mustache.js) - Minimal templating with {{mustaches}} in JavaScript. +- [handlebars.js](https://github.com/handlebars-lang/handlebars.js) - An extension to the Mustache templating language. +- [nunjucks](https://mozilla.github.io/nunjucks/) - A rich and powerful templating language for JavaScript from Mozilla. +- [hogan.js](https://github.com/twitter/hogan.js) - A compiler for the Mustache templating language. +- [doT](https://github.com/olado/doT) - The fastest + concise JavaScript template engine for nodejs and browsers. +- [dustjs](https://github.com/linkedin/dustjs/) - Asynchronous templates for the browser and node.js. +- [eco](https://github.com/sstephenson/eco/) - Embedded CoffeeScript templates. +- [JavaScript-Templates](https://github.com/blueimp/JavaScript-Templates) - < 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. +- [t.js](https://github.com/jasonmoo/t.js) - A tiny JavaScript templating framework in ~400 bytes gzipped. +- [Pug](https://github.com/pugjs/pug) - Robust, elegant, feature rich template engine for nodejs. (formerly known as Jade) +- [EJS](https://github.com/mde/ejs) - Effective JavaScript templating. +- [xtemplate](https://github.com/xtemplate/xtemplate) - eXtensible Template Engine lib for node and the browser +- [marko](https://github.com/marko-js/marko) - A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags and CommonJS modules as compiled output. +- [swig](https://github.com/paularmstrong/swig) - (Archived) A simple, powerful, and extendable Node.js and browser-based JavaScript template engine. + +## Articles and Posts + +- [The JavaScript that you should know](https://medium.com/@pedropolisenso/o-javasscript-que-voc%C3%AA-deveria-conhecer-b70e94d1d706) - Article about concepts of JavaScript Functional. +- [How JavaScript works](https://blog.sessionstack.com/tagged/tutorial) - A series of articles about the building blocks of JavaScript. +- [Multi-threading using web-workers](https://www.loginradius.com/blog/async/adding-multi-threading-to-javascript-using-web-workers/) - Web Workers: Adding Multi-threading to JavaScript +- [this keyword in JavaScript](https://www.loginradius.com/blog/async/breaking-down-this-keyword-in-javascript/) - Breaking down the 'this' keyword in JavaScript + +## Data Visualization + +_Data visualization tools for the web._ + +- [d3](https://github.com/d3/d3) - A JavaScript visualization library for HTML and SVG. +- [metrics-graphics](https://github.com/mozilla/metrics-graphics) - A library optimized for concise, principled data graphics and layouts. +- [three.js](https://github.com/mrdoob/three.js) - JavaScript 3D library. +- [Chart.js](https://github.com/chartjs/Chart.js) - Simple HTML5 Charts using the <canvas> tag. +- [paper.js](https://github.com/paperjs/paper.js) - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. +- [fabric.js](https://github.com/kangax/fabric.js) - JavaScript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. +- [peity](https://github.com/benpickles/peity) - Progressive svg bar, line and pie charts. +- [raphael](https://github.com/DmitryBaranovskiy/raphael) - JavaScript Vector Library. +- [echarts](https://github.com/apache/echarts) - Enterprise Charts. +- [visjs](https://github.com/visjs) - Multiple Libraries for dynamic, browser-based data visualization. +- [two.js](https://github.com/jonobr1/two.js) - A renderer agnostic two-dimensional drawing api for the web. +- [g.raphael](https://github.com/DmitryBaranovskiy/g.raphael) - Charts for Raphaël. +- [sigma.js](https://github.com/jacomyal/sigma.js) - A JavaScript library dedicated to graph drawing. +- [arbor](https://github.com/samizdatco/arbor) - A graph visualization library using web workers and jQuery. +- [cubism](https://github.com/square/cubism) - A D3 plugin for visualizing time series. +- [dc.js](https://github.com/dc-js/dc.js) - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js +- [vega](https://github.com/trifacta/vega) - A visualization grammar. +- [processing.js](http://processingjs.org/) - Processing.js makes your data visualizations work using web standards and without any plug-ins. +- [envisionjs](https://github.com/HumbleSoftware/envisionjs) - Dynamic HTML5 visualization. +- [rickshaw](https://github.com/shutterstock/rickshaw) - JavaScript toolkit for creating interactive real-time graphs. +- [flot](https://github.com/flot/flot) - Attractive JavaScript charts for jQuery. +- [morris.js](https://github.com/morrisjs/morris.js) - Pretty time-series line graphs. +- [nvd3](https://github.com/novus/nvd3) - Build re-usable charts and chart components for d3.js. +- [svg.js](https://github.com/wout/svg.js) - A lightweight library for manipulating and animating SVG. +- [heatmap.js](https://github.com/pa7/heatmap.js) - JavaScript Library for HTML5 canvas based heatmaps. +- [jquery.sparkline](https://github.com/gwatts/jquery.sparkline) - A plugin for the jQuery JavaScript library to generate small sparkline charts directly in the browser. +- [trianglify](https://github.com/qrohlf/trianglify) - Low poly style background generator with d3.js. +- [d3-cloud](https://github.com/jasondavies/d3-cloud) - Create word clouds in JavaScript. +- [d4](https://github.com/heavysixer/d4) - A friendly reusable charts DSL for D3. +- [dimple.js](http://dimplejs.org) - Easy charts for business analytics powered by d3. +- [chartist-js](https://github.com/gionkunz/chartist-js) - Simple responsive charts. +- [epoch](https://github.com/epochjs/epoch) - A general purpose real-time charting library. +- [c3](https://github.com/c3js/c3) - D3-based reusable chart library. +- [BabylonJS](https://github.com/BabylonJS/Babylon.js) - A framework for building 3D games with HTML 5 and WebGL. +- [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. +- [GraphicsJS](https://github.com/AnyChart/GraphicsJS) - A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. +- [mxGraph](https://github.com/jgraph/mxgraph) - Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. +- [Frappe Charts](https://github.com/frappe/charts) - GitHub-inspired simple and modern SVG charts for the web with zero dependencies. +- [Frappe Gantt](https://github.com/frappe/gantt) - A simple, interactive, modern gantt chart library for the web. +- [G2](https://github.com/antvis/G2) - A highly interactive data-driven visualization grammar for statistical charts. +- [G2Plot](https://github.com/antvis/G2Plot) - An interactive and responsive charting library. Based on the grammar of graphics. +- [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) - A fully featured graph theory library. +- [cola.js](https://ialab.it.monash.edu/webcola/) - library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques +- [jointjs](https://github.com/clientIO/joint) - Diagramming library to create static diagrams or fully interactive diagramming tools. +- [vizzu](https://github.com/vizzuhq/vizzu-lib) - Library for animated data visualizations and data stories. + +There're also some great commercial libraries, like [amchart](https://www.amcharts.com/), [anychart](https://www.anychart.com/), [plotly](https://plotly.com/), [highchart](https://www.highcharts.com/), and [lightning chart](https://www.arction.com/lightningchart-js/). + +## Timeline + +- [TimelineJS v3](https://github.com/NUKnightLab/TimelineJS3) - A Storytelling Timeline built in JavaScript. +- [timesheet.js](https://github.com/sbstjn/timesheet.js) - JavaScript library for simple HTML5 & CSS3 time sheets. + +## Spreadsheet + +- [HANDSONTABLE](https://github.com/handsontable/handsontable) - Handsontable is a JavaScript/HTML5 Spreadsheet Library for Developers +- [Frappe Datatable](https://github.com/frappe/datatable) - Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. +- [Luckysheet](https://github.com/mengshukeji/Luckysheet) - Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. + +## Editors + +- [ace](https://github.com/ajaxorg/ace) - Ace (Ajax.org Cloud9 Editor). +- [CodeMirror](https://github.com/codemirror/CodeMirror) - In-browser code editor. +- [esprima](https://github.com/ariya/esprima) - ECMAScript parsing infrastructure for multipurpose analysis. +- [quill](https://github.com/quilljs/quill) - A cross browser rich text editor with an API. +- [medium-editor](https://github.com/yabwe/medium-editor) - Medium.com WYSIWYG editor clone. +- [pen](https://github.com/sofish/pen) - enjoy live editing (+markdown). +- [jquery-notebook](https://github.com/raphaelcruzeiro/jquery-notebook) - A simple, clean and elegant text editor. Inspired by the awesomeness of Medium. +- [bootstrap-wysiwyg](https://github.com/mindmup/bootstrap-wysiwyg) - Tiny bootstrap-compatible WYSIWYG rich text editor. +- [ckeditor-releases](https://github.com/ckeditor/ckeditor-releases) - The best web text editor for everyone. +- [editor](https://github.com/lepture/editor) - A markdown editor. still on development. +- [EpicEditor](https://github.com/OscarGodson/EpicEditor) - An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. +- [jsoneditor](https://github.com/josdejong/jsoneditor) - A web-based tool to view, edit and format JSON. +- [vim.js](https://github.com/coolwanglu/vim.js) - JavaScript port of Vim with a persistent `~/.vimrc`. +- [Squire](https://github.com/neilj/Squire) - HTML5 rich text editor. +- [TinyMCE](https://github.com/tinymce/tinymce) - The JavaScript Rich Text editor. +- [trix](https://github.com/basecamp/trix) - A rich text editor for everyday writing. By Basecamp. +- [Trumbowyg](https://github.com/Alex-D/Trumbowyg) - A lightweight and amazing WYSIWYG JavaScript editor. +- [Draft.js](https://github.com/facebook/draft-js) - A React framework for building text editors. +- [bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5) - Simple, beautiful wysiwyg editor +- [wysihtml5](https://github.com/xing/wysihtml5) - Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. +- [raptor-editor](https://github.com/PANmedia/raptor-editor) - Raptor, an HTML5 WYSIWYG content editor! +- [popline](https://github.com/kenshin54/popline) - Popline is an HTML5 Rich-Text-Editor Toolbar. +- [Summernote](https://github.com/summernote/summernote) - Super simple WYSIWYG editor. + +## Documentation + +- [DevDocs](https://devdocs.io/) is an all-in-one API documentation reader with a fast, organized, and consistent interface. +- [dexy](http://www.dexy.it/) is a free-form literate documentation tool for writing any kind of technical document incorporating code. +- [docco](http://ashkenas.com/docco/) is a quick-and-dirty, hundred-line-long, literate-programming-style documentation generator. +- [styledocco](http://jacobrask.github.io/styledocco/) generates documentation and style guide documents from your stylesheets. +- [Ronn](https://github.com/rtomayko/ronn) builds manuals. It converts simple, human readable textfiles to roff for terminal display, and also to HTML for the web. +- [dox](https://github.com/tj/dox) is a JavaScript documentation generator written with node. Dox no longer generates an opinionated structure or style for your docs, it simply gives you a JSON representation, allowing you to use markdown and JSDoc-style tags. +- [jsdox](https://github.com/sutoiku/jsdox) is a JSDoc3 to Markdown documentation generator. +- [ESDoc](https://github.com/esdoc/esdoc) is a good documentation generator for JavaScript. +- [YUIDoc](http://yui.github.io/yuidoc/) is a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen. +- [coddoc](http://doug-martin.github.io/coddoc/) is a jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers through the use of coddoc.addTagHandler and coddoc.addCodeHandler. coddoc also parses source code to be used in APIs. +- [sphinx](http://www.sphinx-doc.org/) a tool that makes it easy to create intelligent and beautiful documentation +- [Using JSDoc](http://usejsdoc.org/) +- [Beautiful docs](https://github.com/beautiful-docs/beautiful-docs) is a documentation viewer based on markdown files. +- [documentation.js](http://documentation.js.org) - API documentation generator with support for ES2015+ and flow annotation. +- [jsduck](https://github.com/senchalabs/jsduck) - API documentation generator made for Sencha JavaScript frameworks, but can be used for other frameworks too. +- [codecrumbs](https://github.com/Bogdan-Lyashenko/codecrumbs) is a visual tool for learning and documenting a codebase by putting breadcrumbs in source code. + +## Files + +_Libraries for working with files._ + +- [Papa Parse](https://github.com/mholt/PapaParse) - A powerful CSV library that supports parsing CSV files/strings and also exporting to CSV. +- [jBinary](https://github.com/jDataView/jBinary) - High-level I/O (loading, parsing, manipulating, serializing, saving) for binary files with declarative syntax for describing file types and data structures. +- [diff2html](https://github.com/rtfpessoa/diff2html) - Git diff output parser and pretty HTML generator. +- [jsPDF](https://github.com/MrRio/jsPDF) - JavaScript PDF generation. +- [PDF.js](https://github.com/mozilla/pdf.js) - PDF Reader in JavaScript. + +## Functional Programming + +_Functional programming libraries to extend JavaScript’s capabilities._ + +- [underscore](https://github.com/jashkenas/underscore) - JavaScript's utility \_ belt. +- [lodash](https://github.com/lodash/lodash) - A utility library delivering consistency, customization, performance, & extras. +- [Sugar](https://github.com/andrewplummer/Sugar) - A JavaScript library for working with native objects. +- [lazy.js](https://github.com/dtao/lazy.js) - Like Underscore, but lazier. +- [ramda](https://github.com/CrossEye/ramda) - A practical functional library for JavaScript programmers. +- [mout](https://github.com/mout/mout) - Modular JavaScript Utilities. +- [mesh](https://github.com/crcn/mesh.js) - Streamable data synchronization utility. +- [preludejs](https://github.com/alanrsoares/prelude-js) - Hardcore Functional Programming for JavaScript. +- [rambda](https://github.com/selfrefactor/rambda) - Faster and smaller alternative to _Ramda_. +- [fxts](https://github.com/marpple/FxTS) - Lazy evaluation and concurrency. + +## Reactive Programming + +_Reactive programming libraries to extend JavaScript’s capabilities._ + +- [RxJS](https://github.com/ReactiveX/rxjs) - A reactive programming library for JavaScript. +- [Bacon](https://github.com/baconjs/bacon.js) - FRP (functional reactive programming) library for JavaScript. +- [Kefir](https://github.com/pozadi/kefir) - FRP library for JavaScript inspired by Bacon.js and RxJS with focus on high performance and low memory consumption. +- [Highland](https://caolan.github.io/highland/) - Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams. +- [Most.js](https://github.com/cujojs/most) - high performance FRP library. +- [MobX](https://github.com/mobxjs/mobx) - TFRP library for simple, scalable state management. +- [Cycle.js](https://cycle.js.org) - A functional and reactive JavaScript library for cleaner code. +- [concent](https://github.com/concentjs/concent) - Definitely the ❤️ simplest but ⚡️ strongest state management for react, it is predictable、progressive and efficient. + +## Data Structure + +_Data structure libraries to build a more sophisticated application._ + +- [immutable-js](https://github.com/facebook/immutable-js) - Immutable Data Collections including Sequence, Range, Repeat, Map, OrderedMap, Set and a sparse Vector. +- [mori](https://github.com/swannodette/mori) - A library for using ClojureScript's persistent data structures and supporting API from the comfort of vanilla JavaScript. +- [buckets](https://github.com/mauriciosantos/Buckets-JS) - A complete, fully tested and documented data structure library written in JavaScript. +- [hashmap](https://github.com/flesler/hashmap) - Simple hashmap implementation that supports any kind of keys. +- [ngraph.graph](https://github.com/anvaka/ngraph.graph) - Graph data structure in javascript. + +## Date + +_Date Libraries._ + +- [moment](https://github.com/moment/moment) - Parse, validate, manipulate, and display dates in JavaScript. +- [moment-timezone](https://github.com/moment/moment-timezone) - Timezone support for moment.js. +- [jquery-timeago](https://github.com/rmm5t/jquery-timeago) - A jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago"). +- [timezone-js](https://github.com/mde/timezone-js) - Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data. +- [date](https://github.com/MatthewMueller/date) - Date() for humans. +- [ms.js](https://github.com/rauchg/ms.js) - Tiny millisecond conversion utility. +- [countdown.js](https://github.com/gumroad/countdown.js) - Super simple countdowns. +- [timeago.js](https://github.com/hustcc/timeago.js) - Simple library (less then 2kb) used to format date with `*** time ago` statement. +- [fecha](https://github.com/taylorhakes/fecha) - Lightweight date formatting and parsing (~2KB). Meant to replace parsing and formatting functionality of moment.js. +- [date-fns](https://github.com/date-fns/date-fns) - Modern JavaScript date utility library. +- [map-countdown](https://github.com/dawidjaniga/map-countdown) - A browser countdown built on top of the Google Maps. +- [dayjs](https://github.com/iamkun/dayjs) - Day.js 2KB immutable date library alternative to Moment.js with the same modern API. +- [luxon](https://github.com/moment/luxon) - Luxon is a library for working with dates and times in JavaScript. + +## String + +_String Libraries._ + +- [voca](https://github.com/panzerdp/voca) - The ultimate JavaScript string library +- [selecting](https://github.com/EvandroLG/selecting) - A library that allows you to access the text selected by the user. +- [underscore.string](https://github.com/epeli/underscore.string) - String manipulation extensions for Underscore.js JavaScript library. +- [string.js](https://github.com/jprichardson/string.js) - Extra JavaScript string methods. +- [he](https://github.com/mathiasbynens/he) - A robust HTML entity encoder/decoder written in JavaScript. +- [multiline](https://github.com/sindresorhus/multiline) - Multiline strings in JavaScript. +- [query-string](https://github.com/sindresorhus/query-string) - Parse and stringify URL query strings. +- [URI.js](https://github.com/medialize/URI.js/) - JavaScript URL mutation library. +- [jsurl](https://github.com/Mikhus/domurl) - Lightweight URL manipulation with JavaScript. +- [sprintf.js](https://github.com/alexei/sprintf.js) - A sprintf implementation. +- [url-pattern](https://github.com/snd/url-pattern) - Easier than regex string matching patterns for urls and other strings. Turn strings into data or data into strings. +- [plexis](https://github.com/plexis-js/plexis) - Lo-fi, powerful, community-driven string manipulation library. + +## Number + +- [Numeral-js](https://github.com/adamwdraper/Numeral-js) - A JavaScript library for formatting and manipulating numbers. +- [chance.js](https://github.com/chancejs/chancejs) - Random generator helper in JavaScript. Can generate numbers, strings etc. +- [odometer](https://github.com/HubSpot/odometer) - Smoothly transitions numbers with ease. +- [accounting.js](https://github.com/josscrowcroft/accounting.js) - A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies. +- [money.js](https://github.com/josscrowcroft/money.js) - A tiny (1kb) JavaScript currency conversion library, for web & nodeJS. +- [Fraction.js](https://github.com/infusion/Fraction.js) - A rational number library for JavaScript. +- [Complex.js](https://github.com/infusion/Complex.js) - A complex number library for JavaScript. +- [Polynomial.js](https://github.com/infusion/Polynomial.js) - A polynomials library for JavaScript. +- [Quaternion.js](https://github.com/infusion/Quaternion.js) - A quaternion library for JavaScript + +## Storage + +- [store.js](https://github.com/marcuswestin/store.js) - LocalStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood. +- [localForage](https://github.com/mozilla/localForage) - Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. +- [jStorage](https://github.com/andris9/jStorage) - jStorage is a simple key/value database to store data on browser side. +- [cross-storage](https://github.com/zendesk/cross-storage) - Cross domain local storage, with permissions. +- [basket.js](https://github.com/addyosmani/basket.js) - A script and resource loader for caching & loading scripts with localStorage. +- [bag.js](https://github.com/nodeca/bag.js) - A caching script and resource loader, similar to basket.js, but with additional k/v interface and localStorage / websql / indexedDB support. +- [basil.js](https://github.com/Wisembly/basil.js) - The missing JavaScript smart persistent layer. +- [jquery-cookie](https://github.com/carhartl/jquery-cookie) - A simple, lightweight jQuery plugin for reading, writing and deleting cookies. +- [js-cookie](https://github.com/js-cookie/js-cookie) - A simple, lightweight JavaScript API for handling browser cookies. +- [Cookies](https://github.com/ScottHamper/Cookies) - JavaScript Client-Side Cookie Manipulation Library. +- [DB.js](https://github.com/aaronpowell/db.js/) - Promise based IndexDB Wrapper library. +- [lawnchair.js](https://github.com/brianleroux/lawnchair/) - Simple client-side JSON storage. +- [sql.js](https://github.com/kripken/sql.js) - SQLite compiled to JavaScript through Emscripten. +- [pouchdb](https://github.com/pouchdb/pouchdb) - Javascript db inspired by Apache CouchDB to run well within the browser. +- [crumbsjs](https://github.com/nirtz89/crumbsjs) - A lightweight vanilla ES6 cookies and local storage JavaScript library. +- [awesome-web-storage](https://github.com/softvar/awesome-web-storage) - Everything you need to know about client-side storage. +- [datavore](https://github.com/StanfordHCI/datavore) - A small, fast, in-browser database engine written in JavaScript. +- [Hoodie](https://github.com/hoodiehq/hoodie) - Offline First backend to work in browser without internet connectivity. +- [NeDB](https://github.com/louischatriot/nedb) - Embedded Persistent database for Browsers, nw.js, electron. + +## Color + +- [randomColor](https://github.com/davidmerfield/randomColor) - A color generator for JavaScript. +- [chroma.js](https://github.com/gka/chroma.js) - JavaScript library for all kinds of color manipulations. +- [color](https://github.com/Qix-/color) - JavaScript color conversion and manipulation library. +- [colors](https://github.com/mrmrs/colors) - Smarter defaults for colors on the web. +- [PleaseJS](https://github.com/Fooidge/PleaseJS) - JavaScript Library for creating random pleasing colors and color schemes. +- [TinyColor](https://github.com/bgrins/TinyColor) - Fast, small color manipulation and conversion for JavaScript. +- [Vibrant.js](https://github.com/jariz/vibrant.js/) - Extract prominent colors from an image. + +## I18n And L10n + +_Localization (l10n) and internationalization (i18n) JavaScript libraries._ + +- [i18next](https://github.com/i18next/i18next) - internationalisation (i18n) with JavaScript the easy way. +- [polyglot](https://github.com/airbnb/polyglot.js) - tiny i18n helper library. +- [babelfish](https://github.com/nodeca/babelfish/) - i18n with human friendly API and built in plurals support. +- [ttag](https://github.com/ttag-org/ttag) - Modern javascript i18n localization library based on ES6 tagged templates and the good old GNU gettext. + +## Control Flow + +- [async](https://github.com/caolan/async) - Async utilities for node and the browser. +- [q](https://github.com/kriskowal/q) - A tool for making and composing asynchronous promises in JavaScript. +- [step](https://github.com/creationix/step/) - An async control-flow library that makes stepping through logic easy. +- [contra](https://github.com/bevacqua/contra/) - Asynchronous flow control with a functional taste to it. +- [Bluebird](https://github.com/petkaantonov/bluebird/) - fully featured promise library with focus on innovative features and performance. +- [when](https://github.com/cujojs/when) - A solid, fast Promises/A+ and when() implementation, plus other async goodies. +- [ObjectEventTarget](https://github.com/gartz/ObjectEventTarget) - Provide a prototype that add support to event listeners (with same behavior of EventTarget from DOMElements available on browsers). +- [sporadic](https://github.com/marcoonroad/sporadic) - Composable concurrency abstractions (such as streams, coroutines and Go-like channels) on top of promises, for Node and browser engines. + +## Routing + +- [director](https://github.com/flatiron/director) - A tiny and isomorphic URL router for JavaScript. +- [page.js](https://github.com/visionmedia/page.js) - Micro client-side router inspired by the Express router (~1200 bytes). +- [pathjs](https://github.com/mtrpcic/pathjs) - Simple, lightweight routing for web browsers. +- [crossroads](https://github.com/millermedeiros/crossroads.js) - JavaScript Routes. +- [davis.js](https://github.com/olivernn/davis.js) - RESTful degradable JavaScript routing using pushState. +- [navaid](https://github.com/lukeed/navaid) - A navigation aid (aka, router) for the browser in 850 bytes~! + +## Security + +- [DOMPurify](https://github.com/cure53/DOMPurify) - A DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. +- [js-xss](https://github.com/leizongmin/js-xss) - Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist. +- [xss-filters](https://github.com/yahoo/xss-filters) - Secure XSS Filters by Yahoo. +- [sanitize-html](https://github.com/apostrophecms/sanitize-html) - sanitize-html provides a simple HTML sanitizer with a clear API. + +## Log + +- [log](https://github.com/adamschwartz/log) - Console.log with style. +- [Conzole](https://github.com/Oaxoa/Conzole) - A debug panel built in JavaScript that wraps JavaScript native console object methods and functionality in a panel displayed inside the page. +- [console.log-wrapper](https://github.com/patik/console.log-wrapper) - Log to the console in any browser with clarity. +- [loglevel](https://github.com/pimterry/loglevel) - Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods. +- [minilog](http://mixu.net/minilog/) – Lightweight client & server-side logging with Stream-API backends. +- [storyboard](http://guigrpa.github.io/storyboard/) - Universal logging library + Chrome extension; it lets you see all client and server tasks triggered by a user action in a single place. + +## RegExp + +- [RegEx101](https://regex101.com/#javascript) - Online regex tester and debugger for JavaScript. Also supports Python, PHP and PCRE. +- [RegExr](https://regexr.com/) - HTML/JS based tool for creating, testing, and learning about Regular Expressions. + +## Voice Command + +- [annyang](https://github.com/TalAter/annyang) - A JavaScript library for adding voice commands to your site, using speech recognition. +- [voix.js](https://github.com/pazguille/voix) - A JavaScript library to add voice commands to your sites, apps or games. + +## API + +- [axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js. +- [bottleneck](https://github.com/SGrondin/bottleneck) - A powerful rate limiter that makes throttling easy. +- [oauth-signature-js](https://github.com/bettiolo/oauth-signature-js) - JavaScript OAuth 1.0a signature generator for node and the browser. +- [amygdala](https://github.com/lincolnloop/amygdala) - RESTful HTTP client for JavaScript powered web applications. +- [jquery.rest](https://github.com/jpillora/jquery.rest) - A jQuery plugin for easy consumption of RESTful APIs. +- [Rails Ranger](https://github.com/victor-am/rails-ranger) - An opinionated REST client for Ruby on Rails APIs. +- [wretch](https://github.com/elbywan/wretch) - A tiny wrapper built around fetch with an intuitive syntax. +- [Bearer.sh](https://github.com/Bearer/bearer-js) - Universal API client that supports OAuth / API Key / Basic / etc. +- [FarFetch](https://github.com/WebsiteBeaver/far-fetch) - Modern Fetch API wrapper for simplicity, with concise file uploading. +- [Optic](https://github.com/opticdev/optic) - Optic automatically documents and tests your APIs. +- [SWR](https://github.com/vercel/swr) - React Hooks library for remote data fetching. +- [React Query](https://github.com/tannerlinsley/react-query) - Hooks for fetching, caching and updating asynchronous data in React. + +## Streaming + +- [Tailor](https://github.com/zalando/tailor) - Streaming layout service for front-end microservices, inspired by Facebook's BigPipe. + +## Vision Detection + +- [tracking.js](https://github.com/eduardolundgren/tracking.js) - A modern approach for Computer Vision on the web. +- [ocrad.js](https://github.com/antimatter15/ocrad.js) - OCR in JavaScript via Emscripten. + +## Machine Learning + +- [ConvNetJS](https://github.com/karpathy/convnetjs) - Deep Learning in JavaScript. Train Convolutional Neural Networks (or ordinary ones) in your browser. +- [DN2A](https://github.com/dn2a/dn2a-javascript) - Digital Neural Networks Architecture. +- [Brain.js](https://github.com/harthur/brain) - Neural networks in JavaScript. +- [Mind.js](https://github.com/stevenmiller888/mind) - A flexible neural network library. +- [Synaptic.js](https://github.com/cazala/synaptic) - Architecture-free neural network library for node.js and the browser. +- [TensorFlow.js](https://www.tensorflow.org/js/) - A JavaScript library for training and deploying ML models in the browser and on Node.js. +- [ml5.js](https://ml5js.org) - Friendly Machine Learning for the Web. +- [Synapses](https://github.com/mrdimosthenis/Synapses) - Lightweight cross-platform Neural Network library. +- [m2cgen](https://github.com/BayesWitnesses/m2cgen) - A CLI tool to transpile trained classic ML models into a native JavaScript code with zero dependencies. + +## Browser Detection + +- [bowser](https://github.com/ded/bowser) - a browser detector. + +## Operating System + +- [os.js](https://github.com/os-js/OS.js) - An open-source web desktop platform with a window manager, application APIs, GUI toolkit, filesystem abstractions and much more. + +## Benchmark + +- [benchmark.js](https://github.com/bestiejs/benchmark.js) - A benchmarking library. As used on jsPerf.com. +- [matcha](https://github.com/logicalparadox/matcha) - A caffeine driven, simplistic approach to benchmarking. + +## Code highlighting + +- [Highlight.js](https://github.com/isagalaev/highlight.js) - JavaScript syntax highlighter. +- [PrismJS](https://github.com/PrismJS/prism) - Lightweight, robust, elegant syntax highlighting. + +## Loading Status + +_Libraries for indicate load status._ + +- [Mprogress.js](https://github.com/lightningtgc/MProgress.js) - Create Google Material Design progress linear bars. +- [NProgress](https://ricostacruz.com/nprogress/) - Slim progress bars for Ajax'y applications. +- [Spin.js](https://github.com/fgnass/spin.js) - A spinning activity indicator. +- [progress.js](https://github.com/usablica/progress.js) - Create and manage progress bar for every objects on the page. +- [progressbar.js](https://github.com/kimmobrunfeldt/progressbar.js) - Beautiful and responsive progress bars with animated SVG paths. +- [pace](https://github.com/HubSpot/pace) - Automatically add a progress bar to your site. +- [topbar](https://github.com/buunguyen/topbar) - Tiny & beautiful site-wide progress indicator. +- [nanobar](https://github.com/jacoborus/nanobar) - Very lightweight progress bars. No jQuery. +- [PageLoadingEffects](https://github.com/codrops/PageLoadingEffects) - Modern ways of revealing new content using SVG animations. +- [SpinKit](https://github.com/tobiasahlin/SpinKit) - A collection of loading indicators animated with CSS. +- [Ladda](https://github.com/hakimel/Ladda) - Buttons with built-in loading indicators. +- [css-loaders](https://github.com/lukehaas/css-loaders) - A collection of loading spinners animated with CSS + +## Validation + +- [Parsley.js](https://github.com/guillaumepotier/Parsley.js) - Validate your forms, frontend, without writing a single line of JavaScript. +- [jquery-validation](https://github.com/jzaefferer/jquery-validation) - jQuery Validation Plugin. +- [validator.js](https://github.com/chriso/validator.js) - String validation and sanitization. +- [validate.js](https://github.com/rickharrison/validate.js) - Lightweight JavaScript form validation library inspired by CodeIgniter. +- [validatr](https://github.com/jaymorrow/validatr/) - Cross Browser HTML5 Form Validation. +- [FormValidation](https://formvalidation.io/) - The best jQuery plugin to validate form fields. Formerly BootstrapValidator. +- [is.js](https://github.com/arasatasaygin/is.js) - Check types, regexps, presence, time and more. +- [FieldVal](https://github.com/FieldVal/fieldval-js) - multipurpose validation library. Supports both sync and async validation. +- [Funval](https://github.com/neuledge/funval) - Data validation using functions interfaces (support TypeScript). +- [vest](https://github.com/ealush/vest) - 🦺 Declarative form validation framework inspired by unit testing. + +## Keyboard Wrappers + +- [mousetrap](https://github.com/ccampbell/mousetrap) - Simple library for handling keyboard shortcuts in JavaScript. +- [keymaster](https://github.com/madrobby/keymaster) - A simple micro-library for defining and dispatching keyboard shortcuts. +- [Keypress](https://github.com/dmauro/Keypress) - A keyboard input capturing utility in which any key can be a modifier key. +- [KeyboardJS](https://github.com/RobertWHurst/KeyboardJS) - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts. +- [jquery.hotkeys](https://github.com/jeresig/jquery.hotkeys) - jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination. +- [jwerty](https://github.com/keithamus/jwerty) - Awesome handling of keyboard events. + +## Tours And Guides + +- [intro.js](https://github.com/usablica/intro.js) - A better way for new feature introduction and step-by-step users guide for your website and project. +- [shepherd](https://github.com/HubSpot/shepherd) - Guide your users through a tour of your app. +- [bootstrap-tour](https://github.com/sorich87/bootstrap-tour) - Quick and easy product tours with Twitter Bootstrap Popovers. +- [tourist](https://github.com/easelinc/tourist) - Simple, flexible tours for your app. +- [chardin.js](https://github.com/heelhook/chardin.js) - Simple overlay instructions for your apps. +- [pageguide](https://github.com/tracelytics/pageguide) - An interactive guide for web page elements using jQuery and CSS3. +- [hopscotch](https://github.com/linkedin/hopscotch) - A framework to make it easy for developers to add product tours to their pages. +- [joyride](https://github.com/zurb/joyride) - jQuery feature tour plugin. +- [focusable](https://github.com/zzarcon/focusable) - Set a spotlight focus on DOM element adding a overlay layer to the rest of the page. +- [driver.js](https://github.com/kamranahmedse/driver.js) - Powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page + +## Notifications + +- [iziToast](https://github.com/dolce/iziToast) - Elegant, responsive, flexible and lightweight notification plugin with no dependencies. +- [messenger](https://github.com/HubSpot/messenger) - Growl-style alerts and messages for your app. +- [noty](https://github.com/needim/noty) - jQuery notification plugin. +- [pnotify](https://github.com/sciactive/pnotify) - JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft. +- [toastr](https://github.com/CodeSeven/toastr) - Simple JavaScript toast notifications. +- [humane-js](https://github.com/wavded/humane-js) - A simple, modern, browser notification system. +- [smoke.js](https://github.com/hxgf/smoke.js) - Framework-agnostic styled alert system for JavaScript. +- [notie](https://github.com/jaredreich/notie) - Simple notifications and inputs with no dependencies. +- [notifire](https://github.com/notifirehq/notifire) - Open-source notification infrastructure for products. + +## Sliders + +- [Swiper](https://github.com/nolimits4web/Swiper) - Mobile touch slider and framework with hardware accelerated transitions. +- [slick](https://github.com/kenwheeler/slick) - The last carousel you'll ever need. +- [slidesJs](http://www.slidesjs.com) - Is a responsive slideshow plug-in for JQuery(1.7.1+) with features like touch and CSS3 transitions +- [FlexSlider](https://github.com/woothemes/FlexSlider) - An awesome, fully responsive jQuery slider plugin. +- [sly](https://github.com/darsain/sly) - JavaScript library for one-directional scrolling with item based navigation support. +- [vegas](https://github.com/jaysalvat/vegas) - A jQuery plugin to add beautiful fullscreen backgrounds to your webpages. It even allows Slideshows. +- [Sequence](https://github.com/IanLunn/Sequence) - CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications. +- [reveal.js](https://github.com/hakimel/reveal.js) - A framework for easily creating beautiful presentations using HTML. +- [impress.js](https://github.com/impress/impress.js) - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. +- [bespoke.js](https://github.com/bespokejs/bespoke) - DIY Presentation Micro-Framework +- [Strut](https://github.com/tantaman/Strut) - Strut - An Impress.js and Bespoke.js Presentation Editor +- [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe) - JavaScript image gallery for mobile and desktop, modular, framework independent. +- [jcSlider](https://github.com/JoanClaret/jcSlider) - A responsive slider jQuery plugin with CSS animations. +- [basic-jquery-slider](https://github.com/jcobb/basic-jquery-slider) - Simple to use, simple to theme, simple to customise. +- [jQuery.adaptive-slider](https://github.com/creative-punch/jQuery.adaptive-slider/) - A jQuery plugin for a slider with adaptive colored figcaption and navigation. +- [slidr](https://github.com/bchanx/slidr) - add some slide effects. +- [Flickity](https://github.com/metafizzy/flickity) - Touch, responsive, flickable galleries. +- [Glide.js](https://github.com/jedrzejchalubek/glidejs) - Responsive and touch-friendly jQuery slider. It's simple, lightweight and fast. +- [Embla Carousel](https://github.com/davidcetinkaya/embla-carousel) - An extensible low level carousel for the web, written in TypeScript. + +## Range Sliders + +- [Ion.RangeSlider](https://github.com/IonDen/ion.rangeSlider) - Powerful and easily customizable range slider with many options and skin support. +- [jQRangeSlider](https://github.com/ghusse/jQRangeSlider) - A JavaScript slider selector that supports dates. +- [noUiSlider](https://github.com/leongersen/noUiSlider) - A lightweight, highly customizable range slider without bloat. +- [rangeslider.js](https://github.com/andreruffert/rangeslider.js) - HTML5 input range slider element polyfill. + +## Form Widgets + +### Input + +- [typeahead.js](https://github.com/twitter/typeahead.js) - A fast and fully-featured autocomplete library. +- [tag-it](https://github.com/aehlke/tag-it) - A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete. +- [At.js](https://github.com/ichord/At.js) - Add GitHub like mentions autocomplete to your application. +- [Placeholders.js](https://github.com/jamesallardice/Placeholders.js) - A JavaScript polyfill for the HTML5 placeholder attribute. +- [fancyInput](https://github.com/yairEO/fancyInput) - Makes typing in input fields fun with CSS3 effects. +- [jQuery-Tags-Input](https://github.com/xoxco/jQuery-Tags-Input) - Magically convert a simple text input into a cool tag list with this jQuery plugin. +- [vanilla-masker](https://github.com/BankFacil/vanilla-masker) - A pure JavaScript mask input. +- [Ion.CheckRadio](https://github.com/IonDen/ion.checkRadio) - jQuery plugin for styling checkboxes and radio-buttons. With skin support. +- [awesomplete](https://github.com/LeaVerou/awesomplete) - Ultra lightweight, usable, beautiful autocomplete with zero dependencies. - https://projects.verou.me/awesomplete/ + +### Calendar + +- [pickadate.js](https://github.com/amsul/pickadate.js) - The mobile-friendly, responsive, and lightweight jQuery date & time input picker. +- [bootstrap-datepicker](https://github.com/eternicode/bootstrap-datepicker) - A datepicker for @twitter bootstrap forked from Stefan Petre's (of eyecon.ro), improvements by @eternicode. +- [Pikaday](https://github.com/dbushell/Pikaday) - A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS. +- [fullcalendar](https://github.com/fullcalendar/fullcalendar) - Full-sized drag & drop event calendar (jQuery plugin). +- [rome](https://github.com/bevacqua/rome) - A customizable date (and time) picker. Dependency free, opt-in UI. +- [Date Range Picker](https://github.com/dangrossman/daterangepicker) - creates a dropdown menu from which a user can select a range of dates. +- [Duet Date Picker](https://github.com/duetds/date-picker) - open source version of Duet Design System’s accessible date picker, WCAG 2.1 accessibility complaint +- [tui.calendar](https://github.com/nhn/tui.calendar) - A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar. + +### Select + +- [selectize.js](https://github.com/selectize/selectize.js) - Selectize is the hybrid of a textbox and `