Justin Makeig jmakeig

JSX is not JavaScript. It introduces new syntax to JavaScript as sugar for React’s underlying JavaScript APIs. JSX is problematic—to me, at least—for several reasons. It requires,

An extra compilation step
Specialized support in your IDE
Some mind bending in the fuzzy areas that aren’t quite JavaScript and aren’t quite HTML, for example, the awful <> tag
Lock-in to Facebook’s view of the web

The creatively named react-helper library, provides a humane API for creating DOM elements using React that abstracts away React altogether. It’s possible to interoperate with React components, but for pure DOM manipulation, the API does not leak the underlying React implementation.

Converting a hierarchical tree data structure to HTML table headings is really tricky. Becuase of the way that rowspan and colspan work, it’s not striaghtforwad to traverse the tree in one pass. Moreover, the row-oriented apporach is very different than column-oriented.

Demo

Select row: Shift + Space
Insert a copy above: Ctl + Shift + =
Insert empty rows above: ⌘ + Shift + =
Re-order rows: Drag + Shift
Indent: ?

This assumes you can already ssh USER@HOST with appropriate public key auth.

On the server

Download and compile git source

curl -O https://www.kernel.org/pub/software/scm/git/git-2.9.4.tar.gz
tar -gzvf git-2.9.4.tar.gz
cd git-2.9.4

make configure

	'use strict';
	class Component {
	constructor(props) {
	this._props = props;
	}
	get props() {
	return this._props;
	}
	set props(p) {
	this._props = p;

	/**
	* Generate an array from random length between `min` and `max`, calling `fct`
	* to populate each item.
	*
	* @example Creates an array of random length sampled from a Poisson distribution of timestamp-text pair objects.
	* several(
	* () => ({
	* timestamp: f.date.recent(),
	* text: f.lorem.sentence(),
	* }),

	<section class="toggleable">
	<h3>This Big Section with a Very Long Title That Should Wrap Over Multiple Lines that Will Break a Brittle Layout Really Badly</h3>
	<p>Lorem ipsum dolor amet locavore yuccie PBR&B, palo santo viral quinoa cred. Hot chicken jianbing bitters poutine palo santo banh mi vice food truck. Edison bulb chillwave vegan, cardigan hell of next level green juice hexagon microdosing. VHS disrupt waistcoat air plant yuccie meh la croix butcher adaptogen tilde, meggings paleo keytar bitters venmo. Live-edge lyft sustainable, hell of knausgaard glossier raclette. Aesthetic seitan mlkshk, tattooed kinfolk austin vexillologist cray cold-pressed. Pour-over brooklyn VHS wayfarers lyft meditation.</p>
	<p>Put a bird on it air plant keytar yuccie chambray flexitarian. Wayfarers flannel bushwick, skateboard palo santo hammock slow-carb yuccie vape. Master cleanse pickled tumeric unicorn tattooed disrupt, forage bicycle rights crucifix sustainable skateboard yuccie la croix. Actually subway tile

	/**
	* Creates a shallow copy of an Object or an Array, such that,
	* `a !== shallowClone(a)`, but `a.b === shallowClone(a).b`, where `b`
	* is not a primitive value. Deep cloning is out of scope here.
	*
	* @param {*} item - any “simple” `Object` or `Array`
	* @return {*}
	* @throws {TypeError} - if an Object does not directly inherit from
	* `Object.prototype` or `null`
	*/

	<div id="L1">abcdef<span>gh<span>ijk</span>lmn</span>opqrstuvwxyz0123456789</div>
	<div id="L2">ab<span>cdefgh</span>ijk<span>lmnopqrstuvwxyz01234567</span>89</div>
	<div id="L3">abcdefghijklmnopqrst<span>uvwxyz0123456789</span></div>
	<button id="Range">Range me!</button>
	<button id="Select">Select me!</button>

	declare namespace qc="http://marklogic.com/appservices/qconsole";
	/qc:workspace/xdmp:node-uri(.) ! xdmp:document-delete(.)