Skip to content

Instantly share code, notes, and snippets.

View mfrachet's full-sized avatar
💭
😊

Marvin Frachet mfrachet

💭
😊
View GitHub Profile
@mfrachet
mfrachet / react-cache-custom-fetch.js
Created January 11, 2019 13:08
react-cache-custom-fetch
export const Pokemon = () => {
const bulbasaur = customFetch("https://pokeapi.co/api/v2/pokemon/1/");
return <div>{bulbasaur.name}</div>;
};
@mfrachet
mfrachet / react-cache-custom-fetch2.js
Created January 11, 2019 13:09
react-cache-custom-fetch2.js
export const customFetch = url => {
if (cache) {
return cache
}
throw { type: 'type', url }
}
@mfrachet
mfrachet / react-cache-custom-fetch3.js
Created January 11, 2019 13:14
react-cache-custom-fetch
export const FiberHoc = ComponentDefinition => (props = {}) => {
let vNode;
try {
vNode = ComponentDefinition(props);
} catch (e) {
vNode = props.fallback(props); // mandatory if you need to see something on the screen before your content
fetchWithCache(e.value).then(() => {
const nextNode = ComponentDefinition(props);
@mfrachet
mfrachet / react-cache-fetchwithcache.js
Created January 11, 2019 13:16
react-cache-fetchwithcache
let cache;
export const customFetch = url => /* we already implemented this */
export const fetchWithCache = url =>
window
.fetch(url)
.then(res => res.json())
.then(data => {
cache = data;
@mfrachet
mfrachet / array-apis.js
Created January 15, 2019 13:52
array-apis.js
const isEven = x => x % 2 === 0;
const double = x => x * 2;
const array = [1, 2, 3, 4, 5];
const evenNumber = array.filter(isEven);
const doubleEven = evenNumber.map(double); // doubleEven is [4, 8]
@mfrachet
mfrachet / array-apis-chained.js
Created January 15, 2019 13:54
array-apis-chained.js
const isEven = x => x % 2 === 0;
const double = x => x * 2;
const array = [1, 2, 3, 4, 5];
const doubleEven = array.filter(isEven).map(double); // doubleEven is [4, 8]
@mfrachet
mfrachet / ningo-transduce.js
Created January 15, 2019 14:45
ningo-transduce.js
import transduce from "ningo/transduce";
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const isEven = x => x % 2 === 0;
const double = x => x * 2;
const doubleEven = transduce()
.map(double) // runs second
.filter(isEven); // runs first
@mfrachet
mfrachet / dom-example.js
Created March 7, 2019 20:20
dom-example
const element = document.createElement("div");
const childElement = document.createElement("span");
childElement.textContent = "Hello world"
element.appendChild(childElement);
@mfrachet
mfrachet / react-lazy.js
Created July 26, 2019 17:41
React lazy implementation
import React from "react";
let IDS = 0;
const loaded = {};
export const lazy = modulePathResolver => {
const id = IDS++;
return props => {
const LoadedComponent = loaded[id];
@mfrachet
mfrachet / accessibility.md
Last active September 10, 2021 04:44
accessibility cheatsheet

JS tricks

document.body.addEventListener('focusin', (event) => {
    console.log(document.activeElement)
})
export const getFocusableNodes = (node, includeNegativeTabIndex) => {