Thought this was a clever construction trick. A street nearby my house had some construction work scheduled. During the construction, the normally two-way street would be made one-way for several weeks.

In order to communicate this quickly, the city put up “One way” signs but then covered them up with plastic bags at first. When they were ready to restrict traffic along the length of the street, they simply removed the plastic bags.

It made me think of commenting out lines of code – then uncommenting them when ready.

Part of an ongoing personal project. Here are all posts on the subject. Also, here’s the Github repository and the working demo.

Last time, I tried using an algorithm to guess the entire message in one fell swoop, which ended up generating a bunch of nonsense. So this time, I relied on the human to make smart decisions about which word to choose.

jQuery Approach

I am now leveraging the dictionary file to filter all possible letter combinations to only those that match words found in the dictionary and then add the words as options to a select element.

Upon making a selection, a few things happen. First, one function called removeDefault removes the placeholder text option from the select element. Then, another function called printWord inserts the selected word into place, character by character and wraps that word in a div to distinguish it as a word.

If that doesn’t look right, the user can change the option in the select element. This clears the blue text that was there initially as well as the word wrapper around it and inserts the new word.

Clicking the “next” button removes the current select element, creates a new select element after the current word, and loads the appropriate options into it. There is also a catch to throw an error if the user clicks “next” before making a selection.

PHP Adjustments

I entered more of the initial message into the file message.txt. This is a lousy chore for humans. I realized I had to change some things in my PHP.

First off, I had to handle some characters that I wasn’t initially expecting. There are some punctuation marks in the message. At this point, there only seem to be exclamation points and question marks. Initially, the PHP script was built to parse a very rigidly organized file of digits separated by one comma and one space. I did a quick character replacement to replace the character “!” with “, !,” (and did the same thing for a question mark and a period, just for good measure). This then allowed the rest of the array creation and HTML output to run. The end result is a literal “!” on the page as a separate character with no letter options.

Also I wanted to make the data entry a bit less error-prone. As it was before, the script required each number to be separated by only by a comma and a single space. Linebreaks or additional spaces would break the script. Entering the message as a single line made it extremely difficult to check for accuracy when comparing with the text in the book. So by allowing linebreaks in the message, I could use one linebreak to indicate the end of a line in the book and two linebreaks to indicate the end of a page. To accommodate this, I basically just had to remove any linebreak characters from the text that the script then processes. Not too bad – this linear script is much easier than dealing with all the interaction on the front end.

Takeaways and Next Steps

The exciting thing about getting the application to this stage was that in theory, I would be able to use it to decode more of the message. However, I was only able to decode to the point where the message read “My name is” – and then the only option that was a word in the dictionary was “el”. This got me no further than I had decoded manually before starting this project. Also, the character’s name (Thomas) doesn’t work here either. So I’m not sure what to try here. I’d have to move to another part of the message.

In entering the data, I found many repetitions of the sequence “7, 2, 2, 7, 7, 4, 2, 5, 5, 2″ and somewhat fewer repetitions of “7, 2, 2, 7, 7, 4, 2, 5, 5, 2, 2, 2, 4, 5, 2″. Also, I found some instances of “5, 6, 8, 3?”, which looks like “love?”. This was encouraging. At least there are some words further down in the message, and it’s not all random.

A few immediate next steps:

1. Allow the user to navigate to a previous word
2. Allow the user to move around in a non-linear fashion – this is going to be challenging, but after using this, I am resigned to the fact that it’s necessary to enter some bits at various places that I know are words. Decoding this is going to be a bit like solving a crossword puzzle.
3. Allow the user to manually enter some words that aren’t in the dictionary, like proper nouns and maybe slang and even some German

Thomas Schell Sr. in the Warner Bros. movie, Extremely Loud and Incredibly Close (2012)

Part of an ongoing personal project. Here are all the posts on the topic. The first phase of writing this decoder application has given me some insights into the complexity of how the mind works when solving puzzles. Also, I’ve improved my jQuery skills, which was partly the point.

Here’s the Github repository and the working prototype.

Background

Extremely Loud and Incredibly Close was the first fiction book I had read in about four years. It left quite an impression on me, and it contained some hidden gems, one of which is a message coded in digits. The main character’s grandfather, Thomas Schell I is a survivor of the bombing of Dresden during World War II. He lost his first wife in the bombing, and one of his only remaining connections is his wife’s sister. The two of them have one child and their relationship is strained. She emigrates to New York, and he remains in Germany for a few decades. Thomas is mute after the bombing, and he communicates mainly by writing in a notebook. After he learns of the September 11 attacks, in which his son died, he returns to New York to try to reconnect with his estranged family. He has the following phone conversation with the mother of his deceased child and the grandmother of his grandchild.

Initial Steps

Out of my own curiosity, I set out to decode the message that Thomas typed. The beginning was easy enough to discover by making a table of the corresponding letters to digits on a phone keypad. “4, 3, 5, 5, 6″ : “Hello” . “4, 7, 4, 8, 7, 3, 2, 5, 5, 9, 9, 6, 8″ : “Is it really you?”. The responses from the grandmother help quite a bit. She says, “Is this a joke?” He responds, “This is not a joke!”

The rest is a bit more difficult. Others had the same curiosity to decipher the message, but this is where I thought it would be a good job for a computer to take on.

With PHP, I defined an array to associate each phone digit with its corresponding possible letters.

I put the raw digit message in a text file.

And I output the digit message with its possible letter options below in the index file.

Decoding: Part 1

My next step was to create an algorithm to decode the message.

My first attempt was basically:

1. Combine ten digits at a time and create an array with all their possible combinations of letters.
2. Compare each item in that array with a local dictionary file to see if that combination of words is in the dictionary
3. If none of the attempted 10-letter words are in the dictionary, pop off the last digit, and see if there’s a matched 9-letter word.
4. Rinse and repeat

(Based on an approach by John Resig – Dictionary Lookups in JavaScript)

Here’s the code at this stage. Most of the business is handled in javascripts/pickletters.js.

I knew there would need to be some manual correction and the ability to run the functions again from a given point after the user did a manual correction. That’s why I did the bulk of the heavy lifting in JavaScript. I made these functions accept a “start index” parameter so that they could be easily re-used from any given starting position.

This initial attempt resulted in a lot of bad guesses, much worse than I thought it would. When I ran the algorithm to determine only the first two words, I got the following:

which I thought was delightful since grits are often the first food that I put into my belly in the morning, but I knew it wasn’t the right interpretation of the message. Extending the same algorithm to run on the first 2.5 lines (I hadn’t typed in the entire digit message at this point) got some more gibberish:

Here’s an example of how not to write copy – a sticker that indicates that the machine to which it is applied saves power by “sometimes turning off the lights”. I have several problems with this.

It Reeks of Greenwashing

Okay, so Coca Cola wanted to advertise the fact that their refrigerator sometimes turns off the lights to save energy. I am left to wonder if this marketing campaign actually changed anything about the efficiency of their refrigerators (like using double-pane glass or otherwise improving insulation) or just slapped on stickers in order to generate more sales. If I had to guess, I would assume the latter.

It’s Redundant

Copywriting fail. The way I interpret this, it is indicating that the light timer both “consumes less energy” and “saves additional power”. That’s like a job description with the primary responsibility to “find” and “locate” a sought-after spacecraft.

It Obfuscates the User’s Mental Model

Interested in using a computer that “sometimes turns off” or sending a letter that will “sometimes get delivered”? Granted, the interaction a user has with this refrigerator is simple and brief, but this sticker inadvertently creates a muddy mental model.

Examples of design that produces an incorrect mental model abound. Donald Norman’s classic assessment of a home thermostat in The Design of Everyday Things is a familiar one. Another case is placebo buttons: “close” buttons on elevators that were never wired up, pedestrian crossing buttons at intersections that had once been functional but were superseded by computer systems, etc.

Sometimes keeping the user’s mental model incomplete is important to thwart people with the intent of gaming the system. The Swiss Franc has several security features, but some apparently are kept secret. Google search results are generated based on more than 200 signals, most of which are not made public. By contrast, the pin-tumbler lock, the most widespread lock in the Western world, is based on a simple mechanism that has been exposed, and at the time of writing, a Google search for “how to pick a pin tumbler lock” yields 393,000 results.

In this case, it’s just sloppiness confusing the user.

1984 Calendar. Photo Credit: Steve Mays

Ready to throw out your wall calendar from 2011 and buy a new one for 2012? Here’s another option if you’re resourceful and eccentric enough to try it: get an old calendar from 1984 to use for this year and save the 2011 calendar for 2022. In both cases, the dates will line up appropriately. You can consult timeanddate.com to find old calendars that will match up with a given year.

It’s a trick I learned from my grandfather who passed away last year. For those of us who don’t have a multi-decade stockpile of old calendars lying around, Wisebread.com suggests shopping for old calendars on eBay or Craigslist. My grandfather did it the old-fashioned way. He was a radiologist by trade who worked his way through school by working on farms. Farming had been a part of his life ever since, and he kept a gentleman’s farm in Ripley, NY. When he moved to an assisted living facility, my uncle took over much of the farm maintenance, but my grandfather would still go on excursions to do work on the farm until his last days. The calendar trick was a good example of his understanding that in a system like a farm, there is no waste – only resources. Also, it shows a kind of poetry that everything happens in cycles. In our day-to-day, most of us only conceptualize cycles of a week or a month or a year. But sometimes we recognize an underlying rhythm of a larger scale. ]]> http://mike-eng.com/re-using-old-calendars/feed/ 0 http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/ http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/#comments Wed, 21 Dec 2011 18:32:17 +0000 mrengy http://mike-eng.com/?p=2289

Dynamic Schedule page

Here’s an example of how we pushed WordPress to the limit – achieving some of the power of Drupal while maintaining the top-notch usability of WordPress. One of the more involved pieces of the theme was a dynamic schedule of conference activities.

View the full project description to see how we did it: Developing a Dynamic Schedule in WordPress. ]]> http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/feed/ 0 http://mike-eng.com/using-open-source-software-for-the-better-world-by-design-website/ http://mike-eng.com/using-open-source-software-for-the-better-world-by-design-website/#comments Sat, 27 Aug 2011 13:46:36 +0000 mrengy http://mike-eng.com/?p=2172

MOVE from Rick Mereki on Vimeo.

The Modern Diner in all its Glory. Photo credit: Elizabeth Thomsen

There’s an ongoing debate about whether design should be upheld as a specialized profession requiring serious training or whether the basics, at least, can be taught to anyone easily (without $140,000 and 4 years in design school). Some maintain that everyone is a designer to some extent whether or not he/she realizes it. In 2006, students and faculty from Maryland Institute College of Art created a book called D.I.Y: Design It Yourself that sparked quite a controversy on the subject.

Here is an example of the “everyone is a designer” side of the argument.

A menu can be thought of as a down-to-earth example of information architecture. Just about every menu does it – breaking up dishes into categories (appetizers, entrees, sides, drinks, desserts) and sometimes sub-categories (beef, poultry, seafood, vegetarian) and then individual dishes.

Menu Side 1: Sweet

Menu Side 2: Savory