Jul 28 2011

Introducing Aardwolf

Category: JavaScript,Mobile,Mobile web,UtilitiesAleksander Kmetec @ 1:34 am

I happen to work in mobile advertising, and mobile advertising these days is all about JavaScript-rich HTML5. And running modern HTML on mobile devices means having to deal with mobile WebKit and its quirks on a daily basis.

As you probably know if you’re in a similar position, no mainstream device running mobile WebKit today supports JavaScript debugging. When debugging rich media ads containing large amounts of JavaScript code in mobile browsers, this becomes a bit of a pain in the neck.

But it’s even worse when it comes to in-app advertising as those ads run inside stripped down WebView components, not inside full featured browsers.

If you think debugging JavaScript in a mobile browser is painful, consider this: on iOS the UIWebView component does not have a console like mobile Safari does, so if your script suddenly dies because of a runtime error, you have absolutely no idea what caused it. On Android you still see error messages printed to the device console, but you can’t debug using alert() statements because alert dialogs aren’t supported by default in Android’s WebView and most companies don’t bother adding support for them.

Add to this the fact that inside a third party application you can’t easily clear the cache or even reload the WebView contents for that matter, and you quickly lose a couple of hours debugging what would otherwise have been a trivial problem.

A remote JavaScript debugger for mobile devices would really make thing easier. So I decided to write one!

No, I don’t mean a remote console! I mean a real debugger with breakpoints, code evaluation when paused at a breakpoint, ability to step forward one statement at a time, create watch expressions and see the call stack.

I decided to base the functionality of this debugger on the idea of code rewriting as I have previously successfully used this approach several years ago to write a PHP profiler in pure PHP. The program would read PHP files, insert profiling timers at every entry and exit point of every function, and spit out self-profiling versions of the original PHP files.

Originally, I intended to the debugger it as an Android app and break execution by making calls into native code through a JavaScript/Java bridge, but upon explaining this idea to Jaka Jančar, a colleague at work, he pointed out it would also be possible to break execution using a synchronous XmlHttpRequest, thus ditching the concept’s dependency on Android’s WebView. A couple of days later I worked out all the details during a 2-hour train ride, then promptly shelved the project for six months. Having figured out all the theoretical problems, I couldn’t be bothered with such minor details as actually writing an implementation.

Then, one damn cold weekend in July, I finally sat down and managed to write something that sort of works. The result is Aardwolf1, a remote JavaScript debugger for Android/iOS, written in pure JavaScript.

And here it is in all of its buggy, unfinished and unstyled glory!

  1. Just some name I picked off of Wikipedia’s insectivore page.

Jul 03 2009

The Future of Mobile Browsers

Category: Ideas,Mobile,Mobile web,Semantic WebAleksander Kmetec @ 4:39 pm

Not that long ago, while my coworkers were attending a conference in London, I was spending my time wandering around the city in full tourist mode, trying to find a shop I had read about on the Internet but that didn’t seem to actually exist in real life. Although I was pretty sure I was on the right street I couldn’t find it and nobody I asked about it had the slightest idea about where it could be located.

This problem should be easily solvable in our age of ubiquitous connectivity, right? All I had to do was take out my mobile phone, fire up the web browser, check the shop’s website for the address and locate it using Google maps. How hard could that be? Very hard, as it turned out.

The experience of trying to perform this task was so horribly bad that in the end I wound up walking to Apple store a couple of streets away and waiting in line for a display iMac so that I could find the information I needed, copy it to a piece of paper and finally walk back. Yes, that was in fact a better alternative to trying to accomplish anything using a mobile browser.

A year and a half has passed since, but things haven’t changed much for the better. Even though connection speeds have gotten better and hardware is now much faster, the gap between mobile devices and computers is still huge and browsing the web on a mobile device can still be rather frustrating experience. Unlike computers, which these days have large displays running at high resolutions and are coupled with mice which give users pixel-accurate cursor control, mobile devices still have tiny touch screens and pointer accuracy of around 400 square pixels… if you’re lucky enough to have pointy fingers.

And despite their differences we use both types of devices for accessing the same websites.

So you’d probably think that browsers running on mobile devices with their tiny screens, clumsy keyboards and imprecise pointer control would be the ones getting all the usability improvements and fancy automated features. But you’d be wrong. What’s curious to me is that despite the fact that mobile devices are the ones with highly obvious usability problems, desktop browsers – which are already much easier to use – are the ones getting all the improvements. Autopager, Adblock, Greasemonkey, Stylish, Readability/Tidyread, Bookmarklets, Web slices, Accelerators and many others are features mobile users can only wish for1.

What about usability features specific to mobile browsers? Apart form the “.com” button on iPhone’s virtual keyboard I really can’t think of any. As a matter of fact, I’m having a difficult time thinking of a single user-facing feature available in today’s mobile browsers that wasn’t already present in Netscape Navigator in the mid 90s2.

So what can we do to bring mobile browsers into the modern times?

1. The single most important feature need by mobile browsers is support for extensions.

When was the last time you tried out an interesting mobile browser extension? I’d say never. Since most mobile browsers have no support for extensions whatsoever, you couldn’t do it even if you wanted to.

Once it’s possible to easily extend the browser anyone can start experimenting and adding features, but without that the existing browser is a dead end. Developers who want to add even a tiniest feature need to re-implement the whole browser functionality around the page rendering component. And I know from personal experience that doing this and then sneaking code for additional functionality in through the back door is a truly awful way of adding features. Not only is it a lot of work for the developer, but it’s also rather inconvenient and unlikely for users to try out a new browser.

2. Mobile browsers need to become content aware.

Now that the miracle of copy&paste has finally arrived to the world of mobile phones, performing some tasks like moving an address from the browser into the maps application has become slightly easier. But is this really enough to keep us happy for the next few years? Even on desktop computers where performing such a task takes only a second, copying from the browser and pasting into another app is no longer considered good enough.

Internet Explorer 8 now supports accelerators (so does Firefox, via IE8 Activities add-on) which perform such tasks for you. They are not perfect, of course. One problem is that all accelerators are offered every time, even if they make no sense in the given context:

IE8 Accelerators

Suggested accelerators don't always make sense

This same problem will be bigger on mobile devices – once and if they gain support for accelerators. I predict that more accelerators will be needed due to the limited nature of the devices, but displaying them all won’t work very well on small screens. Which is where content awareness comes into play. If the browser knew what kind of content you just selected it could present you only with options which make sense at that moment. Even better – most of the time selecting the text could be skipped altogether since the browser would already know where something starts and ends and could attach accelerators to that piece of content in advance. It could even grab new accelerators online if it determines using them would make sense.

There are several ways content awareness could be implemented. Microformats and RDFa immediately spring to mind, but since they are about as common in the wild as pink flying giraffes, some other solutions would need to be found. Alternatives might include external content descriptions and extraction rules (possibly crowdsourced), downloadable sets of algorithms for detection, data extracted by services like YQL open data tables or NLP services… But more about that some other time.

What I believe is important is that this content recognition should be performed by a centralized framework and available to all extensions so they don’t need to do their own parsing. Some basic work in this direction has been done with the Operator toolbar and Firefox’s support for Microformats, but in my opinion such functionality is much more needed in mobile browsers.

3. Browsers need to start detecting and exposing available extensions

You’re visiting a page that contains several events which can be added to your calendar and a table which can be displayed as a chart. Someone has created an alternative stylesheet which removes the huge header and there is also a mobile widget which allows you to interact with he same service in a more mobile-friendly way. But you’re never going to know about them and use them if your browser doesn’t notify you about their existence and make it easy to install and use them.

4.  We need support for client-side content modification

Some might disagree, but I believe we do.

How many times have you had to zoom in just so you could click the link to the next page in a sequence of pages, or pan around to find where that huge header ends and content starts? You don’t need to put up with any of this if you’re browsing the web on a computer. All sorts of common annoyances can be solved by simple tweaks, and extensions for desktop browsers have been making it possible to do this for years. By augmenting, modifying and filtering content they not only make it easier to access content you’re interested in, but also make it possible to ignore irrelevant parts of pages.

These are just some ideas about what the future of mobile browsers could look like. You might not agree with me on whether content awareness and even content modification are going to be important factors in the future of mobile browsing, but there’s one thing which is difficult to disagree with: a lot of work still needs to be done in order to turn mobile browsing into a user-friendly experience.

  1. While iPhone’s browser does support bookmarklets, they’re still a royal pain to set up.
  2. I wanted to list pinch-to-zoom here but I realized it’s more of an OS feature than a browser feature.

Tags: , , , , , , ,

Feb 19 2009

Mosembro r5 now available for download

Category: Android,Mobile,Mobile web,Mosembro,UncategorizedAleksander Kmetec @ 8:59 pm

The first major Mosembro release after r2 is now available for download.

If you already have Mosembro installed, uninstall it first by running: adb uninstall com.lexandera.mosembro
The new version can then be installed by executing the following command: adb install mosembro-r2.apk

New features include:

  • It is now possible to install addidional actions which extend Mosembro’s functionality.
  • Addresses can be copied to clipboard.
  • Improved security and various bugfixes.

Screenshots of new features:

Mosmbro r5 screenshots

Mosembro r5: dialogs for installing and managing installed actions

Several simple actions can be installed from the bottom of the demo page which is loaded when Mosembro starts up. Go & try them out.

Jan 28 2009

Mosembro r2 now available for download

Category: Android,Mobile,Mobile web,MosembroAleksander Kmetec @ 3:45 am

The second release of Mosembro is now available for download.

If you already have Mosembro installed, uninstall it first by running: adb uninstall com.lexandera.mosembro
The new version can then be installed by executing the following command: adb install mosembro-r2.apk

Major changes from r1:

  • Multiple actions can now be attached to a single link.
  • Microformat parsing logic was separated from action logic. Each microformat is parsed only once now and parsed data is then passed to one or more actions registered to handle that microformat.
  • Two new “travel to…” actions were added for addresses. One uses London Journey Planner and the other one uses Bay Area Trip Planner
  • alert(), confirm() and prompt() JavaScript functions now work.

Here is an example screenshot of multiple actions on one link:

Multiple actions for one link

Multiple actions attached to one link

More screenshots and/or a video should be available in a couple of days.