Skip to content

Instantly share code, notes, and snippets.

View yelouafi's full-sized avatar

Yassine Elouafi yelouafi

1k followers · 2 following
  • Morocco
View GitHub Profile
@yelouafi
yelouafi / abort.js
Last active November 29, 2020 07:40
callcc with javascript generators
function*example() {
const x = 10
const y = yield callcc(function*(k) {
// ...
yield k(20)
throw "Unreachable code"
})
console.log(x + y)
}
@yelouafi
yelouafi / introduction-to-parser-combinators.md
Last active April 24, 2024 04:30

In this tutorial we're going to build a set of parser combinators.

What is a parser combinator?

We'll answer the above question in 2 steps.

  1. What is a parser?
  2. and, what is a parser combinator?

So first question: What is parser?

@yelouafi
yelouafi / App.js
Last active July 19, 2017 17:16
put your react component in a closure
import React from 'react';
import reclass from './reclass';
import Greeter from './Greeter';
function App(ctx) {
ctx.state = { civility: 'Mr.' };
function changeCivility(e) {
ctx.setState({ civility: e.target.value });
}
@yelouafi
yelouafi / SimpleSagaMiddleware.html
Last active March 12, 2017 10:57
A simplified implementation of redux-saga middleware
<!doctype html>
<html lang="en">
<body>
<script>
const sagaMiddleware = store => gen => {
var resolve, reject
var done = new Promise((res, rej) => {
resolve = res
@yelouafi
yelouafi / redux-models.md
Last active June 14, 2019 15:48

Motivation

In Redux, reducer composition with combineReducers offers a powerful way to handle complex update logic of an application. A reducer can encapsulate all the ways a part of the state is mutated because it can react to multiple types of actions.

But in some cases there is also a need for another type of factoring: often the update logic is simple (for example setting a single value), and the there are many places in the state shape where the update logic is the same.

@yelouafi
yelouafi / Counter.jsx
Last active October 5, 2016 07:13
redux-saga with vanilla React
import React, { Component } from 'react'
import { runSaga, delay } from 'redux-saga'
import { take, put, call } from 'redux-saga/effects'
// helper functions
const bindFunc = (comp, method) => (...args) => method.apply(comp, args)
const bindSaga = (comp, method) => (...args) => runSaga(method.apply(comp, args), {})
export default class Counter extends React.Component {
@yelouafi
yelouafi / do-notation.sjs
Last active June 30, 2016 00:15
syntax seq = function (ctx) {
let monad = ctx.next().value;
let bodyCtx = ctx.next().value.inner();
function next() {
let result
let n = bodyCtx.next()
if(n.done) return #``
@yelouafi
yelouafi / data-driven.js
Last active March 21, 2019 10:22
// Getter a :: () -> a
// gmap :: ((a -> b), Getter a), Getter b
function gmap(fn, getter) {
return () => fn(getter())
}
// gcombine2 :: ((a,b) -> c, Getter a, Getter ab) -> Getter c
function gcombine2(fn, getter1, getter2) {
@yelouafi
yelouafi / redux-obs-tree.html
Last active May 16, 2016 09:29
Observable state tree
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
<script src="redux-dirty.js" charset="utf-8"></script>
</head>
<body>
<script>
@yelouafi
yelouafi / rawc.html
Last active July 1, 2016 18:21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Raw DOM Nostalgia</title>
<style>
.done {
text-decoration: line-through;
}
</style>