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.

---

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

ericelliott

let animal = {
  animalType: 'animal',
 
  describe () {
    return `An ${this.animalType} with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }
};
 
let mouseFactory = function mouseFactory () {

JamesMessinger

// This works on all devices/browsers, and uses IndexedDBShim as a final fallback 
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

// Open (or create) the database
var open = indexedDB.open("MyDatabase", 1);

// Create the schema
open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});

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

remojansen

function logClass(target: any) {
 
  // save a reference to the original constructor
  var original = target;
 
  // a utility function to generate instances of a class
  function construct(constructor, args) {
    var c : any = function () {
      return constructor.apply(this, args);
    }

btroncone

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

rjz

#!/bin/sh

# ngrok's web interface is HTML, but configuration is bootstrapped as a JSON
# string. We can hack out the forwarded hostname by extracting the next
# `*.ngrok.io` string from the JSON
#
# Brittle as all get out--YMMV. If you're still reading, usage is:
#
#     $ ./ngrok_hostname.sh <proto> <addr>
#

ryanflorence

const ToggleDisplayMatch = ({ component: Component, ...rest }) => (
  <Match {...rest}>
    {({ matched, ...props }) => (
      <div style={{ display: matched ? 'block' : 'none' }}>
        <Component {...props}/>
      </div>
    )}
  </Match>
)

anaisbetts

// Include this at the very top of both your main and window processes, so that
// it loads as soon as possible.
//
// Why does this work? The node.js module system calls fs.realpathSync a _lot_
// to load stuff, which in turn, has to call fs.lstatSync a _lot_. While you
// generally can't cache stat() results because they change behind your back
// (i.e. another program opens a file, then you stat it, the stats change),
// caching it for a very short period of time is :ok: :gem:. These effects are
// especially apparent on Windows, where stat() is far more expensive - stat()
// calls often take more time in the perf graph than actually evaluating the