Overview of ECMAScript 6 features

Related tags

ES6 es6features
Overview

ECMAScript 6 git.io/es6features

Introduction

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

See the ES6 standard for full specification of the ECMAScript 6 language.

ES6 includes the following new features:

ECMAScript 6 Features

Arrows

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code.

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

More info: MDN Arrow Functions

Classes

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

More info: MDN Classes

Enhanced Object Literals

Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

More info: MDN Grammar and types: Object literals

Template Strings

Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

More info: MDN Template Strings

Destructuring

Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

More info: MDN Destructuring assignment

Default + Rest + Spread

Callee-evaluated default parameter values. Turn an array into consecutive arguments in a function call. Bind trailing parameters to an array. Rest replaces the need for arguments and addresses common cases more directly.

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

More MDN info: Default parameters, Rest parameters, Spread Operator

Let + Const

Block-scoped binding constructs. let is the new var. const is single-assignment. Static restrictions prevent use before assignment.

function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

More MDN info: let statement, const statement

Iterators + For..Of

Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don’t require realizing an array, enabling lazy design patterns like LINQ.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Iteration is based on these duck-typed interfaces (using TypeScript type syntax for exposition only):

interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

More info: MDN for...of

Generators

Generators simplify iterator-authoring using function* and yield. A function declared as function* returns a Generator instance. Generators are subtypes of iterators which include additional next and throw. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).

Note: Can also be used to enable ‘await’-like async programming, see also ES7 await proposal.

var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

The generator interface is (using TypeScript type syntax for exposition only):

interface Generator extends Iterator {
    next(value?: any): IteratorResult;
    throw(exception: any);
}

More info: MDN Iteration protocols

Unicode

Non-breaking additions to support full Unicode, including new Unicode literal form in strings and new RegExp u mode to handle code points, as well as new APIs to process strings at the 21bit code points level. These additions support building global apps in JavaScript.

// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
  console.log(c);
}

More info: MDN RegExp.prototype.unicode

Modules

Language-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model – no code executes until requested modules are available and processed.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Some additional features include export default and export *:

// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);

More MDN info: import statement, export statement

Module Loaders

Module loaders support:

  • Dynamic loading
  • State isolation
  • Global namespace isolation
  • Compilation hooks
  • Nested virtualization

The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.

// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

Map + Set + WeakMap + WeakSet

Efficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

More MDN info: Map, Set, WeakMap, WeakSet

Proxies

Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc.

// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';
// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';

There are traps available for all of the runtime-level meta-operations:

var handler =
{
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}

More info: MDN Proxy

Symbols

Symbols enable access control for object state. Symbols allow properties to be keyed by either string (as in ES5) or symbol. Symbols are a new primitive type. Optional description parameter used in debugging - but is not part of identity. Symbols are unique (like gensym), but not private since they are exposed via reflection features like Object.getOwnPropertySymbols.

var MyClass = (function() {

  // module scoped symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

  return MyClass;
})();

var c = new MyClass("hello")
c["key"] === undefined

More info: MDN Symbol

Subclassable Built-ins

In ES6, built-ins like Array, Date and DOM Elements can be subclassed.

Object construction for a function named Ctor now uses two-phases (both virtually dispatched):

  • Call Ctor[@@create] to allocate the object, installing any special behavior
  • Invoke constructor on new instance to initialize

The known @@create symbol is available via Symbol.create. Built-ins now expose their @@create explicitly.

// Pseudo-code of Array
class Array {
    constructor(...args) { /* ... */ }
    static [Symbol.create]() {
        // Install special [[DefineOwnProperty]]
        // to magically update 'length'
    }
}

// User code of Array subclass
class MyArray extends Array {
    constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray();
arr[1] = 12;
arr.length == 2

Math + Number + String + Array + Object APIs

Many new library additions, including core Math libraries, Array conversion helpers, String helpers, and Object.assign for copying.

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

More MDN info: Number, Math, Array.from, Array.of, Array.prototype.copyWithin, Object.assign

Binary and Octal Literals

Two new numeric literal forms are added for binary (b) and octal (o).

0b111110111 === 503 // true
0o767 === 503 // true

Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

More info: MDN Promise

Reflect API

Full reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for implementing proxies.

// No sample yet

More info: MDN Reflect

Tail Calls

Calls in tail-position are guaranteed to not grow the stack unboundedly. Makes recursive algorithms safe in the face of unbounded inputs.

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES6
factorial(100000)
Comments
  • Performance

    Performance

    It would be awesome to be able to see performance comparisons between ES6 features and the ES5 way of doing the same or similar thing.

    For instance, with fat arrows, I've love to see the performance comparison between:

    • (function(){})()
    • (function(){}).bind(this)()
    • (=>)()
    opened by balupton 9
  • adds more generator examples and other minor clarifications

    adds more generator examples and other minor clarifications

    Awesome resource!

    I'm really excited about generators in ES6 and wanted to add a few more examples of their use case. I added a basic use case and a yield* example

    screen shot 2015-03-07 at 9 50 27 am screen shot 2015-03-07 at 9 49 50 am

    opened by danthareja 7
  • Example of 'Construct an HTTP request prefix' no clear

    Example of 'Construct an HTTP request prefix' no clear

    Example of 'Construct an HTTP request prefix' in 'Template Strings' is not clear.

    The following code:

    // Construct an HTTP request prefix is used to interpret the replacements and construction
    GET`http://foo.org/bar?a=${a}&b=${b}
        Content-Type: application/json
        X-Credentials: ${credentials}
        { "foo": ${foo},
          "bar": ${bar}}`(myOnReadyStateChangeHandler);
    

    is not clear to me. Is GET a function defined in ES6 spec?. How can I test it? Is there a simpler example that would show intention of this example?

    opened by mieszko4 6
  • Template Strings - Confusing Example

    Template Strings - Confusing Example

    GET`http://foo.org/bar?a=${a}&b=${b}
        Content-Type: application/json
        X-Credentials: ${credentials}
        { "foo": ${foo},
          "bar": ${bar}}`(myOnReadyStateChangeHandler);
    

    I don't understand this example; can we have more explanation on this? Otherwise it looks bugged for me.

    opened by gsklee 4
  • Object Literal Extensions & __proto__

    Object Literal Extensions & __proto__

    Under enhanced object literals it would look like __proto__ wasn't available before, however, it appears to be, as I am using that functionality in node 0.10.

    opened by Fishrock123 4
  • this in arrow block

    this in arrow block

    for this statement: Unlike functions, arrows share the same lexical this as their surrounding code.

    can I simply consider

    '()=>{}' 
    

    equals to

    'function(){}.bind(this)'
    
    opened by snowmagic1 3
  • React + Flux Store Example in ES6

    React + Flux Store Example in ES6

    How would you write this in ES6?

    var EventEmitter = require("events").EventEmitter var assign = require("react/lib/Object.assign") ... var ProductStore = assign({}, EventEmitter.prototype, { ... emitChange: function() { this.emit("change") },

    opened by badnorseman 3
  • Rewrite?

    Rewrite?

    The examples are useful, but plenty of sections are too difficult to understand or just lacking 😭

    For example, important concepts like Symbols are not given enough attention and the given explanation.

    opened by ghost 3
  • Iterator clarification

    Iterator clarification

    Your explanation is great, but I have tried to find definitive answer to what api the iterator will have. Your explanation is another example to support one of the two I have found, do you know if it is the latest? And could you make that clear in the document?

    The two I have found are:

    // Yours and (https://people.mozilla.org/~jorendorff/es6-draft.html#sec-common-iteration-interfaces)
    var iterable = {
      [Symbol.iterator]() {
        let pre = 0, cur = 1;
        return {
          next() {
            [pre, cur] = [cur, pre + cur];
            return { done: false, value: cur }
            // alt. return { done: true, value: IteratorReturn || undefined }
          }
        }
      }
    }
    

    and

    // Harmony wiki. (http://wiki.ecmascript.org/doku.php?id=harmony:iterators)
    var iterable = {
      [Symbol.iterator]() {
        let pre = 0, cur = 1;
        return {
          next() {
            [pre, cur] = [cur, pre + cur];
            return cur
            // alt. throw new StopIteration()
          }
        }
      }
    }
    
    opened by pirfalt 3
  • Call method inside other class with EcmaScript 6 in Node JS

    Call method inside other class with EcmaScript 6 in Node JS

    I have Javascript link this.

    someClass.js

    class someClass {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    
        sayName() {
            console.log(this.name);
        }
    
        sayAge() {
            console.log(this.age);
        }
    }
    
    var myInstance = new someClass('dwayne', 27);
    myInstance.sayName();
    

    In cmd:

    node someClass.js It's show dwayne.

    But show I want to use this class in another class like: someClassTest.js How can I call someClass.js for same result

    Thanks.

    opened by ngnlx 2
  • `Proxy` is not a `Function` now

    `Proxy` is not a `Function` now

    I test new Proxy in io.js(v3.1.0), an error was threw: "Proxy is not a function". And I found that we should create Proxy with Proxy.create now. So, maybe you should update this.

    opened by benjycui 2
  • Nonstandard JSON structure

    Nonstandard JSON structure

    I think non-standard JSON structures should not be successfully parsed by JSON, or we should warn developers that this is a non-standard JSON structure

    "payout": [
            [
                "2022-05-25T00:00:00Z",
                "txid moved to user_payout",
                0.00014148402252361394091452898341,
                0,
                0
            ],
            [
                "2022-05-24T00:00:00Z",
                "txid moved to user_payout",
                0.00014582889045275385303659990698,
                0,
                0
            ]
    ]
    

    I think the right thing to do is

    "payout": [
            {
                "key1": "2022-05-25T00:00:00Z",
                "key2": "txid moved to user_payout",
                "key3": 0.00014148402252361394091452898341,
                "key4": 0,
                "key5": 0
            },
            {
                "key1": "2022-05-24T00:00:00Z",
                "key2": "txid moved to user_payout",
                "key3": 0.00014582889045275385303659990698,
                "key4": 0,
                "key5": 0
            }
    ]
    
    opened by Jzow 2
  • Git.io deprecation

    Git.io deprecation

    Announcement: https://github.blog/changelog/2022-04-25-git-io-deprecation/

    The current README file features git.io url at the top, it should be updated soon so people don't keep bookmark or sharing it

    opened by bodazhao 2
  • Tail Calls example bug resolve

    Tail Calls example bug resolve

    Remove the 'use strict' keyword inside the factorial function

    Error:

    • Firefox: Uncaught SyntaxError: "use strict" not allowed in function with default parameter
    • Chrome: Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
    opened by CoderOO7 0
  • npm install babel

    npm install babel

    when I tried to use npm command to install babel,I writed 'npm install babel-preset-env --save-dev' at cmd,then there was an error ,'npm WARN [email protected] No description ','npm WARN [email protected] No repository field.','npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})'. Could you tell me how can I do to solve this problem?I will appreciate it.

    opened by zhaomenglu 4
Owner
Luke Hoban
CTO @Pulumi. Previously EC2 @AWS, TypeScript, VS Code and C# @Microsoft and ECMAScript @TC39.
Luke Hoban
ECMAScript 5/6/7 compatibility tables

ECMAScript compatibility tables Editing the tests Edit the data-es5.js, data-es6.js, data-esnext.js, or data-non-standard.js files to adjust the tests

Juriy Zaytsev 4.2k Dec 25, 2022
ECMAScript 6: Feature Overview & Comparison

es6-features.org ECMAScript 6: Feature Overview & Comparison Copyright (c) 2015-2017 Ralf S. Engelschall <[email protected]> <@engelschall> Partiall

Dr. Ralf S. Engelschall 6.2k Dec 27, 2022
ESLint plugin about ECMAScript syntactic features.

eslint-plugin-es-x ESLint plugin which disallows each ECMAScript syntax. Forked from eslint-plugin-es. As the original repository seems no longer main

Yosuke Ota 69 Dec 6, 2022
tauOS 17 Jul 10, 2022
ECMAScript parsing infrastructure for multipurpose analysis

Esprima (esprima.org, BSD license) is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScri

Ariya Hidayat 398 Dec 15, 2022
ECMAScript 5/6/7 compatibility tables

ECMAScript compatibility tables Editing the tests Edit the data-es5.js, data-es6.js, data-esnext.js, or data-non-standard.js files to adjust the tests

Juriy Zaytsev 4.2k Dec 25, 2022
ECMAScript code beautifier/formatter

esformatter ECMAScript code beautifier/formatter. Important This tool is still missing support for many important features. Please report any bugs you

Miller Medeiros 968 Nov 1, 2022
Curso de ECMAScript 6+ en Platzi

Curso de ECMAScript 6+ JavaScript es el lenguaje más utilizado para desarrollo de aplicaciones web, principalmente en el frontend. Cada año, ECMA Inte

Edward Brito Diaz 3 Feb 12, 2022
🎩 Coverage for EcmaScript Modules

?? ESCover Coverage for EcmaScript Modules based on ?? Putout and loaders. Why another coverage tool? When you want to use ESM in Node.js without tran

coderaiser 4 Jun 10, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

Gatsby Starter Shopify Kick off your next Shopify project with this boilerplate. This starter creates a store with a custom landing page, individual f

Brent Jackson 12 May 12, 2021
project overview tool, used to analyze the amount of code, the number of files, code statistics and so on.

pot z-pot is a project overview tool, used to analyze the amount of code, the number of files, code statistics and so on. 项目概述工具,用于分析代码量、文件数、代码统计等。 快速

zhangchi 18 Aug 10, 2022
Tunes overview UI of the gnome 40 a bit

Gnome 40 Overview UI Tune Simple gnome-shell (v40.0) extension that tunes overview UI to make it more usable. Changes Search textbox is hidden by defa

Alexey Manukhin 68 Nov 28, 2022
A visual overview of Kubernetes architecture and Prometheus metrics

A visual overview of Kubernetes architecture and Prometheus metrics. Structure Navigate through the structures page to easily see your control planes

OSLabs Beta 213 Oct 11, 2022
docsQL - Getting an overview over your Markdown file in your Jamstack site

docsQL Getting an overview of your Jamstack Markdown files. Demo Play with: https://peterbe.github.io/docsql/ You're supposed to run docsQL with your

Peter Bengtsson 19 Jan 3, 2023
📚 Compose storybooks for an overview.

"Put all the books in the bookcase." Compose storybooks for an overview. English | 简体中文 ?? CLI bookcase-builder as bb. Background In the monorepo proj

赵東澔 4 Jun 23, 2022
A visual, interactive outline map that combines the clarity of the outline with the intuitive overview of the minimap. Alternative Minimap.

Outline Map EN | 中文 A visual, interactive outline map that combines the clarity of the outline with the intuitive overview of the minimap. Alternative

null 97 Dec 21, 2022
A student-made, student-tailored Firefox add-on for Veracross. Provides ease of navigation in Veracross, among with other quality of life features. More features in progress.

Check out the Chrome version! This release is version 1.0.0, so the only feature it has is clickable links to the dropbox from the classpage. Any comm

Webb School CS Club 3 Nov 25, 2022
The 1.x line is frozen - features and bugfixes now happen on https://github.com/yarnpkg/berry

Fast, reliable, and secure dependency management. Fast: Yarn caches every package it has downloaded, so it never needs to download the same package ag

Yarn 41k Jan 5, 2023
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023