Ubuntu 12.10 on Nokia Booklet 3G

This release of Ubuntu works out of the box or at least should work. I just upgraded from my previous installation and it seems to work just fine.

If you used my previous instructions to install Ubuntu 12.04, you need remove few files before upgrading to 12.10. First one to delete is /etc/apt/preferences.d/quantal-kernel and second one is /etc/apt/sources.list.d/quantal.list. After this you can just run update manager to upgrade to 12.10.

By default gnome-shell and unity use software 3d rendering pipeline that is fairly slow. So you need to use some desktop environment that is more light weight and does not require 3d acceleration. For example: classic gnome without effects.


HTML5 App Development

Last few years there has been a huge hype around HTML5 and especially web apps, but what does it really mean to go for HTML5 and build your apps with it? Is it really something that changes everything or is it just a huge hype? This article tries to explain how HTML5 app development differs from traditional web development or native app development. This is not that much about particular technologies, but instead about fundamentals of the approach for building your apps mentioning some key technologies that you need to learn.

Traditional Web Software Development

Traditional web software development expects you to be always connected and your application or web site generates HTML for you with every requests. In many casess where this approach is used, data is simply wrapped into HTML at server side and that HTML is returned to client. Of course this is a bit harsh generalization, but often the workflow looks somewhat like this:

  1. Choose you server side language and framework, for example: PHP (+ Pear), Python + Twisted or Ruby on Rails.
  2. Write your server side code that hooks into your data storage, pulls data and wraps it with generated HTML.
  3. Optimize your code to provide as good as possible caching so that you could avoid code execution as much as possible so that your server will not get overloaded.

Key point to understand is that web sites often generate parts or all of the client code dynamically. This is not always true, but very often and this is a important point that needs to change.

Traditional Native Application Development

When building native apps you usually create either completely self-sufficient, standalone application or application that acts as a client and interacts with server just to get and store data. Other important thing in the nature of native app development is that you build your client side app as a static set of resources (often in the form of native binaries).

Matching this approach with HTML content is very much possible, just not too often used. You can write your HTML, Javascript, CSS and other resources as static content and use AJAX requests to populate your UI from returned data. This approach makes your web app development closely match with native app development.

Also big difference with native apps is that you need to somehow install your apps into your devices. When using web apps you just point your browser to right address and use that app.

New Generation of Web Apps

What we want is a properly separated code base for client and server, where client side app is a static resource (when looking from server's perspective). As an addition we want the easiness of web apps with point and use approach without the need for installation. With traditional web apps you can more or less reach this combination, but still there are some shortcomings.

When using traditional web apps, you are required you to run your client app inside a browser and this takes away the feeling of running it as an app. Of course this can be tackled with different approaches. For example Apple's Mobile Safari uses special meta-tag to declare web site being an app and GNOME's Epiphany allows user to "install" or mark web site as an web app. With both cases users are given a launcher in system menus or application selector for launching the web app in a chromeless mode where browser runs without any browser menus or other decorations. Still this is not enough, app cannot run in offline mode like native apps. So what more is needed to achieve this?

HTML5 introduces two important features: Application Cache and Local Storage. As you might guess from the names, Application Cache is for storing your app specific client side resources for offline use (HTML, Javascript, CSS and graphics). As for Local Storage allows you to store data for offline use. Also File API might be worth of mentioning here, it allows you to interact with file system outside your browser environment.

When it comes to local storage there are basically two different technologies that you need to look into: Web Storage and IndexedDB (sometimes you will run into Web SQL, but it is fading away). When you need very simple key-value storage, you can use Web Storage. If you need something more capable you should look into IndexedDB. Common to both of these is that these are NoSQL data storages and if you are not familiar with NoSQL databases, you should probably get some experience from those.

When it comes to synchronizing your data with multiple clients or between client and server, these databases will not give you much and you need to build synchronization mechanisms your self or use external component to do that. Sometimes your browser might help you a bit like when using Firefox Sync or Google Browser Sync that keep your data in sync between multiple devices. But it is good to remember that these will sync only your browser state and data with matching browsers in your other devices. If you wish to share data between different users or browsers, you need server side sync hooked into local storage to cache parts of the data locally.

Playing Together with Caching and Local Storage

Earlier I claimed that it is old fashioned to generate your HTML at server side and you should move towards design where your HTML, Javascript and CSS are just static content and server's role is more about serving data and of course serve these static resources.

One major reason for this is that, if your client side resources are changed according to request parameters, your caching will become really complicated or you might not be able to cache these at all. If you cannot cache your application properly, you cannot use these apps in offline mode. So remember that your client side resources should be static content and only data is dynamic.

When you build your client side resources as static content it takes quite a lot away from your server load since you do not need to execute that much server side logics to generate your app resources (mostly HTML), this will have really nice impact on your server performance and you might get away with more light weight infrastructure. Other thing to note is that when building your data API (for example providing RESTful API for getting data as JSON), you should timestamps on your data properly. When you do so, you can actually add these timestamps to HTTP headers and allow clients to discover, if data is changed since previous load and abort after getting headers if not and data is already cached. If you do not handle data modification timestamps properly, most of the browsers will use cached version of the data and your client will not see changes as you would expect. Especially mobile browsers and web runtimes are very aggressive when it comes to caching.

If you design your app correctly you can actually access it from your browser just by loading the file from local filesystem and it still works without any connection to the server. This will work only with very simple apps, but frameworks like PhoneGap/Cordova use this approach and allow you to bundle your web app like it is a native app and you can push this app to different app stores. Also PhoneGap/Cordova gives you some additional APIs that expose features that are expected to be part of HTML5, but not yet supported by different web runtimes.

Same Origin Policy

When building more complicated apps and trying to make your apps interact with other apps, one of the tricky parts that probably will cause you some grey hairs is same origin policy that browsers and other web runtimes follow. This policy mandates that you data and app needs to come from same origin (web address: same protocol, host and port). This topic is probably worth of its own article and I will not cover it that deeply, just enough to explain it in high level.

The main point is that when your app is served from one address and you would like to use data from another, your app cannot make request to this other address. Your browser just blocks these requests and tells you that you are trying to break same origin policy. For example if you load your app from local filesystem (just by pointing your browser to index.html in your file system), it cannot interact with your server, because origins are not matching.

Same limitations also applies to local storage, your app cannot see data that is stored from app having different origin. For example if you did store data locally when you previously load the app from the server. Then you try to load same app from different location (for example local file system), you cannot see the data that was stored earlier since origins do not match. When you have different origins, browser simply thinks these are two different apps and these will have different silos.

What you can and cannot do? You can load Javascript file from other origin, but you cannot make AJAX (XMLHttpRequest) to pull data from another origin. There are two main approaches to go around this limitation: CORS and JSONP. CORS (Cross-Origin Resource Sharing) allows server and client to negotiate what origins are additional allowed. If CORS is not possible approach, you can use JSONP, where you basically misuse the fact that Javascript resources can be load from any origin. With JSONP you just wrap your data into a Javascript function that returns your data. Then load that resource into a script-tag and call your function to get your data. Basically you can return any kind of data with this, but as name suggest usually you are expected to return JSON blob.


As I mentioned in the beginning, the main point of this article is to explain in high level what is different and what is not when it come to writing HTML5 apps. If you got my message right, you should think think that writing real HTML5 apps is more like writing native apps and less like traditional approach for writing web sites.

One thing I have to say is that moving towards HTML5 does not make you application development easier and you will be a fool if you think that development will be more simple since almost anyone can write HTML5 apps. The thing is quite opposite, writing good HTML5 apps requires much better separation of data and representation than web world is used to. On the other hand, programming with Javascript is requires you to think everything with asynchronicity in mind and also writing good Javascript code requires something that software developers and engineers are not famous for: discipline. Combined with the fact that there are no good tools, this is not a easy world. Though I have to say, it is surprisingly interesting one.

Web App Development Checklist

  • Do not generate HTML, Javascript or CSS at server side, unless you have some really good reasons.
  • Use your server logics only to serve static content and data. Preferably serve your data as JSON since it works together with Javascript so well.
  • In your data API, add HTTP headers to tell when data was changed last time so that caching mechanisms in browsers and web runtimes can recognise, if data is already in the cache. Be careful with this, there are lots of problems when it comes to caching and browsers seem to expect different headers or combination of headers.
  • If you store data in client's local storage for offline usage, remember to handle synchronization issues properly. Do not underestimate complexity of this part, this may be quite challenging world.
  • Follow the progress of HTML5 standard. It is not ready and it tends to change. Current release plan is to have stable specification in 2014.

Anything else? I probably left out lots of important parts, but let me know if you miss anything special or if I have said anything stupid. If not, I hope you will find this article useful.


Simplified Approach for Optimizing HTML5 Rendering Pipeline without Compromizes

Every now and then I keep having conversations about challenges of writing good rendering engines for HTML5 content. Quite recently I had a chat with my brother about their plans and goals at Nomovok related to this topic.

It seems that often goals for optimizing these rendering pipelines get divided in two: optimize for textual content or optimize app behaviour. Most often it is that goal is simply to make text scrolling as smooth as possible, but not always. These two optimization targets are very different in nature and it is quite challenging to optimize both at the same time.

Some years ago, when was playing with iPhone, I got an idea related to this problem. Apple has a special meta tags in HTML head to indicate that page is designed as an app and when seeing this meta tag, browser asks user if that app should be installed on launcher as a web app (meaning it will have own launcher and browser will be launched without chrome). This gave me an idea for reusing this same approach of changed behaviour guided by meta tags. What if we add a meta tag to indicate what kind of web content we have: textual or app? Then according to this we select between two separate rendering pipelines, one optimized for textual content and the other optimized for apps.

Allowing us to have separated pipelines for textual content and apps would allow us to optimize our rendering pipeline without compromises. As far as I know this should be doable in Webkit. When it comes to Mozilla and Gecko engine, I just don't know.

In the end spark for writing this post came after reading about Mozilla's plans for using different Javascript engines for different kind of Javascript tasks. It would be quite cool if you could do the same thing with rendering pipelines, but that might be a bit more challenging task. The comment about using IonMonkey for long lasting Javascript tasks and JägerMonkey for others, can be found from David Andersons blog post: https://blog.mozilla.org/javascript/2012/09/12/ionmonkey-in-firefox-18/

I hope someone tests this approach and it would be awesome if it also works. I know that at least Nomovok is working on this one so maybe we will see something coming from them.


Using Mac Mini over VNC from Ubuntu/GNOME

If you are impatient, jump to the end and read the summary how I got things working.

Quite recently I started to play with iOS sofware development. Only challenge is that I have quite limited desk space at home and I definitely cannot fit two machines with keyboards and displays on my desk on the other hand I'm not big fan of KVM switches for connecting display, keyboard and mouse combination to multiple machines. To solve this I decided to try running headless Mac Mini with VNC server that comes as a part of OSX at least in Lion.

Things got started quite well. I connected Mac to my TV and attached a usb keyboard into it. Then I just went to "System Preferences" -> "Sharing" and enabled "Screen Sharing" on and allowed access to my user. Wonderful, could it be this easy? Nope.

After connecting with my VNC client, I realized that my keyboard was behaving quite strange way. My Finnish keyboard was emitting random keyboard events at Mac side. After testing few different VNC clients I realized that is is not a problem in my VNC client. I end up using Remmina Remote Desktop Client. It didn't really fix my keyboard problem, but it integrates much better with GNOME than most of the clients and it has few useful features over Vinagre (the default Remote Desktop Client in GNOME).

After using quite some time searching from web and testing different combinations, I finally got things working in acceptable level and there seems to be three overlapping problems when it comes to keyboard and keyboard layouts. Fourth problem was annoyance related to display resolution.

First problem: Mac keyboard layout for Finnish keyboard

As so often, Apple needs to be different in annoying ways and this time Mac defining completely different keyboard layout, at least when it comes to Finnish keyboard. It would be really awesome, if Apple would at least start supporting non-apple keyboard layouts, those that the rest of the world uses. For example Finnish Mac keyboard layout lacks the button that is located between left shift and z (button giving you <, > and |). In the end this didn't became a real issue, because I had to use English layout at Mac side, see the third problem.

Second problem: Win key behaviour at Ubuntu/GNOME

How Win key behaviour is configured in Ubuntu/GNOME by default seems to screw quite a lot at Mac side. To solve this issue change layout settings in Ubuntu side: System Settings -> Keyboard Layout then select Layouts tab and select Options. In Options view open "Alt/Win key behaviour" and instead of "Default" select "Meta is mapped to Left Win". This will break bringing up gnome-shell launcher, but you can access it still with Alt + F1 or map it somewhere else. Not optimal, but at least quite usable. If you don't do this, you will have both Windows and Left Alt mapped to Command key press at Mac side and your Option key is not available, instead of Windows key mapped to Option and Left Alt to Command.

Third problem: strange key press translations

This problem is a bit more weird. When using Finnish keyboard mapping in Ubuntu side and also at Mac side the whole mapping is quite broken, but there are few articles telling to use English (US) at Ubuntu side and your actual mapping at Mac side (for me Finnish). This way I was able to get fairly good experience, but there seems to be one problem that made this unusable for me. When pressing 8 from my keyboard it seems to produce correctly number 8 at Mac and keyboard viewer shows key press correctly. When I want to type opening parenthesis and I press Shift + 8 (in Finnish keyboard it is mapped to Shift + 8), as my surprise I get asterisk and keyboard viewer shows the key press of numpad asterisk. I'm not sure where this translation happens, but it was causing me some headache especially since I was using Mac for writing code and parenthesis is fairly commonly used. To solve this I realized that English (UK) keyboard layout is nicely in between Finnish and US layouts so that Shift + 8 is supposed to produce asterisk and opening parenthesis you get with Shift + 9. Since I'm going to use Mac only for writing some code, I don't mind if I can't access Scandinavian characters and I can reach acceptable level by configuring English (US) layout at Ubuntu side and British layout at Mac side. I also kept Finnish layout available at Ubuntu side and I use Left Alt + Left Shift key binding to switch between Finnish and English (US) layouts.

Fourth problem: screen resolution

This one is a bit annoying one. I have 1920x1080 resolution with my laptop and I would like to have my VNC server to use the same one.

In the beginning when I configured everything by using Mac through my TV that has 1920x1080 resolution, everything worked as expected until I disconnected Mac Mini and moved it to different room and restarted it.

After booting up, the device had lost 1920x1080 resolution option and was showing only 1680x1050 resolution and there seems to be no other way to get your 1920x1080 resolution defined except reboot your device always by connecting it to display that supports such resolution.

So in other words, looks like there is no fix for this one :(


These are the steps and configurations that I found giving best programming experience with Finnish keyboard on Ubuntu machine connected with VNC to Mac Mini.
  1. At Ubuntu/GNOME side go to "System Settings -> Keyboard Layout" and select "Layouts"  tab. Then open "Options..." and expand "Alt/Win key behaviour" and select "Meta is mapped to Left Win" (This will kill your gnome-shell launcher view toggling, but use Alt + F1 for it or bind some other key combination to this functionality).
  2. At same keyboard layout settings, add "English (US)" to available layouts. (At Options..., I also set "Key(s) to change layouts" to Left Alt + Left Shift)
  3. Configure Mac side key mapping to use "British" layout
  4. When rebooting your Mac Mini you end up having quite limited choice of resolutions and especially 1920x1080 (that I want to use) is not available.
To find where in the odd location your keys are expected to be found at Mac side, use keyboard viewer in top bar keyboard applet. If it is not visible enable it from: System Preferences -> Language & Text -> Input Sources and enable "Keyboard & Character Viewer" then you should have applet in the top bar.

Also when working inside a mac side, I have to make my VNC client to go into capture mode so that key events go completely into VNC client. Otherwise key presses are causing some unexpected characters. Remmina toggles capture mode by default with right ctrl. I hope this helps someone with similar problems, enjoy (regardless the fact that you are forced to use OSX).


Ubuntu 12.04 in Nokia Booklet 3G

I finally decided to upgrade my Nokia Booklet to latest Ubuntu.

Basically 12.04 seems to work much better, but still 3D acceleration or lack of it causes some headache. There are instructions here and there about running Ubuntu with GMA500 graphics, but I think the easiest solution is to use kernel from 12.10 repos and with that one you don't need to have modifications in multiple places.

To keep up-to-date with kernel changes add two files:
1) /etc/apt/sources.list.d/quantal.list
------- 8< ------- 8< -------
# Ubuntu Quantal Quetzal Repositories
deb http://security.ubuntu.com/ubuntu quantal-security main universe restricted multiverse
deb-src http://security.ubuntu.com/ubuntu quantal-security main universe restricted multiverse
deb http://archive.ubuntu.com/ubuntu/ quantal-updates main universe restricted multiverse
deb-src http://archive.ubuntu.com/ubuntu/ quantal-updates main universe restricted multiverse
deb http://archive.ubuntu.com/ubuntu/ quantal main universe restricted multiverse
deb-src http://archive.ubuntu.com/ubuntu/ quantal main universe restricted multiverse
------- >8 ------- >8 -------

2) /etc/apt/preferences.d/quantal-kernel
------- 8< ------- 8< -------
Package: *
Pin: release n=quantal
Pin-Priority: -1

Package: linux-generic
Pin: release n=quantal
Pin-Priority: 1001

Package: linux-headers*

Pin: release n=quantal
Pin-Priority: 1001

Package: linux-image*
Pin: release n=quantal
Pin-Priority: 1001
------- >8 ------- >8 -------

To upgrade to your new kernel run:
# sudo apt-get update
# sudo apt-get dist-upgrade
So far this seems to provide best graphics experience so far with booklet.

Because I like to use Gnome instead of Unity, I tried to run gnome-shell, but it didn't work out of the box so I ended up using old gnome session. In the end this is what I was using earlier too. There are people using LLVM Pipe for 3D acceleration and you should be able to run gnome-shell with it, but I didn't have enough time to make it work. To get some more up-to-date components for gnome in Ubuntu 12.04 run:
# sudo apt-add-repository ppa:gnome3-team/gnome3
# sudo apt-get update
# sudo apt-get dist-upgrade
# sudo apt-get install gnome

While doing my experiments, I realized that nowadays you can hardcode wifi WPA settings into /etc/network/interfaces file and this helps a lot if you can boot to console only. Just add to /etc/network/interfaces:
------- 8< ------- 8< -------
iface wlan0 inet dhcp
    wpa-ssid ""
    wpa-psk "your passphrase"
------- >8 ------- >8 -------

Then after boot when you login, run command:
# sudo ifup wlan0

Remember to comment out these lines when you get the stuff working, so that network manger won't ignore your wireless interface.

Finally starting my blog

I reserved this blog name for some time ago, but for some reason I never got really started writing anything. Today I finally decided to do something about this.

Year ago I started a new page in my life when I resigned from Nomovok being the first employee and spending almost 10 years working for the company. As a surprise to many, I moved to London working for Nokia. Since I'm a greedy bastard (as my old lectured at TUT named me), I also have my own company in Finland that I use for random projects outside my day job and for projects that are out of the scope for my day job, thought the company is mostly just idling.
Two months ago I moved to new apartment in London and I finally got extra room to have actual study/guestroom which caused some challenges for my networking and distribution of different devices and computers. I also started to build some experience with iOS development and soon I'm also going get some experience with Android. Due the stuff I have been doing and experiencing, I realized I have learned bits and pieces others might find helpful and this was the actual reason for me finally starting to write this blog and share my experiences.

This blog will be about my opinions and experiences with technology and if you find this interesting, stay tuned.