Skip to content

Instantly share code, notes, and snippets.

View staltz's full-sized avatar

André Staltz staltz

View GitHub Profile
@paulmillr
paulmillr / active.md
Last active June 10, 2024 18:10
Most active GitHub users (by contributions). http://twitter.com/paulmillr

Most active GitHub users (git.io/top)

The count of contributions (summary of Pull Requests, opened issues and commits) to public repos at GitHub.com from Wed, 21 Sep 2022 till Thu, 21 Sep 2023.

Only first 1000 GitHub users according to the count of followers are taken. This is because of limitations of GitHub search. Sorting algo in pseudocode:

githubUsers
 .filter(user => user.followers > 1000)
@antonycourtney
antonycourtney / DiamondExample.md
Last active May 6, 2024 05:21
A real world example of recombinant / diamond wiring and feedback with RxJS

A realistic RxJS app with diamond wiring

Consider the following user interface (inspired by Strava) for looking at time-series charts of network data:

esnet-estes-charts

Notes on this interface and my Rx implementation of it:

  • Each chart (stacked vertically) charts a different metric (latency, packet loss and throughput) but over the same time period.
  • As the user moves the mouse left and right on any chart, the vertical line (called the tracker) moves to track the mouse position on all charts. The number displayed in the gray box on the right is the value underneath the tracker for that metric.
@ohanhi
ohanhi / joy-of-composition.md
Last active May 6, 2024 05:21
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

@kpuputti
kpuputti / fold.js
Last active May 6, 2024 05:20
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 May 6, 2024 05:20
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 May 6, 2024 05:17
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) {
@ohanhi
ohanhi / frp.md
Last active May 6, 2024 05:17
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));