Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Deen John deenjohn

🎯
Focusing
Block or report user

Report or block deenjohn

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@deenjohn
deenjohn / coverage.js
Last active Feb 26, 2018 — forked from ebidel/coverage.js
CSS/JS code coverage during lifecycle of page load
View coverage.js
/**
* @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
View callback-promises-generators-async.js
// 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); }
View a-increment.js
var dom = Bloop.dom;
var Box = Bloop.createClass({
getInitialState: function() {
return { number: 0 };
},
updateNumber: function() {
this.state.number++;
},
View on-jsx.markdown

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
deenjohn / coordinating-async-react.md
Created Sep 19, 2017 — forked from acdlite/coordinating-async-react.md
Demo: Coordinating async React with non-React views
View coordinating-async-react.md

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?

View rxjs_operators_by_example.md
@deenjohn
deenjohn / HEY-YOU.md
Created Aug 12, 2017 — forked from cowboy/HEY-YOU.md
jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery.
View jquery.ba-tinypubsub.js
/*!
* 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
*
View js-observables-binding.md

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);
You can’t perform that action at this time.