Archive for October, 2010


Wanna jump right into creating amazing scalable mobile applications?
Need a good and concise walk through on how to get started with phonegap?
Should I stop asking questions and get to the post already?!!

Yes * 3.

The first thing you should know about phonegap is that it isn’t only used to create “iPhone apps” or “Android apps”, it’s designed for mobile device development. PhoneGap was created for devices that use a modern web browser and if they’re not, they should be thrown in a pit of fire. WebKit is the most up to date web browser engine among its peers; it follows the latest standards by the W3C including HTML5 and CSS3.

By exposing the values of the native application programmer using JavaScript, calls to the native device allow for application development using only HTML, JavaScript, and CSS.  With this in mind, PhoneGap makes it possible to develop for mobile technologies that adopt the latest standards in web browsing. Currently, PhoneGap is capable of developing applications for iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry. Future plans for PhoneGap include support for Nintendo DS and Playstation Portable (and other forward thinking platforms that use web browsers). PhoneGap is free and open source software that is hosted on Github.

Software used to develop apps

The software used to create PhoneGap applications varies depending on which platform you are writing for. For instance when developing for BlackBerry, you need to be using a specific version of Windows with an Integrated Development Environment (IDE) called Eclipse. I was interested in developing for iPhone, so I used an application called Xcode that is freely available through Apple and is exclusively used on Macs. In addition to Xcode, Apple also offers a free piece of software called Dashcode. Dashcode can be used to develop iPhone web applications, which can then be imported into Xcode and complied as a PhoneGap application. An advantage of using Dashcode is that it includes a library of icons and scripts that are common to most iPhone apps.

XUI

XUI is an open source JavaScript library developed by the creators of PhoneGap. Taken from the source, the following is their description of XUI:

We hear your words. Why another JavaScript framework?! When development of PhoneGap was under way we noticed slow load times for modern JavaScript frameworks such as Prototype, MooTools, YUI, Ext and (yes) even jQuery. A big reason why these libraries are so big is because is mostly they contain a great deal of cross browser compatibility code. The mobile space has less browser implementations (so far) and different needs. Thus XUI.

XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

XUI is a lightweight framework (7.8KB minified) whose syntax is similar to the jQuery JavaScript framework.

jQuery Mobile
Oh no they didn’t!
Yes, it’s true. You can use jQuery mobile with phonegap. Check out my jQuery mobile review here!

Writing an app with PhoneGap

PhoneGap has a strict directory structure that when followed correctly, makes developing with it a breeze. When opening a PhoneGap project through your IDE (Xcode, Aptana, etc), PhoneGap has a directory titled www. The files for your project are stored in this directory. There is phonegap.js file (where the magic happens) included that is required for your app to run; it acts as the interface between the device and the web browser. In addition to that, it is also helpful to manually include the XUI or jQuery mobile library for optimal DOM manipulation.

Unlike most common web sites, efficient mobile web development only needs one page: index.htm. This saves multiple trips to the server (or local files) when making a web app (or native application). Each page (represented by a div or section tag) that is visited in your app is accessed through multiple div tags in the index file. This means that an entire mobile application can be built using only one HTML file.

Testing

Xcode provides an emulator that simulates the iPhone interface and interactions. This is extremely helpful when testing aesthetics and functionality. The IDE also offers the ability to test the app straight from the device you are developing for. When connected, there is an option to build the app to the device for testing. This is important when working with such functions as the Accelerometer (for X, Y, and Z axis) and vibrating functions.

In addition to the built in simulator, the developers also created their own testing environment called PhoneGap Simulator. This simulator is built with Adobe Air and is freely available for download. The advantage of using the Phonegap Simulator is that it has multiple skins to test your app on. For instance, if you are creating an application that you intend on distributing on multiple devices, using their simulator will help debug and catch any errors across devices. Phones currently supported for simulation include iPhone, Android G1, BlackBerry Storm/Bold, Palm Pre, Nokia N97, and Samsung Epix. To make things even more awesome, they’ve also included FireBug lite (FireBug is a extension for the Firefox web browser that helps web developers debug code on the fly).

Are you ready to create your very own multi-platform application using phonegap?!
Wanna find out even more about how it works? Check this out: http://bit.ly/3Fwc8L

Is this post over?!

Yes. Yes it is. Thank you.

A (not so) long time ago there was this little framework created called jQTouch. This for me was an amazing moment because, as the name implies, it was written on top of jQuery. I ❤ jQuery. A mobile framework that works with jQuery simply excited me beyond words.

At the time, I needed an excuse to build a mobile website so I wrote some crappy single page apps just to get my feet wet. It was pretty awesome. The only downside for me was that it was a bit sluggish. The animations were still very impressive. There are a bunch baked in animations that can satisfy your transition needs. There is also an option to create your very own transitions with very limited code.

After some time, I decided that I’d do a mobile version of my resume. Why not?! I could use this project as a great excuse to:

  1. Have a mobile version of my resume (I’m a dev, this could impress potential employees…)
  2. Learn the jQTouch framework and have fun doing it (since I’m doing it for myself)
  3. Find a new job..

It came out fantastic. It took only a few hours to put together and it did what I wanted it to do: look awesome and impress a potential employee. Then, I was introduced to phonegap: the secret weapon to bind these two magical entities.

I was lucky enough to attend an amazing training session with the uber geeks from phonegap. I learned that I can combine mega forces and use jQuery, jQTouch, and sprinkle the magic of phonegap and BAM!!! – create a fully functioning mobile website turned native mobile application. During this time, jQuery mobile was only a wish. I remember like it was yesterday…

Brain Leroux (from phonegap) said that he ran into John Resig and teased him about coming out with “jQuery mobile”, a mobile version of jQuery. He said at the time that Resig was “working on a solution”. No jQuery mobile yet? That’s fine, the guys at phonegap rolled their own API called XUI. It’s a JavaScript micro-framework that filled the gap when it comes to mobile JavaScript development. It has very similar syntax to jQuery and is very easy to use. But it’s not jQuery – which was fine, until now…

After weeks of anticipation, the jQuery team released jQuery mobile. The morning it was released (10/16/10), I literally spent the entire day going through every page in the documentation and re-building my original resume app. Again, it took only a few hours to put together. It has a very simple templating scheme that even a blind folded panda could pick up.

Like jQTouch, jQuery mobile carries the concept of having single page applications. This means that your entire site can (and should, under the correct circumstances) be written on one HTML page. This is also beneficial if you want to use phonegap to make it a native app; it’s small in file size and easy to maintain.

In jQuery mobile, each page is represented by a div tag with some special attributes. Here’s the template for a “page” in a jQuery mobile app:

<div data-role=”page” id=”” data-theme=””>
<div data-role=”header” data-theme=””>
<h1>Page title</h1></div>
<div data-role=”content”>
<h2>Title</h2>
<p>Test</p>
<ul data-role=”listview”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>
<div data-role=”footer” data-position=”fixed”></div>
</div>

Some elements have a special attribute called data-role. When this attribute is added to a specific DOM element, it turns it into a badass mobile element that can kick your ass. Some values for the data-role attribute  include:

  • header
  • page
  • content
  • footer
  • listview
  • list-divider
  • collapsible
  • fieldcontain
  • button

I’m sure there are more, so keep your eyes peeled. Each value can only be assigned to it’s intended usage. So for example you can’t use the “button” value on a ul; it’s reserved for an href tag.

Another cool aspect that got picked from jQueryUI is… theming! There are currently 5 available themes with more in the works. Each element that turns into a mobile feature can have theme set to it. The themes can be assigned using the data-theme attribute. There are currently five available themes, each one assigned letters: a, b, c, d, e. The built in themes can make for some pretty interesting visual contrasts.

Anyone can create a nice simple app using jQuery mobile. It runs super smooth too, especially with the updates made to jQuery 1.4.3. If you don’t have time to view the documentation at your desk, the API documentation is written with JQuery mobile, which means you can see it on your mobile device! Double awesome!

I urge you to check it out ASAP. It’s the first release, so you as a developer can contribute and stay way ahead of the curve by getting into it early.

http://jquerymobile.com/

Super geek Paul Irish posted an excellent video about his finding from the (not so) magical, jQuery source. If you have yet to indulge yourself in syntactical art, take a look at the source: bit.ly/jqsource, it’s not as scary as you think it is. Among the amazing things he goes over, I found the setInterval “loop” the coolest.

There are two JavaScript functions that are usually grouped together when doing anything with timing: setInterval and setTimeout. As their name suggests, setInterval executes a piece of code in intervals. setTimeout excecutes a piece of code after a certain amount of time. Each one is pretty awesome in it’s own right, however the way you use it can really bring out it’s true awesomeness. Thankfully, they use the same code format:

setTimeout(function(){alert("POW!")}, 1000);

setInterval(function(){alert("BANG!")}, 1000);

Each function takes two parameters (code, delay).
NOTE: The delay is in milliseconds, so  5 seconds = 5000.

Oftentimes, it’s necessary to execute a piece of code repeatedly. For example, lets say that in order for your application to start, you need to make sure that the application is connected to the Internet. You want to check more than once because the user may be having connection issues; their connection may not be immediately available when they start your app, but rather it may take about 5 seconds for a valid connection to establish.

You can use setInterval() to continuously check the connection every millisecond. Once a connection is established, your app can run. You could use setInterval(). Or, your can be a Badass Super Power Ninja and check this Zef knowledge Paul drops.

Let’s say that you want to use setInterval to perform some action at an interval (hence the name!). What if the function you want to execute takes longer than your interval? Take this awful example as an example:

setInterval(function(){
alert('yayQuery!');
}, 500);

For arguments sake, lets say that this alert will take over 3 seconds. This means that every half second your function will execute. But if your alert takes 3 seconds… the interval is set for every half second… what is an engine to do?? Crash, thats what (,,,will happen, eventually). Now what?

Use setTimeout recursively like so:

function beAwesome(){
alert("I am awesome");
}
(function doIt(){
beAwesome();
setTimeout(doIt, 500);
})();

Let’s break this down:

We first have  beAwesome(),a function that I want to continuously run in an interval. I then have a self invoking function (a function that immediately runs) that calls my beAwesome() function. After half a second, it calls itself (doIt()) to do it (execute) all over again.

The beauty about this technique is that no matter how long beAwesome() takes to execute, it won’t fudge up your process. Since it’s a linear execution, within the doIt() function, beAwesome() is called and executed. AFTER it’s done doing what it needs to do (which might take longer than half a second), it then calls it’s parent (doIt()) to rerun the code again.

Make sense? Of course it does!

For your brain:

Now in twitter form!

I’m a bit reluctant to admit, but I recently joined twitter. It wouldn’t be so bad, except for the fact I’ve shitted on it in the past. Why did I make the plunge?

Well, thank you for asking.

You see, I never intended on doing so until my job had asked me to peek into the twitter API and run some tests. I needed to create an account to do so. I didn’t think much of it; I was just gonna run my tests and delete my account. But then I figured “I found such an awesome screen name (javascr1pt), I can’t put it to waste!”. [Edit, I updated it to _qwertypants cause I felt like it.]So, my ass is now on twitter. I refuse to put anything too personal like when I dropped a deuce or how amazing I can make a sandwich (which, by the way, I can). What I will do is throw magical sprinkles of programming knowledge down your gullet for you to consume.

Follow my nonsense here: http://twitter.com/_qwertypants

John Lennon on Google

Thank you for sharing John Lennon with the world, Google.

I recently purchased (yes, I actually paid for it) a group of ebooks from extraordinary devs Amy Hoy and Thomas Fuchs (creator of script.aculo.us). These books come jam packed with JavaScript goodness. It’s written very well, even for those who hate reading. The authors make learning about JavaScript entertaining as well as informative.

This isn’t a book to learn JavaScript; it’s about JS performance and how you can get the most out of your code. Let’s face it, JavaScript is becoming more and more popular everyday. It’s everywhere. It’s on this site, it’s in your email client, it’s probably in your toaster. If you think you are a pretty decent JavaScript developer, you are probably wrong; there is always room for improvement (always).

Not only do you get four (yes, 1,2,3,4) action packed ebooks with priceless content, you also get the infamous DOM MONSTER! (muhahahahahha!!!). It’s a DOM inspector tool that you can add as a bookmarklet and call to any page. It works on all major browsers and provides extremely helpful hints on your mark up. Sure, I can post it here, but that’s just not cool. Get your own copy! It’s $39.99, don’t be a cheapo.

Finally, the best part about this awesome package is the goodies! What JS book would be complete without code examples? Your copy will come with a goodies folder that has everything you need to kick ass (figuratively).

I haven’t gone through all of the material yet, but from what I have so far, it’s pretty damn epic. There are jokes, code examples, and pretty pictures – what more can a lazy reader ask for?! They have seriously made learning fun again. I highly recommend you pick up a copy at javascriptrocks.com.

Do it, or a kitten will die. It’s true.