How to disable keyboard navigation in jQuery UI tabs

This is a quick tip to disable the keyboard navigation introduced in the latest jQuery UI releases (which at the time of this writing is not configurable), but before to show the snippet I have to say that while jQuery is an helpful and powerful JavaScript library, jQuery UI is really sucky and that the team behind it should take it more seriously… I mean, it’s just ridiculous compared to other js UI libraries and further more them don’t care about retro-compatibility (I had problems on every update in the past!).
Ok, this is how I removed the keyboard navigation (it’s really a dirty way but better than what I found online and it’s working!):

    activate: function(e, ui) {

In practice in the “activate” callback I remove the focus from the tab and thus the listeners related to the keyboard are not being executed later.

Debugging PhoneGap applications using Xcode console

When I started to play whit PhoneGap, my greatest issue was: “how can I debug my code?”, I use often tools such FireBug and JavaScript debugger included in Internet Explorer 8 (which is the first good thing IE has to offers!) but write and test my code on iPhone simulator is completely different. Fortunately PhoneGap offers a way to access to Xcode console and print messages by choosing among three different levels: log, warn and error. In order to print a message, we have to use the debug object, which has scope window (it is a global object), in this way:

debug.log("my log message");
// or
debug.warn("my warning message");
// or
debug.error("my error message");

To open Xcode console you have to choose “Run -> Console” from the toolbar (or CMD+SHIFT+R) and after a “Build and Run” (CMD+Enter), you will see your message appear in the console.
Testing applications while developing using PhoneGap and Xcode, is an intense activity, because errors are not automatically notified (like in FireBug or similar), so it’s really important to make use of try/catch/finally blocks and logging calls:

catch (e) 
    debug.error("Error using mycommand: " + e.message);
    // do something smart here :^)

Finally, in order to avoid problems related to Xcode cache, I suggest to always clean the cache by running “Build -> Clean” from the toolbar (or CMD+SHIFT+K) before doing a new build and eventually remove the application folder under “/Users/{your-name}/Library/Application Support/iPhone Simulator/User/Applications/{app-number}”.

How to solve CSS conflicts using jQTouch

In these days I’m developing my first iPhone application, using frameworks like PhoneGap and jQTouch. This aims to be a powerful app, not a mere widget, so I’m writing a lot of code and I’m using several libraries and components in order to create a really native-like application.
Unfortunately, due to a bad CSS approach, I faced an issue with the excellent SpinningWheel component which won’t never be displayed unless you open and modify jQTouch CSS. The fact is that, jQTouch takes the body and use it as main container to hold all application’s pages and components and by default it hides all nodes inside the body except the current displayed content (active page/section) and this is a problem, because SpinningWheel create the ui object into the body and it won’t be displayed.
Fortunately the solution is simple, we just need a wrapper, an html element which will holds all jQTouch stuff in place of body, so in my html I wrapped all inside this:

Then I changed all jQTouch CSS, to reflect this approach (you can see the wrapper as a sandbox):

div#jqtouch-wrapper > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
/* ...and so on*/

…and finally I changed jQuery selectors inside JavaScript code:

$body = $('#jqtouch-wrapper');
// ...and so on

It’s also possible to solve the conflict by changing SpinningWheel code in order to put the dom node inside active jQTouch pages, but the problem of potential incompatibilities will remains. A CSS declaration, except reset statements and other rare cases, should NEVER refers directly to a whole set of nodes (ie: ul { color: red; }), but to a node type contained by a wrapper/sandbox (ie: #foo ul {color: red; }), thus conflicts will be avoided.

Google Closure’s idiocies: Ajax can’t be synchronous :(

While I love Closure tools and the possibility to write a better organized and OOP based JavaScript, I’m facing some weakness and inexplicable choices in the library. The last discover is that is impossible to make synchronous ajax call using the provided classes, since I didn’t find nothing about synch/asynch options by reading API reference, I took a look to the source (xhrio.js), and I noticed this:, url, true);  // Always async!

that true should be a parametric value which developers can set to true or false. Why forcing it to true???
I’m really disappointed :(

“Not authorized” error due to Safari “private browsing” mode! :P

This is just a quick post to share my misadventure with Safari and the “private
browsing” mode. I’m working on a small JavaScript library which has the goal to abstract SQLite database api and allow users to create table, insert, update and delete
records easily… my code seems to work very well, but this morning during some
tests, I got the “not authorized” exception (error code n°1) on every
transaction. After hours of debugging I realized that my code was ok, but I forgot
to disable the “private browsing” mode in Safari!
So, bear in mind, if you want to play with database api and other client-related store capabilities (such cookies), remember to disable that option in Safari ;)