OliverJAsh

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

JasonRammoray

function getDomDepthLevel(root = document.documentElement) {
    let pathInfo = {
        route: [],
        level: 0
    };
    for (let i = 0, j = root.children.length; i < j; i++) {
        const curNodePathInfo = getDomDepthLevel(root.children[i]);
        if (curNodePathInfo.level > pathInfo.level) {
            pathInfo = curNodePathInfo;
        }

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

bobzhang

A list of languages which compile to JS (Elm, Purescript, OCaml)
(Inspired by this thread: https://groups.google.com/forum/#!topic/elm-discuss/Um7WIBTq9xU)
They all support curry calling convention by default.

Some interesting results:

1. `min` is curried function, only OCaml(BuckleScript) managed to optimize this overhead.
2. All optimize the self tail call
3. Only BuckleScript and PureScript type-specialized comparison functoin (>=) and inlined

rauschma

Cheat sheet for callable entities in ES6

Value:

	FD	FE	AF	C	M
Function-callable	✓	✓	✓	×	✓
Constructor-callable	✓	✓	×	✓	×
Prototype	F.p	F.p	F.p	SC	F.p
Property prototype	✓	✓	×	✓	×

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

gauntface

javascript:(function(){var styles = document.querySelectorAll('link[rel=\'stylesheet\']'); for (var s = 0; s < styles.length; s++) {styles[s].mediax = styles[s].media;if (styles[s].media === 'only x') { styles[s].media = styles[s].mediax; } else if (styles[s].media !== 'print') {styles[s].media = 'only x';}}})();

RReverser

// UPD:
// Now available as npm module!
// Check out https://github.com/RReverser/better-log for details.

console.log = (function (log, inspect) {
  return function () {
    return log.apply(this, Array.prototype.map.call(arguments, function (arg) {
      return inspect(arg, { depth: 1, colors: true });
    }));
  };

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---