As you probably know, Apple has an app download limit for users downloading over 3G. Up until recently, this limit was 10 MB. If your app's file size exceeds the limit, users attempting to download it over 3G receive an error and must try again later over wifi. Needless to say, this can lead to frustrated users and lost sales and if you can get your app under this limit, it's definitely worth the effort.

So, when we submitted our latest update of Pig Rush to Apple for review, we worked hard to get it under the (then) 10 MB 3G app download limit.

Eventually, we got the file size down to 8.9 MB, knocking a massive 66% off of the original file size. Awesome!

We then submitted our update to Apple for review. Amazingly, only 12.5 hours later it was approved and live on the App Store. Excellent!

Then we noticed the file size listed in the App Store… 16.5 MB.

How could this be? This was nearly double the size of what what we submitted!

We downloaded the compressed package from the app store, and compared it to the version we uploaded. Sure enough, the version on the App Store was larger: 17.4 MB vs. our 8.9 MB version.

We extracted both files to compare, but apart from some standard config files added everything was the same.

Upon further inspection, it turned out there was one big difference: the main executable was 13.7 MB in both versions. However, the App Store version of this file compressed to 12.4 MB while ours compressed to 4 MB.

That's a pretty significant difference. We decided to ask Apple about this, and here's the answer we got:

"When your application is delivered to Apple, it is encrypted for DRM purposes and re-compressed. When the encryption is added, the size of the compressed file will increase. The exact size of the increase will vary from app to app, however, the size increase can be large when the binary has a lot of contagious zeros in it. We are unable to guarantee the size of your file after the encryption has been added."

File size increasing after encryption is added makes sense - but an increase from 4 MB to 13.7 MB seems extremely high. I've also never heard of "contagious zeros" before, and it looks like I'm not the only one.

Luckily, the new 3G limit has been upped to 20 MB so we still fall under it, but I'd still be interested in hearing others' experiences in final app package size vs. what was uploaded. Also, if you have any suggestions on limiting the number of contagious zeros in your binaries, please let us know.

We've heard buzz about improvements to Apple's release process resulting in shorter review periods, but this is the first time we've experienced it directly.

Last night, we submitted a major update of our addictive game Pig Rush to Apple for review. At 7:17 PM we received the standard notice that it was Waiting for Review:

This morning, we received an email at 7:56 AM that the app was already approved and ready for sale:

In disbelief, we checked iTunes Connect and the App Store to confirm. Sure enough, Pig Rush 1.2 is out, a mere 12.5 hours from the time of submission. I can't think of any reason why it was approved so quickly, considering that recent minor updates to our other apps took over a week. That said, hopefully this will become the norm!

Pig Rush 1.2 is available on the iTunes App Store: iTunes App Store link ($0.99)

The top Bible reference guide on the iTunes App Store keeps getting better. Bible Promises version 1.6 has just been released, and is available as a free download to all existing Bible Promises users.

Since the original 1.0 launch, users have been asking us for more ways to share promises with their friends and family members, and we've been listening. For version 1.6, we've implemented a new Sharing page which easily allows users to send promises to their loved ones via email and SMS, through Facebook Connect, or to copy a verse to the clipboard to paste in a note or other application.

In addition to the Sharing features, we've added two more categories (Protection, and Stress and Anxiety) and over 40 new verses most requested by users including:

Matthew 7:12 (Suggested by Michael B.)
So in everything, do to others what you would have them do to you, for this sums up the Law and the Prophets.

Corinthians 13:4-8 (Suggested by Paula W.)
Love is patient and kind; love does not envy or boast; it is not arrogant or rude. It does not insist on its own way; it is not irritable or resentful; it does not rejoice at wrongdoing, but rejoices with the truth. Love bears all things, believes all things, hopes all things, endures all things. Love never ends. As for prophecies, they will pass away; as for tongues, they will cease; as for knowledge, it will pass away.

John 1:9 (Suggested by Alex J. and Piers F.)
If we confess our sins, he is faithful and just to forgive us our sins and to cleanse us from all unrighteousness.

Download Bible Promises now on the iTunes App Store.

We are proud to say that we got a awesome review on our iPhone game pigrush on Aol Video and YouTube by iPawdKid!

It's quite detailed and has instructions on how to play. If you haven't played PigRush here you can see how the game actually works and looks like.

Many thanks to the reviewer, and we promise to bring many exciting updates to PigRush in 2010! Did you know there is a secret way to play pigrush with a reigndeer christmas mode? You just shake your iphone when you are in the menu - screen until you hear the bells ring.... Try it out and see what happens!

1. Using your own SQLite database in Android applications Fluxa explained how to get SQLite working on Android.

2. Liven up your boring UITableView: part 1 Matt gave a basic introduction to styling Table Views for the iPhone platform

3. From bytes to beats, Digital to Analog Conversion using AS3-Arduino Fluxa built a digital to analog converter with Arduino

4. App Store update: what does it mean for your app? Steve analyzed the latest changes on the iTunes App Store

5. Updating your iPhone app for Christmas Steve explained how we updated our apps for Christmas

6. Google AppEngine vs Amazon EC2 Todd compared two cloud computing platforms

7. Design an iPhone app in 15 minutes… then build and publish it in a day! Matt explained how we made 'Save Me!' in a day

8. Highlight your site’s hot content with the Google Analytics API Matt's tutorial on creating a "what's hot" section on your site

9. Make your blog weather-interactive in 6 easy steps Anna explains how to skin Wordpress depending on current weather conditions

10. Building faster websites by reducing HTTP requests: three techniques Matt on how to build a speedy website

Over the weekend, Apple quietly made a major design update to the App Store. On the surface, these changes seem purely aesthetic.

Users will notice that app pages now focus on the visuals, and a cleaner white background makes everything easier to read. The content that's important to most users - images, ratings, and company links - are now much more prominent.

If you're a developer selling your app through the App Store however, these changes will have a significant impact on how you present and market your app.

So, what's changed and what should you consider doing about it?

Description

Gone is the long column on the right side of the store that enabled you to write a novel about how great your app was, and be certain everyone viewing your app page would see it. Instead, the description has been truncated to the first two or three lines of text with a "...More" link.

The good news is that you can still include the same content you could before; the bad news is that users that don't click that "...More" link will not see any of it except for your first few sentences. Now more than ever, it's vital to have a slogan, tagline, or quick description that both summarizes your app and attracts a user's attention in only a few words.

In other words, if your app description in the updated App Store now reads:

*** #43 in Games/Action in Croatia!!! ***
"lol this is teh best game" --gamemaniac94@aol.com
Once upon a time, in a far, far away land, there lived a…
…More

... you may want to consider a revision.

Website and Support links

Immediately following your truncated description, users will see links to your website and support page. Therefore, it's pretty safe to assume that you'll be getting a lot more direct traffic from the App Store than ever before. Now that you'll be getting a lot more hits, it may be a good time to update your website.

In the pre-update App Store, a detailed description could have ended up being a reasonable substitute for having a site or blog for your app; at least you'd be certain everyone would see it. Now, since many users may not see that description and will instead be looking to your website for more info, you should make it as polished and easy to navigate as possible.

Additionally, you may want to consider taking advantage of the dedicated "Support" link to provide users with access to help files, tips, FAQs, contact information, etc. about your app.

What's New

No longer at the bottom of the Description column, "What's new" is displayed immediately after the Description and website/support links. As with the Description section, you only have a few lines of text visible by default, so make them count. Depending on your app, it may be a good idea to display new features first followed by 'boring' things like bug fixes later.

Screenshots

The screenshots section has been revamped, and is now presented in the form of a horizontal slideshow instead of the one at a time view presented before. This may not seem to make much of a difference, but now users will see several of your images simultaneously, so you may want to rethink which images you're using and the order in which they are displayed.

Since the images are in the form of a slideshow, showing film reel or animation like progression with your screenshots may be an interesting way to present your app.

Customer Reviews

By default, only Customer Reviews for the "Current Version" of your app are displayed; users must click the "All versions" button to see all of the reviews users have left.

If you haven't updated your app in a while, this shouldn't affect you… yet. If you have or plan to however, expect the number of your displayed reviews to be very low or non-existent until users get a chance to use your updated version and write an app review for it.

On the one hand, this provides relevant reviews to App Store users. No longer will you see reviews from version 1.0 of your app complaining about the lack of a feature that was included months ago. On the other hand, it discourages frequent updates. When the penalty for releasing a minor update for your app is resetting your displayed review count, many developers may wait to release a much needed or requested update, or just update as infrequently as possible. Some developers may also take to spamming their userbase to resubmit reviews so that they are displayed on the front page.

More by...

In the left frame, users will now see links to the other applications you have available in the App Store. While for most this may be a great addition, you may also want to consider any unwanted cross-promotion that may occur as a result.

For example, customers of our "Bible Promises" application may not be interested in our game "Pig Rush". In the new layout you can't control what is displayed, so users could potentially see any of your other apps.

App icon

Your icon is now displayed prominently in the top-left hand corner as a beefy 180x180 image. It goes without saying that your app icon is important, but now even more so. Your app icon is often the first introduction many users will have to your app, it's what users will come to associate your app with, and for many it will be the deciding factor in whether they explore your app any further. That said, you may want to consider revising or polishing your app icon since it's now getting center stage.

Customers Also Bought

A new scroll box at the bottom displays icons and links to other apps that your users have also purchased. Due to the nature of the App Store, it can be difficult to compile any sort of metrics about your userbase, so this is an interesting addition. How accurate or relevant it is remains to be seen, but it can provide you with some valuable information about what customers of some of your apps are interested in.

Last week's update was the biggest design update that the App Store has seen since its launch last year. Overall, I think the changes implemented do make for a better user experience and, ultimately, this is what matters most. Unfortunately, for app developers, Apple isn't exactly transparent when it comes to things like this. In the future, it would be nice if they would provide a bit of warning or a heads up to the developer community before making such significant changes.

In preparation for a talk I was going to give at the last Shanghai Barcamp, I converted a Flash animation class by Grant Skinner to the HTML5 <canvas /> tag. Sadly, I didn't have time to finish the demo before the event so I've decided to post it here with a breakdown on the conversion process from Flash -> web standards.

To start off, take a peek at the Flash reference. The animation has a "target" DisplayObject (shown in red) that animates across the stage with x number of chasing DisplayObjects.

The AS3 Wander class acts as a decorator on a DisplayObject so it doesn't directly contain any drawing logic, only mathematical calculations. This allows the conversion from a Class based language to a prototype based language to be pretty straight forward. Here's a simple example of the conversion process.

The starting AS3 Class:

 
public class ExampleClass{
    private var _count:int;
    private var _autoUpdate:Boolean;
 
   function ExampleClass(count:int){
      _count = count;
   }
 
   public function set autoUpdate(value:Boolean):void{
      _autoUpdate = value;
      if(_autoUpdate){
          addListeners();
      }else{
         removeListeners();
      }
   }
   public function get autoUpdate():Boolean{
      return _autoUpdate;
   }
 
   public function start():void{
      //do something important
   }
 
   private function addListeners():void{
      //add event listeners here
   }
 
   private function removeListeners():void{
      //remove event listeners
   }
 
}
 

A simple conversion:

 
var ExampleClass = function(count){
//initial function pass is essentially the constructor
//note the argument is the same as in the AS3 Class
 
   //initialize private variables
  //remove all the AS3 types
   var _count = count,
   _autoUpdate = true;
 
   //private functions
   var addListeners = function(){
      //add event listeners here
   };
   var removeListeners = function(){
      //remove event listeners
   };
 
   this.setAutoUpdate = function(value){
      _autoUpdate = value;
      if(_autoUpdate){
          addListeners();
      }else{
         removeListeners();
      }
   };
   this.getAutoUpdate = function(){
      return _autoUpdate;
   }
   this.start = function(){
      //do something important
      //has access to all private/public variables/functions
   }
};
 

For the full conversion, see the library source file below.

After converting the class into javascript, I then had to come to grips with a couple of the core differences between Flash and the <canvas> element. Here's a quick list of the hurdles I had to get around:

1. Flash executes code on a frame-based system. Grant Skinner's Wander class used the "enterFrame" event dispatched at the lowest level in the Flash player to update the x, y, and rotation of the particular DisplayObject. To mimic the "enterFrame" event, I created a FrameCounter object that could queue functions to execute on a set interval (via setInterval).
2. The Wander Class is tightly coupled to the DisplayObject interface in Flash. It expected all DisplayObjects to have three properties: x, y, and rotation. Since there is no concept of a DisplayObject in the canvas API, I created a javascript object with the same interface as the Flash DisplayObject. It is the javascript DisplayObject that is also responsible for actual draw calls to the canvas.
3. In the canvas drawing API there is no concept of separate drawing layers for DisplayObjects. The javascript version of the DisplayObject class can't be used to handle clearing graphics since it could clear a section of the canvas with another DisplayObjects graphics on it. In the demo, I haven't actually solved this issue. I've delegated the clearing of graphics to the FrameCounter object, which is admittedly a hack. One potential solution is to use separate canvas elements for each DisplayObject but that seems like a unduly large amount of DOM manipulation for this type of animation, not to mention the potential for massive performance issues. Something I'll look into tackling in a latter experiment.

Okay, okay, enough talk...here's the demo.
Add the javascript library file.

Cheers,
Todd

PS - Hats off to GSkinner on the initial implementation in Flash.

The first step explains how to modify the default wordpress theme. If you don't have a wordpress blog, or use a different theme, skip to step 2!

1. Access your wordpress-blog theme

First we will make a copy of the default theme to create your own theme, so that your changes wont be overwritten with the next wordpress- update:

On your server where your blog is located go into the folder "wp-content" and copy the "default" theme and rename it into something sensible, like "weathertheme". In your blog's admin-area on the left menu under "Appearance" activate your new theme. Change the read-write permissions for the "weathertheme"-folder on your FTP-server as explained on the wordpress-codex to 777. Now you are able to edit your theme's CSS and PHP files, best done from the editor in the admin-area under "Appearance">"Editor".

We will be using the Yahoo weather api to retrieve the viewers weather condition. Unfortunately Yahoo's weather api only returns it's weather info if you give them a US- zip code or a yahoo-specific code for worldwide weather stations. We will use ongmap.com's service to get the user's closest weatherstation and then pass that to the yahoo api.

First, create a PHP-file and call it "weather.php".

2. Get the viewer's IP-address

Now add his piece of code grabs your viewer's IP-address:

if ($_SERVER['HTTP_X_FORWARD_FOR']) {
	$ip = $_SERVER['HTTP_X_FORWARD_FOR'];
} else {
	$ip = $_SERVER['REMOTE_ADDR'];
}

3. Get the viewer's current location (Latitude/Longitude) worldwide

With this API you can get any IP-address's location, local time and so on.

 
function getWeatherClass($ip){
 
	//get viewer's location:
	$url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
	$location_xml = get_response($url);
	$lat = get_match('/<Latitude>(.*)</isU',$location_xml);
        $long = get_match('/<Longitude>(.*)</isU',$location_xml);
 

With a function called get_response we will get the xml response containing the users location based on their IP-address:

function get_response($url){
 
	$request = $url;
        $postargs = 'u='.urlencode('c').'&p='.urlencode('GMXX6091');
    	$ch = curl_init($request);
 
        curl_setopt($ch, CURLOPT_VERBOSE, 1);
        curl_setopt($ch, CURLOPT_NOBODY, 0);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_USERAGENT, '');
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
        $response = curl_exec($ch);
        $responseInfo = curl_getinfo($ch);
        curl_close($ch);
        return $response;
}

With a little regex function we will extract the latitude and longitude from the location-xml:

 function get_match($regex,$content){
		preg_match($regex,$content,$matches);
		return $matches[1];
}

4. Retrieve the yahoo-weather-API URL of the viewer's closest weather-station

Having the location, we need to get the weather condition of the user's nearest weather-station. To do that we are using ongmap.com's api:

'http://ongmap.com/api/?v=1.0&data=weather&lat='.$lat.'&lng='.$long.'&num=1';

If we pass the latitude and longitude, it will return us a yahoo-weather-api URL containing a ID of a weatherstation. "num=1" means that we only want one weather-station to be returned, the closest one found.

Having the Yahoo- URL we can finally also add the code to get yahoo-API's xml with the weather-condition.Again we use regular expressions to extract the weather code, which stands for one of yahoo's 47 weather conditions.

To do all that, extend your getWeatherClass - function, so that it looks like this:

 
 
function getWeatherClass($ip){
 
	//get viewer's location:
	$url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
	$location_xml = get_response($url);
	$lat = get_match('/<Latitude>(.*)</isU',$location_xml);
        $long = get_match('/<Longitude>(.*)</isU',$location_xml);
 
	//get the url for the yahoo weather api
	$api_url = 'http://ongmap.com/api/?v=1.0&data=weather&lat='.$lat.'&lng='.$long.'&num=1';
        $response = get_response($api_url);
        $yahoo_url =  get_match('/<Link>(.*)</isU',$response);
        $yahoo_url = str_replace("&amp;","&",$yahoo_url);
 
	//get the local weather with yahoo's api
	$yahoo_response = get_response($yahoo_url);
	$weather_code = get_match('/  code="(.*)"/isU',$yahoo_response);
 
	return getWeatherCSS($weather_code);
 
}

To finish the script we need to save the return value of the function getWeatherClass in a variable called $weather_class and pass the user's $ip:

$weather_class = getWeatherClass($ip);

5. Process the weather code

Yahoo's weather api has 47 different weather conditions. Here, we only want to visually adjust the blog's theme to the current weather and not build a weather-station itself. Therefore I grouped similar weather-states into arrays.

function getWeatherCSS($code){
	$storm 			= array(0,1,2,3,4,17,35,37,38,39,40,45,47);
	$snow 			= array(13,14,15,16,18,25,41,42,46);
	$fog 			= array(19,20,21,22);
	$windy 			= array(23,24);
	$rain 			= array(5,6,7,8,9,10,11,12);
	$cloudy 		= array(26,28);
	$night 			= array(29,27,31,33);
	$partlycloudy 		= array(30,44);
	$clear 			= array(34,32,36);
 
 	if(in_array($code,$storm)){
		return "storm";
	} else if(in_array($code,$snow)){
		return "snow";
	}else if(in_array($code,$fog)){
		return "fog";
	}else if(in_array($code,$windy)){
		return "windy";
	}else if(in_array($code,$rain)){
		return "rain";
	}else if(in_array($code,$cloudy)){
		return "cloudy";
	}else if(in_array($code,$night)){
		return "night";
	}else if(in_array($code,$partlycloudy)){
		return "partlycloudy";
	}else if(in_array($code,$clear)){
		return "clear";
	}else{
		return "not found";
	}
 }

6. Put it all together: Integrate your php script into your blog and add the visual changes

In this tutorial I'll show you how to use this as a scripted dynamic CSS-class to change the blog's background and header - image. Of course you can use it change any other part of your blog's design in the same manner too.

First upload your "weather.php" script to your server and place it under "wp-content">"themes">"{your weather theme}" . Under that path you will also find the "images" folder. I have prepared sample images fitting to this tutorial. Download them here. Now upload them to you server to the "images" folder

Back in your blog's admin area under "Appeareance">"Editor" you will find it listed among the other Template files on the right. If you find it, you can now include it into the theme.

Look for the "header.php" also on the right and open it. Right at the top paste this line of code to include your php file :

<? include_once "weather.php" ?>;

To change the header-Image: Scroll all the way to the bottom and find the header - div. Change the div as shown below to add your css class:

 
<div class="header-<? echo $weather_class; ?>">
<!-- instead of:
<div id="header" role="banner">-->
</div>
 

The $weather_class will return a different string depending on what weather it is. The div will therefore look for a different style -tag in the style.css file each time.

To change the blog's background: add this body -class in the -tag of the header.php. It will overwrite the style.css just for the background value of the body class:

body{
 background: url("<? bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor_<? echo $weather_class; ?>.jpg");
 }

This will directly look into the image folder on your server for the correct background image, each time the weather changes.

Adjustments in the style.css for displaying the correct header-image:

	.header-rain {
		background: url(images/kubrickheader_rain.jpg) no-repeat bottom center;
	}
	.header-snow {
		background: url(images/kubrickheader_snow.jpg) no-repeat bottom center;
	}
	.header-clear {
		background: url(images/kubrickheader_clear.jpg) no-repeat bottom center;
	}
	.header-storm {
		background: url(images/kubrickheader_storm.jpg) no-repeat bottom center;
        }
	.header-cloudy {
		background: url(images/kubrickheader_cloudy.jpg) no-repeat bottom center;
	}
	.header-partlycloudy {
		background: url(images/kubrickheader_partlycloudy.jpg) no-repeat bottom center;
	}
	.header-fog {
		background: url(images/kubrickheader_foggy.jpg) no-repeat bottom center;
	}
       .header-night {
		background: url(images/kubrickheader_night.jpg) no-repeat bottom center;
	}
	.header-windy {
		background: url(images/kubrickheader_windy.jpg) no-repeat bottom center;
	}

You can find all the edited files (weather.php, header.php, style.css) for download here. and images for testing here.
To take things further: You can use the flickr-api to retrieve images fitting to yahoo's weather keywords and patch them up to make a background.

I am sure there are other weather API's out there that take lat/long directly, like the google api, but i found this way the most accessible and best documented. please let me know if you find any faster possibilities. This post was inspired by David's article for csstricks, which lets you post a static US-zipcode and see the weather of the region of that zip-code modify your blog's theme.

Take a look at all the weather conditions the yahoo API provides and sort them into your own groups:

Some may call it a cheap way to get back into the "New and notable" section of the App Store and bring fresh attention to your app, but the less cynical may see it as a fun way to add some new elements and features, along with some Christmas cheer.

At ReignDesign, we decided to update three of our apps for the season (Pig Rush, Bible Promises, Spot the Difference!), each in different ways. We thought the iPhone user and development community might be interested in what we did, what worked for us, and what didn't.

Pig Rush

App description

Pig Rush, is a simple and addictive platform game where you control a cute cartoon pig who jumps from platform to platform dodging obstacles.

How did we update it for Christmas?

We re-skinned the game as "Reindeer Rush", changing all of the main artwork, and by adding some falling snow. Additionally, we changed the background music to something with a more Christmas feel.

Since very few programming changes were made, other than the artwork, it took relatively little development and testing effort to come up with this release.

We decided to implement it via - ironically - an Easter egg. I won't go into how to unlock it here, but triggering the Easter egg unlocks a "Christmas mode", in this case "Reindeer Rush". We decided to go the Easter egg route for a number of reasons:

• Completely re-branding the game as a Christmas app would not only cause brand confusion, but guarantees we'll have to re-release another version in January.
• Creating it as a separate app may also cause brand confusion, and - since it's a 'new' app - take longer for Apple's reviewers to approve than an update to an existing app.
• Implementing it as an Easter egg means that the game will never be dated as a "Christmas app", but it will have the benefit of users being able to access the "Christams mode" any time of year, as long as we don't remove it from future updates.

Spot the Difference!

App description

Spot the Difference!, as the name suggests, is a game that shows you two images with subtle differences which you must identify and tap before the timer runs out.

How did we update it for Christmas?

With Spot the Difference!, we decided that it would be better to focus on implementing our most requested feature than to spend too much time on a seasonal update. With this type of game, we decided that seasonal content would seem outdated quickly. Instead, our plan is to implement an in-app purchase feature for level packs.

We did add a Christmas level, though. And while we had the code open, we also took the opportunity to fix a couple of bugs and throw in some other user requested features like a victory screen and time penalty for mistakes made.

Bible Promises

App description

Probably our top selling app, Bible Promises is a topical Bible reference guide that enables users to find verses from the Bible organized by various topics such as Peace, Encouragement, Grief, etc. Verses are displayed on top of background photos.

How did we update it for Christmas?

Unlike our other apps, updating Bible Promises was fairly straightforward. We added a new Christmas category, along with several Christmas themed verses from the Bible. Additionally, we had to hack the Christmas category a bit to only display photos that were relevant to Christmas. It seemed a bit out of place to display a background image of a summer field with a quote from the Christmas category, so we modified it so that only relevant images display when a user selects a verse from this category.

Obviously not every app is the same, and the methods we used may not work for your existing apps. However, adding some Christmas spirit to your app through an update doesn't have to be too difficult, and it can be a fun way to mark the holiday season and provide a little Christmas cheer to your users. One point that is very worth noting however: as of this writing, none of our updates have been approved yet, so remember (for now and for next year): submit your app for review as early as possible!