Skip to content

Instantly share code, notes, and snippets.

View johno's full-sized avatar
🖤
Computering

John Otander johno

🖤
Computering
View GitHub Profile
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) =>
[
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 3,
@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 {
@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 / login_link.rb
Last active October 11, 2017 18:31
Login link flow with Rails, Clearance, and has_secure_token
@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 / 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 / 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 / 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; }
<div class='mw6 center ph2 pv3 pv4-m pv5-l'>
<h2><%= @user.stripe_customer_token ? 'Change' : 'Add a' %> credit card</h2>
<%= form_tag @user, method: :put, id: 'payment-form' do %>
<span class="payment-errors"></span>
<div class="mt3">
<label>
<span class="b db">Card Number</span>
<input type="text" size="20" data-stripe="number" class="pa2 input-reset ba bg-transparent">