Skip to content

Instantly share code, notes, and snippets.

😷
Save lives: stay inside

Shawn Allen shawnbot

😷
Save lives: stay inside
Block or report user

Report or block shawnbot

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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
@shawnbot
shawnbot / .babelrc
Last active Apr 16, 2018
Parcel + Preact
View .babelrc
{
"presets": ["env", "react"]
}
View displayClassToHidden.js
const invariant = require('invariant')
const HIDE = 'd-none'
const SHOW = ['d-block', 'd-flex', 'd-inline', 'd-inline-block']
const DISPLAY = [HIDE].concat(SHOW)
module.exports = function displayClassToHidden(fileInfo, api, options) {
const j = api.jscodeshift
let replaced = false
You can’t perform that action at this time.