Skip to content

Instantly share code, notes, and snippets.

Avatar
🎹

Shawn Allen shawnbot

🎹
View GitHub Profile
View No masters, no slaves.md

You should rename the master branch to main in git, and on GitHub. Here's how!

1. Create your new main branch

...with one click on github.com/:owner/:repo:

image

2. Update the default branch to main in your repo's branch settings

@shawnbot
shawnbot / README.md
Last active Apr 20, 2020
50 US states as JSON
View README.md

How this was made

  1. Visit the list of U.S. state abbreviations on Wikipedia.

  2. Sort the table by "status of region" to group the states together

  3. Select the cells of all of the states (from "Alabama" to "Wyo.") and press ⌘C to copy

  4. Cut the TSV in your clipboard to two columns (name and two-letter code)

    pbpaste | cut -d$'\t' -f1,4 | pbcopy
@shawnbot
shawnbot / stylelint.config.js
Created Oct 3, 2019
lint only some variable types
View stylelint.config.js
const variables = require('stylelint-config-primer/plugins/variables')
const {DEFAULT_RULES} = variables
const variableRules = {}
for (const rule of Object.keys(DEFAULT_RULES)) {
variableRules[rule] = false
}
module.exports = {
plugins: [variables],
View sticky.html
<sticky-element class="top-0" stuck-class="top-0 bg-white" stuck-style="height: 64px">
<h1 class="h1" stuck-class="h2">
I stick to the top
</h1>
</sticky-element>
View keyframes.css
@keyframes glow {
0% { color: yellow; }
100% { color: red; }
}
@keyframes grow {
from { transform: scale(0.1); }
to { transform: scale(1); }
}
View extend.jsx
export default function extend(Component, extensions = {}) {
const {fixedProps, ...otherExtensions} = extensions
const Extended = fixedProps
? props => <Component {...props} {...fixedProps} />
: props => <Component {...props} />
return Object.assign(Extended, Component, otherExtensions)
}
@shawnbot
shawnbot / package.json
Created Jul 25, 2018
styled-system getter bug test case
View package.json
{
"private": true,
"scripts": {
"test": "jest"
},
"dependencies": {
"babel-preset-env": "1.7.0",
"jest": "23.4.1",
"styled-system": "3.0.2"
},
@shawnbot
shawnbot / remote-summary.js
Created Jul 20, 2018
A <summary>-like element that can live outside of the <details> element(s) it controls
View remote-summary.js
const resolveIdRefs = require('resolve-id-refs')
class RemoteSummary extends HTMLElement {
clicking = false
onToggle = event => {
if (this.clicking) {
return
}
const {target} = event
View output.css
.m-0 {
margin: 0 !important; }
.mt-0 {
margin-top: 0 !important; }
.mr-0 {
margin-right: 0 !important; }
.mb-0 {
@shawnbot
shawnbot / chameleon.js
Last active May 25, 2018
A pattern for React components that can change their output element
View chameleon.js
import React from 'react'
const pass = props => props
export default function chameleon(defaultTag, mapProps = pass) {
const Component = ({tag: Tag = defaultTag, ...rest}) => <Tag {...mapProps(rest)} />
Component.as = tag => chameleon(tag, mapProps || pass)
// if we don't want these to be infinitely as()-able, we could do this instead:
// Component.as = Tag => ({tag, ...rest}) => <Tag {...mapProps(rest)} />
return Component