Archive for July, 2007

Blueberry for Sandbox

300707

As some of you might recall I’ve mentioned a couple of times that I was putting together an entry for the Sandbox Design Competition, well I finished mine off a couple of days ago, and now that entries have closed I can share it with the world. I present you my entry, Blueberry for Sandbox.

Blueberry for Sandbox

Blueberry is not a theme itself, but a skin for the Sandbox theme. The parameters of the competition were that it was a pure design thing, you couldn’t mess around with the php code of Sandbox. Only CSS and images, which sure makes things a whole lot simpler.

For the moment I have got a live preview online, this is the same preview that I’ve been using for the past couple of weeks while working on Blueberry. So if you would like to have a play around with Blueberry in the wild please do so, I’ll leave this up for a couple of weeks, or at least until the previews are online at the Sandbox competition site.

Live Preview

We’ve also been advised that we may now provide a download to the world so you can try it out for yourself. So here you go.

Download Blueberry for Sandbox 1.0 Now!
Downloaded 1679 times

Installing Blueberry is really simple. Note that you must have Sandbox installed to use Blueberry, if you don’t have it you can get it here.

  1. Upload the sandbox-blueberry folder to your Sandbox folder in wp-content/themes/.
  2. You will need to edit the default style.css file that comes with Sandbox, so that it loads the Blueberry skin. to do this replace everything after the header in the default style.css with:

    @import url(’sandbox-blueberry/style.css’);

  3. In your Wordpress admin, go to the presentation tab and select the Sandbox theme.
  4. Enjoy.

Thats about it, judging starts now, and runs for a week then the winners will be announced. Personally I’m looking forward to seeing what other participants entries are like. I think I probably could have done more with mine if I’d wanted, but I chose to keep it fairly minimalistic (or in other words…completely different to Redoable).

I’d love to hear what everyone thinks, so please let me know.

24 Comments

Twitter iPhone apps head to head

190707

Firstly. Woah. Second blog entry for the night. Right now the serious stuff.

I needed a break from actually working on Hahlo, so I thought I’d do a little research. Now that there are two extra competitors for using Twitter on the iPhone I thought I would put them head to head with Hahlo and see how they all compare, and what conclusions can be drawn from my findings….oh and I just wanted to play with the cool web inspector in Webkit.

What I did

Nothing too fancy really. First up I had to set a custom user agent string in Webkit so that I could actually access Pockettweets, since they seem to be doing user agent detection and you can only view it with the iPhone user agent, I’m curious to know their reason for this.

The ‘testing’ I did was just a simple loading test, to see how the relative speeds compared, and how much data was downloaded for each. My weapon of choice for this little exercise is the Web Inspector in the latest Webkit builds. If you’re a web developer and you haven’t played with it yet, I think you should.

I based all my tests on the load time of the public timeline, except for thincloud and m.twitter where I tested the friends timeline because the public timeline isn’t accessible. I did a ‘hard reload’ for each one so (hopefully) it didn’t retrieve files from the cache and mess things up…

The Challengers

Hahlo - http://hahlo.com
Hahlo 2-beta - http://beta.hahlo.com/iui/ Update: Hahlo 2 is now live at http://hahlo.com
PocketTweets - http://pockettweets.com
Thincloud Twitter - http://twitter.thincloud.com
Twitter - http://twitter.com
Twitter Mobile - http://m.twitter.com

A picture tells (more) than 1024 bytes.

Have a look at the result for your self, draw your own conclusions. Feeling adventurous then have a play with Webkits Web Inspector yourself and see what you find.

Hahlo
Hahlo.com

Hahlo 2.0
Hahlo 2.0 - iUI Prototype

Twitter mobile
m.twitter.com

PocketTweets
pockettweets.com

Thincloud Twitter
Thincloud Twitter

Twitter
Twitter.com

Transfer Size (as reported by Web Inspector)

  1. Twitter Mobile - 4.51kb
  2. Thincloud Twitter - 101.64kb
  3. Hahlo 2-beta - 107.49kb
  4. Hahlo - 143.4kb
  5. Twitter - 261.3kb
  6. PocketTweets - 323.24kb

Twitter Mobile comes out a mile on top basically because it is far and away the simplest of the interfaces. Its just one document and a tiny image. Thats all. I guess its pretty safe to say that this would be the quickest to access via any type of connection.

Things to consider. All except Twitter Mobile include images which make up on average around 60kb. All except Twitter Mobile include Google Analytics code which as to load.

Transfer Time

Even though this is reported by Web Inspector, its not really all that useful in my mind. For starters the transfer speeds I get here through the universities network are completely different to what you would get through the iPhones wifi not to mention EDGE. Secondly, even though the connection here is fairly fast, it hasn’t been particularly consistent or reliable lately.

The best way to test out the load times is to use these apps on your iPhone and see how they go. I would do this but, thats a little hard without an iPhone.

Javascript

All the tested interfaces except for the Twitter Mobile include some sort of javascript. They all include GoogleAnalytics urchin.js which is approx. 7kb.

  1. Hahlo 2-beta - 29.75kb
  2. Thincloud Twitter - 34.23kb
  3. Hahlo - 54.9kb
  4. Twitter - 131.39kb
  5. PocketTweets - 238kb

Reducing the size of my javascript is something I have been very aware of while working on Hahlo. As you can see I’ve almost manged to halve the size of the JS used by version 2, although it might grow just a little since the version tested is not feature complete.

Hahlo currently includes part of the mootools framework, which is only need for the AJAX status updating, and was chosen mainly because the file size was so much smaller than prototype. With version 2 I am now using Joe Hewitt’s iUI which is much smaller, includes AJAX functions and doesn’t contain anything that isn’t needed. I am also now processing the JSON feeds server side, which removed the need for a bunch of javascript.

Thincloud don’t appear to be using any big framework, choosing to just stick with the basics and have put their own javascript together to just what they need.

Twitter are using prototype (including effects.js and application.js), but this is more than understandable since this is their primary site, and not the mobile-optimised site. Still 130kb of JS is a lot…and not something you would want to load over EDGE too often.

PocketTweets are using prototype (including effects.js, dragdrop.js, controls.js and application.js), lightbox and pngfix. Over 200kb all up, and I’m wondering how much of it is actually used. In particular pngfix which according to the comment at the start of the file is for “Correctly handle PNG transparency in Win IE 5.5 & 6.”, and since PocketTweets only works in browsers with an iPhone user agent I’m fairly certain that there is no need for pngfix, or do they know something we don’t. Lightbox is nice, just maybe not on a mobile device. Sure it does some cool things, but its 800+ lines of code for an effect that doesn’t seem to be used. But wait…it does.

You see if you visit Pockettweets in Firefox (or another non-iPhone browser) you get an information site about the app. This page uses lightbox, and would also use the pngfix. The question is, if you’re serving a user-agent specific page couldn’t you also only load the files needed by that user-agent specific page.

Stylesheets - CSS

Again Twitter mobile doesn’t have a stylesheet either, it’s styles (of which there aren’t many) are just included in the header of the html page.

  1. Thincloud Twitter - 1.05kb
  2. PocketTweets - 5.73kb
  3. Hahlo 2-beta - 11.04kb
  4. Twitter - 11.87kb
  5. Hahlo - 16.16kb

Both PocketTweets and Thincloud seem to be using gzip on their css (and their js for that matter), currently I’m not using it on Hahlo, but it will be turned on soon, so hopefully that will reduce the size of the transfer for Hahlo even more.

Images

As mentioned already all of the tested pages, except Twitter mobile, have to load a bunch of user avatars which make up about 60kb. These tend to be the slowest part of the page load, as can be seen by the loading graphs. I will be definitely looking at adding an option for users to choose to show/hide avatars by the time version 2 is finished.

  1. Twitter Mobile - 0.62kb
  2. Hahlo 2-beta - 64.29kb
  3. Thincloud Twitter - 65.62kb
  4. Hahlo - 67.16kb
  5. PocketTweets - 76.07kb
  6. Twitter - 84.76kb

The current Hahlo is using probably the largest number of different images, due to the way some of the buttons and UI elements are created, but because most of them are tiny pngs of only a few hundred bytes the damage isn’t too bad.

PocketTweets is simliar in that it is using a number of images, but none of them are particularly large.

This is the one area where all of the sites are fairly close in the total size of images, but it is pretty clear that the majority is made up of user avatars, which are beyond the apps control.

Use of API feeds

Hahlo is currently using the JSON feeds from the API, and the processing is being done client side. For version 2 I am now processing the JSON feed server side, mainly because I hadread reports that the javascript execution time on the iPhone isn’t too flash, and I figure the less strain I put on the device itself the better.

Thincloud are also using the JSON feed and processing it client side, however looking through their javascript, it looks like it might be a little more efficient than my original stuff.

PocketTweets appear to be doing the processing server side, and the response time is pretty good.

Obviously both Twitter interfaces just access the information directly, which means that they too are doing any processing server side.

Functionality

I can’t do this little head to head without at least touching on the functionality of each app.

Thincloud Twitter

  • Nothing accessible unless logged in
  • Buttons both top and bottom, main toolbar at bottom
  • Friends timeline
  • Update your status
  • Replies timeline
  • Browse friends
  • Add a new friend
  • No links in tweets
  • Font is quite small on my laptop screen…must be almost unreadable on the iPhone

PocketTweets

  • Public timeline accessible to all
  • Buttons both top and bottom - main toolbar at the bottom
  • Friends timeline
  • Replies timeline
  • Direct Messages
  • Archive
  • Able to favourite tweets
  • Able to reply to tweets
  • Able to update status
  • Has links in tweets.
  • Help page - although its more an ‘about’ page than ‘help’, but better than nothing
  • Can only be viewed in browser with iPhone user agent.

Hahlo

  • Buttons both top and bottom, main toolbar at bottom
  • View User Timeline
  • View Friends Timeline
  • View Public Timeline
  • View Replies Timeline
  • View Direct Messages Inbox
  • View Direct Messages you’ve sent
  • Update your status
  • Send a direct message
  • Reply to tweets
  • Alphabetic Friend list, with last update
  • Friend avatar view - not really too useful just looked good.

Hahlo 2.0

Still a work in progress, but in addition to the features that v1 has.

  • URLs in tweets are links
  • usernames for @ replies are link to that users timeline, just like on Twitter
  • more…like I said, its a work in progress.

Twitter Mobile

  • Very simple
  • Very quick
  • Just displays your friends timeline
  • And lets you updates your status

Twitter

What is there to list. This is the main site, of course it has everything, and of course it all works the best on twitter.com

Roundup

I’m not going to make any grand judgments. Everyone will have their own preference. I’m of course bias towards my own app, Hahlo.

Thincloud Twitter looks alright but its a bit lacking on functionality at the moment I guess this will change, and they’ve very heavily tied themselves to twitters logo and colors, could trick some into think this was an official twitter product.

PocketTweets has its good points, but honeslty I’ve not a fan of the interface. It would look awesome if a similarly style site was available for full screen, non-iPhone use, but on the iPhones small screen, it seems likes its wasting a lot of space. But thats just my opinion, I know there are plenty of people who will disagree with me.

Well thats about it I think. I would love to hear your feedback and comments. Which one do you use? How does it perform in the real world on the iPhone? Let me know.

10 Comments

iPhone development and blog neglect

180707

Its always the same. I almost always find that I try and do too many things at once. As a result some things get neglected.

Hahlo

The last time I posted anything here was when I launched Hahlo, and that was almost three weeks ago. Since then I’ve spent a lot of time chasing bugs, and trying to improve it. You have no idea how much I wish I could get my hands on an iPhone, beause trying o develop for a device that you can’t get near is very difficult.

Who knows exactly when they will release the iPhone in Australia, but I don’t see it arriving until mid next year. I’m kind of hoping that we might benefit from the delay by getting an updated version. Even better would be if they release new iPods with similiar functionality (obviously without the phone bit).

Following the launch of Hahlo, I asked for (useful) feedback. I got a little bit, but for the most part it wasn’t too useful. I also did some searching (yes I googled my own app) and found plenty of ‘interesting’ comments. One person who shall remain nameless made a less than complimentary comment about Hahlo and its design… I’ll keep what I think about one of their iPhone app designs to myself…

Due to the rushed nature of Hahlo’s development there were some areas where I kind of coded myself into a corner, with no way out other than to start again. To a certain extent thats what I’ve started to do. Using the super nifty iUI library developed by Joe Hewitt I’ve started work on what will be Hahlo 2.0. A simple thing like switching to processing the JSON feed server-side has allowed me to easily add a couple of the things I had originally wanted in my original version, such as parsing url’s in tweets so they become clickable links. you can have a look at the new bea here: http://beta.hahlo.com/iui

Other iPhone related stuffs

I couldn’t stop at just one iPhone ‘app’, so I started work on another. This time I thought of something that would be truly useful on the iPhone, a mobile interface for Lighthouse App. If you’re looking for a simple online bug tracking app then Lighthouse is really worth a look. I haven’t made a huge amount of progress on it as yet, but I will eventually find some time to spend on it.

A couple of days ago Steven Frank (from Panic) released a super simple wiki designed specifically with the iPhone in mind. W2 has the basics, you can create and edit your wiki pages, you can even use markdown for formatting. Theres no login management at the moment, so everyone will have access. but if thats a problem you could always just use htaccess to restrict it.

I spent a couple of hours last night mashing together the W2 wiki with the iUI library to make a wiki that looked like the rest of the iPhone interface. Theres a few buggy bits but overall it works ok. I had to play around with the W2 source code a little, but nothing too complex. You can have a play with my work-in-progress version here: http://beta.hahlo.com/wiki/

Keep in mind that the wiki is designed to work best on the iPhone (although I can’t test that…) or Safari. However… it looks completely different in Safari 3 to what it looks like in the latest Webkit build. Check this out. I’ll have to look into why exactly that is.

Blog neglect

I’m still working on my redesign, its along time coming, but like everything else I will eventually get it finished. I’ve got all the major parts done (I think) but its all the fine tuning that takes time, and I want to get it just right before I make it live.

Also in the works is my entry for the sandbox design comp. Again the major bits are done, I just need to sit down and finish it off. Entries close in a little under two weeks time, so I guess I should get onto that pretty soon.

Well, thats probably the longest blog entry I’ve written in a while. And its probably a good indication that I should post more often.

Comment