Skip to content

Instantly share code, notes, and snippets.

Avatar

Matthias Le Brun bloodyowl

View GitHub Profile
@bloodyowl
bloodyowl / part2.md
Created Oct 29, 2017 — forked from wyeo/part2.md
Observable
View part2.md

Bienvenue dans la deuxième partie du tutoriel sur les Observables.

Résumé de partie 1

Dans la première partie, nous avons vu que les Observables nous permettent de traiter des données synchrones et asynchrones. Aussi, nous avons vu la méthode subscribe() à laquelle nous appliquons notre Observer afin de consulter les données. Enfin dans le dernier exemple, une méthode unsubscribe() qui va nous permettre en tant que Observer d'avoir la possibilité de decider de ne plus écouter les données émises.

Vous l’aurez compris, les Observables sont surtout utilisés dans l’objectif de manipuler de la donnée asynchrone. Nous allons donc essayer de comprendre, comment est-ce que les données reçue peuvent être manipulées.

Prenons un cas concret pour illustrer notre problématique :

@bloodyowl
bloodyowl / Component.js
Created Jan 4, 2017
Component library in less than 140 bytes
View Component.js
b=0;$=x=>(p,i="_"+b++,u=($[i]=q=>eval(i).innerHTML=x(p,$[q],u),z=>($[++b]=z,`$.${i}(${b})`)))=>`<c id=${i}>${x(p,[]._,u)}</c>`
@bloodyowl
bloodyowl / redux-light-example.js
Created Feb 29, 2016
redux in 14 lines of code
View redux-light-example.js
const store = createStore((state = { counter: 0 }, action) => {
switch(action.type) {
case "INCREMENT":
return { counter: state.counter + 1 }
case "DECREMENT":
return { counter: state.counter - 1 }
default:
return state
}
})
View example.js
fetchURL("/").then(({ responseText }) => console.log(responseText))
const request = fetchURL("/")
request.cancel()
request.then(() => console.log("NOT HAPPENING"))
View .js
const f = ({ foo = "foo", bar = "bar" } = {}, ...args) => ({
foo,
[`${ bar }1`]: args,
})
// vs
var f = function(options) {
var args = [].slice.call(arguments, 1)
options = options !== undefined ? options : {}
@bloodyowl
bloodyowl / .js
Created Sep 2, 2015
escapeRE for string templates
View .js
const merge = (strings, substitutions) =>
strings.reduceRight((acc, string, index) => [string, substitutions[index], ...acc], [])
const escapeRE = (strings, ...substitutions) =>
merge(strings, [...substitutions, ""]).map((s) => String(s).replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")
console.log(escapeRE`^foo[foo](${ "(" + 1 + 2 })`) // "\^foo\[foo\]\(\(12\)"
View App.js
// signature is (props:object, state:object, setState:function)
function App({ label }, { count = 0 }, setState) {
return (
<div>
<button
onClick={() => setState({ count: count + 1 })}>
{label + " " + count}
</button>
</div>
)
@bloodyowl
bloodyowl / gist:de2ac8f7b0c9801112f7
Created Jun 21, 2015
using the ES7 bind syntax with react components
View gist:de2ac8f7b0c9801112f7
import React, {Component, PropTypes} from "react"
class MyComponent extends Component {
static propTypes = {
onClick: PropTypes.func,
}
handleClick(event) {
const {onClick} = this.props
View core.js
export function $(value) {
if(value == null) {
return []
}
if(typeof value === "string") {
return [...document.querySelectorAll(value)]
}
if(typeof value.nodeType === "number") {
return Array.of(value)
}
View dom.js
function first() {
if(!this.length) {
return this[0]
}
throw new Error("empty list")
}
export default Array.prototype
export function $(selector, root = document) {