Skip to content

Instantly share code, notes, and snippets.

View TCotton's full-sized avatar
🏠
Working from home

Andrew Walpole TCotton

🏠
Working from home
View GitHub Profile
@TCotton
TCotton / hook.js
Created May 17, 2021 10:55
Stale data invalidation
const swr = new Map;
const useSWR = (path, fetcher, cache) => {
let [data, update] = useState(null);
if (!swr.has(path) || swr.get(path) !== cache) {
fetcher(path).then(update, () => update(new Error(path)));
swr.set(path, cache);
}
const isError = data instanceof Error;
return {
@TCotton
TCotton / reduxsaga.js
Created May 17, 2021 10:49
Redux saga example
// customer
import { put, call } from 'redux-saga/effects';
const fetch = (url, data) =>
window.fetch(url, {
body: JSON.stringify(data),
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' }
@TCotton
TCotton / redux.js
Created December 8, 2020 16:17
Redux / Saga one
// customer
import { put, call } from 'redux-saga/effects';
const fetch = (url, data) =>
window.fetch(url, {
body: JSON.stringify(data),
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' }
@TCotton
TCotton / chapter_one.js
Created November 20, 2020 20:55
chapter one - react test
import React from 'react';
export const Appointment = ({customer: { firstName }}) => <div>{firstName}</div>;
import React from 'react';
import ReactDOM from 'react-dom'
import { Appointment } from '../src/Appointment';
let container;
let component;
const render = component => ReactDOM.render(component, container);
describe("Appointment", () => {
@TCotton
TCotton / walpole.css
Created July 5, 2020 19:07
CSS for andywalpole.me
@media screen {
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
margin: 0;
padding: 0;
border: none;
vertical-align: baseline;
font-size: 100%;
background: 0 0
}
@TCotton
TCotton / heydon.css
Created July 5, 2020 18:36
heydon best practice
@font-face {
font-family: Barlow Condensed;
src: url(/css/lib/fonts/barlowcondensed-bold.woff2) format("woff2"), url(/css/lib/fonts/barlowcondensed-bold.woff) format("woff");
font-weight: 700;
font-style: normal;
}
:root {
--font-plain: Helvetica Neue, Helvetica, Arial, sans-serif;
--font-special: Barlow Condensed, Helvetica, sans-serif;
--font-mono: Menlo, Courier, Courier New, Andale Mono, monospace;
@TCotton
TCotton / cloudSettings
Last active May 2, 2021 19:06
visual studio settings
{"lastUpload":"2021-05-02T19:06:07.371Z","extensionVersion":"v3.4.3"}
@TCotton
TCotton / barchart.js
Last active November 4, 2018 10:19
this is a barchart
import React, { Component } from 'react';
import dummyData from './dummy-data.json';
import * as d3 from 'd3';
import './Barchart.css';
/**
"barData": [
15,
13,
10,
@TCotton
TCotton / index.js
Last active November 3, 2018 13:38
This is an index file
// select the svg container first
const svg = d3.select('.canvas')
.append('svg')
.attr('width', 600)
.attr('height', 600);
// create margins & dimensions
const margin = {top: 20, right: 20, bottom: 100, left: 100};
const graphWidth = 600 - margin.left - margin.right;
const graphHeight = 600 - margin.top - margin.bottom;
@TCotton
TCotton / barchart_with_react_d3.jsx
Created September 14, 2018 06:49
Barchart with React
import React from 'react';
import { scaleBand, scaleLinear } from 'd3-scale';
import { tsvParse } from 'd3-dsv';
import { max } from 'd3-array';
import { axisBottom, axisLeft } from 'd3-axis';
import { select } from 'd3-selection';
// Same as data.tsv
import dataTsv from './data';