Skip to content

Instantly share code, notes, and snippets.

Glen Maddern geelen

View GitHub Profile
View stylable-components.md

stylable-components

CSS for Components

Example

/* Counter.css */
@import Button from './Button.css';
@geelen
geelen / index.html
Last active Apr 9, 2017
Query selector speed comparison #jsbench #jsperf (https://jsbench.github.io/#c4cb4c2d5578e5e3900743d117538ec8) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Query selector speed comparison #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View cm2sc.js
import React from 'react'
const cm2sc = names => Object.keys(names).reduce((comps, name) => (
{ ...comps, [name]: ({is = 'div', className, ...props}) => (
React.createElement(is, { ...props, className: [names[name], className].filter(_=>_).join(' ') })
) }
), {})
export default cm2sc
View blend mode example.js
// Doesn't work unless the image host accepts CORS
window.download = a => {
const { opacity, country, blendMode } = current
const canvas = document.createElement('canvas')
canvas.width = 1280
canvas.height = 720
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, 1280, 720)
ctx.globalCompositeOperation = 'source-over'
View button.js
import React, { PropTypes } from 'react'
import styled, { css } from 'styled-components'
const commonClasses = 'link dib f5 fw6 tracked tc br2 ttu ba pointer'
const sizes = ['large', 'small', 'extra-large']
const types = ['success', 'warning', 'danger', 'primary', 'default']
const sizedBtnClasses = {
'large': 'h3 pa3',
View debug.jsx
import React from 'react'
import styled from 'styled-components'
const Pre = styled.pre`
background-color: papayawhip;
color: palevioletred;
padding: .5rem;
font-family: monospace;
`
View perf.js
function makeRandomColor() {
return '#' + Math.random().toString(16).substr(-6)
}
let tag = document.createElement('style')
tag.type = 'text/css'
tag.appendChild(document.createTextNode(''));
(document.head || document.getElementsByTagName('head')[0]).appendChild(tag)
let styleSheet = [...document.styleSheets].filter(x => x.ownerNode === tag)[0]
View 1_locals.css
/* equivalent to postcss-local-scope. INPUT: */
.outer {
color: papayawhip;
box-shadow: 0 0 10px;
}
/* OUTPUT: */
@export .outer ".outer-abcs12r3adudas";
View 1_Readme.md

Global traits, local components

The idea is to combine the best bit of global styling (reuse, small payload) and local styling (total isolation, first-class React syntax)

This is combined with the concept of traits: you can think of them as permitted property/value pairs. Instead of every component being able to have every CSS property available to it, you can reduce your permitted set to X font families, Y font-size + line-height pairs, Z foreground/background colour pairs, W padding amounts. This is based off my work using amcss on real projects — traits were the single key feature that kept me using AM.

The one-sentence explanation: A site defines a set of permitted visual features, all components are simply a combination of those features

Definitions

@geelen
geelen / notes.md
Last active Aug 29, 2015
Alternate approaches to nextTick
View notes.md

setTimeout & nextTick were in source-definition order. No matter how many promises I added, they always got executed first. handy!

All of them fire immediately after the animation frame has fired:

You can’t perform that action at this time.