It seemed like an odd choice for me to read because I am not a designer. I am a programmer and I wouldn’t be able to produce something beautiful if my life depended on it. Before reading this book, thats what I thought design is all about, beauty. Now I know that there are more aspects to design and the book also helped me to think more abstractly and (try to) derive interaction patterns from hardware devices and translate them to well designed user interfaces.

If you are interested in design – be it industrial, software or any other kind of design – you probably already read it. If not, you should probably read it.

In his book Norman takes a close look at how user interfaces are designed and tries to scientifically explain why some designs are superior to others or why one solution is prone to mistakes by the user. The examples he chose to illustrate his ideas are mostly hardware examples. I should probably mention that the book was first published in 1988, so the kind of user interfaces we are used to did not yet exist.

Doors are one of his pet peeves. The book is full of examples of poorly designed doors or just plain crazy doors. But he also mentions a few good examples. Especially automobile manufacturers have quite a good track record designing doors. Admittedly, they do have the advantage that doors on cars always open to the outside. Norman sums it up quite nicely:

“Somehow, when a device as simple as a door has to come with an instruction manual – even a one-word manual – then it is a failure, poorly designed” (p. 87)

Obviously Norman goes into much more detail than I am. His book is a lot more scientific than what I am writing here – and doors are not the only examples Norman has to offer. Just a few that stuck in my head are telephones, light switches, motorcycle turn signals, faucets, even the NES instruction manual is featured in his book.

Gulf of execution vs. Gulf of Evaluation

Norman describes the world and the way we interact with it in seven stages of action. We observe the world, evaluate the current state it is in and form a picture of the state we would like it to be in – a goal. From this goal we infer a sequence of actions which we think will manipulate the world in a way that it changes its current state to the desired state. After executing these sequence of actions we observes the world again and evaluate whether the current state it is in, is the state we want it to be.

How translates this to design? Good design is supposed to provide actions that correspond to the users intentions. Norman calls the difference between the allowable actions and the users intentions the gulf of execution.

Good design is also supposed to provide directly perceivable physical representation which can be translated into a users intententions. This is what Norman calls the gulf of evaluation.

So how does a designer go about bridging these two gulfs? There is no perfect solution for this, but Norman provides a couple of pretty good pointers, or better questions you should ask yourself about your design. I will only share two of those questions, because I don’t want to kill his book sales completely

Visibility – Does the design provide a visual clue in which state the device is currently in and what actions are available to the users?
Feedback – Does the user receive continuous feedback about the results of his actions?

Natural mappings

Natural mappings take advantage of physical analogies and cultural standards for immediate understanding.

“If a design depends upon labels, it may be faulty. Labels are important and often necessary, but the appropriate use of natural mappings can minimize the need for them. Whenever labels seem necessary, consider another design.” (p. 78)

Norman illustrates natural mappings with different layouts of stoves and their controls. Since I don’t want to rip off his book I took a look around and found a simple example.

My desk drawers seem like an example of good design. They are lockable and the orientation of the keyhole takes advantage of natural mappings to form a mental model in the users head.

Unlocked, the keyhole is parallel to the drawers, which signals “I am unlocked – Open me”. When it is locked, it is orthogonal to the drawers which signals “I am locked – Better luck next time”. Even without trying to open the drawers it is obvious that they are (un)locked.

Admittedly, this is a pretty basic example, but think about what would have happened if the orientation of the keyhole were the other way around? What kind of mental model would support instantly knowing what state the lock is in? I can’t think of one and that’s why I think it is good design.

Norman and the future

Interestingly enough Norman is predicting the future quite accurately on multiple occasions. At one point in his book he as writing about something that sounds a lot like the iPad to me. But make up your own mind…

The computer of the future is perhaps best illustrated by my imaginary perfect calendar. [...] This imaginary calendar looks like a calendar. It’s about the size of a standard pad of paper, it opens up to display dates. But it really is a computer, so it can do things that today’s appointment calendar cannot. [...] Most important, it can also connect itself to my other systems. Thus, whatever I enter into the calendar gets transmitted to my office and home systems so that they are always in synchrony. (p. 185&186)

Other times he is a bit off in a funny way (when you look at it from todays modern point of view). Discussing to problems of self-threading projectors his final remark is: “Well in a while it won’t matter. There won’t be any film, just videotape”. Not quite…

Ridiculing Norman is not my intention. It just stood out to me. Norman doesn’t try to predict the future. He is merely looking at the mistakes of the past and describing how design can be better in the future – or rather how future designers can be better.

Final thoughts

To sum it all up, the book was a revelation for me. I will never be able to see something as simple as a door for what it is, a plain door. I will always see the designers intentions (and possibly his mistakes). Somehow a lot of things make more sense to me now that I look at things differently.

If this book had not taught me anything else but to take a closer look at things, it would still have been a pretty good investment in my personal and professional development. After reading it I started noticing things I never noticed before – small things that is. But luckily for me the book gave me more than this. A whole new perspective and things to think about. A truly good read.

This is what the button looks like in code. Nothing special so far. Okay, I did not simply create and assign the background images… I made them resizable by using the UIImage method stretchableImageWithLeftCapWidth:topCapHeight: (from iOS5 on you would use the resizableImageWithCapInsets:).

UIButton *playButton = [UIButton buttonWithType:UIButtonTypeCustom];
playButton.frame = CGRectMake(0, 0, 160, 40);
[playButton setTitle:@"Play" forState:UIControlStateNormal];

// Set the state images
[playButton setBackgroundImage:[[UIImage imageNamed:@"resizableButtonNormal.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0] forState:UIControlStateNormal];
[playButton setBackgroundImage:[[UIImage imageNamed:@"resizableButtonHighlighted.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0] forState:UIControlStateHighlighted];

[yourView addSubview:playButton];

One thing did not look right… I didn’t like the fact that the Textlabel stayed in the same place for both states. That kind of killed the illusion of a ‘real’ pushbutton for me. So I dug in the documentation but couldn’t really find any useful information. OK, that’s a lie – The Apple Documentation is really helpful and always up to date! …but I digress. I did not find any information on setting the frame of the titleLabel depending on the state of the button.

I did not want to subclass UIButton just to move the frame of the textLabel around it the highlighted state, so I experimented a little and here is the solution I came up with (I can only assume that trick has been around for quite some time, but I never read about it anywhere else):

playButton.titleLabel.shadowOffset = CGSizeMake(-1, -1);

[playButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[playButton setTitleShadowColor:[UIColor clearColor] forState:UIControlStateNormal];

[playButton setTitleColor:[UIColor clearColor] forState:UIControlStateHighlighted];
[playButton setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateHighlighted];

Notice how I alternate between shadowColor and textColor? That is basically the whole trick. In the normal state you can only see the text itself and the shadow is transparent. In the highlighted state the shadowColor is white and the textColor is transparent. I like it the best with shadowOffset = CGSizeMake(-1,-1), but it also looks good with shadowOffset = CGSizeMake(0, -1).

So, this is what you get in the end.

Downside

• Well as you might have already thought while reading this, if you use this technique to give your UIButtons depth, your text can’t have a shadow (because it already has/is a shadow). For me this is not really a problem because the shadow would be used to give the text depth – to make it look like it is not on the button, but above it which would not fit with the whole idea of this button.
• One could call the buttons ugly… I like ‘retro’ a bit better

It consists of just two plastic elements which slide onto the Keyboard. On top of those two elements you can rest your iPad or iPhone and type away. Their website advertises that it also fits with the Samsung GalaxyTab, Blackberry Playbook, HP Touchpad, Acer Iconia, HTC Flyer and Droids. But honestly… who cares?.

Before I owned the WINGStand, writing anything longer than tweets on the iPad was a real pain. I used the Snugg iPad2 Cover with a Flip Stand, but that always seemed a bit shaky and uncomfortable. That is why the iPad is no more than a device for testing my apps, gaming and reading but rarely for working.

That solution was superior in one way: flexibility. The keyboard and iPad were not connected, so I was able to move them apart. That is a nice feature but not really necessary. I’m perfectly fine with my pseudo-laptop – I am even typing this post on it

I am hoping that I will make use of my iPad more often than I did before, now that the typing issue is resolved. Being a developer the WINGStand would be especially cool to use with Codea, which lets you create games and simulations right on your iPad. If you dont know it, go check it out at http://twolivesleft.com/Codea/.

The only thing missing is a case for for all the components so my iPad does not get scratched… If I find something I will definitely write something here – or if you know anything good, let me know in the comments!

Showstopper

wget is not included on OS X… bummer! You can, however, install it from source (or from Mac Ports). Just download the newest package from http://ftp.gnu.org/gnu/wget/ (at the time of writing this post wget-1.13.tar.gz).

tar xzf wget-1.13.tar.gz
cd wget-1.13
./configure  –with-ssl=openssl
sudo make install

Now let’s try again!

wget to the rescue!

The following command downloads the entire website and converts any internal links and paths to local ones.

wget --recursive \
     --no-clobber \
     --page-requisites \
     --convert-links \
     --domains yourdomain.com \
     www.yourdomain.com

What the switches do:

• –recursive - The switch responsible for downloading more than just the one URL you specify
• –domains yourdomain.com – tells wget to not follow links outside the specified domain
• –page-requisites - instructs wget to download all the elements that make up the page (images, CSS, scripts, etc).
• –convert-links - convert links and paths so that it can be browsed locally
• –no-clobber - don’t overwrite existing files

If you need to download only a particular subdirectory you can limit wget to that directory by using the switch –no-parent. If you work on a windows machine (why?) you may need the –restrict-file-names=windows switch. With that switch wget modifies filenames to make the website work in Windows as well.

One last thing

There may be some resources that wget does not fetch because it obeys the rules specified in robots.txt. You can disables that behaviour with the switch -e robots=off.

Note: It is considered evil to circumvent that behavior, so please be careful and only use the following switch on your own site (emphasis on your own)!!!

That should do it. Now you are all set to create local backups of websites. But beware – with great wget-fu comes great responsibility!

Since I bought it I have been playing quite a bit and have just finished the game. I would say that it has taken me around 5 hours to complete the game – a lot less, it seems, than it has taken me back in the day. I believe it has taken me weeks to finish the game when I was little. It seems Capcom has lowered the difficulty quite noticeably. I don’t know why, but I guess it made sense to someone at Capcom. I certainly would have like more of a challenge… from the game itself, not the controls.

Controls

I wouldn’t call the controls sluggish as I have read in some reviews, but I had/have two problems with them. The Jump and Shoot buttons are simply unusable with just one finger – at least for me. Maybe that is due to the fact that I always run around with a fully charged blaster… but I was certainly able to do that with my SNES controller without having any problems. After switching to a two-finger technique that issue went away.

The other problem is kind of related. Hitting two buttons on the D-Pad at once was always a challenge. This was particularly annoying when there was a ladder and an abyss… I did die quite often because I just wasn’t able to press the Up-Button while jumping to the left/right. Exactly the same problem occurred when I wanted to dash-jump to one side. More often than not I dashed in the wrong direction. Sadly, I did not find a cure for that issue. I just have to be careful in these kind of situations.

Achievements

This part of the review is rather short… I am not a compulsory achievement hunter, so the challenge system is not really that interesting to me. For hunters it may be a cool addition to make the game last longer.

In-App Purchases

Buying the upgrades seems wrong to me. Why buy the stuff that actually makes the game a little more challenging and, more importantly, fun to play? I am not generally against In-App Purchases but I dislike being able to buy power. To me IAP makes more sense for Themes, Special Content and Bonus Stuff. I can understand that people who don’t have much time to play may want to advance faster to be able to finish a game, but this is just not my thing.

The only IAP in this game that makes sense to me is the Arranged BGM. I did not buy it though, simply because I usually mute my iPhone. I have also heard that the “Arranged BGM” is included in the original Mega Man X and just taken out to monetize it (correct me if I’m wrong). That seems wrong from the customer point of view. From a business point of view it makes a lot of sense though.

Subtle Differences

While I was playing I noticed a few differences to my experience with the original Mega Man X on SNES. I actually had to do a little research to find out if memory served me correctly, but it seems it was.

In the original Mega Man X for SNES you had to find the X-Buster Upgrade Capsule for X to be able to charge his blaster. In the iOS-version X can charge his weapon right from the start of the game. The Hadouken Upgrade Capsule is also not where it’s supposed to be. Instead you can do a Hadouken right from the start of the game. Other than that all Upgrades, Hearts and Subtanks are in their default locations as far as I can tell.

The verdict

I was afraid that playing the game might destroy some nice memories, but that did not happen at all. Yes, it was way easier, but I remembered half of the special items and the rest came to me after a while. So I don’t feel robbed of childhood memories. It is more like I have confirmation that those hours I spent when I was young, were well spent.

All things considered, I really like the game even though the experience was not as impacting as it was when I was 12. That’s why I can’t give it the full five stars and my final verdict is 4 stars.

New Year’s Resolutions

I really dislike New Year’s Resolutions. Let me try to explain… Why would you pin something that is clearly of some importance to you on an arbitrary date such as the beginning of a new year? If it were really important to you… well, then you could have started working on it as soon as you realized its importance.

I have no scientific proof, but I believe that people who quit smoking as a New Year’s Resolution are less likely to succeed than people who quit the second they decide they don’t want to smoke any more. In other words: If it is not important enough to stop the moment you realize it’s bad for you then you will probably fail.

That is why I never have New Year’s Resolutions. If I want something done, I start right when I notice it needs to be done (if it is important enough to me).

Goals for 2012

It is also common practice to set goals for the new year. That is a lot more up my alley. The main difference compared to resolutions is that you can start working on these goals before the new year has come. It’s all about what you achieve in one year. It feels more like a “scientific method” for measuring success than like a goal. It’s a way to keep track of what I want to accomplish, have accomplished and still need to accomplish. Kind of a long-term ToDo list.

These are my goals for 2012 and I have already started to work on them. I have to admit, that the first goal looks a lot like a resolution… even to me, but since I dislike them so much, let us just call it a goal, OK?

• Release at the very least 2 new iPhone games/apps into the App Store and possibly one Mac App. I’m not sure yet about Mac Apps, but it sounds like fun, so why shouldn’t I? The 2 iPhone apps shouldn’t be too hard because I am in the polishing phase for one app that I originally planned to release in 2011 and I have ideas for a lot more apps and games to keep me busy in 2012.
• Read at least 6 books. I’m not talking about recreational books. I’m talking about books which will expand my knowledge and help me in my professional life. I have already bought more than 6 books I still have not read.
• Pick up a hobby. Sounds simple enough, but I don’t want to start a new hobby for the hobby’s sake. The main reason is as follows: Whenever I pick up a book, at some point I start zoning out and think about problems in my apps and other stuff that is present in my head. While I think about other things, my eyes still keep moving and after a page or so I realize that I haven’t been actually reading anything. That is why I need a hobby that does not occupy my mind too much, so it can process other problems, but it shouldn’t be too dull so that I don’t get bored by it. This goal seems to be the hardest one on my list.

Why?

The obvious reason is that I want to become better at my job. I want to be more successful. I want to work less while still earning more (or at least good) money. All my goals (except the first one) point in one direction. Quit my day-job and become a full-time indie developer. I am well aware that the goals “indie” and “more money” rarely ever go hand in hand… but you can’t blame me for trying. I do also realize that my writing this could cause problems with my current employer because he knows about my blog/website… but what do I care? If he does not want me to work for him anymore that will just kickstart my plans.

Here’s to us all achieving our goals! And even though I don’t like them: Here’s to sticking to our resolutions!

As I said, this was my second app. In other words, it was my second-worst app. I did not follow the MVC pattern to the letter. In part because I thought I could take shortcuts without any ramifications and in part I guess because I did not understand the concept fully. I did follow it where necessary, but I did stray from the right path more than I should have. I knew that I could have done better, but I was lazy and cocky. I also knew that it could come back to bite me in the ass if I ever had to update it or create another version of it.

The time for updates came and against all odds it went a lot smoother than thought. I just had to fix a few bugs that were unrelated to the poor design and easy to fix as well. But now that I am working on another version with new features and a different setting, it just doesn’t feel right any more and it also doesn’t reflect my programming skills the way I would like it to. If I wouldn’t have posted it here, probably no-one would have ever known, but since I want to deliver quality rather than crap, I did make a lot of changes and thus posted it here.

This brings me to the point of code cleanup. It comes in a variety of shapes and sizes. For this post I will restrain myself to some aspects of it.

The Slim-Fast Approach

Take a good look around and think about what is really needed. If you have analytics code embedded in your apps then that should be quite easy, but since I personally don’t like Flurry and the like – or rather the intrusive methods they employ – I do not use any analytics. Luckily my game does not have that many non-essential features. The only three being Game-Center, Facebook and Twitter integration and those are quite easy to monitor without analytics software.

Most of my players use Game Center so I can’t just remove it and it is way more fun to compare ones scores in an online tableau rather than holding your iPhones next to each other and compare them like in the olden days.

Twitter and Facebook Integration were so rarely used that they became negligible and I did not want to allow something like that to clutter up my code base, so I decided to remove them from my new app. Maybe now, with iOS 5, I will re-add Twitter because almost no work is required, but right now it just feels good to remove unused code and dependencies.

Inter-Class Dependencies

Another course I have taken is to aim for loose coupling and high cohesion in my class design. Recently a tool came to my attention which graphs the dependencies in my XCode projects. The tool itself is a small python script which uses a regular expression to find #import statements in all the .h and .m files of a project. Simply supply the python script with the path to your project and write the output into a file.

$ python objc_dep.py /path/to/your/project > project.dot

The produced .dot-files can be easily viewed in OmniGraffle or the free alternative GraphViz. Look for blue arrows in your graphs. Those are bi-directional imports and they are especially ugly and error-prone. My first output looked disastrous. That is what you get when you don’t make use of design patterns.

I should note that I changed the regular expression a bit so that it took my setup into account. In some classes i commented out some imports. Using the original regular expression those imports would still show up in the graph. My change is quite simple: Just look for the “#import” statement at the beginning of lines. This works for me because I use // style comments. It would not work if one would use the /**/ comment-style.

// Before
regex_import = re.compile("#import \"(?P\S*)\.h")

// After
regex_import = re.compile("^#import \"(?P\S*)\.h")

After multiple iterations of dependency removal and moving *lots* of code from the UIView Subclasses to their respective UIViewController Classes, I finally arrived at the following graph.

As you can see, there are still a lot of dependencies on the App Delegate. This is because my Core Data code resides in there. But some of those dependencies could be removed by simply storing the settings in the NSUserDefaults rather than Core Data. This step is the next on my way to a clean(er) class structure. There are also some of those pesky blue bi-directional dependencies left which I vow to hunt down and eradicate after this post is published.

EDIT: Just removed one more bi-directional dependency by simply moving the Settings for my app from Core Data to NSUserDefaults. I wonder why I ever wanted to store Settings in Core Data because it is way more complicated than NSUserDefaults.

Lesson learned

Well, the main lesson I have learned is that best practices and design patterns exist for a reason. I knew that before, but I never experienced it in my own projects. So what I take away from this is: Get it right the first time around – or at least aim for that. It will take considerately more time but it will definitely be worth it when the time for updates, bug-fixes and next versions comes. Any shortcuts taken in any stage of the project will come back and haunt you/cost you money later on.

In contrast to the title of this post, the idea to write it was born while I was not having a lot of fun with words. I am certainly not the most creative person when it comes to words, so I struggled for several days when I had to come up with a name for my business and domain.

Isn’t there an app for that?

It would have been really cool to find a word generator which takes a set of words as input, juggles them around a bit and outputs words or word combinations. I thought to myself: “There must be an app for that!” but after a brief unsuccessful search I gave up and came up with “Vigorous Coding” the old-fashioned way: Pen and Paper (and Sweat).

But the idea for a Hyphenation-based word generator stuck with me for a while so I started to work on a solution.

Make use of existing tools

Why would I want to write a Hyphenation algorithm? Or better: Why should I need to write something that already exists and works (and took a lot of time and effort do develop)? The most famous Hyphenation algorithm is described in Franklin Mark Liang’s dissertation “Word Hy-phen-a-tion by Com-put-er“. It makes use of extensive word lists to derive patterns to hyphenate any word with an approximate success rate of 90% depending on the size of the word list.

Luckily, a very impressive JavaScript implementation based on said algorithm exists and it even supports a truckload of languages! It was originally developed to soft-hyphenate websites to make them resize more gracefully. Just import the Hyphenation script and insert a few lines of JavaScript and you are all set. Read the documentation if you need more info. It’s pretty straight-forward.

<script src="Hyphenator.js" type="text/javascript"></script>
<script type="text/javascript">
	Hyphenator.run();
</script>

That should only leave some jQuery magic and a little String manipulation for me to worry about.

You didn’t think it would be that easy, did you?

Well, there is always a catch. In this case it was Hyphenator.js being developed to hyphenate complete web-sites. It was never intended to hyphenate single words for further processing. So I had to do a little hacking. Instead of using the soft-hyphen (­) to hyphenate the words, I am using a dash so the user can see what is going on. I obviously had to make some other changes to dynamically load the language pattern files and hyphenate user input instead the whole page.

My featurism (for a moment I thought I came up with that word) turned out to be the bigger problem. As always when I begin to work on a side-project, it gets a little out of hand. My initial plan was “Hyphenate words –> put the parts back together –> Profit!” and quickly turned into “Hyphenate words –> sort words –> put the parts back together –> Profit!”.

As time went by, I came up with more and more features to include (Grouping, “Inactive Words”-Group, Cookie Storage, Trashcan). So my final plan turned out to be “Dynamically load languages –> Hyphenate words -> store in cookie –> group words -> sort words -> put the parts back together –> Profit!”.

But there are still some ideas floating around in my head to customize the generator. Like limiting the number of words (per group) that are used, or being able to sort the groups and some other options. Because I always want MOAR!

Keep it simple, stupid!

This is a darn good piece of advice! Remove or rather don’t implement features nobody asked for and probably nobody wants. Following this principle the best I could, I managed to pull myself together and just stuck with language selection, basic drag-n-drop sorting and cookie storage. This way I was able to come up with something presentable in a reasonable amount of time.

EDIT: Well, featurism got the better of me. While writing this post, I felt like I could not publish it without the user being able to delete words. So I added a trashcan to the generator… Just keeping unwanted words in the “Inactive Words” group seemed so dirty.

What it does

The generator lets you input words, hyphenates them and sticks them in the first group. You can simply sort words by dragging them and dropping them on other groups or the trashcan.

The generator has 2 modes of work. Mode 1 is active if only one group contains words. The generator takes random parts from all of those words and puts them back together to form a new word. This happens in the order the words are in this group. The result can be influenced by sorting the words.

Mode 2 kicks in if there are words in at least two groups. From each group one word is chosen at random which is used to generate the new word. This happens in the order the groups are in. The result can be influenced by moving the words into different groups.

As a general rule the first word is never cut off at the beginning and the last word is never cut off at the end. This makes sense to me… I hope it also does for you.

You’re almost there

I hope the generator is of use to someone out there. At least I had fun creating it and I can’t say I am ashamed of the result, but I’ll let you be the judge of that. The thing I could be ashamed about is that this post took almost as long to write as the generator itself. At least it felt like that. I am way better at incrementally refining my code than at refining my words.

What are you still waiting for? Go play with it!

The book itself is very clean and reduced to impressive images. There is barely any text at all – out of 278 pages there are about 5 to 7 pages worth of text – but every bit of it is witty and/or funny. The flashbacks into his personal history – for example how he came up with the idea of stencil art – are also very interesting and well written.

The following quote stood out to me. Even though I like modern art, I also like how he criticizes it (one could also call it mockery), yet still takes the risk of hanging up an image of a Discount Soup Can in the Museum of Modern Art in New York. By the way, that picture lasted for a full six days on the wall of the museum.

After sticking up the picture I took five minutes to watch what happened next. A sea of people walked up, stared and moved on looking confused and slightly cheated. I felt like a true modern artist.

In summary, I really enjoyed the book and for 15 bucks it’s a steal. If you are into Banksy or Street Art at all you should check it out and probably also go see “Exit through the Gift Shop” – a Documentary about Street Art directed by Banksy.

Up until now I never really got around to taking a look at Brainf*ck so today was the day to do that. Brainf*ck was invented with the intention to write a really small compiler. I could write some more, but I would just be copying stuff off of Wikipedia, so here is the link to the article: Brainf*ck on Wikipedia

Without further ado, you can take a look at the JavaScript code below.

javascript:function interpret_bf () {
	var code = prompt("Input Brainf*ck code here!");
	var inp = '23\n';
	var out = '';
	var codeSize = code.length;
	var i = 0, ip = 0, cp = 0, dp = 0, m = {};
	var loopIn = {}, loopOut = {};
	var tmp = [];
	for ( var cp = 0; cp < codeSize ; cp++ ) {
		if ( code[cp] == '[' ) {
		    	tmp.push(cp);
		} else if ( code[cp] == ']' ) {
			loopOut[loopIn[cp] = tmp.pop()] = cp;
		}
	}

	for (var cp = 0; cp < codeSize && i < 100000; cp++, i++) {
	    switch(code[cp]) {
		case '>': dp++; break;
		case '<': dp--; break;
		case '+': m[dp] = ((m[dp]||0)+1)&255; break;
		case '-': m[dp] = ((m[dp]||0)-1)&255; break;
		case '.': out += String.fromCharCode(m[dp]); break;
		case ',': m[dp] = inp.charCodeAt(ip++)||0; break;
		case '[': m[dp]||(cp=loopOut[cp]); break;
		case ']': cp = loopIn[cp]-1; break;
	    }
	}
	alert(out);
};
interpret_bf();

I fiddled around with it a little bit and converted the interpreter into a bookmarklet for easier access (and for fun). You can click here to test-drive the Brainf*ck Interpreter or drag it to your bookmarks toolbar for offline usage.

You can start by using the following string as an example. I took it from the original site and I guess if you are the least bit into programming you already know what it outputs.

++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

Have fun playing with it!