JMerge

JMerge JavaScript File Merger

Do you have a website with multiple JavaScript files? Each one of these files adds an HTTP request to your pages, effectively increasing the load time. JMerge is a simple web application that fetches and combines JavaScript files from a URL (using the PQLite PHP library) to reduce the number of HTTP requests. In essence, it does the work for you. All you do is type in a URL, pick the files you want to combine, and voila!

iPad hybrid application retrospective

Having just completed Sudoku Takeout for iPad I'm left impressed with how easy Apple has made it to write a 'hybrid' app. Hybrid iPhone/iTouch/iPad apps are just like other apps except they contain a browser view (UIWebView). UIWebView enables your app to embed a web page as one of its views and allows your Objective-C code to invoke JavaScript functions in that page.

Advantages:

• Reuse your JavaScript
• Very little Objective-C required
• Files (e.g. CSS, HTML, JavaScript, images, etc.) can be local so no network connection is required
• Safari is fast, supports HTML5, and has strong debugging tools

UIWebView limitations:

• UIWebView does not support onOrientationChanged events, your app must listen for these events and then forward them into JavaScript
• Doesn't play HTML5 Audio
• Debugging JavaScript can only be done in Safari, not in the Simulator or device
• localStorage.setItem throws intermittent QUOTA_EXCEEDED_ERR exceptions, calling removeItem before setItem seems to solve this
• There is no way to get double clicks from JavaScript and apps cannot override touchesBegan event for UIWebView in Obj-C. Some people put a transparent view over UIWebView to catch touches.

Strategies that worked:

• Generalized events - By using platform independent events (e.g. handleGuess vs. handleClick) the same logic used to handle a guess triggered by a keyboard on a web site can be reused for a guess triggered by a touch to a graphical picker on an iPad.
• Create a persistence API - hiding the persistence implementation behind an API allowed the game logic to be unaffected when switching between cookies, localStorage or an ajax based server persistence.
• CSS - put everything in CSS and use jQuery's add/removeClass to manipulate images and positions. Leverage off of selectors (e.g. [class~="portrait"]) in your CSS to handle orientation changes.

The 'hybrid' approach required some work arounds but in the end, created an exciting fully featured iPad app. Can you tell Sudoku Takeout is a hybrid?

Useful hybrid application links:

• 7 tips for using UIWebView
• Developing hybrid iPhone apps
• Calling Objective-C Methods From JavaScript
• Building iPhone Apps with HTML, CSS, and JavaScript

Google Visualization APIs

Google has put out some great API for creating charts, gauges and tables. BUT they can't be used offline! This seems so un-Google like, wish I understood the reasoning behind that decision.

Firebug Lite

Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari?

The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox".

Haven't tried this yet, but want to try it with IE.

Google Code Playground

Google Code Playground gives examples of not just their product offerings and API (e.g. Map, Calendar, Blogger, etc.) but also best practices used at Google (e.g. class structure, javascript/css loading, etc.). Lots of examples.

CSS Sprite Generator

CSS Sprite Generator is a great free service that will take your web site images and combine them into a combined image as well as generate the CSS offsets for each image.

LocalStorage

HTML 5 provides several options to persist data on the client. One of these options is LocalStorage, a simple way to save key value pairs. The API are

• getItem(key)
• setItem(key, value)
• removeItem(key)
• clearAll()

It couldn't be easier, it's like the browser provides a hash table and handles persisting it. Unfortunately, the keys and values are strings. It's very similar to cookies except the information is not passed with the HTTP request.

localStorage and sessionStorage are supported by Firefox 3.5, Safari 4.0, and IE8. localStorage databases are scoped to an HTML5 origin, basically the tuple (scheme, host, port). This means that the database is shared across all pages on the same domain, even concurrently by multiple browser tabs. However, a page connecting over http:// cannot see a database that was created during an https:// session.

Storage events are fired and can be listened to so additional windows and or tabs can update based on data changes.

Notes: Got error QUOTA_EXCEEDED_ERR 22 when running in Safari with Private Browsing on. Error codes.