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 / 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 / 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 / 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_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 / 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 / gist:3841065
Created October 5, 2012 17:11
Show hidden images temporarily if sharing to Pinterest (using AddThis)
// Don't forget to include AddThis.
// It's actually really good now so you should be using it.
$images = [ ]; // Or wherever your hidden images are.
// Show images temporarily if sharing to Pinterest
// (Because Pinterest won't see the backgrounds.)
if(typeof addthis !== 'undefined') {
addthis.addEventListener('addthis.menu.share', function(e) {
if (e.type == 'addthis.menu.share' && e.data.service === "pinterest_share") {
@joecritch
joecritch / gist:3796212
Created September 27, 2012 20:16
"Round out tab" (based on http://css-tricks.com/tabs-with-round-out-borders/)
// Tabs
@mixin round-out-tab($active_class: current, $radius: 8px, $tab_color: $purple, $outer_color: #fff) {
position: relative;
a {
@extend .btn;
}
&.#{$active_class} {
&:before,
&:after {
@joecritch
joecritch / gist:1723951
Created February 2, 2012 15:19
form {
&.filtered {
opacity: 0.5;
}
// ----
.field {
float: left;
&.selected {
background: yellow;
// ---
@joecritch
joecritch / gist:1723939
Created February 2, 2012 15:18
.transition (@property: all, @duration: 0.6s, @delay: 0s) {
-webkit-transition: @property @duration ease @delay;
-moz-transition: @property @duration ease @delay;
-ms-transition: @property @duration ease @delay;
-o-transition: @property @duration ease @delay;
transition: @property @duration ease @delay;
}
/* Long-hand for overriding properties */
.transition-property (@property) {
@joecritch
joecritch / gist:1723922
Created February 2, 2012 15:14
.class {
background: rgba(255,255,255,0.8);
html.no-rgba & {
background: #eee;
}
}
/** Which would output as: **/
.class { background: rgba(255,255,255,0.8);