Skip to content

Instantly share code, notes, and snippets.

🌲
lost in the woods

Tim Branyen tbranyen

🌲
lost in the woods
Block or report user

Report or block tbranyen

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
@tbranyen
tbranyen / concept.js
Last active Aug 28, 2017
DOM Diffing Specification Concept
View concept.js
// Create virtual document and documentElement.
const vdoc = document.createVirtualDocument();
const root = vdoc.createDocumentElement('html');
// <template/> tags should be able to be converted as well.
const someTemplate = document.querySelector('template#some-template');
// Add some SVG.
root.appendChild(vdoc.createElement({
nodeName: 'svg',
namespaceURI: 'http://www.w3.org/2000/svg',
@tbranyen
tbranyen / acceleration.sh
Created Jul 28, 2017
ThinkPad X1 Carbon 5th Generation libinput acceleration
View acceleration.sh
touchpad_id=$(xinput --list | grep "TouchPad" | xargs -n 1 | grep "id=" | sed 's/id=//g')
accel_speed_code=$(xinput --list-props $touchpad_id | awk '/Accel Speed \(/ {print $4}' | grep -o '[0-9]\+')
# Default acceleration is too slow (non-existent)
xinput --set-prop $touchpad_id $accel_speed_code .75
View fixture.js
const { render } = require('react-dom');
const mount = document.querySelector('main');
class Root {
render() {
return (
<div>Hello world</div>
);
}
}
@tbranyen
tbranyen / example.js
Last active Jul 6, 2017
Getting to React Component w/ diffHTML
View example.js
import { innerHTML } from 'diffhtml'
// Start simple...
innerHTML(document.body, `
<marquee>Go for it!</marquee>
`)
// Move to template engine if you want
innerHTML(document.body, mustache.render(`
<div>
View abortable-promise.js
class AbortablePromise extends Promise {
constructor(fn) {
let _reject = null;
super((resolve, reject) => {
_reject = reject;
return fn(resolve, reject);
});
this.abort = () => {
@tbranyen
tbranyen / _setup.sh
Created May 29, 2017
Web Components <3 JSDOM
View _setup.sh
npm i jsdom-wc@11.0.0-alpha-1
View make-element.js
// Allow the user to invoke the Custom Element chain.
function makeElement(tagName, props) {
const Constructor = customElements.get(tagName);
if (Constructor) {
return new Constructor(props);
}
else {
document.createElement(tagName);
}
@tbranyen
tbranyen / web-component-jsx.js
Created May 21, 2017
Web Component using JSX Demo
View web-component-jsx.js
import { innerHTML, createTree } from 'diffhtml';
import WebComponent from 'diffhtml-components/web-component';
import PropTypes from 'proptypes';
customElements.define('jsx-test', class extends WebComponent {
render({ message }) {
return (
<div>{message}</div>
);
}
@tbranyen
tbranyen / importScript.js
Last active Apr 23, 2018
Native `import()` polyfill (Note: can't name it `import` due to reserved word limitations)
View importScript.js
Object.defineProperty(window, Symbol.for('registry'), {
value: new Map(),
});
window.importScript = src => {
const registry = window[Symbol.for('registry')];
if (registry.has(src)) {
return registry.get(src).promise;
}
@tbranyen
tbranyen / es-modules-diffhtml.html
Last active Jun 1, 2017
Loading some middleware and diffHTML with ES Modules in Chromium 60
View es-modules-diffhtml.html
<style>
body { display: flex; align-items: center; justify-content: center; }
h1 { font-size: 60px; font-family: Helvetica; }
</style>
<script type="module">
import { innerHTML, html, use } from 'https://diffhtml.org/master/diffhtml';
import createLogger from 'https://diffhtml.org/master/diffhtml-middleware-logger';
import inlineTransitions from 'https://diffhtml.org/master/diffhtml-middleware-inline-transitions';
You can’t perform that action at this time.