Skip to content

Instantly share code, notes, and snippets.

TCotton / walpole.css
Created Jul 5, 2020
CSS for
View walpole.css
@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 / heydon.css
Created Jul 5, 2020
heydon best practice
View heydon.css
@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 /
Last active Mar 10, 2020
Application for the role of Technical Support Specialist at SuperHi

I have been following the progress of SuperHi since it started in 2015 and I'm pleased that an opportunity has arisen that allows me to apply to such an interesting start-up. Over the last ten years, I have been employed by Tesco’s (Blinkbox), Sainsbury’s and Boots amongst several other companies as a UI Developer. In that time, I’ve used React, Angular and Wordpress to build websites in the enterprise sector, and hand-coded the prototype for Elevaate which went on to secure £600k in first-round investment funding.

After being politically active during the General Election, and taking on the elected position of Campaign Coordinator for a Constituency Labour Party, I made the decision at the beginning of 2020 to seek a people focused employment position.

My experience, both inside and outside the workplace, makes me the perfect fit for SuperHi as I have both the technical knowledge and the enthusiasm and patience to help others learn digital technical skills.

Please allow me to provide the links to three

TCotton / cloudSettings
Last active Oct 20, 2020
visual studio settings
View cloudSettings
TCotton / barchart.js
Last active Nov 4, 2018
this is a barchart
View barchart.js
import React, { Component } from 'react';
import dummyData from './dummy-data.json';
import * as d3 from 'd3';
import './Barchart.css';
"barData": [
TCotton / index.js
Last active Nov 3, 2018
This is an index file
View index.js
// select the svg container first
const svg ='.canvas')
.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.bottom;
View barchart_with_react_d3.jsx
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';
TCotton / donut_chart_react.jsx
Created Sep 14, 2018
An example of creating a donut chart with React
View donut_chart_react.jsx
import React from 'react';
import { scaleOrdinal } from 'd3-scale';
import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
import { csvParse } from 'd3-dsv';
// Same as data.csv
import dataCsv from './data';
import './chart.css';
TCotton / reducer.js
Created Sep 2, 2018
redux asynchronous action generator
View reducer.js
// import React from 'react';
import { combineReducers, createStore, compose } from 'redux';
import axios from 'axios';
const nameReducer = (state = 'Anonymous', action) => {
switch (action.type) {
return state;
TCotton / webpack.config.js
Created May 9, 2018 — forked from timurcatakli/webpack.config.js
An Easy to Understand Webpack 4+ Configuration File with Comments
View webpack.config.js
const publicPath = 'public';
// Node os module
// The os module provides a number of operating system-related utility methods.
// It can be accessed using:
const os = require('os');
// Using a single monolithic configuration file impacts comprehension and
// removes any potential for reusability.
// As the needs of your project grow, you have to figure out the means to manage
// webpack configuration more effectively.
You can’t perform that action at this time.