Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddd
ddddddddddddds//yddho/::/shddd
ddddddddddddd+  odh. `//.-sddd
ddddddddddddd+  ody  .syhhdddd
ddddddddddddd+  odds:` `.:sddd
ddddddddddddd+  odddhhyo-  +dd
dddddddd+--os-  yd/..+ss/  /dd
ddddddddy/-...:sddh+:....:oddd
dddddddddddddddddddddddddddddd

JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web. JavaScript enables interactive web pages and thus is an essential part of web applications. The vast majority of websites use it, and all major web browsers have a dedicated JavaScript engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has an API for working with text, arrays, dates, regular expressions, and basic manipulation of the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host software, including server-side in web servers and databases, and in non-web programs such as word processors and PDF software, and in runtime environments that make JavaScript available for writing mobile and desktop applications, including desktop widgets.

Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design; JavaScript was influenced by programming languages such as Self and Scheme.

Inbox

Pixel art

Animation

Diagrams

Visualization libraries

  • giojs - 🌏 A Declarative 3D Globe Data Visualization Library built with Three.js http://giojs.org
  • butterchurn - Butterchurn is a WebGL implementation of the Milkdrop Visualizer

Crawlers

  • apify-js - Apify SDK: The scalable web crawling and scraping library for JavaScript. Enables development of data extraction and web automation jobs (not only) with headless Chrome and Puppeteer. https://www.npmjs.com/package/apify

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

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
    • awesome-parcel - link A curated list of awesome Parcel resources, libraries, tools and boilerplates
  • 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
  • via.js - Use the DOM in a Web Worker.

JSON utils

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

JSON editors

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

IDEs

WYSIWYG

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

Experiments

  • roadtrip - A script to make movies from Google StreetView images

Learning

Comments

⬆︎TOP