Developer interview 'Marco Valent'

Introduction

Hello my name is Marco Valent. I've been working in IT for over 15 years, mainly working for a software house doing technical design and development of web-applications and complex back-end systems. Since 2007 I've my own company Dedicado B.V. http://dedicado.nl. I am currently mainly working as a freelancer doing software design and development projects for the larger companies in The Netherlands.

Ages ago I started programming in BASIC on a C64, but quickly moved on to Assembly and C. After a C++ period I'm now totally focused on Java. My main interest is building web-applications from front to back, which includes of course HTML, CSS and Javascript, which came in handy for this widget competition :).

Why mobile widgets?

The great thing about widgets is that you can use existing technologies, you don't have to learn a new language or technique if you're into web-development. I also like the fact that it is a W3C standard so in a while a widget you write once should run on every mobile that supports it. Great about the Opera runtime is that it is also included in the Opera browser, so your widget should run just as fine on a desktop too.

Yes I will definitely write some more widgets, I got some more ideas up my sleeve, including several enhancements for SongDNA. I'm also planning on converting SongDNA to the native iPhone and Android platforms (mainly as an exercise, as long as they don't support the widget standard yet).

What inspired you to write the Widget?

My initial thought was to build a lyrics search engine. I was working on it for about a week when I saw that suddenly somebody uploaded a lyrics search widget! I thought “what shall I do now: drop the whole lyrics widget or make it stand out way more in some way? But in what way then?”. That got me thinking into enhancing it with much more interesting data one can find about a song. And born was SongDNA.

How have you developed the Widget?

After figuring out which APIs could be added for useful information (mainly via http://www.programmableweb.com, a great resource for online APIs) I had to figure out how to present the information in a userfriendly way. And of course important: how to keep the user up-to-date of any progress when making calls to remote webservices to get the necessary data.

After that it was mainly a lot of sweating and pixel-squeezing, looking at existing widgets for inspiration, scanning betavine and using the forum for questions.

Design of the user interface was quite challenging, especially since you have to work with quite a small screen. Beside that you also have to take into account that there's less memory available than on desktop, the internet connection speed is lower, and the CPU is also not the same as on your desktop.

For example I knew already I wanted a list of results, but not showing all data immediately for 2 reasons: this way the user doesn't have to scroll too much, and since the user is probably only going to click on 1 or 2 entries, the widget doesn't have to load all data during the search, purely just the artist and title of the matches.

For editing used the open source Komodo Edit http://www.activestate.com/komodo_edit/ on a HP laptop running Windows XP. Normally I use Eclipse but that's quite heavy to startup (relatively) for just an HTML + CSS + Javascript project. But next time I think I'll use Eclipse again, because there I know all the shortcuts and the Aptana plugin for Javascript is great.

JQuery http://jquery.com/ was my choice as Javascript framework. I had never used it before, but I thought it was a great moment to try it out. It really sped up my development, especially some of the visual effects like sliding, which just comes out of the box.

Since I already knew HTML, CSS, Javascript and AJAX it was a breeze to get started. Surely I won't call myself a CSS or Javascript guru but that shouldn't stop one from building widgets. The code is not perfect (it never is), but if the widget is engaging that's all that matters I think (and you can always refactor it later).

I did not have a team for the actual coding, it was just me. But for testing I hereby want to thank my girlfriend :) She has a touch phone so it was great to see what I might have missed testing it on my non-touch N95 8GB. Like the info boxes beside the artist and title fields. I first had them only 'hoverable', but that of course doesn't do much on a touch mobile. So I made them also clickable.

Have you any advice for other developers?

When you're just starting building widgets, be sure to check out the tutorials on betavine. Also download a whole bunch of widgets so you can see what's possible, and how it's done. For example I only found out via a widget's code that you can check whether the widget is running on a handheld or not!

Always test sooner than later on a real mobile device. The emulator is great for trying out different modes and quickly try something out. But the real hardware is always in some way a bit different. I suggest doing quick iterations, that way you quickly detect when you've added something that doesn't work or works badly on a real device.

Use a performance measurement tool if available. There's one available for the N95 for example. Thanks to Ernst who pointed me to the Energy Profiler in this thread.
I for example found out that parsing the XML coming back from YouTube (sometimes about 100K in size) with jQuery created a temporary memory usage peak of 20MB! After changing the code into using getElementByTagName() the peak reduced to about 3M!

What’s good and what needs improving?

The tutorials were very useful and the emulator essential allowing quick testing and different screensizes. All the necessary resources could be found on betavine and dev.opera.com, some only via the forums.

Suggested improvements:

• The documentation on some of the Javascript libraries http://dev.opera.com/libraries/.
• After installing the Opera Widget Manager and the (http://www.betavine.net/bvcms/applications/widgets/VodafoneAppsManagerDev1.0.sis)[Vodafone Widget Manager], I couldn't open a widget and then pick in which manager to open it. Thus I had to uninstall a Widget Manager if I wanted to use another one. That was quite annoying after I just installed 20 widgets on the Widget Manager I had to uninstall...
• It was (and still is) not easy to find the (http://www.betavine.net/bvcms/applications/widgets/VodafoneAppsManagerDev1.0.sis)[Vodafone Widget Manager]. Essential extensions to the current widget specification:
• Access to the device via an API is essential for making even more engaging widgets. Luckily BONDI http://bondi.omtp.org/ has been initiated to solve this.
• OAuth and Facebook-Connect support in widgets to allow users to login to websites/applications without again having to sign up to this new service.
• HTTPs support for secure login and transportation of data.
• Some way to protect your code. Luckily there's already some progress in this area: See this forum thread This becomes especially important when paid widgets become available, maybe as soon as September, as mentioned during the Dutch Vodafone Mobile Widget Camp http://www.mobilewidgetcamp.nl/.

Do you have a demo/video clip?

No video, but is in the planning.

What is your favourite app/Widget on Betavine and why?

Besides my own you mean? ;) I like F1 widget http://www.betavine.net/bvportal/application/Formula_1/index.html for its nice look & feel.

What feature would you like to see brought to the Betavine platform/community?

I like how the site looks right now, and it already has many handy features like allowing you to upload multiple versions of a widget and being able to see that in the history of the widget. Also the distinction between number of downloads and voting is essential.

The forum is also great and very useful. All the info one needs is available somewhere on the betavine.net and dev.opera.com/articles/widgets.

Suggested improvements:

• The information about the APIs, specifications etc is quite scattered around the site. You see that also from questions on the forum, people asking “where is this” and “where is the spec for that”. I also found some older specs, which made it all a bit confusing. A better organisation of this data would help tremendously.

How did you hear about the Vodafone-Betavine Widget competition?

I read about the competition in a couple of blogs, don't remember the names. What helped me join the competition is that around March I didn't have a project to work on.

I'm a freelancer so if I don't find work I don't have any income. Since the crisis was then already ongoing it was even harder to find something. So I decided to join the competition. Of course when joining you never know if you'll win, but since I wanted to fill my time in a useful way, and maybe earn some money too, this was a great opportunity. And how it turned out! So finally a good thing that came out of the crisis! :)