deenjohn

/**
 * @author ebidel@ (Eric Bidelman)
 * License Apache-2.0
 *
 * Shows how to use Puppeeteer's code coverage API to measure CSS/JS coverage across 
 * different points of time during loading. Great for determining if a lazy loading strategy
 * is paying off or working correctly.
 *
 * Install: 
 *   npm i puppeteer chalk cli-table

deenjohn

// https://medium.com/@rdsubhas/es6-from-callbacks-to-promises-to-generators-87f1c0cd8f2e#.q7boouq4o

/* Step 1: Callback hell — N levels deep */

var request = require('request');
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1;

function foo(finalCallback) {
  request.get(url1, function(err1, res1) {
    if (err1) { return finalCallback(err1); }

deenjohn

var dom = Bloop.dom;

var Box = Bloop.createClass({
  getInitialState: function() {
    return { number: 0 };
  },
  
  updateNumber: function() {
    this.state.number++;
  },

deenjohn

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

deenjohn

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

deenjohn

#RxJS 5 Operators By Example

UPDATE: I have moved the contents of this gist plus more to https://github.com/btroncone/learn-rxjs and http://www.learnrxjs.io. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

Chinese Version by: @DrakeLeung

Table of Contents

• buffer

deenjohn

This is now an actual repo:

https://github.com/cowboy/jquery-tiny-pubsub

deenjohn

/*!
 * jQuery Tiny Pub/Sub - v0.X - 11/18/2010
 * http://benalman.com/
 * 
 * Original Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 *
 * Made awesome by Rick Waldron
 *

deenjohn

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

deenjohn

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.

---