Skip to content

Instantly share code, notes, and snippets.

View johno's full-sized avatar
🖤
Computering

John Otander johno

🖤
Computering
View GitHub Profile
@johno
johno / combos.css
Last active October 19, 2016 15:35
Favorite combos from https://randoma11y.com
.tropical-rain-forest { color: #118661; }
.black { color: #090205; }
.bg-tropical-rain-forest { background-color: #118661; }
.bg-black { background-color: #090205; }
/* /////////////////////////////////////// */
.asparagus { color: #71a253; }
.black { color: #35141a; }
.bg-asparagus { background-color: #71a253; }
@johno
johno / heroku-grab-db.sh
Created February 23, 2017 18:22
Grab the latest pg copy for a heroku app
#!/usr/bin/env sh
_now=$(date +"%s")
heroku pg:backups capture --app $1
curl -o $_now-$1.dump `heroku pg:backups public-url --app $1`
@johno
johno / danger-button.js
Created February 28, 2017 02:31
Component based styling rather than css writing with Tachyons
import React from 'react'
export default ({ props, className }) => {
const border = 'ba br3 outline-0'
const spacing = 'ph4 pv3'
const color = 'white hover-near-white bg-red hover-bg-dark-red b--dark-red'
return (
<a
className={`input-reset grow pointer ${border} ${spacing} ${color} ${className}`}
@johno
johno / helpers-buttons.rb
Last active September 9, 2017 17:47
Example of Tachyons + Erb helpers
module THelpers
# Common button styled anchor
#
# Usage:
#
# <%= button(text: 'Foo', class: 'b--green', attrs: { title: 'Foo' }) %>
def button(text:, href: '!#', padding: 'pa3', class: '', attrs = {})
cx = attrs.delete(:class)
<<-HTML.dedent
@johno
johno / login_link.rb
Last active October 11, 2017 18:31
Login link flow with Rails, Clearance, and has_secure_token
@johno
johno / App.js
Last active October 20, 2017 22:27
Example using Compositor Lab, x0 and Graphql
import React from 'react'
const URL = 'https://api.graph.cool/simple/v1/cj90efsm60hka01721jcnbn53'
import { request } from 'graphql-request'
import { ThemeProvider } from 'glamorous'
import theme from './theme'
import {
@johno
johno / compose.jsx
Last active October 30, 2017 19:31
import React from 'react'
const URL = 'https://api.graph.cool/simple/v1/cj90efsm60hka01721jcnbn53'
import { request } from 'graphql-request'
import { ThemeProvider } from 'glamorous'
import theme from './theme'
import {
[
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 3,
const styles = ['radii', 'borderStyle', 'borderWidth', 'space']
const theme = {
radii: [0, 1, 2],
borderStyle: ['solid', 'dotted'],
borderWidth: [3, 4, 5, 6],
space: [0, 2, 4, 8, 16, 32]
}
const possibilities = styles.reduce((acc, style) =>
@johno
johno / Kit.jsx
Last active March 6, 2018 17:29
c8r/kit - A storybook alternative with a pure JSX/MDX API that interfaces with existing projects
import React from 'react'
import {
Provider,
Library,
Example,
Documentation,
Knobs,
contextTypes
} from '@compositor/kit'