You searched for: 'iphone'

Monday, June 7th, 2010

Snow Reports: One app written. Deployed to iPhone, Android, webOS

Category: iPhone, Mobile, WebOS

Steve Gill of Nitobi has posted about a PhoneGap application called SnowReports. The application is open source and forkable on GitHub and shows how you can take a mobile Web application and port it between iPhone, Android, and webOS (and PhoneGap itself can even go beyond to other platforms such as Nokia/Blackberry).

Steve also put together a screencast that shows porting from iPhone to webOS in 10 minutes (as well as sharing tips and tricks of PhoneGap along the way):

If I put my Palm hat on, you may have heard about our $1M dollar Hot Apps program. It closes out at the end of June, but we have seen good apps rising in the ranks quickly. One recent example is Dropboxify. You still have time to get an application in the running for a decent prize. If you have a PhoneGap app already, then the 10 minutes are surely worth while ;)

Posted by Dion Almaer at 7:10 am

2.5 rating from 4 votes

Tuesday, December 15th, 2009

PastryKit: An iPhone Webdev Library from … Apple

Category: iPhone, Library, Mobile

John Gruber has spotted a library for iPhone web apps, from none other than Apple. This mysterious library, called PastryKit, seems to have flown under the radar as a Google search reveals precious little on it. In similar vein to other efforts, Apple’s library provides support for native-feel websites – websites that run in Mobile Safari, but feel like native apps. (That’s the objective anyway; some look-and-feel emulators are “good enough”, while others get stuck in the uncanny valley).

To get hands-on with PastryKit:

  • Visit from your iPhone or iPod Touch. This is an official Apple site using PastryKit. If you’re feeling lazy/iPhone-challenged, watch Gruber’s screencasts.
  • Now with the same site in regular Safari (on your Mac/PC), open up the Develop Menu (if it’s not there, enable it in Preference|Advanced). Choose User Agent > Mobile Safari 3.0 (or probably any other version number). And now you can see it in your browser. From Develop Menu, Web Inspector will let you view the script.

The HTML includes PastryKit as follows:

  1. <!-- PastryKit -->
  2.     <link rel="stylesheet" href="dist/PastryKit-ug-compact.css">
  3.     <script type="text/javascript" src="dist/PastryKit-ug-compact.js" charset="utf-8"></script>

PastryKit Javascript and PastryKit CSS are available. Unfortunately, they’re a bit unclear due to compression, but Gruber nonetheless pored into the source:

PastryKit accomplishes all three of the aforementioned things — hiding the MobileSafari address bar, providing fixed-position toolbars, and providing scrolling with momentum — by disabling regular scrolling and setting up its own view hierarchy and implementing its own scrolling.

The whole question of native iPhone apps was a hot topic last month after PPK whipped up a storm on the question of web apps replacing iPhone apps. The really interesting thing here is Apple’s stance. They launched the iPhone with web intended to be the platform for 3rd party apps, then switched over to native apps and haven’t done much to facilitate native-style web apps since then. Is a change coming? As Gruber puts it:

The $64,000 question, though, is whether PastryKit is something Apple intends (or that a team within Apple hopes) to ship publicly. It seems like a lot of effort to build a framework this rich just for this iPhone User Guide, so I’m hopeful the answer is yes. Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?

As well as apperaring in the user guide website, Chris Messina noted PastryKit apparently appears in the iTunes LP files.

Posted by Michael Mahemoff at 8:31 pm

4.3 rating from 30 votes

Wednesday, August 5th, 2009

iPhone-like password field; quickshow character

Category: jQuery

We showed the cool Chroma Hash last week, and then we saw another cool jQuery plugin for passwords.

The iPhone-like passwords plugin takes an input and makes it feel like the iPhone in that you see what you type for a short period and it then gets hidden as a “?”.

There are some real limitations though, notably that you can’t add something to the middle of the password. If you try to copy and paste you will just get the “?”‘s too.

Posted by Dion Almaer at 6:26 am

2.3 rating from 45 votes

Wednesday, June 24th, 2009

iPhone 3GS runs faster than claims, if you go by SunSpider

Category: Mobile, Performance

Rana Sobhany of Medialets has posted on Sun Spider benchmarks of the iPhone 3GS as well as other devices which shows off the performance angle of 3GS:

The WebKit Open Source Project provides a JavaScript test Suite dubbed SunSpider. According to the description on the SunSpider home page, “this benchmark tests the core JavaScript language only, not the DOM or other browser APIs. It is designed to compare different versions of the same browser, and different browsers to each other.” We at Medialets have found it to be one of the best attempts to measure real world JavaScript performance in a balanced and statistically sound way.

Medialets ran the SunSpider test suite in the following environments:

  1. Safari 4.0.1 on a 2.0 GHz Intel Core 2 Duo White MacBook.
  2. The MacBook results were used as a baseline for relative comparisons.
  3. Mobile Safari on the iPhone 3G with iPhone OS v2.2.1
  4. Mobile Safari on the iPhone 3G with iPhone OS v3.0
  5. Mobile Safari on the iPhone 3GS with iPhone OS v3.0
  6. The “Browser” app on the T-Mobile G1 with Android OS v1.5 (Cupcake)
  7. The “Web” app on the Palm Pre with Web OS v1.0.2

Each device was fully restored and rebooted immediately before running the test suite. Every attempt was made to assure that no atypical background tasks were executing while the tests were running. The SunSpider tests automatically run five times sequentially and the mean average from all five tests are reported. Network speed and latency have no effect on the results of the test.

We all know to beware of benchmarks, but it does show off how powerful these devices are getting!

Posted by Dion Almaer at 3:03 pm

4.1 rating from 35 votes

Wednesday, March 18th, 2009

iPhone 3.0 now with SquirrelFish Extreme?

Category: iPhone, JavaScript, Mobile

James Churchman did a quick bit of detective work and pointed the iPhone 3.0 simulator on the WebKit detector that we blogged about in the past.

The new showed this:

Compared to the old version:

Posted by Dion Almaer at 10:12 am

3.7 rating from 15 votes

Friday, February 20th, 2009

Windows iPhone Simulator

Category: iPhone

There’s no way to emulate the iPhone on Windows, but Shaun Sullivan has the next best thing: taking a Windows build of WebKit and embedding it inside an iPhone-like Chrome. It’s not perfect, but it’s as close as Windows users are going to get for now–and is very handy for checking how your site will likely look (modulo font issues).

He’s only tested it on Vista, however.

Posted by Ben Galbraith at 9:00 am

3.6 rating from 78 votes

Thursday, February 19th, 2009

Google Maps on Palm Pre; Gmail on iPhone

Category: HTML, Mobile

Vic Gundotra, my former VP at Google, gave some great demonstrations of HTML 5 and the Mobile Web the Mobile World Congress in Barcelona.

He showed off the Palm Pre device running a Web application on their platform:

Video courtesy of

Gmail Demo on iPhone and HTC Magic

Then he showed Gmail Offline running on iPhone and HTC using HTML 5 Storage API

Video courtesy of

Once again we get to see HTML pushing hard in the mobile space.

Posted by Dion Almaer at 4:55 am
Comment here

3.3 rating from 11 votes

Friday, February 6th, 2009

CSS Animations in WebKit Nightly and iPhone

Category: CSS

Fire up WebKit nightly, or point your recently updated iPhone to check out this beautiful leaf animation all made possible with CSS Animation.

A simple bounce animation is shown to give you an idea of how it works:

  1. @-webkit-keyframes bounce {
  2.  from {
  3.    left: 0px;
  4.  }
  5.  to {
  6.    left: 200px;
  7.  }
  8. }

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).

Once we have defined an animation, we apply it using -webkit-animation-name and related properties.

  1. div {
  2.  -webkit-animation-name: bounce;
  3.  -webkit-animation-duration: 4s;
  4.  -webkit-animation-iteration-count: 10;
  5.  -webkit-animation-direction: alternate;
  6. }

Hopefully we will see it in other browsers too:

We’re documenting these enhancements on and are proposing the specifications to standards bodies. Note that since they are currently features specific to WebKit they are implemented with a -webkit- prefix, although the specifications do not use the prefix.

Although, I am sure the SMIL folk could be a little miffed?

This is natural fodder for Ajax frameworks that handle animation now, to be able to use under the hood when available.

What do you think?

Posted by Dion Almaer at 1:23 am

3.9 rating from 21 votes

Tuesday, February 3rd, 2009

HTML5 Features in latest iPhone; Application Cache and Database

Category: Database, HTML, iPhone, Mobile, Standards

Brad Neuberg told me about two cool additions to the iPhone that now use HTML5 features:

Safari JavaScript Database Programming

The HTML 5 specification provides a new mechanism for client-side data storage: JavaScript database support. HTML 5 is currently in development by the Web Hypertext Application Technology Working Group (WHATWG).

JavaScript database support is available in Safari 3.1 and later, and in iPhone OS 2.0 and later.

You should read this documentation if you are a web developer who wants to store data locally on a user’s computer in amounts beyond what can reasonably be stored in an HTTP cookie.

HTML5 Application Cache

Michael Nordman of Google asked “Is this stuff built into shipping Safari or iPhone browsers yet?”

David Kilzer replied “This feature shipped with iPhone OS 2.1. When you use “Add to Home Screen” from the “+” button on Safari for iPhone, a web application with a manifest defined (per the HTML5 spec) will be saved with any cached resources. Note that the manifest file *must* be served with the correct MIME type for this to work.

There is no shipping version of Safari for Mac OS X or Windows that supports this feature yet.”

Fantastic to see!

Posted by Dion Almaer at 12:31 am

3.9 rating from 25 votes

Monday, November 24th, 2008

Interactive iPhone Console using JSCocoa

Category: Debugging, iPhone, JavaScript

KUMAGAI Kentaro has created a JSCocoa based interactive console for the iPhone:

I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa through John Resig’s article and I abandoned my project and rewrited my codes on JSCocoa.

Now it works on the top of JSCocoa. It’s very helpful while inspecting the hierarchy of the view tree or size of the views etc.

Very cool stuff as you can run code on the fly and see it all change in the emulator. His article explains how you set it up, and gives you some fun examples.

Posted by Dion Almaer at 6:12 am
Comment here

3.2 rating from 9 votes

Friday, November 21st, 2008

iPhone for JavaScript Developers

Category: iPhone, Mobile

John has done a really good job at wrapping up information on the various options for JavaScript developers on the iPhone platform.

He discusses the various approaches:

  • JiggyApp: JiggyApp provides a full API for developing an application – apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable (jailbroken only :(
  • JSCocoa: JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone.
  • PhoneGap: PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer.
  • WebTouch: The other day “Dr Nic” wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.

I was chatting with someone on the PhoneGap team about their Android support. There is a play to be had to enable rich mobile applications all based on the Open Web stack that we know and love :)

Posted by Dion Almaer at 6:23 am

3.6 rating from 14 votes

Friday, November 14th, 2008

Using UIWebView (WebKit) in your iPhone App

Category: iPhone, Mobile

Dr Nic has shared his experiences using WebKit to implement part of your iPhone app (in his case SurfView):


  • - (void)webViewDidFinishLoad:(UIWebView *)webView is slow. “You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure.”
  • The JavaScript bridge does not appear to block the main thread. This is a good/bad thing. You can invoke JavaScript code within the WebKit via your native Objective-C code.
  • The JavaScript bridge is one directional. From Objective-C/UIKit you can invoke JavaScript upon the WebKit and henceforth do wonderful things
  • Multiple languages in one project. Whilst we mainly just wanted to take a static HTML file, and dynamically update various elements with application data (e.g. the surf and weather conditions in the example above), we needed to do that via JavaScript.

Why you may want to do it

WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.

It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.

WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.

For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.

A very nice read.

Posted by Dion Almaer at 8:21 am

3.9 rating from 17 votes

Thursday, October 9th, 2008

Exclusive iPhone in Action Chapter Downloads

Category: iPhone

Now that the NDA has been released, book publishers are finally able to get out their wares. Christopher Allen and Shannon Appelcline have written iPhone in Action, and have kindly given the Ajaxian community free downloads of a couple of the early access chapters:

I hope to see books that focus on what you can do with the Web APIs too of course ;)

This article is based on iPhone in Action, to be published January 2009. It is being reproduced here by permission from Manning Publications. Manning early access books and ebooks are sold exclusively through Manning. Visit the book’s page for more information.

Posted by Dion Almaer at 10:26 am
Comment here

2.6 rating from 9 votes

Friday, October 3rd, 2008

iPhone Web Apps running at full screen

Category: iPhone, Mobile

I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  2. <meta name="apple-mobile-web-app-capable" content="yes" />
  3. <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Posted by Dion Almaer at 4:03 pm

3.2 rating from 36 votes

Monday, September 29th, 2008

iPhone Safari 3D Navigation Menu

Category: iPhone, Mobile

Ben Putman has put together a nice iPhone Safari 3D navigation menu example that shows off the transforms and events available on the latest mobile Safari.

Ben told us:

In thinking of an interesting test, I’ve created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it’s not really practical in this form.

Open up the demo in your iPhone / Touch and also take a peak at the source to see what is going on, with snippets like this:

  1. .second_show {
  2.   -webkit-animation-name: 'second_show';
  3.   -webkit-animation-duration: 1s;
  4. }
  6. @-webkit-keyframes 'second_show' {
  7.   from {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  8.   to {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  10. }
  11. .second_hide {  -webkit-animation-name: 'second_hide';  -webkit-animation-duration: 1s; }
  12. @-webkit-keyframes 'second_hide' {
  13.   from {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  14.   to {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  15. }

Posted by Dion Almaer at 6:42 am

2.1 rating from 69 votes

Thursday, September 25th, 2008

Google Maps JavaScript API on the iPhone

Category: Mapping

When you link to Google Maps on the iPhone, it opens up the naive application to give you the full iPhone experience. Alastair James wanted to use the Google Maps JavaScript API on the iPhone, and wrote up his thoughts:

Before the newest version of mobile Safari, this would not have been possible. Fundamentally you cant drag the map! However, with the new version Apple introduced a javascript API for sensing single and double finger drag events.

So, I went about knocking up a very basic test version (try it on your iPhone). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action!

I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?

Posted by Dion Almaer at 8:48 am

1.9 rating from 82 votes