Archive for the ‘mobile apps’ Category

Getting rid of 300ms click delay on iOS web views.

Posted on October 12th, 2012 in General Web Dev, mobile apps | No Comments »

While this technique shouldn’t be news to anybody that’s been doing mobile web development in some capacity, still I find myself periodically searching for an article (and this is the best one) again as a refresher when recreating a solution for whatever web application I am working on. One can use existing libraries that’s implemented this concept like Fastclick but I find using JavaScript frameworks like Backbone require something more custom:

Creating Fast Buttons for Mobile Web Applications

Setting up remote JavaScript debugging for mobile devices in minutes with Weinre

Posted on April 1st, 2011 in android, iOS, iPhone, mobile apps | No Comments »

Let’s face it. Mobile web development today sucks. You don’t get the fancy console and debugging tools you have in modern desktop browsers like Firebug or Webkit’s Inspector. At most, you can enable a simple debug tab that reports the number of JS errors and allows you to console.log one variable at a time—and if you’re using embedded web views you don’t even get that much. For anything else you pretty much have to revert to the old days of javascript popup alerts or tailing your server logs.

Enter Weinre. Weinre is a beta project written in Java that allows you to have a remote Webkit inspector-style debugging console on your desktop that can communicate with your mobile device. You can send alerts, do full console logging—even inspect the remote DOM tree. It’s in beta and occasionally a little buggy but totally useable.

To use it, run the java server on your local machine and add a single script tag to your project. You can also just download the Mac executable here. The full documentation is here – (its not very straightforward so post here if you have questions.)

At work, we use Charles to redirect production apps to our local dev server. My local server.properties file looks like this:

~/.weinre]$ cat server.properties 
boundHost -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1

Thanks goes to coworker Jim for being the first Guinea Pig to try it out.

Great way to check if you’re using hardware acceleration on your Safari mobile apps / webviews

Posted on March 16th, 2011 in iOS, mobile apps | No Comments »

The first thing you learn building HTML5/CSS3 web apps is that enabling hardware acceleration is must for smooth animations and transitions. Here’s a great tip by Thomas Fuchs that explains how you can see what parts of your web app are hardware accelerated: http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/