JoeHewitt.com

Today marks the third major iteration of this blog since its inception in 2002. On the outside there is nothing interesting about the new design - it's intentionally plain. The really exciting thing (to me, at least) is what you can't see: joehewitt.com is now 100% Python-powered.

The blog had previously been running on Movable Type (Perl) with some PHP around it. I'm really a Python guy, so that kind of irritated me. I've always wanted to use the site as an experimental platform for new publishing ideas, but not so much that I wanted to suffer through PHP or Perl to do it. Now the blog is a very simple Django application which I can easily enhance at a moment's notice. This was my first Django app and I can say without qualification that Django rocks. It was so easy that I wrote most of the code on airplanes while flying across the country.

Another change is that I have decided to go without comments this time around. I think that I've self-censored a lot of potentially interesting blog posts because I didn't want to get into arguments with readers in the comments. I'd like to blog because it helps me find clarity in my thoughts and improve as a writer, not because I want to entertain or persuade anyone.

The Carnegie Deli may be partially responsible for global warming.

I'll be right back.

Normally on the morning of a big Apple product launch event I wake up early, stumble out of bed to my computer and attempt to open my eyes wide enough to read Engadget and MacRumors as they relay Steve Jobs' words to my screen. This morning's keynote was a little different.

This morning I woke up, showered, put on some nice clothes, got in my car, drove to San Francisco, and next thing you know I'm sitting in the fifth row of the Moscone Center waiting for Steve to walk on stage.

I have to admit I'm pretty jaded by most things that I experience in the tech industry these days, but this was one of the few times that I've felt like a little kid going to his first baseball game.

Apple was kind enough to invite myself and Dave Morin from Facebook to the event, telling us only that Steve would be browsing the Facebook iPhone site at some point in the presentation. Of course, I had no idea that Steve would actually be browsing Facebook on an iPod instead of an iPhone. That was the surreal part - there is Steve Jobs demoing Apple's flagship product, an amazing new iPod, and he chooses to show the NY Times, Bob Dylan, and my baby, the Facebook iPhone site! Is there a higher compliment you can receive in this industry?

After the keynote I had a chance to talk to Steve briefly, which was the equivalent of meeting Derek Jeter in the parking lot after a Yankees game. I don't exactly remember what I said, but what I would liked to have said is, "Thank you for making the mobile web kick ass!" Seriously, if people take anything away from seeing Facebook on stage at this event, it is that the mobile web isn't just about old websites like the NY Times, it's about social websites designed to fit in your hand and keep you connected at a glance. The iPhone and now the iPod Touch make it so much fun to create these kinds of websites, and I can't wait to see what we come up with next. Thanks, Apple, and thanks, Steve!

I've been reading a number of bloggers comparing the iPhone to Internet Explorer 4.0 in a negative way. They are afraid that the iPhone will result in a flurry of websites that are only compatible with a single browser, just as IE4 once did. I have a message for these people: please shut up and stop hurting the web. If you won't ever allow new products to break away from the pack, then we'll never see innovation in web technologies. It is our job to embrace the new and deliver great products for our users, not to hold out on account of some foolish religion.

It is absolutely true that the iPhone and IE4 have a lot in common. IE4 was a seminal product that changed everything. We owe a great debt to Microsoft for that. The IE team at that time was hellbent on putting unprecedented power in the hands of web developers - far more than their competitor Netscape did. They succeeded, and much of what they did turned into the standards we have today. I'll still never forget how blown away I was by IE4 and how it changed my life. It angers me that history is now being re-written to cast IE4 as harmful.

The iPhone is going to have the same effect as IE4, but unfortunately there are a fair amount of web developers who don't care about progress or innovation. The dogma of web standards has blinded them, to the point where they don't even understand how standards come to be in the first place. Do you really expect companies to refrain from releasing new products until a standards body approves, and then for all their competitors to release an identical product at the same time?? Would you like to be held to that process in your work? Companies should be encouraged to release new things, and we should standardize later.

I think part of the reason why Microsoft stopped developing IE is that the developers behind it got sick of being criticized for trying to innovate. Many of them left the IE team and moved over to the XAML project (aka WPF/Silverlight) so they could continue to do great work without being attacked for it. That is a shame, because I would have much rather seen the XAML concepts poured into HTML/CSS/JavaScript foundation. Meanwhile, the W3C produced jack squat during those same years. This is what we have to thank the Web Standards Project for.

So here we are starting over again with the iPhone. Apple is in a position to deliver non-standard breakthrough technologies to the mobile web. This will certainly involve a period in which Safari is the only browser to support certain features, and I'm sure that will result in a lot of griping. Some people would probably prefer the W3C to start new working groups for mobile HTML, CSS and DOM features, and then wait until 2012 for them to release a final specification. I, for one, would prefer to ship new products last week.

There are a lot of reasons that I am ecstatic to be working at Facebook, but the number one reason is the users. Facebook has over thirty million active users and growing. That's a lot of people and a lot of activity! What could be more fun for a creative person than to have the opportunity to affect so many people in a positive way?

I'm really excited to see so many people using iUI. I just have one concern. iUI gives your apps the precise look of Apple's iPhone apps. That's nice, except it's kind of boring.

I know not everyone agrees with me on this, but I kind of like the way applications on the web have their own unique style, unlike desktop applications which all tend to look identical. As beautiful as Apple's designs are, I don't want to have to look at that same shiny blue bar on every single website I visit.

I guess what I'm saying is, if you're using iUI, don't hesitate to plug in some of your own colors and graphics and stuff. My favorite iPhone app, PickleView, is a great example. It feels right at home on the iPhone, but has its own distinct visual identity.

There's been a debate going on, sparked by a Wall Street Journal piece, about who invented blogging. I've always found this topic ridiculous. As someone who discovered the web in 1993, I remember reading Justin Hall's and Dave Winer's journals, but I also recall finding plenty of other things that I regarded as similar at the time. How exactly do you define what a "blog" is, anyhow, when there are so many different forms of personal expression that happen online.

I'd like to think my good friend Doug Palermo was one of the first bloggers, if not the first. In 1995, Doug and I created our first website, Feff World, just after finishing our junior year of high school. Doug was and is a hilarious writer, and he started writing "The Weekly Whack" in July of that year. The Whack was a chronologically ordered series of ruminations on Doug's everyday life, usually with a humorist twist. Unless you want to get picky about weekly vs. daily, that sounds like a blog to me. The first Whack is now twelve years old, two years older than the so-called "first blog" by Jorn Barger.

At first, Doug would email me the Whack and I would upload it to the site, but later on I wrote some Perl CGI scripts so Doug could do it himself. Was this the first "blogging software"?

Frankly I don't think it was, any more than Jorn Barger was the first blogger. When Doug and I started in 1995 there were other people writing periodically on the web, and I'm sure there was other automated publishing software as well. None of it had a catchy name like "blog", but it was very much the same. It would be unfair to give credit to any one person who happened to be there on the day the term "blog" was coined. The "blog" wasn't invented, it evolved through many hands.

It's about time I write something here about iUI, the little JavaScript and CSS bundle I've been working on that makes developing iPhone web apps easy. Before I even had a chance to make iUI "official" it was adopted by dozens of projects, and I regret that so many iPhone apps are based on my original hack with all its flaws and glaring omissions. To anyone who is using the original iUI (then named "iphonenav"), I'd recommend reading this post and learning about the new version - it will make a big difference for you. To anyone new to iUI, here is a little overview of how it could make your life easier.

First and foremost, iUI is not meant as a "JavaScript library". Its goal is simply to turn ordinary standards-based HTML into a polished, usable interface that meets the high standards set by Apple's own native iPhone apps. As much as possible, iUI maps common HTML idioms to iPhone interface conventions. For example, the <ul> and <li> tags are used to create hierarchical side-scrolling navigation. Ordinary <a> links load with a sliding animation while keeping you on the original page instead of loading an entirely new one. A simple set of CSS classes can be used to designate things like modal dialogs, preference panels, and on/off switches.

Let me re-emphasize that all of this is done without the need for you to write any JavaScript. It is meant to feel as though HTML was the iPhone's own UI language.

Re-Inventing the Apple

At WWDC, Scott Forstall of Apple talked ambiguously about giving web developers a way to mimic the look and feel of native iPhone apps. Despite what he promised, Apple has yet to deliver anything or even mention the subject again. In the mean time, dozens of new web apps are launching every day, and many have tried, with varying degrees of success, to replicate Apple's UI. I am so in love with the look, feel, and experience of the iPhone that it kills me to have to experience anything less when I'm browsing the web. I figured it was worth it for me to take one for the team and do all the re-inventing myself so you don't have to.

iUI is about more than just visuals, it aims to make web apps as usable as Apple's own. One usability problem I kept witnessing in early iPhone web apps was a lack of support for the back button. While using these apps I often found myself hitting back and being sent two or three "pages" backwards. The reason is that most apps are using single-page navigation, which skirts the browser's own history. The single-page model is the right way to go, but it is imperative that the back button still works, because if I'm going to wait 3 minutes to load a page over EDGE and then have to load it again because the back button accidentally sent me away from your site, I'm not going to be happy.

That's why I think the best feature of iUI is that it makes single-page navigation usable. It keeps the back and forward buttons working and optionally inserts a captioned back button into your app's toolbar. It slides smoothly between pages (at least as smoothly as Safari can go, which is about 1/10th as smooth as native apps) instead of the unpleasant flicker and jumpiness that accompanies a fresh page load.

Digg and iUI

Today I was surprised to find that the new iPhone version of Digg was built using the early "iphonenav" scripts. It's a really well done site, and Joe Stump of Digg built it so quickly that he beat out the new iUI release, which would have helped a lot. To illustrate the improvements I created a miniature version of Digg which uses the new features of iUI. Below I will describe how the new features could make Digg load faster and feel smoother.

Let's talk about some of those new features...

Ajax Hyperlinks

A major problem with "iphonenav" was that it required you to include every single page you might want to display in one big HTML file. For example, Digg's home page includes the complete content of the first ten stories, and loads the next ten stories by linking to a completely new page. This fractures the single-page model, forces users to wait longer between clicks, and interrupts the continuity of the animated page transitions.

The new iUI allows you to gracefully load content into your app on demand so your pages can stay lean and load faster. All you have to do is link to an external URL the way you normally would and iUI will load it via Ajax, insert it into your app, and smoothly slide it into view. The only catch is the pages you link to should not be complete HTML documents, but rather only the fragment you wish to insert. You can use target="_self" to load external links the old fashioned way.

For an example of Ajax linking, check out the Digg demo. Each time you click a story it will load and slide right in. Unlike the current iPhone Digg, the home page in the demo includes only the headlines and is three times smaller.

Scrolling Long Lists

Another big problem with iPhone web apps is presenting very long lists efficiently. Digg has this problem with their stories and comments and they work around it by breaking stories into pages of ten and omitting all but the top five comments. Apple solves this problem nicely in their Mail app by loading 25 messages at a time and putting a link to get more at the end. Clicking it loads those messages and appends them to the end of the list, allowing you to use the joyous flick gesture to scroll the complete list at once. In my view, this is nicer than breaking the list up into separate pages.

iUI makes it easy for you to use this convention in your own web apps. Simply create a link with target="_replace" and iUI will load the URL it and replace the <a> with the contents of the URL. Again, the URL should not point to a complete HTML document, but only the fragment you want to replace the "Get More" link with.

For an example of incrementally loaded lists, look at the Digg demo again. Scroll to the bottom of the stories list and click on the "Get 10 More Stories..." link.

Ajax Form Submission

A bunch of iPhone apps start with a form on their first page. Take Movies.app, for example. When you submit the movie search form it goes to a completely new page, which doesn't feel very smooth. With the new iUI, forms are submitted via Ajax and the results slide neatly into place. If your users want to go back and fill out the form again, it quickly slides back in. Like with links, if you specify target="_self" on the form it will submit it the old fashioned way.

Here is a simple Movie search example using Ajax form submission. Submit the search form and watch the results slide right in.

That's all for tonight. I'll be writing again soon about the other features of iUI. In the mean time, you can check out this smorgasbord of an iUI example which demonstrates pretty much every possible feature.

My blog has been a little quiet this weekend, but the offline version of joehewitt.com has been quite busy these last three days. Since Friday night I've been at iPhoneDevCamp in San Francisco with an incredible group of people and a whole lotta iPhones.

I had never been to an event like this, so I didn't know what to expect. My expectations going in were that it would be like any other time when I've been in a room full of engineers, like at any corporate campus I've worked at. Let me tell you, this was different. This was 300+ of the brightest and most enthusiastic people in software. It was very weird meeting one person after another who was overflowing with optimism and capable of bringing new ideas to life on the spot.

People were incredibly kind to me at this event, especially Christopher Allen, who masterfully organized the Hackathon in the style of the late great MacHack conferences. As soon as I got there, Christopher introduced me to a very talented video game designer, Nicole Lazzaro, who had an endless stream of ideas for games that would use the iPhone's accelerometer. Nicole's ideas quickly ran into the limitations of the phone, as we discovered that the browser doesn't rotate when you hold it vertically upside down, nor is it possible to distinguish the two horizontal orientations. When we realized that her four-sided Tetris idea was not possible, we initially tried to compensate by adding in button pressing and other methods, but decided that we wanted to make a game that was very simple and used only the tilt sensor for input. Nicole's philosophy is to focus on the emotional ride a player feels while being challenged and rewarded at just the right times, as opposed to just realistic graphics and long monotonous missions. From an engineer's standpoint, I was overjoyed to focus on the psychological impact of my code instead of trying to build a technical or artistic masterpiece.

Later in the night we met Colin Toomey, a great designer who volunteered to create some Atari-style graphics for the game. A day of JavaScripting later and the iPhone game Tilt was born. Tilt may just be the first game that uses the iPhone's accelerometer as its controller. The idea is that stuff is falling from the sky towards your character - some things you want to eat, some things that will injure you. You have to tilt the phone just in time to catch the stuff whose color matches your own. The game is still incomplete, in that it only has one brief level, and we haven't yet nailed the patterns of falling objects to make it really challenging, but you can play it now anyway:

Play Tilt here (on an iPhone, unless your computer screen rotates when you tilt it).

Another fun thing about iPhoneDevCamp was my constant surprise as I found one project after the other using the iPhone app template that I threw together on Thursday night. I didn't really think this bit of code was ready for prime time, which is why I didn't even mention it on this blog. I only posted a link to it on the iPhoneWebDev Google Group. When I woke up the next morning it was already on Ajaxian. Later that evening, Jeffrey Grossman launched Movies.app, which used the template for its UI. The next morning I met Kristopher Tate of Zooomr, who had created a Google Code project based on my code and started using it to build a music browser. Throughout the weekend I met one group after another using the template for their Hackathon projects. I guess the lesson is that people are really happy to be able to focus on their apps instead of re-inventing Apple's UI! I'm definitely going to put some more time into it this week to clean it up and add some more features that people asked for.

A constant theme throughout the weekend was people's disappointment in the hackability (or lack thereof) of Safari. Seems just about everyone who signed up for iPhoneDevCamp planned to write an app that involved touch screen interaction. We were all extremely saddened that Safari does not yet support any mouse events beyond click. On the first night I met a developer who didn't own an iPhone but was boasting to me about his cool idea for touch screen painting. When I told him it was not yet possible he didn't believe me, to the point where he practically stole my iPhone and MacBook Pro and started banging out some drag and drop code to prove his point. When he ran it on the phone and it didn't work he stood there in shock, dragging his finger across the screen over and over again waiting for Safari to hear his plea. As for me, I still have faith in the Webkit guys, and I think it won't be long before we are able to start building the multi-touch web. I'm working on a blog post for later in the week that outlines my "wish list" for the next iPhone Safari update.

Thanks again to the people who organized iPhoneDevCamp, and to all the people I met who were so gracious to me. Thanks especially to Apple for creating such a stunning product. I've only owned this thing for 9 days now and my view of software design has already done a 180.

When you create your first page for the iPhone and load it in that sweet little browser, the first thing you think is "Damn, I wish I could get rid of those giant toolbars!" It is kind of annoying to have so much space taken away from your pages.

As it turns out, it only takes a little JavaScript to get rid of the big toolbar at the top, which is much larger than the one at the bottom. All you have to do is call window.scrollTo(0, 1), and the upper toolbar will slide right out of sight!

If the user rotates the phone, it all gets messed up, so you have to detect changes to the phone's orientation and call scrollTo again at that time.

All in all, it works well. I hope that those of you out there developing iPhone apps will use this technique to get rid of that giant honkin' toolbar so I can enjoy your apps in the full glory of the iPhone screen.

Here is a demo

I'm having a lot of fun with this phone if you haven't noticed :)

Trying to debug web pages on my iPhone transported me back to a dark place I hadn't been in some time: the Land of alert() Debugging! Within the first few hours I had sent my phone into its first infinite modal loop, from which the only escape was to power down the phone and reboot it. While waiting for the reboot I pined for Firebug and my best friends console.log() and the command line. My first thought was to try and embed Firebug Lite on the phone, but the thought of trying to share that tiny screen with my app and the console was not pleasant, nor was the thought of typing JavaScript on the iPhone keyboard. I realized there is only one viable solution, which is to create a remote interface to the phone that allowed me to debug from the comforts of my computer with its big screen and real keyboard.

A few hours later, Firebug for iPhone was born. Basically, it is a little Python web server that you run on your computer which acts as a bridge between your iPhone and the browser on your computer. When you call console.log() on the phone it sends a bunch of HTML to the server, which bounces it back to Firefox (or Safari or whatever) and displays it your nice big Firebug console. You can enter JavaScript commands in Firefox and have them sent to the phone, evaluated, and sent back to Firefox.

Your iPhone needs to be able to reach the computer you run the server on. If your iPhone is on the same wireless network as your computer, the easiest thing to do is to just run the server on your computer. If they are not, then run the server on another computer that both your computer and the iPhone can access.

Here are the instructions for using Firebug for iPhone. It's still a little "homebrew" but with time we can make the installation more automatic with py2app/py2exe.

Download ibug0.1.zip and unzip it somewhere, anywhere on your computer Make sure you have Python installed - if you are on a Mac, it is already there, if you are on Windows, download it here Open your terminal and cd to the ibug directory that you just unzipped Run python ibug.py - it will write out some information that you will need in the next step and then launch the web server Copy and paste the HTML script tag that you see there into the HTML head of any iPhone web pages you plan to debug Load the URL that you see there in your browser to launch the iPhone Firebug console That's it! console.log() calls on the phone will now show up in your browser, and you can use the command line to enter JavaScript commands that execute on the phone To kill the server, just hit Ctrl-C

I have only tested the server on Mac OS X, but it should work on Windows or Linux. I have only tested the console in Firefox, but it should work in other browsers. If you have any problems, please let me know so I can make this as robust as possible. This is just the beginning - I can see more of Firebug's functionality, such as the HTML and CSS inspection and editing, coming along later as I do more iPhone development myself.

Happy debugging!

I've never waited in line for a gadget before. Heck, I've never waited in line for just about anything except maybe lunch back in high school. Today I was walking through the Valley Fair Mall, just there to buy myself a nice new shirt, and oh, hey, is that Steve Wozniak sitting on that bench? Oh yes, the iPhone goes on sale today! 4 hours of standing in line later and I am now an iPhone owner. I didn't really need a new shirt after all.

I have one reason only to own this phone, which is to figure out inner workings of mobile Safari and start making some kick-ass mobile software. I've been experimenting with it for the last half hour, and I'm a bit frustrated. If Apple is serious about the iPhone being a platform for rich web development, my initial JavaScript experiments show they have a ways to go.

My first task has been exploring the DOM events that you can handle. I am hoping to write a little multi-touch interactive app, so I'm particular interested in mouse events. Sadly, there seems to be no way to react to the user touching the screen. You do not get a "mousedown" event when your finger touches the screen, instead you get "mousedown" and "mouseup" at the same time when you release your finger. The "mousemove" event does not seem to fire at all. There is no way to handle double-clicking either. A double-click zooms in and out, and event.preventDefault() doesn't override that behavior as it should.

I'm waiting for my commentary from the Webkit team on this - hopefully there are workarounds.

I've been possessed with a feeling of optimism about software recently that I haven't felt since I first picked up BASIC in my tweens. It's partially because my project (still under the radar) is kicking ass and I'm doing the best work of my life, but it's also because I feel like the industry has finally turned a corner this year and that we're on the verge of realizing potential that has been bottled up for years.

To me, the change is due to two recent facts: the world now finally has a social network that doesn't suck, and a mobile phone that doesn't suck. I'm talking about Facebook and the iPhone. Between these two, software will no longer be bound to tiny communities of people of people sitting behind desks. It is everyone, everywhere.

Of course, social networks and cell phones are not new - what is new is that the companies delivering them have never truly embraced developers. In the past I've been interested in writing software to extend MySpace or run on "smart" phones, but the developer experience always left me cold. I'm looking forward to seeing the companies that disrespected me as a developer take one on the chin, and I hope to help deliver the blow.

I've read lots of people, while arguing for why iPhone web apps are lame, assert that web apps won't be able to take advantage of the iPhone's multi-touch screen. This is nonsense. I completely expect Apple to have extended Safari with new DOM events that allow any web page can respond to the variety of gestures the user can make with the touch screen and accelerometer.

Won't it be fun to handle "ontilt" for when the user turns the phone from portrait to landscape mode, or "onpinch" for when the user pinches the page with multi-touch? Should the "onscroll" event include details about how fast the user dragged her finger, to indicate the speed to scroll? Developers are going to have a field day with this stuff. I am sure Apple has thought these things through and won't let us down.