Skip to content

Instantly share code, notes, and snippets.

View treshugart's full-sized avatar
😅
🍊 ⛸

Trey Shugart treshugart

😅
🍊 ⛸
  • Looker
  • Santa Cruz
View GitHub Profile
@treshugart
treshugart / install-postgres-travisci
Created March 26, 2013 23:05
Installing versions of Postgres other than the default version in TravisCI.
#!/bin/sh
TRAVIS_PGVERSION='9.1'
if [ $PGVERSION != $TRAVIS_PGVERSION ]
then
sudo -u postgres pg_dropcluster --stop $TRAVIS_PGVERSION main
export PGCLUSTER=$PGVERSION/main
fi
@treshugart
treshugart / git-cleanup.sh
Created November 17, 2013 22:16
Sync and cleanup all local branches that have been merged (except master).
git pull
git remote prune origin
git branch --merged | grep -v "\*" | grep -v "master" | xargs -n 1 git branch -d
@treshugart
treshugart / jsx-anywhere.js
Last active May 18, 2016 16:45
Use JSX with the native DOM.
function shouldBeProp (item) {
return typeof item === 'function' || typeof item === 'object';
}
window.React = {
createElement (name, attrs, ...chren) {
const node = typeof name === 'function' ? name() : document.createElement(name);
Object.keys(attrs || []).forEach(attr => shouldBeProp(attrs[attr]) ? node[attr] = attrs[attr] : node.setAttribute(attr, attrs[attr]));
chren.forEach(child => node.appendChild(child instanceof Node ? child : document.createTextNode(child)));
return node;
@treshugart
treshugart / rules.js
Last active August 31, 2016 08:34
JSS rules for polyfilling Shadow DOM selectors
const jss = window.jss.default;
const native = fn => (fn || '').toString().indexOf('[native code]') > -1;
const div = document.createElement('div');
const supportsShadowDOM = native(ShadowRoot);
const supportsShadowDOMV0 = div.createShadowRoot && native(HTMLContentElement);
const supportsShadowDOMV1 = div.attachShadow && native(HTMLSlotElement);
// Polyfill :host
// --------------
@treshugart
treshugart / roadmap-ideas.md
Last active September 16, 2016 02:36
notebook-skatejs

Roadmap Ideas

Virtual DOM Functions

Right now, we have vdom.element() and vdom.text(). Currently they map directly off to Incremental DOM. However, we could create adaptors that could map to any backend. For example, we could serialise data to JSON that could be consumed by a web worker that returns diff / patch instructions for a different virtual DOM implementation.

In the same way we could keep support for Incremental DOM directly via a separate adaptor. This would allow us to create a server-renderer all without changing anything in our components' render() functions. Consumers could leverage whatever vDOM implementation they want via separate modules that they just plug in to their components, or we could just create base-classes / composable functions they call on their definitions to apply support for whatever the plugin is.

Our functions could also attain the same API as Hyperscript / React so it'd inherently be compatible with current JSX transpilers.

@treshugart
treshugart / document-reduce.js
Last active September 22, 2016 04:03
document.reduce() - querySelectorAll() but with a callback instead of a selector
document.reduce = Element.prototype.reduce = function(cb) {
const filter = node => cb(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
// Old IE requires a function other browsers require { acceptNode }.
filter.acceptNode = filter;
// Old IE requires the last parameter.
const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, null, false);
const nodels = [];
@treshugart
treshugart / yarn-install.sh
Created November 7, 2016 01:37
Yarn install with Lerna
yarn install && rm -rf yarn.lock && lerna exec -- yarn install && lerna exec -- rm -rf yarn.lock
@treshugart
treshugart / duct.js
Last active January 14, 2017 13:05
Promised-based testing using console / error / info in ~60 LoC complete with suites, custom reporters, summaries and a few assertions via Error.
const done = () => {}
const indent = (depth, info) => [...Array(depth)].reduce(p => `${p} `, '') + info;
const reporter = {
fail: ({ depth, message, name }) => {
console.info(indent(depth, `✗ ${name}`));
console.error(indent(depth + 1, message));
},
pass: ({ depth, name }) => console.info(indent(depth, `✓ ${name}`)),
suite: ({ depth, name }) => console.info(indent(depth, name)),
test: () => {}
@treshugart
treshugart / test.js
Created February 3, 2017 03:15
I used https://github.com/lelandrichardson/enzyme-example-karma-webpack for a default setup and then put the following in the test file.
import React, { Component } from 'react';
import styled from 'styled-components';
import { mount } from 'enzyme';
describe("A suite", function() {
it("should select an element using standard and non-standard DOM attributes", function() {
const StyledComponent = styled.div`
background-color: black;
`;
class Test extends Component {
@treshugart
treshugart / dom-context.js
Last active February 23, 2017 01:38
Setting context props at specific DOM tree levels on elements.
const _context = Symbol();
let currentContext = null;
function getContext (elem) {
elem.dispatchEvent(new Event('__context', {
bubbles: true,
cancelable: true,
composed: true,
scoped: true
}));