07 May 2012

This is a story of serendipity.

But first, may I present Metafizzy’s new logotype, designed by James T. Edmondson.

Deep within the core of every graphic designer burns an yearning for creative typography and custom lettering. We all want to be Jessica Hische, Erik Marinovich, and all the other Friends of Type. Having already produced several compelling fonts, boasting a wonderful Dribbble showcase, and backing it all up with a captivating portfolio, Mr. Edmondson belongs in this pantheon of typography superheroes.

So I was totally thrilled to when James reached out via email, notifying me that he was using Isotope for his new site. This was probably the closest I’ll ever get to quenching the envious thirst to make pretty type. The use of Isotope was compelling – an organic grid layout, using filtering to showcase similar content.

But after taking a look at the source, it was apparent that, while James was an incredible typographer, his jQuery skills were still developing. In addition to thanking him kindly for sharing, I replied back with some recommended code refactoring. Thus, the gentlemenly gesture was returned, and a mutually-respectful working relationship was born.

Metafizzy was already in business for a year. It was time for a proper brand identity. My own attempts at a logo were perhaps cute, but ultimately immature in communicating the spirit and values of the company.

I had been considering contracting a proper typographer for a while to work on a custom logotype. But, lo and behold, a talented letterer contacts me before I even begin searching! It was kismet!

What followed was an enlightening exchange working toward the final product. Here I was, playing the role of the whiny client who thought he could “design” and do some sketching of his own.

After suppling the aesthetic inspiration of “rainbows and super-powered teddy bears,” James produced these first five sketches.

I was floored. Any of those five sketches was a winner. But there was something about the fourth sketch that jumped out as “this is an identity.” I tried to play around with some sketching of my own.

To which James came back with:

I tried a bunch more sketching, but these were all dead ends. From James’ sketch above, it was just a matter of honing it in.

James was so awesome, he made a geometic alternative and a one-line variant.

I couldn’t be happier with the results. James totally delivered on the work and then some. He was a pleasure to work with and you should go hire him right now.

A logo is both important and unessential. You can spend a lot of time on it, but that time is probably a lot better spent on building any other part of the business.

But I can say, now that Metafizzy has a proper logo, it does feel significant. This whole venture feels legitimate and worthwhile, all because I have something I’m proud to put on a t-shirt.

16 Mar 2012

Gene Crawford, being a upstanding Southern gentleman, offered me a fine opportunity to do a chat session for his site Unmatched Style. I graciously accepted. We got to talking about the history of Masonry, Isotope, and just what it is I do.

Unmatched Style Chat Session - David DeSandro

My thanks to Gene for putting this all together.

Also, sorry Jonah for totally blanking on your name.

30 Dec 2011

Metafizzy is now one year old.

Back when I began, I decided to add a support service for Masonry and Isotope. At the time, I would receive several requests for help each week. While I’d like to think I am a nice guy, there was little incentive for me to help these requesters, aside from open-source guilt. The support license was a measure to resolve this. I would get paid for efforts. And requesters would be vetted. No more freeloaders.

It was also a matter of pride. I felt obligated to users that they deserved proper support for using (and financially supporting) my resources. I’ve found answers on Stack Overflow to be disappointing. As Stack Overflow answers rank high on Google, these “solutions” then propagate through the developer realm. By helping others, I could help myself, preventing poor solutions from growing virally.

Having that support system in place has been beneficial to the development of Isotope. Options have been added and source code has been improved all because a requester had a problem that identified a weak point.

But this improvement in code has come at the expense of personal man-hours. Each morning for the past 10 months, slouched over a bowl of cereal, I could expect to find several new requests for support. Resolving each of those requests is a mini-project all of itself, with individual complexities and peculiarities that require care and attention. The workload was manageable, but I just didn’t have the heart to keep it going.

I was skeptical about starting a support service in the first place. I am happy that I gave it a try, that I was able to help my users, and improve my resources. But I have big plans for 2012. In order to create a resource like Isotope, I am going to need the hours and availability I had when I created Isotope. So it’s time to close this chapter of Metafizzy, in order to start writing the next.

16 Nov 2011

Isotope can make any ol’ image gallery especially more compelling. But if you’re loading in 20+ images at a time, it makes sense to get the smaller images with manageable filesizes. Rodrigo Sanchez was curious if there was a way to load in high-resolution, big filesize images after user-interaction, like when the image is clicked.

The solution is to use a little bit of Isotope, but mostly depend on some custom jQuery to handle the logic.

• Markup uses smaller thumbnail <img>, but links to larger hi-res images in <a>.
• When a link to an image is clicked, we’ll check if a larger image needs to be in loaded.
• If so, first we’ll add a loading GIF indicator to help users be patient.
• The large image will be dynamically added with jQuery, using the href attribute from the <a> as the src for the new <img>.
• Isotope’s included imagesLoaded is used to detect when that new image has loaded.
• After the image has loaded, we hide the small image, and show the large.
• If an image is clicked and it already has loaded a big image, we just need to show it.
• To Show/hide images, we’ll toggle a class .large. Simple CSS styles will handle what gets hidden/shown with that class on or off

View fiddle - Isotope - dynamically load images

Loading these big images into the Isotope layout will typically put them in a different spot from their thumbnails. You can add automatic scrolling with the jQuery scrollTo plugin.

• Get position of the container’s top.
• Set itemPositionDataEnabled: true in Isotope’s options. See details on itemPositionDataEnabled.
• When clicked, use $.scrollTo. The top value is calculated from .data('isotope-item-position').y + containerTop.

View fiddle - Isotope - dynamically load images, and scrollTo

20 Oct 2011

Proper callbacks that trigger after animations has been one of oldest lingering issues with Isotope since its release. But fret no more! With yesterday’s release of version 1.5, Isotope can callback all over the dance floor. Check out the sweet callback action on this test page.

Like most issue resolutions, I had punted this one for a while because I knew that getting it to work would take a lot of code. I was right. You might think “jQuery has callback integration in just about everything. How hard can it be?” The problem is not so much with jQuery, as it is with triggering a callback with CSS transitions in place. Here’s a walkthrough of the logic that had to be put into place just for CSS transition callbacks.

• Get transition-end event name for browser, i.e. WebkitTransitionEnd. lines 255-261
• Get transition-duration style property name for browser, i.e. -webkit-transition-duration line 262
• For the group of elements that will be transitioned, check if one of them actually has a transition duration value greater than 0. lines 652-668
• If so, bind a callback to that transition-end event for all these elements. line 262
• Make sure that callback only triggers once. line 637

Even after all of this there is plenty of use cases that will break a callback from triggering with CSS transitions. But hopefully, for the majority of users, their callbacks will trigger right after the animation or transition completes and no one will be the wiser. If you do run into problems with this new feature, help a guy out and submit an issue.

11 Oct 2011

Yay, I’m getting married in a month! Between getting all the final details together, going on a honeymoon, and my full time job, I have no bandwidth to take on any support requests. So I’m taking off support service until December 2011. I apologize for the lapse in service and wish you the best of luck debugging your way out of the trenches.

Have a spooky Halloween and scrumptious Thanksgiving!