200th post!

LORDY

LORDY
LOOK WHO'S
40

Yes, I am that old. To celebrate rolling in my 40s, I made a simple tool to generate this kind of fixed-width text. The one caveat is I decreased the line-height so that the text was more compressed, but that means it invisibly overlaps page content above and below, and so sometimes makes neighboring objects unclickable... ah well! No one said aging was easy,

on iconography

I remember it used to be challenging to make a good calendar icon, but somehow these days a white box with a red top (with option day-of-month inside) suffices. I wonder what really made that happen?

intellij is better than eclipse

I was delighted that my new job has a developer culture that favors IntelliJ IDEA: it is a much easier to use and generally smarter product than Eclipse. I'm not going to make a point-by-point comparison, but believe me when I tell you I've met a dozen people who say IntelliJ is their strong preference over Eclipse, and zero who know both who say the opposite.

So this post is a note to my future self, because I'm vaguely worried I might forget: When doing UI work, I strongly prefer as tight a save-compile-reload as humanly possible. For example, sometimes I'll operate directly on files in an exploded war on Tomcat. In IntelliJ land, for simple static file changes, I was getting annoyed by having to click "debug" (for a running server), manually clicking on the first option "Update Resources", clicking "OK", and THEN having to go over the browser. IntelliJ had extensive Keymapping abilities, but I couldn't figure out how to hotkey this. My coworker Vince came up with the following:

i have a solution for you go to Preferences->Keymap->Main menu->Run->Update Running JavaEE Application. Set the keymap to what ever key combination you want. Exit out, start debug mode and press the key combination that you specified. Once you do that, it will prompt you with four choices. Pick update resources and click the checkbox at the bottom asking if that is what you want to do everytime. Then everytime you are in Debug mode, press the key combo and it will update what ever is running. Also will do the same if you are in Run mode and not Debug mode

Worked great! I selected cmd-1 as my easy to remember, not otherwise useful key combo, and now my life is better: cmd-s, cmd-1, cmd-tab (to browser), shift-cmd-r (reload). (or just shift/click-reload-button) Much faster than having to use the mouse, and my fingers got tuned to it pretty quickly.

BUT WAIT! One thing it's almost easy to forget, and odd to get used to, is this: IntelliJ is saving ALL THE TIME. You don't have hit cmd-S at all (though it doesn't hurt anything if you do.)

the elevator from the movie "her"

If you haven't seen the movie "Her", I'd recommend that you do so. It won the Best Original Screenplay Oscar, and is a terrific music on humans relationship with technology and with each other, dipping its toe into some intriguing scifi concepts like The Singularity.

The movie is set in a near future world, with a lot of pleasant design work: cool models of phones and earpieces, people commuting via highways converted into walkways... One awesome detail is the elevator, which has a subtle forest scene projected in silhouette on its rear wall, providing a graceful sense of motion as the elevator ascends or descends. Here is a GIF of it I grabbed from the trailer:

The trees move in parallax, with the further tree moving a bit slower.

I was trying to think of the pros and cons of this kind of design work, from a UX point of view. People who are nervous about elevators because they don't like enclosed spaces might feel more comfortable; on the other hand, people who dislike elevators because of the change of altitude might find it scary. (Sometimes I wonder if people are really aware of how an elevator is moving, or if they mentally map it to the idea of walk in a room, press a button, step out in a new space)

Anyway, I really liked it, so I made up an interactive version of it in Processing:


You can change the speed and direction with the mouse. (source code etc available at its main page) It's less organic than the original, but I'm pleased with the result. I procedurally (and randomly) generate the trees, with rectangles as the trunk, lines of varying widths for the branches, and piles of ellipses for the leaves. And parallax is such a nice and easy way of conveying depth in a 2D world... video games have used it as a trick for years (see the classic Moon Patrol for an example, which has a kick-butt little riff to boot.)

a snakey lil bit of ui fun

My new company had a hackathon, and it was a chance for me to do some juicy/bouncy UI. Most datagrids are pretty boring, but this on is a lot of fun when it launches:

Here is a link to the main webpage.
Originally it was a list of ad campaigns and the spots under 'em-- click any green row to get a secondary table to appear. I had to play around with jQuery easings 'til I found one I liked. (For the hackathon I had easeInOutBounce I think, but it caused a delay for the tiles flying in as they jostled around offscreen. Getting rid of the "In" part sped it up, but made the bouncing "too much". This one uses easeOutElastic in 750ms.)

don't be such a state machine

Apple release iOS 7.1 today. The improvement I was most coveting was the return of "list view" to the default calendar app. Folks whose schedule only has a few events per day tend to like having a view where they can see all the events of the next week or so at a glance. iOS 7 had something like this -- if you did a search but didn't enter any search terms -- but it felt odd to navigate that way. (And as we'll discuss, the month view didn't have a list view at all, you had to drill down to a day.)

So Apple dropped the ball, or at least confused the hell out of me. I could only get a "month list" view; a list view of a day's events underneath the month grid. No matter what I tapped or swiped or held, there was no way to see a simple list of events for multiple days. Sites describing the new 7.1 features in detail talked about this view, but getting there proved a mystery!

Similarly, my friend Diane was complaining how the update didn't include a "month list" view. Clicking on a day on the month grid just zoomed in on that day... checking multiple days then required bouncing back and forth.

Finally I figured it out: "You can't theah from heah", as they say in Maine. At least not directly. There are 4 fundamental states to the calendar, but you have to get back to the "plain month" view in order to see them. Here's a diagram that should make things more clear, or confuzzle them completely:

Start in the top left, the "plain month" view. You can click the new toggle at top, and go to a "month plus day list" view, or you can click on a day and get to one of the zoomed in modes. But if you're on the "month plus day list" clicking on a day won't change screens: you'll just change what day you're looking at.  So to get to the zoomed in modes, you MUST got back to the "plain month" view. (And from the "plain month" view, you won't know if you're going to the "zoomed in day" or the "flat list" view... it depends on where you left THAT toggle. That toggle looks similar to the toggle on the month screen, but has fairly different functions (and its icon seems to be recycled from a todo list, but it makes visual sense.))

Like I said, I think this is crazily confusing: the two toggles are just too similar. Also, it seems like the "month plus day list" is semantically closer to the "flat list" view, so having to navigate back to the "plain month" is counter-intuitive. (and Diane proved that it's not obvious that the icons are toggles at all, though I think that's a side effect of flat design without affordances to hint at function)

State machines can be very useful for programmers, but they should be easier for your users to mentally model than this!

Anyway, when I was in semi-despair about having my flat list view, I decided to experiment with alternate calendar apps. One popular one is "Fantastical 2". It's a good app, and has a kind of brilliant plain-text mode for new events (you can type "meet Fred for drinks thursday at 6 PM", or even speak it via Siri, and it does the right thing). But, man, the choice of colors:

The top is ALWAYS flaming baboon-butt-bright red. That's the same color iOS uses to tell you that GarageBand or Voice Memos is still listening. It is a horribly attention-grabbing and inappropriate color to use all the time. (And come to think of it, Siri can do that kind of scheduling on her own. Ah well. Fantastical does some decent "hours of a day" graphing, but I don't care about that. $4 down the drain!)

grab colors on osx

I wanted to find out the RGB value of some pixels on an image. Turns out OSX has a "DigitalColor Meter" built-in. (Just hit cmd-space and type DigitalColor). Under its View menu, you can "Display Values" as hexadecimal, which is often useful for web work.

Good stuff! Nice not having to get a separate tool just for that kind of thing....

(and after that, I went to http://colorschemedesigner.com/ to get some nice, balanced color action going on.)

powerful javascript debugging

Tal Bereznitskey runs a decent email newsletter... very good S/N ratio, and doesn't publish too often. This post about javascript debugging was especially good.  (TL;DR: activating the javascript debugger via the "debugger;" statement, on DOM node changes or specific Ajax calls (in Chrome), cheaply emulating different mobile devices (also in Chrome), and use of auditing tools like YSlow to tweak your pages' performance.)

Definitely worth subscribing.