Word is Flickity is good

19 Oct 2016

Flickity has been getting good looks from some of the web's top developers.

To top it off, Darin Reid has extended Flickity's scroll behavior to do wild transformations with Flickity Transformer.

Flickity transformer

See the Pen Flickity Transformer by Darin Reid (@elcontraption) on CodePen.

It's a delight to see Flickity getting the attention it deserves. But it didn't happen overnight. It's taken over a year to accrue this level of praise.

And let's not forget, Yeezy uses Flickity.

BongoHive chat

12 Oct 2016

I was recently invited by Silumesii Maboshe of BongoHive to chat about Metafizzy on their Slack channel. BongoHive is a entreprenurial community based in Zambia. The African start-up scene seems like a distant realm, one I'm hardly familar with, but jumping on a Slack brings it as close as any other community. Below is an edited transcript of the chat session.

silumesii:: Welcome @desandro!

desandro:: Hello!

silumesii: Thank you so much for joining us today. What time is it over there?

desandro: It’s noon on a sunny day here in Alexandria, Virginia, USA

silumesii: Sounds great! I was about to say "Good morning" :smile:.

We'll start in the middle, go back and then come forward (a bit like Pulp Fiction). Where did the name Metafizzy come from?

desandro: Metafizzy is the name of my small business. It’s built around creating and supporting web UI libraries like Isotope and Flickity.

I wanted the name to be something fun. It’s a play on the word “metaphysical.” “metaphysical” is a serious concept, but adding “fizzy” make it silly.

I like that its unique (as opposed to use “Fizzy”). In retrospect, I think its too long of a name. People have a hard time reading it at first site

I wrote about the name when I first started: metafizzy.co/blog/metafizzy-is-a-silly-silly-name

silumesii: Cool! I like that it's evocative and "bubbly" but also "meta". It's fun and futuristic at the same time.

How many people are at Metafizzy (leading question :smile:)?

desandro: It’s just me! I am and have always been the only employee. But I did decide to use a company brand instead of my own name to make it seem more official, and in case more people joined the company

silumesii: That's inspiring! I say "leading question" because a lot of Zambian devs and designers have companies exactly that size as well.

What does it take to run a company that size and still do great work?

desandro: 1) Luck. I was especially lucky for Isotope to be as successful as it has been. It’s be out for 5 years and remains Metafizzy’s number one source of revenue.

2) Interest - you have be interested enough in your work that you can come back to it. You have to be self motivated

3) Carving a niche - I think I’ve gotten this far because not a lot of other people do what I do.

Ha, I don’t know if my work is ‘great’ but it’s good enough to make it this far :stuck_out_tongue:

silumesii: Number 3 stands out for me.!

Before opening it out for everyone to participate, the question I've been dying to ask for months is ... who leaves Twitter to go it alone?

desandro: Working at Twitter allowed me to go it alone. I made a lot of money at Twitter. So it wasn’t as risky if Metafizzy didn’t work out.

While Twitter had great money, great people to work with, huge publicity — but the work itself was unbearable. Meeting and meetings. I’d work on projects for months and they’d eventually get thrown out. I decided to leave Twitter because I felt defeated working there. Even with all money and benefits and free t-shirts

Working for myself, I immediately felt better. I had agency. I had a sense of purpose. The efforts of my work had clear results

silumesii: Inspiring! Thanks!

makayi: what things did you learn from Twitter that you believe have directly or indirectly helped make MetaFizzy a success?

desandro: Thanks for your question @makayi! Working at Twitter opened my eyes to see how users don’t care about your product. They care about how the product in the context of their own lives - how the product can help or aid their lives. It’s a humbling idea. You think that Twitter is so great and that users would love these special features. But the feature has to be about making users’ experiences better, not just making the product better

For example, I re-organized the documentation for the libraries so that it made a progression - from simple concepts to more complex concepts. Previous it was organized around how the library was built - my perspective

I’ve tried to simplify my sites and APIs so that new users can achieve their goals, rather than organizing it around how I know it

Let me take a second to introduce myself. I'm David DeSandro. I work full time at my small business Metafizzy. I create and support web UI libraries like Isotope (filtering and sorting), Flickity (carousels), and Packery (draggable grid layouts)

I've also made Masonry and imagesLoaded, two of the most popular web UI libraries.

Recently I've been working a brand new project. I'm designing and selling 50 logos. logo.pizza

silumesii: Thanks @desandro. I got so excited that I assumed the introduction wasn't necessary. Appreciate that!

chizzo: What!!! I use Masonry... Not knowing you are the guy behind it :flushed:

Now the name rings a bell from url :joy: :grin: #MyBad

desandro: Yup that’s me! masonry.desandro.com. Masonry is 7 years old. Has 10,000 stars on GitHub. One of the top 100 libraries on the web

makayi: @desandro thanks David. I actually got your library as well a few weeks ago. Nice to know the person behind it.

silumesii: @desandro What is the mind-shift back-and-forth like from dev to design. Does it get easier with time?

desandro: Personally, I like to bounce between design and development. It helps solve problems. In both design and development, I run into ‘shower time’ issues. These are tricky problems I’ll have a hard time with. I’ll focus on them for a while but can’t solve them. So if I walk away from them, do something else, a great solution can magically appear by day-dreaming

I work on the same thing for a while, it’s hard to keep a good perspective. For the first half of this year, I was spending all my time working on code. Lots of releases. I’m now taking a break - working on the logo project.

chizzo: Firstly, let me say am a huge fan of grid layouts and the tile like interface, like Windows Phone UI. I use Masonry :grin: and after visiting Metafizzy... I've been fascinated by Packery packery.metafizzy.co

Checking out the sites using packery, none of them use it the way it is demo'd. Do you have any links you can share for the way it has been used in the wild? Like draggable tiles

desandro: niice.co is probably the best use of Packery. To see it draggable, you’ll have to create a new moodboard.

I’ve also collected these Packery CodePens

chizzo: Ok! Nice!

silumesii: @desandro On the development side of things what does your "toolbox" look like?

desandro: Textmate, Google Chrome developer tools, Gulp JS, GitX, iTerm2

chizzo: Am curious on what language you use? PHP, a framework like Ruby on Rails, etc

desandro: All Metafizzy libraries (Isotope, Flickity, Packery) are written in vanilla JavaScript. They support jQuery and can be used as jQuery plugins. They have universal module definitions so they can be used by other frameworks and module loaders like Browserify, RequireJS, and Webpack

Personally I like to write vanilla JS, vanilla CSS, vanilla HTML. I find pre-processors to be too much complexity for little benefit

silumesii: @desandro Perhaps a loaded question but on the other end of things, what makes a good designer? How does one get better at that craft?

desandro: I think the only way to get better an anything is with practice. Quantity over quality. Make more stuff. I’m not that good at logos, and wanted to get better, so I’ve spent the past month designing a lot a logos.

silumesii: Thanks @desandro!

It's been an honour having you! I really enjoy how you write ... rich but succinct. That's quite the skill.

Really appreciate the insights.

desandro: haha, thank you! I think my writing is my weakest skill. Not enough practice!

New tech gets chatter

4 Oct 2016

My text editor of choice, TextMate, is old. Version 1 was released in 2004. Version 2 was announced in 2009 and has been in alpha & beta release since 2012. TextMate is old enough that a whole new generation of text editors have emerged and eclipsed it, most notably Sublime Text and Atom. They have built upon TextMate's successes and learned from its pain points. But I continue to use TextMate, and will continue to TextMate. Because TextMate works for me.

You don't hear about TextMate because TextMate is old. What would I tweet? Still using TextMate. Still good. TextMate's problems are well known. Its hacky solutions are documented. Most everything's been covered.

Meanwhile, Atom is entirely new. Its problems are new problems. When you find a solution, you might be the first one to discover it. That's pretty special. That's worth tweeting.

Seeing all the talk around Atom chips away at the confidence I have in TextMate. I feel like a stubborn luddite, clinging on to my 2005 flip-phone because I can see the numbers better. But that feeling, of missing-out because others are talking about it, is just a perceived social pressure, a herd behavior.

As a tech worker, I would like to think I am a highly rational being of pure logic. But I am just as susceptible to emotions as the rest of the muggles. So I recognize and tune-out hubbub and go with what I know. Because it continues to work, even though continuing to work isn't worthy of mention.

I use Sparrow for email. I write CSS in vanilla CSS. I write JavaScript in vanilla JavaScript (ES5 at that, kids). I haven't written a line of React.

If you use React and you like it: great. But if you don't use React (or whatever hot new tech), and you feel like you should: don't worry about it. You are perfectly okay to stick with what works for you. The more you use something, the clearer its pain points become. Try new technologies when you're ready to address those pain points. Don't feel obligated to change your workflow because of chatter. New tech gets chatter, but that doesn't make it any better.

In this very year of 2016, George R. R. Martin is writing the most popular work of fiction of this century on a 1980's DOS machine running WordStar 4.0. He blogs on LiveJournal.

Logo Pizza Delivered

2 Oct 2016

Logo Pizza

After shipping Flickity v2 thus wrapping 2016's huge development project, I didn't have it in me to write another line of code. I discussed my state of mind and motivation in this 3 min podcast.

New thing, shortsightedness on Bumpers

Looking to change things up, I started making logos.

Man, I love logos. A little piece of imagery that represents the ideal you want your project to be — that's design magic right there. I've been able to work on some great logo projects, but I've been itching to do more. Rather than wait for projects to come my way, I gave myself a project of my own: design 50 logos. 50 logos in 30 days.

Fifty logos is a lot. At least one or two a day for an entire month. I tried pushing myself: exploring different styles, subjects, and techniques. It was like design boot camp: working all those muscles you never use.

Logo Pizza logo sketches


More than effort, this project required time. I took off an entire month from working on Metafizzy's active breadwinners: Isotope, Flickity, and Packery. This new project needed to make money. I decided to sell these logos. So now I wasn't just designing little illustrations, I was designing products.

Critics have commented that these logos aren't actually logos because they weren't designed for anybody. Think bigger. These logos were designed for 50 potential buyers. I designed the logos collectively, as a product line. That's why there are simple logos and complex logos, animals and people, realistic and abstract, cutesy and bad-ass logos. I didn't just design the individual logos, I intentionally designed this project as an event.


Logo Pizza header

I took inspiration from the The Million Dollar Homepage and I Wear Your Shirt, both why didn't I think of that ideas. I always wanted to do a why didn't I think of that thing. A gimmick!

  • All logos are the same price.
  • The price starts cheap.
  • With each logo sold, the price increases.

This encourages customers to buy sooner, as the price is only going up. It also helps define what a realistic price for these logos as a product. How much would people pay for them?

But most importantly, it's a gimmick! It's something just barely intriguing enough to capture your attention. Like a .pizza domain. If Logo Pizza didn't have a gimmicky pricing model, would anybody care about a bunch of logos for sale?

As much as I hate to say it, if you work on the web, you work in the Age of Gimmicks. 140 characters. Photo filters. Face swap. The giants of our industry often have had a gimmick at the core of the brand experiences. Gimmicks: more than a gimmick.


Logo Pizza logos sold

I launched Logo Pizza on September 13th. It was much more successful than I had expected. Logo Pizza cracked the top 5 of Hacker News, which gave the logos and my work a much broader audience. I underestimated the power of a gimmick and a slow news day.

I've sold 23 logos so far, resulting in $8,500 of revenue. A good amount, but the break-even point was at $8,000, because I devoted a month to design all the logos.

The real success was how much new business the project generated. I've landed several great logo projects currently in the works. It's enough new business that I'll be designing logos for the remainder of 2016.

That's what this was all about. I wanted to be a logo designer, but I didn't have the portfolio to back it up. The pendulum has swung the entire opposite way. I'm loaded with visual design work, which has me pining to get back into code.

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.