Blogs

My Blog activity will now happen over at my own site, to relieve the overload on nitobi.com. Check it out at http://www.risingj.com Cheers!

Posted my source code for WebKit touch scrolling of flexible sized data in fixed size boxes.

I will be preparing more of a tutorial / demo of this functionality but am way too busy with client work right now. ( I wrote GloveBox on the weekend, and it’s already in use in 3 Nitobi client projects! Expect lots of updates as we put it through the ringer. )

You can get / git / fork the code at http://github.com/purplecabbage/GloveBox
or via svn at

http://code.google.com/p/glovebox/

The choice is yours, but the google code repo will probably be much fresher since I still find myself fighting with git on a regular basis. ( I love github though! Bring on the svn write access … )

Cheers!

So if you want to make an iPhone app using your HTML/CSS/JavaScript skills, what do you use? PhoneGap! obviously.

If you want to add some iPhone native controls, screens, whatever… PhoneGap Plug-ins seem like a fairly easy path, even though they are still largely undocumented, and unknown to most, at least they are somewhat planned.

But what if you have a native iPhone app already, and you want to quickly throw in some phonegap. Before today, there was no easy way to do this because phonegap for iPhone was architected to be the one and only Application delegate. This is the newest use case I have chosen to address.

This approach of breaking PhoneGap functionality into it’s own control space makes some exciting new things possible in the near future. Including:

• Multiple page / view apps where the views are persistent ( instead of having to reload or navigate between pages )
• Sandboxed child apps
• The ability to divide work among multiple developers, without having to constantly keep track of other’s changes.
• Better division of responsibility within code modules ( divide and conquer methodologies ).
• Drop-in functionality, for code libraries, add them to your app more easily, and build up your control library over time.

Introducing Cleavage for iPhone.

First off, you may be wondering about the name. I wanted to stick with the ‘gap’ theme so I started brainstorming on other types of gaps.

At first I considered Diastema as it has a nice ring to it. After thinking on that for awhile I decided it would be best not to alienate phonegap developers as we are predominantly Madonna, Letterman, and Mad Magazine fans. ( What, me worry?)

Other Gaps I considered were :

• Rift - too sci-fi
• Gape - um, too close to Gap
• Fissure - too literal, and weird …
• cavity, chasm, crack, … - just not it

So cleavage it is! .. and given it’s current state it is very much as Jerry Seinfeld says.

“Looking at cleavage is like looking at the sun. You can’t stare at it long, it’s too risky. You get a sense of it then you look away.”

Please keep in mind that this is very much a work in progress, but expect some updates in the near future.

I have posted the PhoneGap control sample app to: http://github.com/purplecabbage/cleavage

Documentation and such to follow later in the week, I hope, here is a quick getting started description.

In order to use this in your own ( pre-existing ) iPhone OS project, you will need to:

1. add all PhoneGap required frameworks to your project ( the sample project has them all )
2. add a reference to PhoneGapLib ( you will need the latest checked in version )
3. place your html/js/css in a www folder in the project and be sure it is packaged in the root of your app when built
4. include phonegap.js from PhoneGapLib, as it is not auto-copied over for you like it is in a typical phonegap iPhone app.
5. set linker flags for -all_load and -ObjC

PhoneGap has been getting a lot of attention lately, and also a lot of questions on the mailing list about where to get started.
I recently built a small PhoneGap app for iPhone that helps to demonstrate PhoneGap functions.

The application is divided into multiple pages, and each page focuses on one area of functionality.
I have strived to keep each page dedicated to the functionality it presents, and present everything as simply as possible.
There are no dependencies on any other libraries, and the js / css for each page is contained directly there.

The Notifications page demonstrates key navigator.notifications functions.

• Custom Alerts - with custom title text, and button text.
• Display a loading screen for a fixed length of time
• Vibrate the device
• Show and hide the Activity Indicator ( the spinner at the top bar )

The Accelerometer page demonstrates navigator.accelerometer functions.

• Start + Stop the accelerometer update logic, and play with a bouncing ball.

( a shout out to Yohei for providing the initial code for this example. )

The Contacts page demonstrates navigator.contacts functions.

• Display the number of contacts
• Spawn the contact picker screen
• Renders a contact, and makes it clickable, to spawn the contact viewer.

The GeoLocation page demonstrates how to use navigator.geolocation

• Gets your current location
• Calls Twitter api using JSONP to get tweets within a mile of your location

( a shout out to Girlie Mac http://girliemac.com/blog/ this code was shamelessly borrowed )

Hopefully the other platformers will step up and publish / test on other devices. I have only worked on the iPhone branch so far.

I will be working on the Media api next to demonstrate how easy it is to play mp3s within PhoneGap, and I might even post some of my own music, we’ll see.

Get it while it’s hot! http://github.com/phonegap/phonegap-iphone

http://github.com/purplecabbage/Jestitute

Update: the content of this post is no longer relevant. The gap has been filled.

Last week there were some discussions about the poor performance of jQTouch in PhoneGap apps, so I dug into it.

First I had to verify that this was something we were doing in PhoneGap and not a difference between Mobile-Safari and the UIWebView control which we use in PhoneGap.

I created a PhoneGap project and dropped the jQTouch sample code into the www folder, and immediately noticed the sluggish performance.

I then created a bare bones iPhone Windowed application with a UIWebView in it, and dropped the same www folder contents into the project root.

NSURL *appURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"www"]];
NSURLRequest *appReq = [NSURLRequest requestWithURL:appURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:20.0];
[webView loadRequest:appReq];


After running both builds on the device it was obvious that the PhoneGap version was in fact sluggish compared to the bare-bones version. Verified!

So, thinking about what could be causing this, I looked into the PhoneGapDelegate code, and immediately saw the Accelerometer handling code the a potential culprit. The PhoneGapDelegate class asks the sharedAccelerometer for updates 40x per second. According to the Applei Phone dev docs, this interval is “Suitable for games and other applications that use the accelerometers for real-time user input.” Which is cool, but probably way more than this application needs considering it isn’t even being used. Every time that the sharedAccelerometer calls back with an update, the javascript is written into the webView’s DOM. Commenting out the accelerometer code that sets up the interval indeed fixes the majority of the sluggishness. Verified! Pretty smooth, eh?

Okay, so commenting it out isn’t really a solution, so here is the plan:
I am working to re-implement the Accelerometer portion as a command, that can be used more elegantly. Javascript code inside the www folder should have the ability to set how frequently it wants be updated, and have the ability to start + stop monitoring the accelerometer, which should also remove the overhead.

Note:
If your application does not use the accelerometer, instead of commenting out the code like I did, you can simply set “EnableAcceleration” to false in PhoneGap.plist.

I will post an update here when I have checked in anything of significance.

Lately I have been working on an iPhone app ( using PhoneGap of course ) and needed to implement image caching on the client with javascript.

I am already using an SQLite database in mobile safari, so I decided I could store images in Base64 in the DB. I was able to load the binary image data using XHR, but could not correctly encode it to base64 in javascript.

Exploring another path, I found that there is a method of the HTML5 Canvas toDataURL();

So I wrote this to download the image, instead of my XHR method :

Then this to handle the loaded image and cache it :

To keep things short I have excluded the DB sections, I always check if I have an image cached already before I fetch one, and always write it to the DB when I do fetch. If an image is retrieved from the DB it can simply be written to the img.src as is.


I foresee all kinds of uses for this, like a javascript based image editor, or a water-marking script ( you can also draw text on the canvas before you pull out it’s bits … )

The day started like any other day, sitting tired on SkyTrain on my way to work, when I happen to catch the headline on the newspaper of the commuter in front of me. Â ”Kutcher’s race to a million twitter followers.” Â With peaked intrest I pulled out my iPhone and read some more about it. Â

Ashton Kutcher had some 9 hundred something thousand followers on Twitter, and was close behind CNN in the number one position. Â Both were approaching 1 million so I guess it seemed to be the likely target. Â After watching Ashton’s YouTube video ( BTW: I love my iPhone 3G ) I was a little perturbed by Ashton’s claim that his reaching 1 million followers would somehow signal a new age because (heavy paraphrasing here) “… an everday person has a greater reach than the media conglomerate … “. Â My problem was with the claim that Ashton was somehow representive of ‘everone’, not that I have anything against him, but he has a great deal more celebrity than most will ever achieve, so he hasn’t lived in the ‘everyman’ world for quite awhile. Â My immediate reaction was simple: “Fuck him, I’ll do it first! I’ll beat ‘em both, because I AM everyman!”.

When I got to work, I ran the idea past a couple co-workers, and they were supportive, so I went to Twitter and created a new account http://twitter.com/Power2TheTweepl ( Ashton had used the term ‘Power to the people” in his YouTube video ). Next I proceeded to follow everyone I was really following in my other ‘real’ account, careful not to follow myself first and give away my real identity.

I then sent an email to the team @nitobi and told them what I had started, and giving them a call to action to get the word out. Â I got some great recommendations for profile images (#1, #2) from Brian, but in the end chose to go a different way. Â I immediately got some follows from the team, and some retweets of my initial messages, and I was off to the races.

I spent some time following people, strangers really, hoping they would follow me back … and alot did. Â I chose people to follow by going after twitter users who had large numbers of followers, jumping to their ‘followers’ page and haphazardly clicking follow ( I love Ajax! ) Â I didn’t spend a lot of time on this, as I also have a job to do, but did learn some stuff, which I’ll get to.

Ashton eclipsed CNN at about 7:00 PM and around 11:00 PM PST, Ashton reached a million followers. This isn’t a news report, so if you want the details of what happened, check it out here. Â I was able to get 130 followers, including @NitobiMouse.

Okay, the lessons.

Â

• if you follow a stranger they will usually follow you back, at least for a little while.
• if you follow someone who has no followers, you might scare them, and they might send you a message saying something like ‘Why are you following me?’ Â ( Oprah’s followers are heavy in this category )
• twitter is still new to A LOT of people.
• twitter is pretty amazing when you think about how vast the system is. (I only saw ~8 fail whales)
• does this matter? Who cares!
• I’m not as popular as Ashton Kutcher ( yet… )Â
• Ashton is donating Mosquito nets to Africa, so some good is coming from all this.

Â

While writing this I got 8 new follows, so I may still keep the account active, we’ll see. Â Also, I was not the only person to have this reaction, @TotalNobody had the same idea …

My final thought. Â Tomorrow, Oprah will be posting her first tweet live on her show, so Twitter is becoming less social and more of a platform everyday. Â Not sure if this is a good thing, a bad thing, or if it is even a thing.

Thoughts?

Jesse

Â

Â

Â

Hello, I’m Jesse and I am a Flex/Air/… developer at Nitobi.

In the past, I have not been much of a blogger, but we’ll see how that goes.

I’ll be filling in more details about myself as back-story later, so stay tuned.

Â