Skip to content

Instantly share code, notes, and snippets.

🤑
Looking for work

Barney Carroll barneycarroll

🤑
Looking for work
Block or report user

Report or block barneycarroll

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@barneycarroll
barneycarroll / SassMeister-input.scss
Created Jun 11, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
// Placeholder using &
// ---
%C {
Z & {
property: value;
@barneycarroll
barneycarroll / jquery.attributeMatch.js
Created Jun 12, 2014
Sometimes Sizzle + CSS level 3's attribute selector logic isn't enough. Sometime you want to be able to do a RegExp search of attribute names, other times you don't know what the attribute name is but have some inkling as to the value. Not recommended for production (this is a performance-intensive anti-pattern) — this was written to help debug …
View jquery.attributeMatch.js
// Accessible from $ (whole document scope) or on $.fn (search with jQuery scope)
// Usage:
// attributeMatch( name, value, returnAttributes )
//
// Where @name and @value are RegExps or RegExps-as-strings to match against attributes names and values.
// @returnAttributes returns the attributes themselves rather than the owner element - useful to avoid repeating yourself
// eg: $.attributeMatch( /^lang$/, null, true )[ 0 ].value;
//
// To return all elements with ARIA attributes:
// $.attributeMatch( '^aria-\w+' );
@barneycarroll
barneycarroll / select2.accessibility.js
Created Jun 18, 2014
Hack some of <select>'s native accessibility behaviour back into select2. Work in progress: can't seem to implement silently without breaking select2 init.
View select2.accessibility.js
void function accessibilityForSelect2(){
if( ! $.fn.select2 ){
throw new Error( 'You must include Select2 before including its accessibility extensions.' );
return;
}
var oldSelect2 = $.fn.select2;
$.fn.select2 = function select2accessibilityWrapper(){
@barneycarroll
barneycarroll / SassMeister-input.scss
Created Jun 19, 2014
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
@function noop(){}
noop();
@barneycarroll
barneycarroll / grid-items.mixin.scss
Created Jun 19, 2014
SASS mixin for creating absolutely positioned, fractional width items. It fulfils the common flexbox use-cases but uses a simpler syntax.
View grid-items.mixin.scss
// gridItems is a mixin for creating absolutely positioned,
// fractional width items. It fulfils the common flexbox use-cases
// but uses a simpler syntax.
//
// The only requirement is that the parent be relatively positioned.
// Multiple invocation methods are possible, all of which are
// exemplified at the bottom.
// Occupy full dimensions of parent container.
// The gridItems mixin adds each passed selector to this rule.
View Multiline-ellipsis.markdown

Multiline ellipsis

Using one wrapping element, create multiline ellipses such that a '...' appears when text is overflown.

This particular example shows how it can be used in conjunction with complex effects like zebra-striping by using fixed background images and strict vertical rhythm.

It also implements a system of hidden checkboxes mapped to ellipsis text as labels to enable a 'click to expand' mechanism.

A Pen by Barney Carroll on CodePen.

@barneycarroll
barneycarroll / yieldBack.js
Created Jul 18, 2014
Use generators as asynchronous flow controllers (that look synchronous). Pass in a generator. It will be immediately invoked with a `callback` argument that can be inserted into asynchronous yield operations to send the response value back to the yield and resume generator execution.
View yieldBack.js
function yieldBack( generator ){
return generator( function( response ){
generator.send( response.value );
} );
}
module && module.exports = yieldBack;
@barneycarroll
barneycarroll / requireFolder.js
Created Aug 4, 2014
Supply a path to return an object with all that path's JS modules exports as properties / methods of the returned object.
View requireFolder.js
var fs = require( 'fs' );
var path = require( 'path' );
module.exports = function( folder ){
var output = {};
fs.readdirSync( folder )
.filter( function isJavascript( filename ){
return '.js' === path.extname( filename );
} )
@barneycarroll
barneycarroll / composer.js
Created Aug 17, 2014
Just rediscovered function composition.
View composer.js
function composer(){
var transforms = [].slice.call( arguments );
return function functionWrapper( handler ){
return function transform(){
var ctxt = this;
var args = [].slice.call( arguments );
transforms.forEach( function applyTransform( transform ){
transform.apply( ctxt, args );
@barneycarroll
barneycarroll / eventHandlerTransformer.js
Created Aug 17, 2014
I thought this was the most useful thing ever devised for DOM event handling. Then I realised this is just generic a generic function composition tool geared to an over-specified use case.
View eventHandlerTransformer.js
var _ = require( 'lodash' );
var m = require( 'mithril' );
_.extend( m, {
// Takes any number of transforms, returns a function wrapper:
// When executed, function will be passed through each transform
// sequentially before its own body is executed.
//
// As a DOM event handler:
// onclick: m.transform( m.prevent, m.stop )( x )
You can’t perform that action at this time.