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 / 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 / README.md
Last active July 26, 2016 13:17
A request for a code review of how to go about unit testing dynamic-like config data

Mocking config data in tests

Structure

  • Each option has a set of values, which come from the app state
  • Options also each have a config, which are defined in configs.js (potentially a large list, with 'dynamic' data-like variations)

The tests

We're testing the summarise function. To isolate my tests, I've mocked the option configs. This means we don't have to couple the test to certain option configs, which allows an author to change the settings (e.g. option names) freely.

@joecritch
joecritch / intro-to-react.md
Created March 9, 2016 15:49
@joecritch
joecritch / life-with-react.md
Last active February 18, 2016 10:35
Links from "Life with React" talk
@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) {