Monday, November 28, 2011

Obviel.js: Object, View, Element Javascript lib

I just saw the posts by Martijn Faassen related to Obviel, I was quite busy this past month that I did not notice them, and due to my mail filters I also didn't notice I was added into the obviel googlegroup. (Sorry Martijn >.<)

Anyway, a year ago until a few months back, I was working with Martijn for his client project. It was a pleasure working with him and I learnt quite a lot from him. In the project, we utilize a pattern to allow us to write dynamic site using javascript for the frontend, and JSON at the backend. The server controls what would be displayed in the frontend by returning JSON objects with a specific iface (short for interface). Obviel was then born out from it.

For example, a simple hello world app.


Where app.json is :

   iface: 'print',
   message: 'Hello world'

And the obviel view defined as :

    iface: 'print',
    render: function () {
        this.el.append('<div>' + this.obj.message + '</div>');

What Obviel will do is, it will load the JSON, and load the view of the iface of the JSON (in this case, 'print'), and render the view with the data provided by the JSON file (in this case, append the message into #main wrapped in div). Quite cool eh?

Theoretically, you can also use it with WebSocket Push, and have the server fully control what to display in the browser by pushing JSON object. I haven't actually give it a try, but will do when I find the chance, and not feeling lazy. If you want to try it, go ahead, and probably use this radiate socketIO server I wrote 2 months back. It might also be possible to have a view which output Obviel objects for Plone content type, and combine with Diazo, to create a full JS UI for Plone, but those are stuff to poke at when totally not busy.

For more reading, check out Martijn's posts in his blog here and read up the documentation at the Obviel site:

[HOWTO] Using Diazo as a standalone server.

Just a little quick note.

Diazo, the super cool theming system used by Plone, have 2 WSGI middlewares which will turn it into some sort of theming proxy for any existing sites. However, that feature and the steps to use it is not quite documented anywhere.

Then I saw dv.xdvserver in PyPi. Using the sample paster config file from there, here is a little guide on how to use it.


I have uploaded my buildout to github kagesenshi/diazoserver. To deploy, just follow these steps:

got clone git://
cd diazoserver
./bin/buildout -vv 

The steps above will pull and install diazo and its dependencies into the buildout.


Copy diazo.ini-sample as diazo.ini. Change the address to address of your app. Take note that the Paster proxy might not work if the backend site is compressed.

Edit the static/rules.xml file and static/index.html file as you wish. For full documentation on how to utilize them, visit the diazo documentation

Starting up the server

Just run this command to start the server:

./bin/paster server diazo.ini

Thats it, Happy hacking~!

Sunday, November 27, 2011

diazotheme.bootstrap : Twitter Bootstrap based Diazo theme for Plone4.1+

I was introduced to twitter's bootstrap css toolkit quite a while ago, and loving it.

Naturally, I want to use this in Plone, so I went ahead and build a Diazo theme and transformation rules which utilizes it. The end product can be seen in  Inigo's updated website, and also Fedora Malaysia's site.

I've uploaded the code into github repository at, so feel free to fork it and use in your projects.

Some notes:
  • To enable the dropdown menu navigation, you'll need to have webcouturier.dropdownmenu installed.
  • The theme support 3 belowcontent portlet columns
  • The theme support 6 footer portlet columns, where the 6th column, is a bit smaller
Some future plans (if I find free time to add them):
  • Use bootstrap's tab system for the edit bar
  • Use html5slideshow for the presentation mode
  • Nicer folder_contents view
  • Nicer edit view
Update: rename to diazotheme.bootstrap, because I just realized that plonetheme.bootstrap name is already used.

Friday, November 25, 2011

[hackpatch] Single workspace Alt+Tab / Alt+~ in Gnome3

The default alt+tab functionality in GNOME3 displays all apps and windows from all workspace. This probably is cool for non-power user who just use workspace to keep their current view uncluttered.

However for people like me who launch tens of windows and apps, and work with multiple project at once, and rely on the workspace to keep us in context with the project, the all workspace alt+tab is one heck of a confusing feature. This is especially true when I have multiple reference documents, and several browser windows opened, where some are meant for ProjectA, and some are meant for ProjectB. Any mistakes in alt+tab will cause me to get lost trying to go back to the right workspace, and the automatic reordering of alt+tab app icons based on last focus added the confusion even more, forcing me to stop for a while to find my bearing.

Anyway created a patch to make alt+tab showing only windows of current workspace.  Its quite rough, but good enough to keep my sanity.

WARNING: Things might break, use at your own risk, you have been warned.

--- /usr/share/gnome-shell/js/ui/altTab.js.old 2011-11-25 10:21:14.161993561 +0800
+++ /usr/share/gnome-shell/js/ui/altTab.js 2011-11-25 21:12:04.178685966 +0800
@@ -161,7 +161,7 @@
         // standard Alt+Tab order (MRU except for minimized windows),
         // and allApps is a list of apps that only appear on other
         // workspaces, sorted by user_time, which is good enough.
-        return [apps, allApps];
+        return [apps, []]; //allApps];
     show : function(backward, binding, mask) {
@@ -893,7 +893,14 @@
             let appIcon = new AppIcon(localApps[i]);
             // Cache the window list now; we don't handle dynamic changes here,
             // and we don't want to be continually retrieving it
-            appIcon.cachedWindows =;
+            let appWindows =;
+            let cachedWindows = [];
+            for (let w = 0; w < appWindows.length; w++) {
+                if (appWindows[w].get_workspace() == activeWorkspace){
+                   cachedWindows.push(appWindows[w]);
+                }
+            }
+            appIcon.cachedWindows = cachedWindows;
         for (let i = 0; i < otherApps.length; i++) {
@@ -1066,6 +1073,9 @@
         this._windows = windows;
         for (let i = 0; i < windows.length; i++) {
+            if (windows[i].get_workspace() != activeWorkspace) {
+              continue;
+            }
             if (!separatorAdded && windows[i].get_workspace() != activeWorkspace) {
               separatorAdded = true;


Probably its better to turn this into an extension, but the modification is too little to justify that at the moment.

Update : Dont display dropdown arrow if theres only 1 window of app in current workspace

Monday, November 21, 2011

CampusCamp : Building communities in educational institutions

So I created yet-another-barcamp-spinoff. :-)

What is CampusCamp

In general , CampusCamp is a BarCamp for educational institutions, targeting specifically the people inside the educational institution itself, such as undergraduates, postgraduates, staff, and lecturers. The goal is to get these people to start sharing whatever they know, love, or doing.

Whats the difference compared to normal BarCamps?

Not much. The only major difference is the target audience. CampusCamp target only members inside the educational institution itself. External audience are allowed to attend, however, only if the college allows it, and CampusCamp will limit the number of sessions available for talks given by external people. 

The reason of the limit is so that we could give way for more talks by the members of the educational institutions itself. It is also to make it easier for the students who are organizing CampusCamp to handle the audience.

Goals of CampusCamp

CampusCamp primary goal is to nurture the culture of sharing inside educational institutions. By encouraging sharing, we hope give birth to local special interest groups, increase communication and relation between students and staff with regard to knowledge, who knows, probably we'll raise the average quality level of graduates and the college too.

CampusCamp, Free/Open Source Software & Free Culture Movements

Considering CampusCamp idea comes from a FOSS person, its a deception to say that there are no FOSS agenda here. Through nurturing the culture of sharing inside colleges, we also hope that some the special interest groups which might got born through CampusCamp are related to FOSS in one way or another. We hope these people will be the new groups of contributors in the FOSS world and ecosystem, increasing the amount of contributors in this region.

First CampusCamp @ Universiti Teknologi PETRONAS

The very first CampusCamp was held last Saturday (19th Nov 2011) at Universiti Teknologi PETRONAS. It was a trial run for the team who are inside that college, so its was a small poorly promoted event. We managed to get 15 attendees  which consist of a group of students, a group of alumni, and interestingly, 1 technician, with 8 talks presented.

It was a good trial run and the team seems to kind of get the hang of it now. The next CampusCamp UTP is tentatively scheduled on February or March 2012.

Organizing your own CampusCamp

Anybody can organize a CampusCamp. Our logo, name an format are open for anybody to use as long as it follow the spirit of CampusCamp and BarCamp. If you are a student in any educational institutions, it would be great if you can organize one at your place. Visit the CampusCamp site at for more details and guide on how to organize your own.


Some compulsory links:

Wednesday, November 09, 2011

FUDCon Pune 2011

I arrived in Pune around 3AM Friday together with Harish Pilllay (harish), Eugene Teo (eugeneteo) and Heherson Pagcaliwagan (azneita) after a long 5 hours flight from Kuala Lumpur + 6 hours taxi from Mumbai - because the taxi driver were lost several times. Had a short sleep and the day started at around 7AM as we need to catch the bus to the FUDCon venue, which was at College Of Engineering Pune.

At COEP, it was great to be able to finally attach faces to those nicks and names which I've known for quite some time in IRC and mailing lists. We also manage to meet up with Jared Smith, the Fedora Project Leader, and it was great sharing ideas and chatting about Fedora with him.

The way FUDCon Pune was ran - especially the first and second day - reminds me a lot of FOSS.My - the general FOSS conference we once had for 2 times, which no longer around to give way for more specialized conferences. The format, the audience, gave me a lot of dejavu throughout the day, with one difference - FUDCon had more than 40 volunteers, while FOSS.My had very few. The volunteers self organized very well and they made the event ran very successfully.

On the first day I went to the opening keynote by Jared, hanged around in the lounge, helped out Heherson's Web of Trust session, and managed a lightning talk session at the end of the day. On the second day, I mostly in the auditorium listening to the talks scheduled there. One that caught my interest was the virt talks as I was wondering on the roadmap of LXC support. During the hackathon day, I was mainly fooling around with creating LXContainers using libvirtd, and writing scripts to simplify the creation process.

The day after FUDCon, after others have left to home, I hanged around in Red Hat Pune's office with Jared, Heherson, Joerg, Robert and the rest of the FUDCon India team. Jared, Heherson, Joerg and Robert left to Mumbai later in the afternoon to catch the flight, while I remained for a day more as my flight with AirAsia was on the next day, Tuesday, 21:55 hrs.

Left Pune  around 12:30 hrs Tuesday, and arrived in Mumbai around 17:00 hrs. After 4 hours waiting, boarded the flight and took off from India. Arrived in KLIA-LCCT around 5:30 hrs GMT+8, took breakfast at McDonalds,  and after switching several busses, arrived home around 10:30.

Some random notes from the event for those who want to run a FUDCon later.
  • Running FUDCon in normal conference format is ok , if the crowds are mainly non-contributors.
  • Mixing format is better - cater for both non-contributors and contributors
  • A lot of volunteers to help out with work is GoodThing(tm). Get enough numbers so that they can switch places and listen to talks too. Don't worry about not having enough work to distribute to volunteers, as less work means less stress, and easier to handle emergency cases.
  • +1 for opening food booths/counters for non-sponsored attendees to buy food
  • Vegetarian food +1, less worry on providing food to people with religious restrictions. 
  • Produce extra swags - cheaper to produce and we can distribute extras to ambassadors to bring back to their country.
  • While FUDPub in FUDCon Pune is really like its inside a pub (party with loud musics like the HiTB Post Conference Party), Jared mentioned that  FUDPubs can also be done in a form of hanging out in restaurants, bowling, etc - the key point is - a social event for contributors to hang around.
  • Use coupons to manage food for sponsored attendees, volunteers, and crews.
 I broke my N900 a few days before going to India, so no photos from me, but you can view photos uploaded by other FUDCon attendees in flickr tag #fudconin11

Plans for Malaysia for these next few months
  • Fedora Meetup + F16 Release Party during Mozilla AsiaCamp date. 
  • CampusCamp UTP
  • FADKL Jan/Feb2012
  • FUDCon Malaysia (subject to bid status :P) !
Lets see whether I can create a new team of ambassadors from above activities, especially from FADKL and CampusCamp.

FUDCon Pune was great and well executed, and was a really useful experience. Kudos to Rahul, Kushal and other FUDCon Pune team. You guys rocks!.
Locations of visitors to this page