Javascript

Inbox

Pixel art

Diagrams

Functional programming

HTTP Clients

Frameworks

Code Generators

  • plop - Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity http://plopjs.com
  • hygen - The simple, fast, and scalable code generator that lives in your project. http://hygen.io
  • yeoman - The web’s scaffolding tool for modern webapps

DDD

Async execution

Callbacks

Promise

Async / Await

Browser databases

  • PouchDB - The Database that Syncs!
  • alasql - AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel. http://alasql.org
  • taffydb - An opensouce library that brings database features into your JavaScript applications.
  • Dexie.js - A Minimalistic Wrapper for IndexedDB http://dexie.org

Native Addons

Compilers

Bundlers

  • Webpack
    • neutrino.js - Create and build modern JavaScript applications with zero initial configuration.
    • webpackmonitor - A tool for monitoring webpack optimization metrics through the development process
  • parcel - Blazing fast, zero configuration web application bundler
  • bili - 🥂 A zero-config library bundler. https://egoist.moe/bili

Linters

Rendering

Web workers

  • workly - A really simple way to move a stand-alone function/class to a web worker. weight_lifting_woman→ smile

JSON utils

  • jv - Helps you view JSON on the command-line.
  • jq - jq is a lightweight and flexible command-line JSON processor.

Sanitizers

  • DOMPurify - DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo: https://cure53.de/purify

Graphing libraries

Template engine

Util libraries

ECMAScript 6

Javascript Runtimes

Object Oriented Programming

Object schema libraries

  • yup - Dead simple Object schema validation

Testing

Browser side javascript

Server side javascript

Desktop applications

Frontend

Project management

Debugging

Performance

Snippets

Check if object is empty

1
2
3
4
5
6
7
const object = {}

if (Object.keys(object).length) {
  console.log('Object is not empty')
} else {
  console.log('Object is empty')
}

Convert javascript object into serialized querystring

Taken from stackoverflow

1
2
3
4
5
6
7
8
9
10
11
12
serialize = (obj) => {
  const str = [];
  for(const p in obj) {
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  }
  return str.join("&");
}

console.log(serialize({foo: "hi there", bar: "100%" }));
// foo=hi%20there&bar=100%25

This one also converts recursive objects (using php “array” notation for the query string)

1
2
3
4
5
6
7
8
9
10
11
12
13
serialize = function(obj, prefix) {
  var str = [], p;
  for(p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
      str.push((v !== null && typeof v === "object") ?  serialize(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&");
}

console.log(serialize({foo: "hi there", bar: { blah: 123, quux: [1, 2, 3] }}));
// foo=hi%20there&bar%5Bblah%5D=123&bar%5Bquux%5D%5B0%5D=1&bar%5Bquux%5D%5B1%5D=2&bar%5Bquux%5D%5B2%5D=3

Convert dashed-string to camelCase

Source

1
var camelCased = myString.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });

Faletten javascript object to has only one level depth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const flattenObject = (ob) => {
  var toReturn = {};

  for (var index in ob) {
    if (!ob.hasOwnProperty(index)) {
      continue;
    }

    if ((typeof ob[index]) === 'object') {
      var flatObject = flattenObject(ob[index]);
      for (var prop in flatObject) {
        if (!flatObject.hasOwnProperty(prop)) {
          continue;
        }

        toReturn[index + '.' + prop] = flatObject[prop];
      }
    } else {
      toReturn[index] = ob[index];
    }
  }
  return toReturn;
}

editorconfig for javascript projects

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# .editorconfig
# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
trim_trailing_whitespace = true
charset = utf-8
indent_size = 2

importjs

ImportJS is a tool to automatically import dependencies in your JavaScript
project. Use it along with one of our editor integrations for
Atom, Emacs, Sublime, Vim, or VS Code.

Remove ; character from automatic import

1
2
3
4
5
6
// .importjs.js
module.exports = {
  importStatementFormatter ({ importStatement }) {
    return importStatement.replace(/;$/, '')
  }
}

Security

Learning

Comments

⬆︎TOP