Skip to content

Instantly share code, notes, and snippets.

Avatar
🤑
Looking for work

Barney Carroll barneycarroll

🤑
Looking for work
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.