Full-time fizzy finish

19 Mar 2019 · by David DeSandro

New job at Compass

After four years of being my full-time gig, Metafizzy is reverting back to a side-business. This week I start a new full-time job at Compass.

For my personal career and well-being, the new job is a huge win. I'll be working on a bigger endeavor, with world-class colleagues, producing a reliable income with great benefits. I'm excited for this next chapter.

For Metafizzy, it's a bittersweet coda. Over the past two years, revenue had plateaued. Being a father and mortgage-owner, the risk of staying independent was too high. I welcome the stability of joining a thriving company and being adequately compensated for my effort.

My four years full-time on Metafizzy is the longest tenure with a single employer of my entire career. I feel lucky to have gotten this far, but also a bit heart-broken that it's over. I think of all the things I never got to do: hiring teammates, championing a business model, shipping more products. There is much left undone.

But there's also so much left that still works. Metafizzy, its plugins, and its brand remains completely in my possession. Metafizzy never took outside funding. I have no lingering debt that requires a hard exit. Everything continues to live on.

In practical terms, that means plugins will continue to be supported. The plugins' code bases have long been stable for years. (Isotope, for example, hasn't required a minor version update since 2015.) I do have plans for the next major version updates, dropping IE11 and fully adopting ES6, but that's still further down the road.

Outside of the plugins, everything else can be considered on hiatus. That covers freelance logo design and front-end development, Logo Pizza, and Fizzy School. I may dip back into these projects, but don't hold your breath.

I still feel there is so much money to be made in independent front-end development. Even though our practice has largely been free to learn and free to use, the value that front-end developers drive is enormous. The Metafizzy model was on to something and that something is still out there.

Fade with Flickity v2.2.0

31 Jan 2019 · by David DeSandro

Flickity v2.2.0 has been released with all-new fade feature. The fade option allows you to fade between transitioning slides instead of moving.

Flickity fade

I built out this feature as separate add-on package flickity-fade. Read more about Flickity's modular architecture here. Fade works with dragging, groupCells, wrapAround, imagesLoaded, and everything else in the Flickity feature-set.

To use fade, add flickity-fade.css to your stylesheets, flickity-fade.js to your scripts, and then enable fade in your Flickity options.

$('.carousel').flickity({
  fade: true,
});

Flickity fade was four years in the making. I held off for so long because dragging & moving is both obvious and what makes Flickity special. But after 4 years of requests, I relented. Lords of UX, forgive me.


Flickity v2.2.0 also comes with other smaller features and bug fixes:

  • Set the initial selected cell that matches a selector string with initialIndex: '.selector'
  • Better accessibility support with aria-hidden
  • The tap-listener package was removed as a dependency, shedding some code weight
  • Fixed triggering events after destroy
  • Fixed iOS 9 dragging bug

Most of these improvements originated from open-source contributions. View the v2.2.0 release notes for the original GitHub issues and Pull Requests.


Flickity turns 4 years old next month. It's been great to see Flickity continue to grow and be used out in the wild. Fading was definitely not my cup of tea, but I was convinced to pursue it after witnessing sustained interest over years. People didn't just want fading, they wanted all of Flickity's features plus fading. My heart swells.

Slack logo armchair redesign

24 Jan 2019 · by David DeSandro

Slack has a new logo. It hits its marks!

Previous and new Slack logo

Slack's new logo is successful because it resolves all of the issues the previous logo had.

  • Too many colors
  • Problematic on dark and photo backgrounds
  • Required multiple variations for various applications
  • Problematic rotation

As the Slack team put it, "It was extremely easy to get wrong."

The new design fixes all these problems with a distinct iconic logo. It works on light, dark, photo backgrounds. It can be rendered with multiple colors or just one. The new logo makes it easy to get it right.

Slack logo backgrounds


That said, I miss the plaid. John Gruber elaborates:

Unique among technology companies, [Slack] owned plaid. ... To such a degree that Slack company socks — which simply used colors and plaid — became coveted swag.

I saw this opportunity as a worthwhile exercise for my logo design chops — to design a new logo that addressed Slack's original concerns while also keeping the plaid.

Here's my armchair-proposed design.

Slack armchair design

Slack armchair design variations

The octothorp emblem is rendered with four rounded rectangles. The overlapping squares are all colored the same dark purple (aubergine). Technically, this is not how multiply blends work. But visually, unifying those four squares simplifies the design. The aubergine color and rounded corners are then brought over into the wordmark, tying the two elements together.

Keeping the plaid means that the multi-color problems persist. To address these, I created several design variations. For solid dark backgrounds, aubergine is swapped for white. For photo backgrounds, the octothorp stripes are rendered with 50% transparency, trickily rendering the plaid with a single color. Finally, there's a one-solid-color variation as a last-resort option.

The plaid is preserved, but it comes at the cost of complexity. Like the original logo, this design still requires multiple variations. It's not as easy to get right in application, but it maintains Slack's previous unique visual identity. It's a trade-off.

So, that's how I would approach this project. I'm still not feeling 100% with my design. It feels a bit too generic, like it needs another couple iterations to achieve its final form. But I'm putting my pencil down for now as it shows how plaid can work.

.•*•.• Plaid can work .•*•.•

BenCodeZen dragon mascot

4 Jan 2019 · by David DeSandro

BenCodeZen dragon mascot

DC area buddy Ben Hong has been pumping out front-end dev wisdom like wild. He pinged me about a logo for his personal brand BenCodeZen and I DELIVERED. Introducing Destinio!

Initial concepts were around dragons, Zen, and monograms.

BenCodeZen logo concepts

I was about to ship the Cute dragon design, but something was feeling off. It was looking a bit dopey.

BenCodeZen dragon mascot revision

The big change was bringing the outer circular shape up around its chest to its head. This did two things.

  1. It changed the position of head & neck so it was more up and back, giving it a more confident posture.
  2. It allowed the underbelly color to connect to the head, thus removing the need for an outline.

These changes made the dragon look more active and ready-to-rumble. It was a solid improvement, making for a simpler composition and a more iconic emblem.

BenCodeZen site

8

2 Jan 2019 · by David DeSandro

Metafizzy 8th birthday

Metafizzy is 8 years old.

Projects

The fun talk. Here's what I got done in the past year.

2017 was dominated by fatherhood. Before the kid, I had ample time to spend between work, side-projects, fitness, and friends. Them days are long gone. My routine had to be overhauled to accomodate being a 50/50 parent. Work took a big hit.

My aim was to re-group in 2018. I had to be more disciplined about what hours I did have available. Looking back, I'm relieved that I was able to ship these projects. The Round 3D pet project was made in quiet hours post-bedtime, in response to wasting away my tired-dad hours of 2017.

See the Pen Solids by Dave DeSandro (@desandro) on CodePen.

I'm particularly proud of the hex codes talk. In an effort to overcome my previous lackluster on-stage performances, I hunkered down in October to put together a talk on a persnickety topic of mine. Presenting at dotCSS in Paris was a thrill. Seeing the big response to the talk felt like validating a job well done.

Looking forward

Now, the real talk. Here is a chart of Metafizzy's revenue for the past 8 years:

Metafizzy 8 years revenue

I see two trends:

  • Revenue grew in the years 2011-2015, when I was working on Metafizzy least.
  • Revenue plateaued and then took a big drop in the years 2015-2018, when I working on Metafizzy full-time.

The conclusion I come to is that I got lucky. Although I've been working on the business more actively, revenue hasn't changed for the better. Metafizzy's success has been largely market-driven. Isotope was the right piece of software at the right time. I've been able to ride that lucky wave for a while.

I've been working on Metafizzy for 8 years, 4 years full-time. It's the longest full-time job I've ever had. I love it and want to keep going. But I'm in a way different place now then when I first started. I've got mortgage payments and diapers to worry about. Each year the prospect of staying full-time with Metafizzy has been looking more and more shaky.

It's important to share what's really going on here, rather than perpetuate a misrepresentation. In the age of social media, there is a tendency to share the best version of yourself. And if you're an independent business operator, this means projecting a narrative that business is booming and each year is better than the last. But, doing so, you miss out on a better perks of being independent: honesty.

I'm staying the course for now. But big changes may be ahead, just like they always can be.

Oh yeah, Masonry turns 10 this year.


Previous year-end round-ups:

Every vector 2018

28 Dec 2018 · by David DeSandro

Every Metafizzy vector 2018

Every vector made in 2018.

See previous years: 2017, 2016.

Refactor t-shirt

Refactor shirt

You know what’s truly metal? Nicely encapsulated code with human-readable comments.

Printed on super-soft Black Tri-blend. Women's sizes available.