“portfolio”

One painful thing about translating between two languages is that you usually have to specify a direction. That’s bollocks. Life’s already too complicated to worry about whether you’re translating from English to Spanish or the other way around.

In that spirit I created the str (“Super/Simple/Synchronous TRanslation”) YubNub command. You specify, in any order, 2-letter codes for the two languages you want to translate between and the text you want to translate. str avoids the direction decision by doing both at once, each one presented in an individual vertical frame. This is not only much faster in practice, it’s more unconscious and habit-friendly.

You can try it right here! (en stands for ENglish, es for ESpañol=Spanish)

You can see more instructions and the 2-letter codes at str’s man page.

YubNub, for the uninitiated, is “the (social) command line for the web”—a social webapp to use (and create!) handy commands that search your favorite websites and do a whole nother bunch of wonderful things. The simplest way to use it is from their homepage but there are a ton of ways to install it. Installing it in the location bar, as I once explained here, is in my opinion one of the coolest.

Web pages are written in HTML^WP but as they have become more and more complex, they now tend to be written, clientside, through Javascript^WP, which can manipulate and insert HTML. Google Images, for instance, uses Javascript to write the HTML that displays your image results.

It’s a little like writing French through English (André went to Marie and said: ”Bonjour! Ça va, ma chérie?”) and just as frustrating, particularly because you sometimes have to narrate whole scenes in French (pidgin tends to be painfully verbose) and your English self is left completely in the dark—so you end up naming things in both French and English and it gets as ugly as you can imagine.

The lark itself takes gratefully (and rather surpisingly) only 16 paltry lines of Javascript code (highlighting thanks to Mark “Tarquin” Wilton-Jones.):

function each(a, f) { for(var i=0, l=a.length; i<l; i++) f(a[i]) };

each('a big blockquote br b center code div em form h1 h2 h3 h4 h5 h6 hr img iframe input i li ol option pre p script select small span strong style sub sup table tbody td textarea tr ul u'.split(' '),

    function(label){

        window[label]=function(){

            var tag=document.createElement(label);

            each(arguments, function(arg){ 

                if(arg.nodeType)                                         tag.appendChild(arg);

                else if(typeof arg=='string' || typeof arg=='number')    tag.innerHTML+=arg;

                else for(var attr in arg){

                        if(attr=='style') for(var sty in arg[attr]) tag[attr][sty]=arg[attr][sty];

                        else tag[attr]=arg[attr];

                };

            });

            return tag;

        };

    });

and you can play with it right here, right now:

Instead of

now it’s,

And so on.

Remember that wacky koan^ELZR about reading processors (“what is to reading what a word-processor is to writing?”) and how it led to the idea of a text spacer (illustrated at length in this example)?

Well, I just found out about Live Ink by Walker Reading Technologies (via KurzweilAI.net’s newsletter, though it was slashdotted earlier) and realized people have been toying with the idea for over a decade now. Live Ink is clumsy marketese for what they also elegantly and precisely describe as visual-syntactic text formatting and these guys have not only coded it and are now marketing it, but they have already done some interesting homework, carrying on a year-long experiment where it allegedly improved reading proficiency. They offer a 30-day trial program implementing the technology called ClipRead (screencast) and though the interface is positively abysmal (why, god, why, must bad interfaces happen to good people?), it’s still very much worth downloading to play with.

Here below is a (fitting) paragraph from Charlie Stross’s Accelerando for comparison.

Amber scans the README quickly. Corporate instruments are strong magic, according to Daddy, and this one is exotic by any standards—a limited company established in Yemen, contorted by the intersection between shari’a and the global legislatosaurus. Understanding it isn’t easy, even with a personal net full of subsapient agents that have full access to whole libraries of international trade law – the bottleneck is comprehension. Amber finds the documents highly puzzling. It’s not the fact that half of them are written in Arabic that bothers her—that’s what her grammar engine is for – or even that they’re full of S-expressions and semidigestible chunks of LISP: But the company seems to assert that it exists for the sole purpose of owning chattel slaves.

Charles Stross, Accelerando

I like how they limited the spacing to linebreaks and indents; it’s a good starting constraint—it simplifies the task enormously and the results are still quite good. Highlighting the verb is also a clever touch—the nuance with the biggest syntactic payoff. Overall, while the simple flaws do stand out (because we’re such effortlessly gifted syntactic parsers), what surprises me is how decently it works, how the formatted text feels more accessible than the monolithic paragraph. At several points—interestingly, at some of the most usefully formatted parts—the algorithm at work seems oddly straightforward: nestedly indent and linebreak prepositions. Ahh… I’m itching to write some regex hack… Probably will write one in a couple of days, together with some handcrafted spacing of the above paragraph, just to see what we’re aiming at.

According to VentureBeat, meanwhile, the company is poised to taking the world any minute now. I doubt it. But they have given spacing (visual-syntactic text formatting) a broad hearing and there’s now a flurry of attention on it and, probably, on the broader idea of reading processors. There are bound to be some intriguing reinterpretations and extrapolations in the coming months.

Never would’ve thought designing calendars was this fun. (PokeCalendario, btw, is a great turn of phrase by James P. Wack)

Minimaxi

What was meant to happen, happened. I ended up participating in my own infodesign calendar challenge (where, of course, I’m one of the judges—my mom and a friend being the other two). Rather, I was one of the judges. The challenge’s doing a lot of soul-searching right now, looking for new judges, and even wondering whether it would be better to call itself a cooperation instead of a competition. (Thoughts?)

I started the challenge because while I thought designing a better calendar was a fascinating problem, I had no idea whatsoever of how to attack it. Then a magical thing happened with other people’s submissions: no big idea came, but a myriad minor improvements suggested themselves. So I started building mockups and tweaking them a little here, a little there, to prove minor points to myself. The tweaking got out of control, ate more and more of my time, and suddenly biggish, elegant ideas started coming up.

So I spent the past 5, 6 days drawing calendars over and over (and over). It was part escapism from my grandfather dying in the room below mine, but it was also unbelievable fun designing something and then have it be extruded into atoms by my clunky but trusty HP—how concrete and intricate, how physical!^EEM I felt like a miniature artisan or a clockworker. And it really is wonderful to work in a simple problem you can easily explain to people.

This down here is the current outcome (there’s a Spanish version here). Click on it for detailed instructions (if you need’em), descriptions and critique. It’s the end result of a lot of incremental improvements I’ve painstakingly tried to document in this Flickr set—funny it now looks so glaringly obvious.

What do you think? I’ve fiddled with it for several days now and have returned to it again and again. My tired eyes see no clear way of improving it—how about yours? (Here, btw, is the (Excel 2007) source file—yours to fiddle with and build upon.)

(btw2: I did all my prototypes in my beta-testing version of Excel 2007^ELZR. Thought it would be a good chance to take it for a spin and see what the much-vaunted interface improvements amounted too. Turns out they’re rightly vaunted. It’s as good as they told you and then a little better. It’s just so much easier, so much more pleasurable to use the program when so many options are so neatly displayed. The live previews I thought so little of in the videos turn out to be surprisingly helpful. Goodbye toolbar clutter, welcome ribbon. It’s a revolution worth Vista’s failed one.)

A better design to fit a year calendar comfortably within a business card.

It all started because my 48-year-old mom, blessed her, can’t read small type very well. She has trouble using little calendar cards because the day numerals are so small and last time she complained I paused and empathized with her travail. The problem, it was suddenly obvious, was not only the marketing debris that encroaches upon every poor card but rather the quite wasteful scheme we use for representing a year—the same table with the same thirty-something numbers over and over.

Take a fancy flight, don’t assume anything, not even numbers, as long as you keep these things in mind:

• The bigger the type size (or meaningful features) the better.
• The smaller the design the better. The original goal was for it to fit comfortably (you can use both sides of the paper) within 86 by 54 millimeters (3.370 by 2.125 in) of paper (your standard business card^WP) but something slightly bigger could be just as useful. We are going for useful. (Thanks Dave Pawson!)
• Immediately understandable (or pretty darn close).
• Should span an entire year.
• On any given “date” of the year, be able to easily tell what its name, its month, and its month number is.
• Instant: The less steps you need to know before knowing a date’s data the better.
• Contextual: You should be able to easily “walk” from a date to another one close by, thereby counting the days between them. People do this all the time.
• Markable: You should be able to easily mark (circle, cross, check) holidays and special dates.

Yes, I know mom could carry some sort of foldable large-type calendar, 12 calendar cards with a month each, or simply start wearing her prescribed glasses (nigh impossible), but that’s off the point right now. Let that true story be our convenient pretext for innovation.

I think the best existing metaphor for what we would like to accomplish here are modern statistical innovations like the boxplot^WP or the stem-and-leaf plot^WP—proof that novel, almost magical displays of breathtaking elegance are just around the corner. IBM’s thread arcs is a recent example.

More down-to-earth, the calendar and clock pedias are obvious and essential starting points—history is as good a source of what could be as it is of what has been. Information Aesthetics’ Creative Calendar Design showcase should get your creative designs flowing, and so should a quick search through the site for clocks. Tokyoflash has some interesting interfaces for telling time.

Finally, don’t let constraints paralyze you. Don’t think a proposal has to be “perfect” or “right” to submit it, the tiniest improvement could turn out to be crucial.

Anyone can submit a proposal. A proposal consists of a picture mock up. To submit a proposal comment this post with your name and a link to your mockup (we’ll put the picture up here in the post in the Submissions section). Submit as many proposals as you wish. Submit in parallel to the Information Aesthetics post on the challenge for extra promotion to your work.

I’ll consider today, Monday January 22, 2007, the challenge’s start date. It will be open for a month (we have to give the unconscious time to do its magic), closing Tuesday February 22, 2007. My biotech friend Zamantha, my mom, and me will be the judges. I’ll announce the winner Monday February 26, 2007—my birthday—here in this post.

The judge has spoken (congrats to Adam Sporka!) but the challenge ain’t over friends. Please keep the submissions flowing! Take our breath away with an evolutionary/revolutionary design!

The journey. Of course. ;)

Excuse’s user testing went so well I decided to improve it. The original strip had color but it was somehow so distracting that black and white looked better. Then I found about the burn tool in a Photoshop tutorial I chanced on. What a difference it made! There’s a lot more focus! Much better outlines. (No doubt about it, learning Photoshop would be one of the best investments of my time…)

I think the changes are for the better. And so, it’s time for phase 2 of the plan: the metacomic. Print the comic on hard paper and carry it in your pocket, tote, whatever. Next time you’re bored in the subway, bus, wherever, show it to your right-hand neighbor (in the absence of a right-hand neighbor, feel free to substitute your left-hand one). Let it be your excuse. Report on what happened. :)

It was a very simple idea—a girl and a boy, in the subway—and yet actually drawing it was a nightmare. There are any number of things I would do different for my next webcomic. I guess that means the effort was worth it: much was learned.

So, again, the idea is a girl and a boy in the subway (I used this Flickr photo to “remember” the subway). None of them can muster the courage to speak to each other, none of them can come up with a clever excuse for starting the conversation. Until the girl realizes there’s no bad excuse for meeting someone. And that is her excuse. That’s it.

Reminds me a lot of an elevator sign I scrawled years ago.