Skip to content

Instantly share code, notes, and snippets.

Avatar

Kyle Shevlin kyleshevlin

View GitHub Profile
@kyleshevlin
kyleshevlin / index.js
Last active Sep 22, 2020
Recolor your GH contribution graph
View index.js
// Run this in your console with whatever `newColors` you choose.
function recolorContributionGraph(newColors) {
const days = [...document.querySelectorAll('.day')]
const legendItems = [...document.querySelectorAll('.legend > li')]
const colors = [
...days.reduce((acc, day) => {
acc.add(day.getAttribute('fill'))
return acc
}, new Set()),
]
@kyleshevlin
kyleshevlin / index.js
Created Aug 16, 2020
renderless component example
View index.js
import React from 'react'
export default function PrismHack() {
React.useEffect(() => {
const diffs = [...document.querySelectorAll('.language-diff-javascript')]
diffs.forEach(diff => {
diff.setAttribute('class', 'language-diff-javascript diff-highlight')
})
}, [])
@kyleshevlin
kyleshevlin / justUseAForLoop.js
Last active Aug 6, 2020
Recursive Reducer done imperatively
View justUseAForLoop.js
function flattenFolderTree(folders, gatheringArray = []) {
folders.forEach(folder => {
const {children, ...rest} = folder
gatheringArray.push(rest)
if (children && children.length) {
flattenFolderTree(children, gatheringArray)
}
})
View recursiveReducer2.js
function flattenFolderTree(folders) {
return folders.reduce((acc, folder) => {
const {children, ...rest} = folder;
if (!children || !children.length) {
return [...acc, rest];
}
return [...acc, rest, ...flattenFolderTree(children)];
}, []);
View useForceUpdate.js
function useForceUpdate() {
const [, setState] = React.useState(true)
return () => setState(s => !s)
}
function Toggle() {
const forceUpdate = useForceUpdate()
const value = React.useRef(false)
const handleClick = () => {
View recursiveReducer.js
// Part of my Othello code, no idea if this is the _best_ way to solve this,
// but it's part of my solution
// `grid` is in the parent scope how I write/use this function
function findPiecesToChange(acc, x, y, run, rise) {
const nextX = x + run
const nextY = y + rise
const cell = grid[nextY] && grid[nextY][nextX]
if (!cell) {
View propsAreLimits.jsx
// This component has the prop `children`
// In a universe of infinite possibilities,
// the only limit is that `children` is inside
// the `div`. There are no other limits.
function Wrap({ children }) {
return <div>{children}</div>
}
const BOX_SIZES = {
small: 100,
View shenanigans.js
function Script() {
return (
<script
dangerouslySetInnerHTML={{ __html: `(${setCSSVars.toString()})()` }}
/>
)
}
function setCSSVars() {
const theme = localStorage.getItem('kyleshevlin:theme') || 'light'
View Dots.js
const NEXT_DOTS = {
'': '.',
'.': '. .',
'. .': '. . .',
'. . .': '',
}
function Dots() {
const [dots, setDots] = React.useState('')
@kyleshevlin
kyleshevlin / signupMachine.js
Created May 20, 2020
a state chart for a signup form
View signupMachine.js
const submitEvent = {
SUBMIT: [
{
target: 'submitting',
cond: 'isValidData',
},
{ target: 'error' },
],
}