Skip to content

Instantly share code, notes, and snippets.

View tbranyen's full-sized avatar

Tim Branyen tbranyen

1.5k followers · 463 following
View GitHub Profile
@tbranyen
tbranyen / test.html
Created April 28, 2022 17:11
Test page for using workers with diffHTML
<!doctype html>
<html lang="en">
<head>
<title>Worker example</title>
</head>
<body>
<main id="mount"></main>
<script src="http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js"></script>
<script src="./packages/diffhtml-middleware-worker/dist/worker.js"></script>
@tbranyen
tbranyen / visible-proxy.js
Created December 31, 2021 18:13
Visible proxy
function makeVisibleProxy() {
const obj = {};
// Own keys must be known ahead of time for this to work
const keys = ['key1', 'key2'];
// Map each known key to the obj, but make the getter "lazy"
keys.forEach(keyName => {
const desc = {
configurable: true,
@tbranyen
tbranyen / game-of-life.js
Created July 29, 2020 17:32
For funsies
const grid = buildGrid(20, 50, [
(10 * 50) + 20,
(10 * 50) + 21,
(10 * 50) + 22,
(10 * 50) + 23,
(10 * 50) + 24,
(10 * 50) + 25,
(10 * 50) + 26,
(10 * 50) + 27,
(10 * 50) + 28,
@tbranyen
tbranyen / diffhtml.js
Last active April 24, 2019 04:20
diffHTML "Calculator" Experiment
import { innerHTML, html } from 'https://unpkg.com/diffhtml/dist/es';
let a = 1;
let b = 2;
const updateA = ({ target }) => (a = Number(target.value), render());
const updateB = ({ target }) => (b = Number(target.value), render());
function render() {
innerHTML(document.body, html`
@tbranyen
tbranyen / awhat.js
Created February 20, 2019 01:06
function makePromise() {
return new Promise(() => {});
}
async function main() {
console.log('start');
await makePromise();
console.log('end');
}
@tbranyen
tbranyen / console-react.jsx
Created January 29, 2019 22:55
A Console component for React
const Console = props => {
for (let method in console) {
if (method in props) {
console[method](props[method]);
}
}
return <></>;
};
@tbranyen
tbranyen / hook-class.js
Created December 7, 2018 17:55
React Hooks in a Class
import { useState, Component } from 'react';
class MyComponent extends Component {
render() {
const [ count, setCount ] = this.state;
return (
<div>{count}</div>
);
}
@tbranyen
tbranyen / webapp.config.json
Created October 23, 2018 18:15
Build out ESM, CJS, UMD, Script, UMD Minified, and Script Minified
{
"builds": [{
"input": "lib/**/*.js",
"output": "dist/esm",
"outputType": "module",
"debug": true
}, {
"input": "lib/**/*.js",
"output": "dist/cjs",
"outputType": "commonjs",
@tbranyen
tbranyen / events.js
Last active May 10, 2024 14:54
Rethinking events using ES6 (https://tbranyen.com/events)
const bus = {};
const get = e => (bus[e] = bus[e] || new Set());
export const listeners = new Proxy(bus, { get });
export const emit = (e, ...args) => listeners[e].forEach(fn => fn(...args));
@tbranyen
tbranyen / cjs-treeshake.js
Last active September 27, 2018 17:17
CommonJS Tree Shaking Test Case
it('will treekshake a static named import', async () => {
const input = register('./a')`
const { a } = require('./b');
console.log(a);
`;
register('./b')`
function b() {}
exports.a = 'hello world';