Here's a working document of the proposed functionality and structure for rj so that we may "Command React".
❯ rj -h
rj, Command React
Usage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| github-repositories REPO_NAME | sed 's/.* //' | xargs -L1 git clone |
johno
/ comp-that-merges-class-name.js
Last active
August 26, 2016 18:00
Using dynamic classnames with Tachyons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import classNames from 'classnames' | |
| export default ({ isLoading, className, ...otherProps }) => { | |
| const cx = classNames(className, { 'bg-green': !isLoading }, { 'bg-yellow': isLoading }) | |
| return <div className={cx} {...otherProps} /> | |
| } |
johno
/ tachyons-component-frontmatter.json
Last active
September 14, 2016 17:12
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "title": "Full Bleed Background", | |
| "slug": "If not the dasherized version of the title like it currently works, i.e., full-bleed-background", | |
| "slug": "my-custom-slug", | |
| "category": "article", | |
| "featured": true, | |
| "tags": [ | |
| "long-form", | |
| "content", | |
| "image" |
johno
/ generated-tachyons.css
Created
September 15, 2016 19:23
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pa0 { padding: 0rem; } | |
| .ma0 { margin: 0rem; } | |
| .pl0 { padding-left: 0rem; } | |
| .ml0 { margin-left: 0rem; } | |
| .pr0 { padding-right: 0rem; } | |
| .mr0 { margin-right: 0rem; } | |
| .pt0 { padding-top: 0rem; } | |
| .mt0 { margin-top: 0rem; } | |
| .pb0 { padding-bottom: 0rem; } | |
| .mb0 { margin-bottom: 0rem; } |
johno
/ has-emotion.js
Last active
September 20, 2016 23:18
EMBER: Using classNameBindings for dynamic Tachyons classes based on properties. This also includes a hasEmotion mixin I've used on a project to handle branding colors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Mixin.create({ | |
| kind: null, | |
| classNameBindings: [ | |
| 'hasEmotion:white', | |
| 'hasEmotion:hover-white', | |
| 'hasEmotion:focus-white', | |
| 'isAngry:bg-bad', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var fs = require('fs') | |
| var _ = require('lodash') | |
| var path = require('path') | |
| var glob = require('glob') | |
| var titleize = require('titleize') | |
| var fm = require('json-front-matter') | |
| var rmHtmlExt = require('remove-html-extension') | |
| glob('src/components/**/*.html', {}, function (err, components) { | |
| if (err) { |
johno
/ chart.js
Last active
August 2, 2017 10:02
Example of Day/Hour Heatmap with a JS object - http://bl.ocks.org/tjdecke/5558084
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var margin = { top: 50, right: 0, bottom: 100, left: 30 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 430 - margin.top - margin.bottom, | |
| gridSize = Math.floor(width / 24), | |
| legendElementWidth = gridSize*2, | |
| buckets = 9, | |
| colors = ['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58'], // alternatively colorbrewer.YlGnBu[9] | |
| days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], | |
| times = ['1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12a', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p', '12p']; |
Work in progress
Functional, unidirectional state management for React based on redux.
redux is great for predictably handling state but doesn't leverage Higher Order Components out of the box.
rehoc provides functional, HOCs that can be used to cleanly "connect" your containers to state and action dispatchers.
johno
/ stripe-rails-tachyons-example.html.erb
Created
October 13, 2016 20:44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |