sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

rauschma

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

kristoferbaxter

export class MyComponent extends React.Component {
  componentWillMount() {
    const styleid = 'MyComponentStyles'
    if (document.head.querySelector(`#${styleid}`) !== null) {
      const styles = document.createElement('style');
      styles.id = styleid;
      styles.append('[foo]{ color: blue; }');
      document.head.appendChild(styles);
    }
  }

joseluisq

How to export your VS Code extensions from terminal

Note: Unix-like systems only.

1. Export your extensions to a shell file:

code --list-extensions | sed -e 's/^/code --install-extension /' > my_vscode_extensions.sh

aemkei

StreetView URL Extractor

Paste a Google Maps URL and get back the parameters used to create a panorama.

jamiebuilds

import createBabelFile from 'babel-file';
import createBabylonOptions from 'babel-options';
import {buildCodeFrameError} from 'babel-errors';

let code = `
  console.log('hello world');
`;

let file = createBabelFile(code, {
  filename: 'hello-world.js',

jevakallio

// paste this to chrome console on anybody's twitter page
// and it'll turn into an instant presentation :)

(function TweetPresent() {
  const presenter = $(`<div id="tpd" style=" position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 10vh 10vw; box-sizing: border-box; background-color: white; font-size: 5vw; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center;"></div>`);
  const tweets = $$(`div.tweet p.js-tweet-text`)
    .map(el => el.innerHTML)
    .map(t => ({t, s: Math.random()}))
    .sort((a, b) => a.s > b.s ? -1 : 1)
    .map(c => c.t);

EvAlex

export const RGB_COLOR_REGEX = /\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d*.\d*))?\)/;

export class Color {
    public r: number;
    public g: number;
    public b: number;
    public a: number;

    constructor()
    constructor(colorStr?: string)

SitePointEditors

/**
 * A collection of helper prototype for everyday DOM traversal, manipulation,
 * and event binding. Sort of a minimalist jQuery, mainly for demonstration 
 * purposes. MIT @ m3g4p0p
 */
window.$ = (function (undefined) {

  /**
   * Duration constants
   * @type {Object}

jiayihu

import { Middleware } from 'redux';

export interface IActionLifecycle {
  resolveType: string;
  rejectType: string;
}

/**
 * Middleware which allows to chain async actions as Promises.
 * @see https://github.com/redux-observable/redux-observable/issues/90