chrisirhc’s gists

chrisirhc / index.js

Created October 5, 2015 04:45

rx-interdependency-experiment

	var Rx = require('rx');
	var clone = require('lodash.clone');
	var isequal = require('lodash.isequal');

	var Config = new MutableSubject({a: null});
	var Options = new MutableSubject({});

	function MutableSubject(name, obj) {
	var behaviorSubject = new Rx.BehaviorSubject(obj);

chrisirhc / render.js

Last active January 31, 2016 00:39

DOM diffing, DOM shape, and mouse events (Best practice)

	// Best practice, to maintain a similar DOM shape
	render() {
	const {isHovered} = this.state;

	return (
	<div className={classNames(isHovered && 'tooltip-region')}
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}>
	<div className="has-tooltip"></div>
	{isHovered && <div>Hello</div>}

chrisirhc / render.js

Created January 31, 2016 00:59

DOM diffing, DOM shape, and mouse events (Hypothesis)

	<div className="tooltip-region"
	onMouseLeave={this._setNotHovered}
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}></div>
	<div>Hello</div>
	</div>

chrisirhc / rendered-dom.jsx

Created January 31, 2016 01:01

DOM diffing, DOM shape, and mouse events (Rendered DOM)

	/* non-hovered */
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}
	></div>

	/* hovered */
	<div className="tooltip-region">
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}

chrisirhc / tooltip.es6.jsx

Created January 31, 2016 01:03

DOM diffing, DOM shape, and mouse events (First version)

chrisirhc / containers.html

Last active January 31, 2016 09:42

CSS Technique: Block container demo code

	<div class="box">
	<span class="t box-inner">div + span</span>
	</div>

chrisirhc / esnextbin.md

Last active December 3, 2016 05:53

esnextbin sketch

made with esnextbin

chrisirhc / gifsicle.sh

Created February 14, 2019 20:54

Gifsicle command

gifsicle -O3 image13.gif -o image13-opt.gif --colors 64 --scale 0.5

chrisirhc / jsx-array.js

Created March 9, 2019 05:01

Convert jsx arrays

	'use strict';

	module.exports = function(file, api, options) {
	const j = api.jscodeshift;
	const root = j(file.source);
	const ReactUtils = require('./utils/ReactUtils')(j);

	function makeSafe(node) {
	if (node.type !== 'JSXElement') {
	return j.jsxExpressionContainer(node);

chrisirhc / es-animation.js

Created May 25, 2020 21:47

First few lines of react-vis/es/animation.js

	function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

	function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

	function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; de

	class HasTooltip extends React.Component {
	/* … */

	_renderPlaceholder() {
	return (
	<div className="has-tooltip"
	onMouseEnter={this._setHovered}
	onMouseLeave={this._setNotHovered}
	></div>
	);

Chris Chua chrisirhc