CodePen showcase: Round 1

9 Aug 2016

Metafizzy's libraries have hundreds of CodePen demos. One for every feature, option, and behavior. But these demos are simplified examples. They don't do a good job of showing off what they're capable of. So I reached out to the true code artists of CodePen to see how they could make Isotope, Flickity, and Packery shine in the spotlight. Give 'em the old razzle-dazzle.

I'll be collecting these in the Metafizzy showcase CodePen collection, as well as individual collections for each library.

Kseso makes the most of Flickity and CSS, using is-selected classes to trigger transitions for each slide. Within each slide is a great mix of imagery and typography at that!

See the Pen Playing with Flickity by Kseso (@Kseso) on CodePen.

Jesse Shawl made a slide puzzle with Packery. I can't believe this actually works!

See the Pen Order the tiles by Jesse Shawl (@jshawl) on CodePen.

Gregor Adams took the Packery concept composed this 3D cube ballet. I love how the cubes align even with staggered animation.

See the Pen Pack(ev)ery thing by Gregor Adams (@pixelass) on CodePen.

But he didn't stop there. Gregor made another Packery demo, this time using simpler rectangles. Check out how it works when you resize it.

See the Pen Packery hackery by Gregor Adams (@pixelass) on CodePen.

Perhaps the best use of Isotope ever, Antoinette Janus makes sense of many characters and fusions in Steven Universe. I have a hard time remembering the difference between Sugilite and Sardonyx ;)

See the Pen Steven Universe x Isotope [Sponsored] by Antoinette Janus (@acjdesigns) on CodePen.

Bennett Feely makes a 3D, hovering Packery layout. It's melting my mind how this works.

See the Pen Packery layout with 3D blocks by Bennett Feely (@bennettfeely) on CodePen.

Katy DeCorah brings her ever-impressive style to make this captivating grid animation using Packery. This one is fun to resize.

See the Pen Geo scope by Katy DeCorah (@katydecorah) on CodePen.

It's a delight to see what creative coders can come up with.

We have some more artists lined up so stay tuned for Round 2!

Flickity v2 released: groupCells, adaptiveHeight, parallax

18 Jul 2016

Flickity is the best carousel library there is. Since its initial release last year, Flickity has grown to be hugely popular (thank you for making that happen!), being put to use in high-profile sites like Engadget, Artsy, and Kanye West's yeezysupply.com. With version 2, Flickity cements its status as the go-to carousel.

Version 2 is a huge upgrade. Let's take a look at some of its new features.

Groups cells together to act as individual slides with groupCells.

See the Pen Flickity - groupCells by David DeSandro (@desandro) on CodePen.

adaptiveHeight changes the height of carousel to fit height of selected slide.

See the Pen Flickity - adaptiveHeight with transition by David DeSandro (@desandro) on CodePen.

Lazy-load background images with bgLazyLoad.

See the Pen Flickity - bgLazyLoad by David DeSandro (@desandro) on CodePen.

Create parallax effects with the scroll event.

See the Pen Flickity - keyhole parallax by David DeSandro (@desandro) on CodePen.

Check out this fun Yoshi's Island tribute!

See the Pen Yoshi's Island parallax Flickity by David DeSandro (@desandro) on CodePen.

Flickity v2 removes old IE8 & 9 browser support, dropping 800 lines of code, making it 15% smaller. Webpack usage has been simplified — no more config junk. All these goodies are backed up with our top-notch documentation and feature-by-feature demos and CodePens. Best part: Flickity v2 is backwards-compatible with the previous version 1.

Flick that upgrade up.


This wraps up the 2016 major version upgrade run. Did you catch Isotope v3 and Packery v2? It's been a doozy — banging out major releases for every big library, multitudes of support libraries, and all the documentation sites. Pushing out all that code was a thrill, feeling like a developer super-producer. But I'm relieved now that it's all wrapped up. Time to build something new.

Rainbow bear shirts & sticker give-away

26 May 2016

Ho dang. The world needs more rainbow bears out there and we're gonna make it happen.

Rainbow bear shirts now on sale

Metafizzy rainbow bear t-shirt

Metafizzy rainbow bear shirts are now on sale on Cotton Bureau. You can now sport that fizzy bear, bouncing up towards design Valhalla, right on your own person. The sale lasts for the next two weeks, so order now. We'll throw in a couple stickers with your shirt to sweeten the deal.

Shirts come in Poly-cotton Bondi Blue, Apple Green, and Heather Gray. 3 lovely options to choose from, in both men's and women's sizes. Poly-cotton shirts are soft to the touch, are a couple bucks cheaper, plus have a better true-to-size fit. Tri-blends might feel super soft, but I suspect they're designed with malnourished vagabonds in mind. No way I should by hulking-out of a medium. Not a problem with the Poly-cotton. If you're a medium, order a medium.

Yeah, the design happens to be the logo for Metafizzy. But when you put on this shirt, it's just a rainbow bear. No explanation required. I've left off any other workmarks or branding, to let the design be itself. Just a bear, leaping for kicks, all rainbowed out. You'll love this shirt..

I'm selling these shirts with zero markup. Just like a proper mattress store, passing the savings on to you. I've been working with Cotton Bureau for years and have consistently been impressed with their quality of product. Great to launch another piece of apparel with the gang in Pittsburgh.

But the swag don't stop there...

Free stickers in USA

Metafizzy stickers

Dear Americans, you get stickers for free, by virtue of our national freedom and by virtue of thriftiness of USPS stamps. That's right. You get 4 dazzling stickers fo' free.

  • Metafizzy rainbow bear logo
  • Metafizzy rainbow wordmark
  • Bower bird logo
  • Chromed-out Refactor

Email yo@metafizzy.co with a shipping address and we'll send 'em over. Let us know if you got a team of people at work and we'll include multiples.

Stickers outside USA

If you live outside the US, we got you covered. You can purchase a set of stickers for the low, low price of $4 USD. That includes international shipping to where ever you are. You can increase multiple quantities for your team buddies.

Metafizzy stickers international


Whew, that's a lot of goodies! We haven't done a sticker give-away for three years. Been too long! I'm finally in a place where I can spend time mailing stuff out. That's the real constraint. Sitting down, printing envelopes, heading to the post office. It's great to now have an option for all the good people outside of the States. The response to the new logo was a treat, so I'm jazzed to get these out there.

And when you do get your rainbow bears, why not scratch our back and show off the goods like these fine folks?

Upgrading junky IE8 code with current goodies

23 May 2016

Man, it feels good to cut out all the old junky code and live in the modern day. With new versions of Isotope, Packery, Masonry, and imagesLoaded, I've been upgrading browser support, dropping IE8 & 9, and Android <4. I've been able to remove hundreds of lines of code.

If you're looking to bump up your browser support, here's a run-down of all the code you can upgrade.

Use standard browser properties

Use addEventListener for event binding, rather than a helper like eventie.

// IE8
eventie.bind( element, 'click', function() {...});
// modern browsers
element.addEventListener( 'click', function() {...});

Use classList for changing classes, rather than a helper like classie.

// IE8
classie.add( element, 'is-selected' );
// modern browsers
element.classList.add('is-selected');

Use event.preventDefault().

// IE8
function onClick( event ) {
  if ( event.preventDefault ) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}
// modern browsers
function onClick( event ) {
  event.preventDefault()
}

Use window.pageYOffset for scroll position.

// IE8
var isPageOffset = window.pageYOffset !== undefined;
var scrollX = isPageOffset ? window.pageXOffset : document.body.scrollLeft;
var scrollY = isPageOffset ? window.pageYOffset : document.body.scrollTop;
// modern browsers
window.pageXOffset;
window.pageYOffset;

Use standard textContent for setting text.

// IE8
var docElem = document.documentElement;
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';

function setText( elem, value ) {
  elem[ textSetter ] = value;
}

setText( element, 'hello world' );
// modern browsers
element.textContent = 'hello world';

CSS support

All browsers now support transition and transform. So I no longer need get-style-property to check vendor properties.

// IE8
// get vendor property for transform
var transformProp = getStyleProperty('transform');
// set position
if ( transformProp ) {
  // supports transform, set transform
  element.style[ transformProp ] = 'translate(40px, 30px)';
} else {
  // does not support transform, set left, top
  element.style.left = '40px';
  element.style.top = '30px';
}

Modern browsers support transform or -webkit-transform, so you don't have to check every vendor prefix.

// modern browsers
// get vendor property for transform
var docElemStyle = document.documentElement.style;
// either transform or WebkitTransform
var transformProp = typeof docElemStyle.transform == 'string' ?
  'transform' : 'WebkitTransform';
// supports transform, set transform
element.style[ transformProp ] = 'translate(40px, 30px)';

New ES5 features

Dropping IE8 and Android 2.3 means you can natively use ES5 features. There are a bunch of new ES5 features, but here are the ones I have actually used.

Array.isArray to check if an object is an array.

// ES4
var objToString = Object.prototype.toString;
function isArray( obj ) {
  return objToString.call( obj ) == '[object Array]';
};

isArray( items );
// ES5
Array.isArray( items );

Array.prototype.indexOf to get the index of a value.

// ES4
function indexOf( ary, value ) {
  for ( var i=0; i < ary.length; i++ ) {
    if ( ary[i] === value ) {
      return i;
    }
  }
  return -1;
}

indexOf( items, value );
// ES5
items.indexOf( value );

Array.prototype.forEach to iterate over an array.

// ES4
for ( var i=0; i < items.length; i++ ) {
  var item = items[i];
  console.log( item );
}
// ES5
items.forEach( function( item ) {
  console.log( item );
});

Array.prototype.filter to create a new array by filtering values.

var numbers = [ 1, 2, 3, 4, 5, 6 ];

// ES4
var evens = [];
for ( var i=0; i < numbers.length; i++ ) {
  var number = numbers[i];
  if ( number % 2 === 0 ) {
    evens.push( number )
  }
}
// ES5
var evens = numbers.filter( function( number ){
  return number % 2 === 0;
});

Array.prototype.map to create a new array by changing values.

// ES4
var doubles = [];
for ( var i=0; i < numbers.length; i++ ) {
  var number = numbers[i];
  doubles.push( number * 2 );
}
// ES5
var doubles = numbers.map( function( number ) {
  return number * 2;
});

Object.create for prototypal inheritance.

function Animal() {
  console.log('I am an animal!')
}

// ES4
Dog.prototype = new Animal();
// constructor function is triggered
// logs 'I am an animal!'
// also, weird syntax
// ES5
Dog.prototype = Object.create( Animal.prototype )
// constructor function not triggered, no console log

And there's more to play with. I've experimented with custom Object getters and setters. These are powerful concepts, but may take some getting used to.


You may have looked twice. ES Five? Isn't ES6 the new hotness?

Metafizzy's libraries are designed to have a wide, diverse user-base. While forward-leaning developers may be itching to use ES6, they still have to step through scaffolding if they want to use it widespread in production. All the above code can be used right now in every browser worth using. No build processes. No transpilers. Straight up vanilla.

Isotope v3 released: stagger in, IE8 out

5 May 2016

Isotope v3 is Metafizzy's flagship product — the best JavaScript library for filtering and sorting dynamic layouts. It just got a whole lot better with new version 3. We dropped support for IE8 & 9, and Android 2.3. In doing so, we were able to shed 800 lines of code to make Isotope's filesize 20% smaller. We added a new option to stagger item transitions (finally).

Isotope stagger transition

Staggered transitions are a small change to animation behavior, but the result is subtly compelling. The reveal and hide animations appear more natural.

See the Pen Isotope - stagger by David DeSandro (@desandro) on CodePen.

We simplified using Isotope with Webpack. Now your webpack.config.js only requires two aliases.

module.exports = {
  resolve: {
    alias: {
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout'
    }
  }
};

Best part: Isotope v3 is backward compatible with Isotope v2. Upgrade worry free. All your previous code will continue to work: jQuery plugin, events, methods, etc.

Open-source projects rarely get to version 2. I'm proud that Isotope has made it all the way to version 3.

We've been pushing out a bunch major version upgrades to our projects in 2016: Masonry v4, imagesLoaded v3, Packery v2, now Isotope v3. Next up: Flickity v2.

$(window).load() is a last resort

25 Mar 2016

I continue to see develpers rely on the window load event in their code. Typically it's used to run code after all images have been loaded. For example, when used with Masonry, Packery, or Isotope:

$(window).load( function() {
  $('.grid').isotope({
    // isotope options...
  });
});

Let me be clear: Don't do this.

$(window).load() should only be used as a last resort. That's because load has to wait for everything else to load. From on GlobalEventHandlers.onload MDN

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

load waits for every asset on the page to load: every image, JS file, CSS file, and iframe — plus media like audio, video, or fonts.

Rather than waiting for everything, use a smaller scoped event so you only wait for specific assets. imagesLoaded is perfect for this as it allows you to target a set of images. Your code runs as soon as the necessary images are loaded, rather than after all assets. From Isotope - imagesLoaded:

var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope when grid's images have loaded
  $grid.isotope({
    // options...
  });
});

Or initialize isotope, then trigger layout as images load:

// init Isotope
var $grid = $('.grid').isotope({
  // options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

Chances are, there's a faster way to detect what you're loading, rather than using $(window).load(). Web fonts have a loader API. <video> and <audio> have load events.

Only use load if you absolutely have to. By avoiding it, you'll be making your sites faster and me happier :)