Joe Critchley joecritch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ with-outlets.js
Last active
December 1, 2016 05:26
React mixin to add named outlets to a component, ready for transclusion
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ react.if.js
Last active
August 29, 2015 13:55
Conditional function, compatible with React's JSX precompiler
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| React.if = function(cond, trueCallback, falseCallback) { | |
| if(cond && typeof trueCallback === 'function') { | |
| return trueCallback(); | |
| } | |
| else if(!cond && typeof falseCallback === 'function') { | |
| return falseCallback(); | |
| } | |
| }; | |
| // Example usage |
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /////////////////////// | |
| // 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
/ httpd-vhosts.conf
Created
November 26, 2012 23:03
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ gist:3841065
Created
October 5, 2012 17:11
Show hidden images temporarily if sharing to Pinterest (using AddThis)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ gist:3796212
Created
September 27, 2012 20:16
"Round out tab" (based on http://css-tricks.com/tabs-with-round-out-borders/)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ gist:1723951
Created
February 2, 2012 15:19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| form { | |
| &.filtered { | |
| opacity: 0.5; | |
| } | |
| // ---- | |
| .field { | |
| float: left; | |
| &.selected { | |
| background: yellow; | |
| // --- |
joecritch
/ gist:1723939
Created
February 2, 2012 15:18
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ gist:1723922
Created
February 2, 2012 15:14
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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); |