Skip to content

Instantly share code, notes, and snippets.

Avatar

James K Nelson jamesknelson

View GitHub Profile
@jamesknelson
jamesknelson / index.html
Created Mar 27, 2020
JavaScript Fireworks
View index.html
<body>
<style>
body {
background-color: black;
overflow: hidden;
}
.firework {
top: 0;
left: 0;
View index.html
<body>
<style>
body {
/* background-color: rgb(195, 226, 224); */
background-color: black;
overflow: hidden;
}
.petal {
position: absolute;
@jamesknelson
jamesknelson / index.html
Last active Mar 24, 2020
Fireworks with HTML/CSS
View index.html
<style>
body {
background-color: black;
}
.dot {
position: absolute;
top: 50%;
left: 50%;
}
@jamesknelson
jamesknelson / index.html
Created Mar 21, 2020
WIP code for first lesson of Learn Something About Programming In 30 Minutes
View index.html
<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
<style>
body {
background-color: black;
}
h1 {
color: #EEE;
font-family: 'Squada One', cursive;
font-size: 60px;
@jamesknelson
jamesknelson / model.js
Created Nov 24, 2019
A model class for storing data fetched with React Suspense
View model.js
const PurgeDelay = 1000
class Model {
fetcher: (id: string) => Promise<any>
cache = {}
callbacks = {}
holds = {}
purgeTimeouts = {}
@jamesknelson
jamesknelson / createSubscribe.js
Created Oct 22, 2019
Turn an async function into something you can subscribe to (untested)
View createSubscribe.js
const requests = {}
export const createSubscribe = (asyncFn) => {
return subscribeToData = (params, onUpdate) => {
onUpdate('pending')
const key = JSON.stringify(params)
const request = requests[key]
if (!request) {
request = requests[key] = {
@jamesknelson
jamesknelson / README.md
Last active Oct 3, 2019
Convert a video into a gif
View README.md

A 4-line shell script to convert your movies into gifs. Defaults to 10fps, 700px wide.

WIDTH=420 FPS=12 togif input.mov

You'll need to have ffmpeg installed -- on mac, you can do this with brew:

brew install ffmpeg
View concatStringsAndStreams.js
const CombinedStream = require('combined-stream2');
function concatStringsAndStreams(strings, ...args) {
let combinedStream = CombinedStream.create()
combinedStream.append(Buffer.from(strings[0], 'utf8'))
for (let i = 0; i < args.length; i++) {
let arg = args[i]
let string = strings[i+1]
if (arg && arg.pipe) {
combinedStream.append(arg)
View mapObservableToChunkIterator.md

mapObservableToChunkIterator(observable, mapValueToChunks, mapErrorToChunks?): Generator<Promise | Chunk[]>

A function that accepts an Observable with a subscribe() method, and optionally with a getCurrentValue() or getCurrentResult() method.

It returns a Generator that yields Promise (when waiting for a new value) or Chunk objects (i.e. objects that extend { type: string }).

By default, mapErrorToChunks takes the error emitted by an observable, and yields [{ type: 'error', error: error }].

When the observable is complete, the Generator's next() function will return { done: true }.

@jamesknelson
jamesknelson / component-routing.js
Last active Mar 19, 2019
Two APIs for routing with React that support POST methods and SSR.
View component-routing.js
/**
UPDATE:
This component and hook based routing/fetching API won't work, as `useAsync()`
is an impossible component.
In order to use async functions to respond to route changes, the functions will
need to be registered with a parent cache/provider with a unique key. As such, a
more natural component-based architecture would involve a `<Route path>` component
You can’t perform that action at this time.