Skip to content

Instantly share code, notes, and snippets.

View joecritch's full-sized avatar

Joe Critchley joecritch

99 followers · 38 following
View GitHub Profile
@joecritch
joecritch / react.if.js
Last active August 29, 2015 13:55
Conditional function, compatible with React's JSX precompiler
React.if = function(cond, trueCallback, falseCallback) {
if(cond && typeof trueCallback === 'function') {
return trueCallback();
}
else if(!cond && typeof falseCallback === 'function') {
return falseCallback();
}
};
// Example usage
@joecritch
joecritch / index.html
Last active August 29, 2015 13:56
React boilerplate
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>App</title>
<style>
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }
</style>
</head>
@joecritch
joecritch / gist:94ddb695f445923ed5be
Created May 18, 2014 20:24
<form name="useTheFormNameAttributeAsAnObject" ng-submit="useTheFormNameAttributeAsAnObject.$valid && myCtrl.whatevs(whereDidThisValueComeFrom)">
</form>
@joecritch
joecritch / gist:a60f7f09fecf6d86f7e3
Created May 21, 2014 11:42
BEM SASS trick
.module {
some: stuff;
&__child {
blah: blah;
}
&--modifier {
modify: me;
}
}
@joecritch
joecritch / nested-router-test.js
Created July 4, 2014 16:57
[Issue] Passing props through Route components when state changes
var React = require('react');
var Router = require('react-nested-router');
var Route = Router.Route;
var Sub = React.createClass({
render: function() {
console.log(this.props.myData);
return React.DOM.span(null, 'Should this.props.myData be changing?');
}
});
@joecritch
joecritch / Layout
Created July 8, 2014 12:08
Using Flux in react-nested-router
/**
* @jsx React.DOM
*/
var React = require('react');
var App = require('components/App/App.jsx');
var Layout = React.createClass({
render: function() {
@joecritch
joecritch / cx.js
Last active August 29, 2015 14:04
An improved React cx.js that supports nested arrays, which allows for dynamic keys
// Improved on react/lib/cx.js
// by supporting nested arrays to allow for dynamic keys
function cx(classNames) {
if(classNames instanceof Array) {
var filteredClasses = [];
classNames.forEach(function(className, i) {
if(typeof className === 'string') {
filteredClasses.push(className);
}
@joecritch
joecritch / gist:ec28e882a5090c7d71ef
Created July 17, 2014 15:04
Random sass mixins
@mixin overflow-touch() {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@mixin stretch($top:0, $right:0, $bottom:0, $left:0, $fixed: false, $centered: false) {
@if $fixed {
position: fixed;
} @else {
position: absolute;
@joecritch
joecritch / SassMeister-input-HTML.html
Created August 25, 2014 18:52
Generated by SassMeister.com.
<div class="content">
<h1>This is a test</h1>
</div>
<div class="grid">
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
@joecritch
joecritch / SassMeister-input-HTML.html
Created August 25, 2014 19:01
Generated by SassMeister.com.
<div class="content">
<h1>This is a test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit semper libero, maximus ultrices risus gravida ac. Praesent aliquam, tortor sit amet lacinia tristique, justo nisi luctus enim, in lacinia elit neque eget enim. Nam id malesuada sapien, id laoreet nulla. Donec pretium metus id maximus faucibus. Duis quis purus et ante rutrum tincidunt ut sed nibh. Morbi bibendum ipsum et sem porttitor semper eu sed mi. Ut consequat posuere sem, quis commodo metus suscipit in.</p>
<p>Integer interdum vulputate lectus quis molestie. Donec dui massa, efficitur eu vestibulum pretium, luctus non magna. Nullam nec volutpat tortor. Morbi eget urna ac nunc aliquam semper in id ante. Donec elementum vel nisl id vestibulum. Sed lacinia vel est ut sollicitudin. Aliquam dapibus arcu gravida varius maximus. Proin diam purus, viverra sed ante in, fringilla imperdiet neque. Ut pellentesque lectus in mollis tincidunt. Pellentesque tempor tristique sapien, eget so