View vscode-settings.json
{
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"editor.minimap.enabled": false,
"editor.fontFamily": "Operator Mono,'Fira Code'", // Operator Mono,
"editor.fontLigatures": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.fontSize": 18,
"editor.formatOnSave": false,
View style.js
const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
const css = `
::selection {
background-color: pink;
color: limegreen;
}
::-moz-selection {
background-color: dodgerblue;
View .eslintrc
{
"extends": "airbnb",
"plugins": ["jest"],
"env": {
"jest/globals": true
},
"rules": {
"no-unused-vars": ["error", {"argsIgnorePattern": "next"}],
"no-multi-spaces": 0
}
View thing2.js
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
View prepack-gentle-intro-1.md

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
View ContextApi.js
import React, { Component, Fragment } from 'react'
// First make a new context
const MyContext = React.createContext()
// then create a provider Component
class MyProvider extends Component {
state = {
name: 'Tony',
age: 100,
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
/////////////////////////////////////////////////////////
View style.css
/* Ligatures */
.mtk16,
.mtk26,
.mtk36,
.mtk39 {
font-family: "Fira Code";
font-weight: 900;
}
/* Keywords, decorators, comments */
View 03-v2.js
// Flexible Compound Components with context
import React from 'react'
import {Switch} from '../switch'
// Right now our component can only clone and pass props to immediate children.
// So we need some way for our compound components to implicitly accept the on
// state and toggle method regardless of where they're rendered within the
// Toggle component's "posterity" :)
//
View kangax-es6-quiz-explained.md

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:
(function(x, f = () => x) {