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.

A couple recent sites using Twitter Bootstrap:

• Crate.io
• Cinemagram
• Moment.js
• whitehouse.gov - Digital Government

@jcarbaugh think it's time for ub;dt to be a thing. (used bootstrap; didn't try)

— Dan Drinkard (@dandrinkard) April 23, 2012

Jamie Kosoy on the Beautiful Default (again):

There’s a sameness to them that’s comforting and easy to use, but there are also opportunities to be expressive and interesting that are lost. There are too many developers and designers giving up on craftsmanship to build “good enough” sites and apps.

I realize devvin’ ain’t easy, but when I see these sites, I feel a pang of disappointment.

A Beautiful Default, like Twitter Bootstrap, works best as foundation – something you build off of. When left unchanged, you risk losing the sense of whimsy and personality that makes sites memorable.

We can be so focused with usability and efficiency we can lose sight of the qualities that make for the good stuff.

To that note, I will never forget jonlax.com.

I’ve presented twice over the past two weeks. Here is what I need to remember for next time.

At the podium, there is one rule: No rules.

Once up on stage, the following will occur:

• Wifi won’t work.
• Sharing your desktop for the projector/screen will cause your native screen resolution to shrink to 1024x768. Good luck finding stuff.
• The microphone will capture ever breathe your snort. Also, you’ll notice you snort every 3 breathes.

Attentive people and bored people look identical

As an audience member, I have observed I provide no feedback for a speaker to indicate that I’m actually listening. I don’t sit up. I don’t do lots of nodding. I dislike raising my hand to communicate that, indeed, I have used that resource. I imagine everyone else must do the same. When on stage, my brief glimpses into the audience confirmed this theory. Nearly all audience members don’t look that enthusiastic to be there, listening to you. Just have faith and push forward.

Be careful with live sites

As wifi will be confronting Murphey’s Law, there are no guarantees that the Web will be available. I was smart and saved a couple sites locally. But even some of these were flawed, as “Save as Complete Web Page” isn’t so complete. Sites can still load images and scripts dynamically from their original domains. Best precaution is to open up all live sites before the presentation and keep those tabs open.