Skip to content

Instantly share code, notes, and snippets.

Joe Critchley joecritch

Block or report user

Report or block joecritch

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@joecritch
joecritch / react.if.js
Last active Aug 29, 2015
Conditional function, compatible with React's JSX precompiler
View react.if.js
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 Aug 29, 2015
React boilerplate
View index.html
<!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>
View gist:94ddb695f445923ed5be
<form name="useTheFormNameAttributeAsAnObject" ng-submit="useTheFormNameAttributeAsAnObject.$valid && myCtrl.whatevs(whereDidThisValueComeFrom)">
</form>
View gist:a60f7f09fecf6d86f7e3
.module {
some: stuff;
&__child {
blah: blah;
}
&--modifier {
modify: me;
}
}
@joecritch
joecritch / nested-router-test.js
Created Jul 4, 2014
[Issue] Passing props through Route components when state changes
View nested-router-test.js
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 Jul 8, 2014
Using Flux in react-nested-router
View Layout
/**
* @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 Aug 29, 2015
An improved React cx.js that supports nested arrays, which allows for dynamic keys
View cx.js
// 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);
}
View gist:ec28e882a5090c7d71ef
@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 Aug 25, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<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
@joecritch
joecritch / SassMeister-input-HTML.html
Created Aug 25, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<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>
You can’t perform that action at this time.