Skip to content

Instantly share code, notes, and snippets.

@chrisirhc
chrisirhc / next-input.js
Created Mar 14, 2021
Next Tab Keystroke goes to next input
View next-input.js
function nextFocusInput(e) {
if (e.target.tagName == 'INPUT') {
return;
}
if (!e.relatedTarget || e.relatedTarget.tagName != 'INPUT') {
return;
}
e.preventDefault();
var allInputs = Array.from(document.querySelectorAll('input'));
allInputs[allInputs.indexOf(e.relatedTarget) + 1].focus();
@chrisirhc
chrisirhc / es-animation.js
Created May 25, 2020
First few lines of react-vis/es/animation.js
View 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
@chrisirhc
chrisirhc / es-animation.js
Created May 25, 2020
First few lines of react-vis/es/animation.js
View 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
@chrisirhc
chrisirhc / jsx-array.js
Created Mar 9, 2019
Convert jsx arrays
View jsx-array.js
'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
chrisirhc / gifsicle.sh
Created Feb 14, 2019
Gifsicle command
View gifsicle.sh
gifsicle -O3 image13.gif -o image13-opt.gif --colors 64 --scale 0.5
@chrisirhc
chrisirhc / containers.html
Last active Jan 31, 2016
CSS Technique: Block container demo code
View containers.html
<div class="box">
<span class="t box-inner">div + span</span>
</div>
@chrisirhc
chrisirhc / tooltip.es6.jsx
Created Jan 31, 2016
DOM diffing, DOM shape, and mouse events (First version)
View tooltip.es6.jsx
class HasTooltip extends React.Component {
/* … */
_renderPlaceholder() {
return (
<div className="has-tooltip"
onMouseEnter={this._setHovered}
onMouseLeave={this._setNotHovered}
></div>
);
@chrisirhc
chrisirhc / rendered-dom.jsx
Created Jan 31, 2016
DOM diffing, DOM shape, and mouse events (Rendered DOM)
View rendered-dom.jsx
/* 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}