Skip to content

Instantly share code, notes, and snippets.

View joecritch's full-sized avatar

Joe Critchley joecritch

100 followers · 38 following
View GitHub Profile
@joecritch
joecritch / httpd-vhosts.conf
Created November 26, 2012 23:03
NameVirtualHost *:80
<Virtualhost *:80>
VirtualDocumentRoot "/Users/Joe/Sites/%1"
ServerName vhosts.dev
ServerAlias *.dev
UseCanonicalName Off
LogFormat "%V %h %l %u %t \"%r\" %s %b" vcommon
ErrorLog "/Users/Joe/Sites/vhosts-error_log"
<Directory "/Users/Joe/Sites/*">
@joecritch
joecritch / with_set_cache.js
Last active December 15, 2015 15:58
This is a 'utility-belt' mixin for Twitter Flight that improves querying and caching of set's of jQuery selectors. It exposes a clean API for searching through a 'cached tree' of elements.
///////////////////////
// Example of how to use this mixin....
// - Think of UI components that can
define(
['flight/lib/component', 'mixins/with_set_cache'],
function(defineComponent, withSetCache, _) {
return defineComponent(myComponent, withSetCache);
function myComponent() {
@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 / with-outlets.js
Last active December 1, 2016 05:26
React mixin to add named outlets to a component, ready for transclusion
var WithOutlets = {
componentWillMount: function() {
this.setOutlets(this.props);
},
componentWillUpdate: function(nextProps) {
if(!nextProps || this.props.children !== nextProps.children) {
this.setOutlets(nextProps);
}
},
setOutlets: function(props) {
@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);
}