Skip to content

Instantly share code, notes, and snippets.

View staltz's full-sized avatar

André Staltz staltz

View GitHub Profile
@ohanhi
ohanhi / joy-of-composition.md
Last active February 3, 2021 18:14
The Joy of Composition - Why stateless rendering is pure bliss

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components, meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views

@teropa
teropa / reactive2015_gol.md
Created September 24, 2015 15:56
ClojureScript Game of Life - Reactive 2015 Lightning Talk Proposal

In my proposed lightning talk for the Reactive Conference, I'll create Conway's Game of Life in ClojureScript, and I'll do it in five minutes. I'll use an interactive programming workflow enabled by Figwheel. Each piece will be added into the running application without reloading the page.

If you want to see a little cellular lifeform spawn out of nothing into an running web browser window, I'd appreciate it if you starred this Gist!

Cheers,

(@teropa)

@kpuputti
kpuputti / fold.js
Last active May 26, 2021 18:18
Functional acrobatics using folds in JavaScript.
/*eslint-env es6 */
// Inspired by the paper "A tutorial on the universality and
// expressiveness of fold" by Graham Hutton (available at
// http://www.cs.nott.ac.uk/~gmh/fold.pdf), implementing some generic
// list handling functions in JavaScript in terms of `fold`.
// Personally I had an enlightnening moment when I realised the
// beautiful interplay of cons lists and foldr during the FP101x
// Haskell course. JavaScript's syntax doesn't make this very apparent
@axefrog
axefrog / scope.js
Last active August 31, 2015 19:14
An idea for scoping Cycle.js child components/dialogues in the context of their parent. Any driver can optionally supply a scope() function, which returns a scoped instance of itself. A driver can also supply an unscope() function which returns a transformed instance of its associated sink. Anything that is scope-unaware is preserved.
function runInScope(main, sources, context, ...args) {
if(!main) {
throw new Error('A "main" function must be supplied, which will be called in scope and from which a (sinks) object will be returned');
}
if(!sources) {
throw new Error('A source drivers object must be supplied, to which scoping can be applied');
}
if(!context) {
throw new Error('A scope context object must be supplied, either as a string, or as an object of key/value pairs');
}
@axefrog
axefrog / router.js
Last active January 28, 2017 08:42
Simple router driver for Cycle.js utilising Router5 for routing functionality and adapting some of the code from VisionMedia's Page.js for automatic link click intercepting
'use strict';
import {Router5, RouteNode} from 'router5';
import logger from '../logger';
// The set of valid sink functions includes synchronous state-affecting router functions that do not require a callback
// and which do not have a significant return value other than the router object itself.
const validSinkFuncs = ['add','addNode','canActivate','deregisterComponent','navigate','registerComponent','setOption','start','stop'];
function validateAndRemapSinkArgument(arg) {
@threepointone
threepointone / sto.js
Created July 28, 2015 07:12
a lightweight flux style store as a component
import React from 'react';
export class Sto extends React.Component{
static defaultProps = {
store: x => x
}
state = {
value: this.props.store()
}
dispatch = action => this.setState({
@ohanhi
ohanhi / frp.md
Last active December 23, 2022 13:06
Learning FP the hard way: Experiences on the Elm language

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

anonymous
anonymous / dom$.js
Created May 8, 2015 14:47
import Cycle from 'cyclejs';
const { h, Rx } = Cycle;
// all html/svg element names <<
var elements = [
'a',
'abbr',
'address',
'area',
function NOOP() {}
var button = getSomeButtonSomehow();
// all of these Animation objects are immutable, and just describe the motion
var moveRight = Animate.positionX({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
var moveDown = Animate.positionY({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
var fadeOut = Animate.opacity({ to: 0, ease: Easing.cubicBezier(0,1,1,0), duration: 50 });
var move = moveRight.with(moveDown, 100); // start moveDown 100ms after moveRight starts
var reusableAnimation = move.then(fadeOut, -fadeOut.duration); // start fadeOut 50ms before move ends
// If the ES6 Promise is available, it uses that, else:
Rx.config.Promise = RSVP.Promise;
// To promise with success
Rx.Observable
.just(42)
.toPromise(/* Optional Promise ctor like RSVP.Promise */)
.then(
result => console.log('Result', result),
reason => console.log('Reason', reason));