I love you, Instagram. You got everybody taking pictures with their phones. That’s a great thing.

I love you, Vine. Looks like you’re getting people taking videos. That’s a great thing too.

But sweet Jimminy, no more squares.

No more squares.

No more squares.

I’m looking at you designers. I realize using a square format for capturing images makes a lot of things easy. The viewport fits in the screen with more space for buttons. Gallery layout is obvious. But this shortcut will eventually lead to a dead end. Galleries will feel homogeneous and flaccid. Compose screens will feel rote and immature.

Rectangular formats have an innate motion and dynamism provided by their orientation. A wide image makes your eyes move horizontally. A tall image makes your eyes vertically. Square images are just there. They are. Sure, this absence of movement can be a refreshing characteristic. Like a sip of water to cleanse the palate. But to have all the photos square? It’s like a tofu-only meal.

Square images are Wes Anderson films. Every shot is sterilized and centered and right there. It feels cute and captured, but never captivating, never human. An orientation tells a simple story. How did the photographer hold her camera? Square images are taken, end of story.

A square is an avatar. It is an icon. It is not a photo. It is not a story.

James T. Edmondson and I collaborated on a site where you can try out his fonts.

test.jamestedmondson.com

I’m delighted to have made this site.

Making is important to me. It’s how I’d like to measure personal well-being. If I’m making things, then I’m happy. For the past couple years, I’ve been managing success and popularity of Isotope and Masonry. This is a good problem. But it results in me spending a good deal of time not making things. Just closing issues and replying to emails.

When James approached me with this opportunity, I decided to give it top priority in my sitting-in-front-of-a-screen time. Support issues and response emails would be neglected for a bit. I’m happy I did, because I get to walk away with a project completed.

For those of you interested in the codey bits, the project is up on GitHub: github.com/desandro/jtetypes (the webfonts are not in the repo, as to protect James’ intellectual property).

The site is built with the Node command line tool grunt. Grunt is well-suited to generate small sites like this one. As it’s in JavaScript, it allows to me to use the same data for both templating and in the live scripts (see site-data.js).

Other development resources include Google Web Font Loader, jQuery BBQ for dynamic hash URLs, and a hack for vertically centered textarea.

This project held an interesting challenge as I had to hand the site back over to James for final implementation. I ended up writing a step-by-step README on how to generate the site, going so far as to explain how to install the OS X Command Line Tools. James was able to get it done, but it’s clear that this process isn’t tenable unless you’re a developer. Ideally, I’d like to provide some sort of interface, with a big button “GENERATE SITE”, and not have to worry about opening up Terminal at all.

For another project, I suppose.

I re-designed my personal site.

Content

It’s a one-pager for now. As most of my work lives in separate places, it made sense to leave out all the sections and sub-pages. desandro.com is a landing page to take you elsewhere.

Content on the previous version got out-of-date quickly. No one likes seeing that a site hasn’t been updated in 6 months. This version is designed to be a bit “timeless.”

I feel douchey about the disclaimer in contact. I should probably re-word all that.

Browser performance

I implemented two fun-time features. Displacement particles for every character, and animated rainbow hovers on link. Browser performance varies:

• Chrome: Particles and animated rainbow link perform superbly.
• Safari: Particles perform well, but the rainbow gets especially chunky when there are multiple links with active rainbows.
• Firefox: Rainbow links perform well, but particles are using left/top positioning instead of CSS transforms.
• iOS: No rainbow links because they are no hover states. Instead of particles for every character, I had to fall back to particles for every word. Even then, only the top half of the content gets animated. I’m not sure if this is a bug on my part, or if Mobile Safari simply doesn’t apply 3D transforms to elements far beyond the fold.
• Internet Explorer: Haven’t tested.

Development

Content is generated with Jekyll.

I put together a Makefile to handle automating tasks behind building the site: minifying and concatenating JS, building the site, and deploying to the server. The Make syntax is still foreign to me. I relied on the Twitter Bootstrap Makefile as an example. But it works and it’s convienent to put tasks all in one place.

This week featured a calamitous heat wave and a monumental scientific announcement. We live in our own science fiction. It makes me wonder if our advances in science will ever be able to reconcile our damaging pace of consumption.