Masonry v4 and imagesLoaded v4 drop IE8

15 Jan 2016 · by David DeSandro

As promised, we are dropping support for IE8 & 9. We have released Masonry v4 and imagesLoaded v4, ushering in a new glorious era of modern browser support.

Masonry

imagesLoaded

Dropping older browsers meant dropping excess weight. 700 lines of code were removed for Masonry v4, making it 25% lighter. imagesLoaded dropped 450 lines of code, reducing its size by half.

Both libraries' APIs are backwards compatible with their v3 counterparts. You can upgrade without changing any JavaScript. (If you are using module loader or package manager, you may need to update dependency filepaths as they have changed). Read over upgrading to Masonry v4 from v3.

If you still need IE8 & 9 or Android 2.3 support, previous versions are still available.

Next up: Packery v2.

Flickity takes The Field

17 Dec 2015 · by David DeSandro

The Field is a new outdoor lifestyle publication, or as founder Chris Stillitano puts it, "The Field is a place for good design and the great outdoors." It's also a great place to see Flickity in use.

The Field photo essay

The Field quick read

The Field's beautiful photo galleries are made with Flickity. It's great to see how they've taken advantage of Flickity's customizable previous & buttons to minimally style and position them. The slide counters change on cellSelect.

The site has a keen design sense, utilizing different layouts for its various content types. So much care went into these photo galleries. Watch how images resize and center while resizing the browser, even with images of varying aspect ratios.

And check out the sidebar photo gallery expanding across the page!

What truly melts my heart is how well Flickity fits inside of The Field's greater presentation. It works along side the publication's captivating photography and insightful commentary. Chris & co. are able to use Flickity to tell a bigger story — Flickity just plays a small part.

Fizzy bear branded

1 Dec 2015 · by David DeSandro

Fizzy's got a brand new brand.

Metafizzy brand

The previous logotype was a beaut and served Metafizzy well. But it did have some issues (No fault of James' — these issues were all self-inflicted as I requested).

  • Legibility trouble: People would read "Meta fuzzy" or worse "Meta furry"
  • The two line treatment led to people spelling the name as two words "Meta Fizzy"
  • It did not reduce well. It didn't hold up at small sizes, like a Twitter avatar or favicon

But the big reason for a rebrand was that I saw how popular the Bower logo had become. When I'd go to meetups and lay out stickers, all the Bower birds would get snatched up. With visual logos, people can ascribe their own meaning to them. It's just an image. But a logotype or wordmark has a definite meaning. It names the company. This direct meaning makes logotypes less relatable. You probably want to stick an Octocat on your laptop, but feel kinda weird labelling it with a "GitHub" wordmark.

Metafizzy needed a mascot. The bear has long since been a part of company lore. Erin likes to tease this enterprise, calling it "Lil Bear Designs." Back in 2012, I tried out the concept, sketching a couple bears. You can see how close these sketches were to the final version.

Metafizzy bear old sketches

I liked the leaping treatment, but the execution looked awkward. Opening up the sketchbook three years later, I thumbnailed a variety of little bears.

Metafizzy bear sketches

Metafizzy bear sketches

I felt like a simplified runner bear was the winner.

Metafizzy runner bear iterations

But it turns out pedobear is a thing. So I went back to the leaping bear concept.

Metafizzy leaping bear iterations

It looks simple enough, but getting to this final form took hundreds of iterations, tweaking line styles, adjusting arm and leg positions, and figuring out what to do with that damn right ear.

This logo checks off all the boxes: reducible, mascot, and it's flexible. It works as one-color treatment, but its capable of more elaborate styling with rainbows or gradients.

With the new bear logo, the wordmark needed revisiting. The geometric logo treatment did not pair well with the humanistic letter forms. Fortunately, when James submitted the logotype, he also provided a couple geometric logotype treatments. As a bumbling novice typographer, I attempted to retool these to better suit the new logo and resolve the legibility issues.

Metafizzy wordmark process

Better together.

Metafizzy logo and wordmark

The wordmark still doesn't feel 100%. It does its job sitting next to the logo. But alone, it's missing the bounce and lilt of the previous version. It's a bit too generic and safe. As Erin noted, it could work just as well on packaging for baby formula.

To help convince myself, I started using the new brand in practice. Rather than writing this blog post and declaring "It's done!", putting the logo and wordmark on stuff would be the best test to see how it worked in context.

Metafizzy brand in use

I love it. The bear is in.


Logos are important, even for a one-man company. After all, it's just me and the code. But with a brand, Metafizzy feels bigger, more real.

This one marks the next chapter.

Metafizzy logo timeline

5

30 Nov 2015 · by David DeSandro

Metafizzy is five years old. That's old. Old enough that it was past-due time to do an an overhaul: brand new site, brand new brand.

You would think, after all this time, I would finally have it figured out. I know I want to keep working on Metafizzy. I feel better doing this job than any other job I've had before. But I'm not certain what's next.

Five years for a business is no small feat. But when I put it in those terms, five years, there's something underwhelming about it. Metafizzy is still just me, working on my own projects. Shouldn't I be managing a team of people? Shouldn't there be more products? How come everything feels just as small as when I started?

I don't have answers just yet, but I'm now thinking about these things. Hitting one milestone gets you thinking about the next milestone. It's a bigger timescale.

The weird thing is, what I do — front-end development — feels even more niche than when Metafizzy first started. Front-end widgets have been dropped for new shiny things: frameworks and build tools. But front-end UI libraries were never "solved." The same issues that widgets faced five years ago are still prevalent today: inconsistent APIs, poor documentation, lack of standards, and so on. On top of that, UI libraries have to fight to support the multitudes of frameworks, package managers, and build tools. Wasn't it supposed to be better by now?

So the good news is there's plenty of work to be done.

I don't know what the next five years holds. Will a kid getting her first smart phone today even use websites five years from now? Maybe everything will run in Minecraft. But, if anything, the years have taught me that there's always more time to solve the problems you have today.

Our story thus far...

How to sell a bunch of shirts on Cotton Bureau

12 Nov 2015 · by David DeSandro

Refactor shirts

I've had some good fortune shilling shirts on Cotton Bureau. The Refactor shirt recently completed its third offering, selling another 50 units. Not too shabby! Meanwhile, the Bower shirt remains in the top 10 wall of fame, with over 500 sold (and it's yellow!). It's not an exact science, but here's what I think works.

1. Buy a bunch for yourself right at the start

As soon as your shirt goes on sale, be your own best customer and buy several. The more the better. This is the #1 tip because of social proof. Seeing others make a purchase, helps reassure customers that they're making a good purchase. Being the 3rd customer feels dicey. But being the 23rd customer feels reasonable. It's like street buskers putting their own cash into the guitar case. You got to get it going yourself.

I'm surprised how many shirts have 0 sales after a week. You at least are going to buy one for yourself, right? You probably want extras to use as gifts and swag. If you got freelance or side-business, write it off as a business expense. And I'm sure your mom & dad would both proudly wear it when they're working in the yard.

2. Post the shirt everywhere you can, 3 times

The Cotton Bureau team does a good job of communicating this point. Your shirt will not sell unless you promote it. Don't feel bashful with a single Tweet or Instagram when the shirt goes on sale. Post liberally. Use multiple posts over the course of two weeks. Use every outlet you have access to: Twitter, Instagram, Dribbble, Tumblr, your blog, your newsletter, any site you can change the HTML. Also consider directly pinging individual friends and contacts. A personal one-to-one recommendation has a lot more weight than a wide-span broadcast. Provide your seller's discount to sweeten the deal.

Make it interesting! I photoshop the shirt on Keanu, T-swift, and models.

More shilling Tweets in the Shirt promo Twitter collection.

I'm not kidding about using any site you can get your hands on. I put up a promo in the footer on all my documentation sites: Isotope, Flickity, Masonry. People come to these sites to learn some JS, but I was surprised to see how many shirt sales kept trickling in because of them.

Refactor shirt footer promo

3. Be chill about money

Yes, you can turn a profit Cotton Bureau. But realistically, you are not going to make a lot of money. CB shirts are not cheap to begin with. (Their prices are fair. Their crew is real people in Pittsburgh, who have to manage all the inventory, printing, packaging, and shipping of thousands of shirts. That ain't easy.) There's little reward in marking up a $20 shirt 3 more dollars. If you got a hot shirt, it might sell 30 units. At $3 profit, that's $90. That's real money, but not that much.

Compare that to the swell of emotion of seeing a stranger live their life in your art. My work may be used on tens of thousands of sites, but designing t-shirts feels like the most real thing I do. It's a wonderful cosmic kindred sense. Someone else can feel strongly enough about your work to wear it on their body. Like they adopted your art as a little part of their own identity.

That feeling is worth way more than three bucks for me. I've been pricing my shirts at zero profit.

Also consider offering a Poly-Cotton or 100% Cotton selection, as they can save a couple bucks on the price. I've found the Next Level Poly-Cotton shirt to be pretty soft, and a better fit than the Tri-Blends.

4. Have a brand

It's worth looking through the Wall of Fame.

Cotton Bureau Wall of Fame

Of the top 20 shirts, only four are not part of some larger brand. A lot of shirts are popular, not because the shirt has a great design, but because the shirt is about something else. People may be a huge fan of a show, or power-user of a product, or a supporter of the artist. The shirt is not about the design on the fabric, but about what it represents. It allows people to be a part of this bigger thing.

Ask yourself: Would I wear this? A clever design might not be enough.

I continue to be impressed by how well the Bower shirt sells. For all the Bower haters I see on Twitter, people keep buying the shirt. I think it's because it has both pieces: a nice design and a bigger brand. The lil' bird illustration is cute and innocuous. It doesn't have to mean anything. But, if you want it to, the shirt says "I'm into JavaScript" and "I'm a coder." It speaks to this larger identity in a subtle way.

imagesLoaded gets backgrounds

30 Oct 2015 · by David DeSandro

imagesLoaded now supports background images, finally.

Set { background: true } to detect when the element's background image has loaded.

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

See the Pen imagesLoaded - background by David DeSandro (@desandro) on CodePen.

Checking when images are loaded is a black magic. There are all sorts of quirks involved with how browsers load and display images. Cached images do not trigger a load event. Sometimes the load event is triggered before the image displays. Consequently, developing imagesLoaded is done with a fair amount of trepidation. With every fix and featured added, I worry two more issues will spring up in their place. That's why adding background images as a feature took over three years.

imagesLoaded v3.2.0 includes other improvements:

  • Removed the internal buggy cache
  • Address Firefox bugs
  • Added .makeJQueryPlugin() for better compatibility with jQuery and Browserify/RequireJS/Webpack

imagesLoaded is the 58th most popular library on Libscore, used on over 30,000 sites. Seeing this stat made me realize that it is just more than a pet project — it is a public utility. imagesLoaded should work for everyone, not solely my own endeavors. Now with backgrounds, imagesLoaded can help more developers.