Skip to content

Instantly share code, notes, and snippets.

Joe Critchley joecritch

View GitHub Profile
joecritch / with-outlets.js
Last active Dec 1, 2016
React mixin to add named outlets to a component, ready for transclusion
View with-outlets.js
var WithOutlets = {
componentWillMount: function() {
componentWillUpdate: function(nextProps) {
if(!nextProps || this.props.children !== nextProps.children) {
setOutlets: function(props) {
joecritch /
Last active Jul 26, 2016
A request for a code review of how to go about unit testing dynamic-like config data

Mocking config data in tests


  • 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 /
Last active Feb 18, 2016
Links from "Life with React" talk
joecritch / with_set_cache.js
Last active Dec 15, 2015
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.
View with_set_cache.js
// Example of how to use this mixin....
// - Think of UI components that can
['flight/lib/component', 'mixins/with_set_cache'],
function(defineComponent, withSetCache, _) {
return defineComponent(myComponent, withSetCache);
function myComponent() {
View httpd-vhosts.conf
NameVirtualHost *:80
<Virtualhost *:80>
VirtualDocumentRoot "/Users/Joe/Sites/%1"
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 / gist:3841065
Created Oct 5, 2012
Show hidden images temporarily if sharing to Pinterest (using AddThis)
View gist:3841065
// 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('', function(e) {
if (e.type == '' && === "pinterest_share") {
View gist:3796212
// Tabs
@mixin round-out-tab($active_class: current, $radius: 8px, $tab_color: $purple, $outer_color: #fff) {
position: relative;
a {
@extend .btn;
&.#{$active_class} {
&:after {
View gist:1723922
.class {
background: rgba(255,255,255,0.8); & {
background: #eee;
/** Which would output as: **/
.class { background: rgba(255,255,255,0.8);
View gist:1723939
.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) {
You can’t perform that action at this time.