Second blog in line of narrating my experiences and thoughts about Arfa Software Technology Park (ASTP), Lahore.

Along with dominating the Skyline of Lahore, ASTP have already started dominating ICT environment of Lahore in particular even if you want to believe it or not, everybody in the industry knows about it and everybody is talking about it!

How it brings in a cultural shift?

Arfa Software Technology Park, Lahore

It’s iconic! .. will be the most short and precise answer!

It represents a 180 degree shift, it’s like giving people hope and landmarking something which our government rarely think about. ICT has it’s root in academia, it is something which directly create knowledge based economy, it directly get benefited by higher education standards, it directly create value for the country by giving jobs to the people and automating several tasks which eats up billions of rupee every year with little outcome (road traffic signal automation, tracking of police vehicles, automatic number plate recognition of each vehicle entering in the city etc. Yes, these all benefits are still a distant dream and we are still pleading turkish government to help us in them without realising how we could do them all at home in few million rupee rather than giving away billions of rupee but that’s another debate!) and it brings in billions of dollars each year without exporting tangible goods, we actually export just knowledge!

The state of ICT based companies in Lahore

- There are about 20-25 large companies in Lahore which have 100+ employees and I am not talking about Mobilink, Wateen etc. Likes of such companies are Teradata, Nextbridge, TRG, Netsol, Game View Studios, Sensys, Intech, System International etc. these are just the few which I can count from top of my head! Most of these companies are located in posh residential area of Lahore city with Gulberg being the most populated and other’s are scattered around in DHA and Johar Town. Few are in commercial plazas such as Shaheen Complex and only a handful have their own buildings such as Netsol. Remaining which are in residential rented buildings, with 100+ employees you can’t fit them all in one building, so, a number of them have to rent multiple buildings with operations staff scattered!

- Then there are small companies which are mostly Elance and oDesk based and they are also located in small residential buildings around the city. Although small and out of international exposure, each of them have revenue in terms of thousands of US dollars every month! Most of this income is undocumented as almost all of them are non-registered and running thorough personal bank accounts of owners. Fair enough for them but they also need mentors and proper subsidized office space to gain exposure and growth!

- Local ICT industry also include large call centers which work for local companies as well for companies which are established abroad in UK and USA and call centres always have staff in multiple of hundreds.

In such situation ASTP being iconic automatically becomes a hub, it has 17 floors, 3 gone for shops, 14 remain – 5 of which are already gone to Punjab Government and remaining floors come to a grand total of 9! 3 floors were for incubator offices (8th, 9th and 10th) and office size range in these floors is from 211 sq. ft. to 900 sq. ft. Now the actual situation on the ground is:

• 4th and 5th floor gone to LDA (Lahore Development Authority) and Punjab Police for their IT related projects
• Reportedly 9th floor (which is originally for incubator offices) is taken by Chief Minister Punjab himself for his personal secretariat
• 11th floor is taken by PITB (Punjab Information Technology Board)
• 10th floor was originally designed for incubator offices as well according to original prospectus of ASTP (formerly LTP) but marketing staff don’t show it any more to small companies so odds are that it has been rented out as a whole floor to a large company
• 1 floor in a technology focused building is gone to Danish Technology University (this idea can only come in the mind of Mian Shehbaz Sharif – CM Punjab)

In this situation, out of 17 original and 14 office floors, 9 are available to local ICT industry for which this building has originally been constructed. Out of 3 floors for incubator offices, only 1 is in the market and PITB people are also thinking about it to rent as a whole floor to avoid rent collection fatigue (really?)

Potential of Cultural Shift

Still, this place has a lot of potential as a breeding ground of a lot of start-ups in the city as I can see a lot of buzz going around with-in, people networking with each other, events are already getting hosted in already functional auditorium!

The need of the hour is to promote a culture which shifts our industry’s focus from an outsourcing based to start-up based industry. Believe me with outsourcing we are going nowhere! A lot of companies here take projects from Internet or western agencies, do the hard-work and get some money at the end, while where we ship our hard work, our name hardly goes forward, we never get recognition of any kind! Secondly, yes developers get money for their work but they never socialise with each other, they never think about developing something new, to try their luck and bring in millions of dollars by selling their own products, the result is that most companies here are not focused on increasing their knowledge base (most developers and companies are happy working on WordPress and Joomla while world is making HTML5 based mobile apps), nor do they think about innovation!

With ASTP, we can create a whole eco-system for entrepreneurship! This building will serve as a networking hub automatically, investors and developers will come together and that will be the start of something bigger, the government just need to faciliate the change rather than doing things which it is not ment to do.

How other’s did it?

We all know Mountain View (famously known as Silicon Valley) as Mecca of ICT but what made it turn into a Mecca? US defense department! They first made a missile factory in the area, then HP was born and by late 50s they were making electronic components for defense factories in the area and they had more than 10,000 employees, that made everybody around that area an engineer! Then Standford University opened an innovation center spread over an area of 50 acres! that all happened in 40s, 50s and 60s and today we have a place known as Silicon Valley, the birth place of literally everything we know in the field of ICT. These factors were just catalysts, people automatically did the remaining job!

What our Government is doing?

Exactly what they are famous to do!

Instead of giving the projects to local companies, our government is pleading Turkish and other foreign companies to take billions of rupee and automate our systems. Do we really think that we can’t do those projects here? Take a chance, you will be surprised! Our ever energetic Chief Minister is offering 2 billion rupee to a turkish company to install automated traffic signal system in Lahore, did he have any idea what a change this money can bring to local industry if he let that money flow within Pakistan? But no, why we would give it locally, first if that would be awarded locally, the project will be scooped by some cousin of someone sitting in the government and that cousin would still be a student somewhere (exactly what happened in irrigation telemetery project, reportedly) and then a whole cycle of corruption will start and nothing will get delivered, that’s another debate but corruption is a controllable factor and only takes intention, right?

- Technology University in ASTP

As of what I will think about the scenario is that the CM must have seen the building first time and must have thought ‘uh, such a huge building, I should not let it remain empty and turn into a white elephant, let’s start a technology university on a floor here!’. A wonderful idea Sir but ‘a’ building is not the right place for it. Universities should be at open places with plenty of space for labs, playing grounds and class rooms. One floor of a technology building is not enough!

Secondly, it will destroy the working environment, students are mostly non-serious about facilities they would use while in business, facilities and time essentially translate into money! There will be a problem of security, students will use same elevators which would mean they can go on any floor and will put a strain on building facilities for which it is not designed.

There is a plus point that a university will encourage academia and industry collaboration but that is already happening, we recently went on a talent hunt to COMSATS (CIIT) which is 13 Km from Thokar Niaz Baig (literally 13 km out of the last corner of the city!) and we had no problem, we were there exactly out of the need and we were happy doing that! We knew we are going to meet students, idea of meeting students in our own elevator instead of someone who is working on a cool mobile app and need partner? – shrugs!

- CM himself on 9th floor?

What are you doing there Sir? We will be most happy with the thought that our CM has his own office in the building and he sometimes come and sit with us. We will be happy because we will have a chance to interact with CM, give our input into the existing and new technology projects and maybe if the presence of CM can become catalyst in joining hands with foreign governments! (Pay attention: I am talking about taking projects and doing them here rather than pleading other governments to do our projects!)

But what a CM would be doing on a whole floor? Sir, there are more than 500 small companies in this city, they all need to grow, they all need to become likes of Apple and Microsoft and they can! Instead of taking up their space, you should be providing them space! We don’t need your 200 useless secretariat employees sitting with us, instead we will be happy sitting with 200 innovators who can bring real change.

Continues CM presence will also bring in security challenges for the businesses inside the building, if CM should come, it should be granted a low-key event status and his presence should not hinder business activity.

Conclusion

I will conclude this blog by congratulating previous and current Punjab Government to construct a hub for the industry at a right place and with right facilities and I will hope that now on the operational side Punjab Government will also show the same spirit and will prove itself a catalyst in creating a knowledge eco-system to encourage entrepreneurship and bring value to the country rather than creating obstacles in the process!

Arfa Software Technology Park (formerly known as Lahore Technology Park) is one of the most iconic buildings in Lahore. You can’t help but noticing it when you first go towards Model Town or on Ferozpur Road towards Qasur after Kalma Chowk. Tall, Sleek, Hi-Tech look grabs your attention and you can’t stop yourself from asking ‘oh, what’s that?’. Well that was my response when I came to Pakistan last year in January after spending some good years abroad, I was completely unaware of this development but this came just forward when I was looking to establish a development office in Lahore.

Arfa Software Technology Park, Lahore

A little search on the web followed – found PITB site and it was written that construction will be complete by April 2010 after delaying for an year, well, that was already January 2011 and even probably due to delays PITB (Punjab Information Technology Board) staff was fed up to update their website (well, what else you do PITB?).

I immediately decided to have an office there and as from the look of building it seemed that outer structure is complete and they may take 6 months or so to finish any interiors work, we took a temporary office in a residential building (as is the norm in Pakistan for software houses) and started from there. I kept on calling PITB but they never had any clue when technology park will be complete, finally I found a reference in PITB and went to visit the site, on that day I got to know for the first time that it has been started, an advertisement was placed in national newspapers that weekend and building is ready to move-in, the marketing staff (they outsourced marketing to some company known as SFA) was eager to get bookings while they even didn’t had a clue when inauguration will be done and what are the per square foot rates or what will be the cost of electricity. That was November, 2011! I went there another 2 times and still the marketing office had no clue what was happening and that was because PITB being a government run organization (and because of the fact that their salaries are secured even if they work or not) was not clear about anything.

Why I liked Arfa Software Technology Park? 

Actual Image: Data Centre in Arfa Software Technology Park

- Purpose built floors: you want to have your own LAN – just pull out a tile, get your cable under the floor and ceil the tile again.
- Back-up electricity: Technology park building has 3 power sources, WAPDA and a backup generator and then a backup generator again. Building has double sourced connections for WAPDA supply as well, ensuring 80% less electricity outage!
- Fibre Optic cable until the office with in-house NOC for broadband suppliers!
- Plenty of parking space for both motor-cycles and cars, we are getting 1 car space for free with 345 square foot office space, motor-cycles are free anyway unconditional!
- In-house data center, so suppose we are going to demo something tomorrow and we need our own servers for that, you got a data-center just in your building!
- Auditorium and seminar rooms

What I don’t like about Arfa Software Technology Park?

-  There could have been small meeting rooms in the building, even if you have occupied a whole floor, it’s not necessary that would like to call every client or prospective employee inside the development office!
- A large hall to hold hackathon’s or such events!
- Food hall, well I know there are some ‘Food shops’ on 3rd level and marketing people are pushing out the likes of KFC, McDonalds etc. to open up franchises there but really if you can have a simple large canteen where anyone could go and have a simple lunch everyday – that would have been wonderful!

Top questions I asked every time and had to push for answers!

- What is the rate in per square foot on level 8 or 9? (A: Finally, it’s Rs. 110/sq ft.)
- What will be the electricity unit charge? (A: Standard WAPDA commercial unit)
- What will be backup electricity (generator) unit charge?  (No answer still)
- How I can get Internet connection in my office and what will the charge? (A: You can request any supplier, PTCL and Transworld are already in there and you can deal with them directly OR ASTP itself also provides Internet, details of which are unknown!)

And then we got to know an amazing thing, while doing the agreement, we came to know that we are only allowed to operate for 10 hours a day in the building and if we want to go beyond that, we will have to pay extra (which ranges from 26 paisa/sq ft to some figure far greater than that – but this rate has not been finalized yet!)
My Response: C’mon! are you kidding me? You have made a technology park, you are only allowing technology companies and call centers to step-in and you don’t even know how we work? Mostly it’s 24 hours! Software houses always have late sittings, a 8 or 10 hour day is a dream for most developers then call centers work round the clock, it’s support they give and even if they don’t work round-the-clock, most of them work for clients in UK or USA, they can’t take an office which is open from 0800 to 1700 PST! We were told about this conditon by marketing staff downstairs and I never believed my ears on what I am listening to so we requested them to have a word with PITB staff which are already enjoying 11th floor in ASTP. After speaking to one of their managers, we came to know building is running on BMS (Building Management System) and HVAC plant will be running for 24 hours anyway even if somebody uses it or not – and people will be paying for electricity getting used in their offices, guards will still be in place for their security duty – why this extra charge and ridiculous timings then? He, himself had no clue and told us that they are still thinking about that. That was a month ago and now when we were sent an agreement copy to create an agreement like that by ourselves and sign and send it back, this condition was still written that we agree to use building for 10 hours a day and will pay extra charge for over-usage. How wonderful!
This month (March, 2012) we applied for an office at 8th floor which is reserved for incubator offices and our application was approved, then we were asked to create an agreement document by ourselves and send them to PITB for approval, that’s been done and a cheque for initial payment is under process, when we will get possession – nobody knows still!

Insider Reports and Rumours:

- Incubator offices were scooped quite fast – even companies like Teradata are taking full floors, judging by the amount of IT companies in Lahore alone and their work staff strength – 14  office floors are still very less!
- Chief Minister has acquired whole of 9th floor – God knows for what and that’s in a technology building! What a CM secretariat will do there?
- And this is announced that CM is opening a Danish University in the building, well, can you open a university in ‘a’ building? Will that not damage working environment? I will write a separate blog about it.

I will leave this blog here, just take it for your information, ASTP is a very nice and well equipped building but people running it are obviously from Punjab Government so you know the likely state of it’s operations. Next, I will blog about a cultural shift which such a central hub of IT can bring to Lahore in specific and Pakistan in general.

Any comments or if you want to know anything from my experiences, just use the space below!

Assumption for this video tutorial is that viewer don’t know Sencha Touch and MoSync at all, that’s why it is a bit longer than 60 seconds :;)

Introducing MoSync – SDK for Cross Platform Mobile App Development
MoSync is a cross platform mobile application development SDK which allows you to write cross platform apps for as many as 6 different platforms including iOS, Android and Windows Phone 7. Developers can develop their native UI web apps using HTML5 or native UI apps using C++. You can find more information about MoSync on http://www.mosync.com

Introducing Sencha Touch – JavaScript Framework for Mobile Devices

Sencha Touch is a JavaScript framework to write HTML5 based web applications targeted for touch based devices. It is specially designed to support touch based devices. Sencha Touch is from the same people who are behind ExtJs and Sencha Touch 2.0 is largely based on ExtJs codebase. You can find more information about Sencha Touch on www.sencha.com

Let’s get to work!

First step is to download MoSync IDE from www.mosync.com. You can download MoSync Mobile SDK or MoSync Reload which is specially written for HTML5 apps. I have used MoSync 3.0 Mac OSX version for this video tutorial.

The second step would be to have latest release of Sencha Touch with you, at the moment Version 1.1.1 is latest while version 2 is in developer preview only. You will need to give your email address to download free commercial version which I have already downloaded and unzipped on to my machine.

Let’s create our twitter client app. Open MoSync -> go to New Project -> Choose MoSync Project -> Choose HTML5 Project -> Choose HTML5 WebUI Project and then click Finish.
As you can see we have a HTML5 project ready for us now, it’s based on a template, so even if we don’t do anything and run it straight away on the iOS simulator, it will work for us!

A tip for you here will be that beside that you don’t need to configure anything on MoSync to run HTML5 apps, it come bundled with iOS simulator but you still need to have XCode installed on your machine to get it working, XCode is already installed on my MacBook at it’s default location and we can start using it straight away.

Now, back to our twitter client app, when you download Sencha Touch 1.1.1 and unzip the folder, you get examples folder in it, just open the examples folder, find twitter folder in it, copy it’s contents, go back to MoSync, delete all files from Local Folder and then paste the twitter folder contents in it. Then copy sencha-touch-debug.js from sencha touch folder and copy it also in Local files folder in MoSync. Then open index.html and change the path for sencha-touch.js file accordingly.

Now start you simulator again targeting iPad (because twitter example is not supporting iPhone resolution) and hey! you have your twitter client ready to go!
That is that easy! (I know this is cheeky)

Next time I will come back with a tutorial to target the same app to work on Windows Phone 7 and Android platforms.

Till then see ya!

I wanted to keep this blog everything about programming but there are many other things which keep on surrounding me. From about six months ago I am frequently coming to Pakistan to establish off-shore development office of our technology company in Lahore. There are many things which I search on Google and famous search engine remain silent about them, from buying office furniture to best broad-band packages available to finding the difference that if buying electricity generators are a better bet or battery operated UPS. Actually I never get to find any of the required information and eventually found myself searching in local market where negotiation skills are a key and if shop vendors suspect that you came from abroad or is educated and would not like to fight for pennies then it’s their right to rip you off. For that core reason I found myself knowing all major computer vendors in Lahore’s Hafeez Center and giving away a whole day to find out best developer chair on McLeod road in the best possible rates.

I wanted to write a blog about all those little bits of precious information every time because I know there will be a whole lot like me who would be going through the same thing and Google remain silent about everything they ask, mostly my confusion was all around where I should write, Ciitronian being turned into a technology blog and starting another blog takes a lot of effort which someone lazy like me is not able to do in last six months, so, chances are there will not be one in another six months. I am starting right from here today as the trigger came when I wanted to post a letter back to England and there was no information available at all on Internet, except the Pakistan Post website which I guess is giving away obsolete rates and then I went on to find this out myself again in 42C heat of June. Maybe the below information save someone else doing the same:

There are 2 major types of companies who provide international postage service, one is Pakistan Post who carries ordinary post along with registered, speed post and parcel delivery, other are couriers their selves which are DHL, FedEx, UPS, TCS etc.

My Letter weight: 25g
Sending from Lahore, Pakistan to London, United Kingdom

Pakistan Post

Ordinary mail: Rs.65 (delivery time 7-10 days)
Registered ordinary mail: Rs.165 (delivery time 7-10 days)
International Speed Post : Rs.1765 (delivery time 4 days)

UPS

Courier: Rs.2560 (delivery time: I asked on Friday, they told me it will be delivered on Monday – 3 days)

TCS

Courier: Rs.2260 (delivery time 4 days)

Pakistan Post Office opening times: This is important as this was the key that whether you should go out at 2pm in the scorching sun to post your letter or you can wait until 7pm for the weather to cool down.

Pakistan Post Office, Gulberg II: 8:30am to 7:30pm

I expect that other periphery post offices such as in Model Town extension, Muslim Town etc. have the same opening timings as well.

GPO – General Post Office, Mall Road: 8:30am to 9:00pm



View Larger Map – Pakistan Post Office locations in Lahore

I ended up posting my letter from GPO with a registered ordinary mail in Rs.165, for the Speed Post they required a copy of Pakistani National ID card, I never had that so couldn’t, keep one in your wallet if you are planning to go for Speed Post or anything above ordinary mail, I never had a bad experience with Pakistan Post earlier so fingers crossed that it will go through in time, however, the guy at Gulberg-II post office told me that mail from Pakistan Post reaches UK in no time but takes longer to process as of strict controls that there might be some terrorism related correspondence going on (who do that in this technological age?)

Anyway, time to wrap-up, expect a lot more to come here, however, I will need your help, if you find any information here which is not correct or if you want to add anything or simply just because you came here from Google and this blog helped you, forget not to leave a comment.

All the best!

UPDATE (29th June 2011): The letter that I sent through registered ordinary post and is mentioned in this blog reached it’s destination today after 18 days.

Many of you would already know that Dojo is JavaScript framework of the choice for Zend Framework. However, Zend framework itself is very loosely coupled that you can use whatever JavaScript framework you are comfortable in. As part of my previous project we were already using YUI, so it was the best idea that while Zend Framework was our choice for our next project, we should stick to the JavaScript framework in which we already have developed our expertise i.e. YUI. As part of developing an Ajax based form, it takes a bit of time to take your head around but it works exactly as the JavaScript should work with PHP i.e. unobtrusive way. The deal is simple, the whole point of using a MVC architecture is that, you have different layers of presentation, controlling and business logic, that makes your code easier to maintain and develop upon, same should be the case of JavaScript you will be using in your application. Just a note that I am using Zend Framework 1.10 for this mini-tutorial.

Let’s get to work!

Say you have a form in your forms directory which extends Zend_Form class:

<?php
class Forms_Product_Values extends Zend_Form
{

	public function init()
	{

	// Set the method for the display form to POST
        $this->setMethod('post');

	$this->addElement('text','my_timestamp',array(
	'filters'=>array('StringTrim'),
	'required'=>true,
	'label'=>'Time Stamp'
	));

	$this->addElement('text','my_value',array(
	'filters'=>array('StringTrim'),
	'required'=>true,
	'label'=>'Currency Value'
	));

        // Add the submit button
        $this->addElement('button', 'values', array(
            'ignore'   => true,
            'label'    => 'Modify',
        ));

	}
}
?>

public function valuesAction(){
   	$form = new Forms_Product_Values();
   	$request = $this->getRequest();
   	// Check to see if this action has been POST'ed to.
        if ($this->getRequest()->isPost()) {
            // Now check to see if the form submitted exists, and
            // if the values passed in are valid for this form.
            if ($form->isValid($request->getPost())) {
            	//do whatever you want to do
            }
        }
   	$this->view->form = $form;
   	// disable layouts for this action:
        $this->_helper->layout->disableLayout();
}

<?=$this->form?>

<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/connection/connection-min.js&2.8.1/build/selector/selector-min.js"></script>

<script type="text/javascript">
function fnCallback(e) {
 sUrl = e.currentTarget.id; //controller name is the same as button name;
 var nodes = YAHOO.util.Selector.query('input');

//prepare the data in query string format
var data = "";
	for (var i = 0; i< nodes.length; i++) {
		data += nodes[i].name+"="+nodes[i].value;
		if(i != nodes.length-1){
			data += "&";
		}
	}
 var div = document.getElementById("responseDiv");

var handleSuccess = function(o) { //upon successful response we embed the response text into responseDiv on our HTML page
		   div.innerHTML = o.responseText;
		   YAHOO.util.Event.addListener("submitButton", "click", fnCallback);
	};
	var handleFailure = function(o){ //if the request if failed, we need to log the event

		if(o.responseText !== undefined){
			div.innerHTML = "Failed request to the server. Please try again.";
		}
	};

	var handleEvent = {
			start:function(eventType, args){
			}};

	var callback = { //on start call back calls the handle event which starts showing ajax loader image
			customevents:{
		      				onStart:handleEvent.start
						},
	  success:handleSuccess, //parameter to define which function to use on success
	  failure:handleFailure, //parameter to define which function to use on failure
	  timeout:1500 //timeout is 1500ms, can be extended from here
	};
	 var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, data); 

}
function init(){
	YAHOO.util.Event.addListener("values", "click", fnCallback);
}
YAHOO.util.Event.onDOMReady(init);

<div id="responseDiv">
<?=$this->form?>
</div>

See, no rocket science, however, couple of things to note, I am using a different approach here to remember controller name, I have assigned the same name to the button as the controller i.e. ‘values’, on click event the listener fires fnCallback function and then I read what is the id of the button, hence I know which controller is this and that is all I need as sUrl (the URL which I need to call, you may also need to concatinate “../../”+e.currentTarget.id),  another approach you can use is to echo the controller name in a hidden span or div in the view and then just read it from the JavaScript on click or if you can come up with any other approach, kindly post in comments of this tutorial for others to use.

Then is the YAHOO.util.Selector.query(‘input’), the beauty of YUI become handy here, as in this form I only have input elements I want to read, however, if you want to read say for example all the select and textarea elements, it is simple, just use this YAHOO.util.Selector.query(‘input’, ‘select’, ‘textarea’), now you know how to harvest your inputs from your form, you pull that on into the data variable and make the normal Ajax request through connection manager utility of YUI. The only bit remains here is, because your controller action is same, when you will send a request to it, your whole form will regenerate itself (which is intentional as in the controller I am actually making a database call and I want to show that whatever user has modified is actually in the database now) so you will loose the listener which you attached earlier to the button, you have to add it again on receiving the response, however, in this example, I have hard-coded it, you may want to send it dynamically with function call so that your function become totally dynamic and you could use same with all of your forms, I leave that upto you!

Happy Coding!

This is the 5th installment in YUI series. This installment uses YUI button widget and YUI keylistener utility. Although this post and example mimics the default SELECT element behaviour and look but you should also consider the JavaScript execution overhead this will cause.

Microsoft in all it’s glory continued to develop it’s own web standards, avoiding to support any open industry standards but then as technology progressed, word spread, people got knowledge and resources, open-source alternatives started to come into the market which now threatens the very existence of Microsoft itself. Yes, I am talking about the browsers at this moment, what Firefox and Google Chrome has done against a browser which comes pre-installed with an operating system which most of the people around the world use, yes the mighty IE (Internet Explorer).

As being a web-developer, you most probably would know the pain of working with IE. Although it has the developer tools now which makes the life a bit easier but what about it’s own implementation of DOM which is the only implementation and for this browser only,  a developer always feel forced to insert conditions in his/her code just so the code can work on IE as well. Anyway, this is something we all know about and can’t do anything until Microsoft thinks of something else. Let’s get to the business!

The problem with IE Select dropdown

IE Select dropdown width problem

If you are a web developer and you ever worked with a select dropdowns in your projects, you know this problem very well. IE by default don’t adjust it’s drop down panel according to the width of the longest text size. There are already work-arounds available and couple of them are based on YUI itself but they don’t mimick the exact look and feel of our old select dropdown list. I wanted the exact same look and  functionality of native SELECT element. I will list the work-arounds I founds:

• YUI select width fix through animation (the issue and solution is dicussed here. The associated domain where file was hosted has been expired, luckily I copied the code earlier, uploaded it again here.)
• YUI2 official example: Using a Menu Button to Replace A <select> Element

Why a new fix?

Good question! The first fix I told you here, involves animation, when you get your mouse on the select element, it will animate itself to with of longest text option element, doesn’t look good to me as I think normal web user do not expect that to happen!

The second fix, had two major problems:

• Scrollbars, my lists were very long as you will see in the example. By default YUI menu button’s scrollbars appear at the top and the bottom, if you increase the scroll rate for faster scroll, not very user friendly.
• It didn’t had the important feature of selecting the options through keypress, I mean if you press B in normal select dropdown list, it will take you to the first item which is starting with B.

The fix itself!

Ok Ok, I think I am talking too much and few of my fellows will be in a hurry to get the code, copy paste it and get it done! Well, alright, the example is here:

Example: Work-around for fixed-width SELECT element

Explanation – The CSS

In fact I have modified the official YUI2 example.
First we need the same look as traditional select menu dropdown has. However if you want to make it more pretty, the CSS is here, do whatever you like to do, maybe using default arrow image of YUI is a better idea.

So, for the CSS, just as we override the default CSS rules of YUI skin sam:

.yui-skin-sam .yui-menu-button button {
    background-image: url("http://ciitronian.com/examples/images/select_arrow.PNG");
    outline: none;
    	font-size: 0.8em;
    	width: 15.2em;
    	background-color: #F8F8F8;
    	cursor: default;
    	line-height: 1.3em;
    	min-height: 1.45em;
	}
	.yui-skin-sam .yuimenuitemlabel:visited  {
	color:#000000;
	}

	.yui-skin-sam .yuimenuitemlabel  {
	color:#000000;
	cursor:default;
	padding:0 20px 0 0;
	text-decoration:none;
	}

	.yui-skin-sam .yuimenuitemlabel:hover  {
	background-color: #111166;
	color: #ffffff;
}

and a bit of tweak to YUI’s official example em class of button to make it look like a classic one

        /*  Restrict the width of the label to 10em. */
        width: 10em;

Our YUI menu button has got the classic look of SELECT element. Now the bit which I refer to as a nasty tweak, YUI menu button comes with it’s own scrollbars and as I mentioned earlier, if  you have a very long dropdown list, like a list of all countries in the world, the scrollbars functionality is not very useful. YUI gives you the flexibility to disable the scrollbars but I actually needed a vertical scrollbar so, what I did, I made the YUI scrollbars hidden!

Here’s what I did:

/*hide the YUI scroll bars*/
.yui-skin-sam .yuimenu .topscrollbar,
.yui-skin-sam .yuimenu .bottomscrollbar {
    height: 0px;
}

What it’s doing? Simply overriding the overriding the CSS property of height and setting it to 0. It hides the top and bottom scrollbars altogether. Next we need to turn the overflow to auto for yui menu body:

.yui-skin-sam .yuimenu .yui-menu-body-scrolled {
    overflow: auto;
    padding-right: 10px; /*to prevent horizontal scroll*/
}

If you just set overflow to auto, there will be just about a couple of pixels which will get over-flowed horizontally as well, to make it right, the padding property is there.  The padding-right property in div.yuimenu .bd is also there because IE8 was not getting right even if after the above rule.

Explanation – The JavaScript Code

The other JS code is almost the same as you will find in the official example but as mentioned earlier there were only two problems, the scrollbar, which we have already fixed through CSS, now the sorting or whatever you call it that when you click for a character, the first of it’s appearance should get selected automatically. So, all we need is basically a YUI keylistener with a correct scope and then we need to have a functionality which gets all the menu items text in an array, traverse the first character of each text element and then if matched, scroll to it and select it with the correct focus.

The keylistener code:

var kl = new YAHOO.util.KeyListener("select-1-container", { keys:keyArr },
			   { fn:labelCharCode,
				 scope:oMenuButton1,
				 correctScope:true } );
kl.enable();

The keylistener code select-1-container as first argument to give it correct scope. Notice the loops before this code in the source code of example, 65-90 are the keyboard character codes for A-Z characters and 48 to 57 are 0-9 characters. Next, keylistener calls the labelCharCode function with the keypressed event type, and arg[0] has the character which got pressed.

Now, the YUI Menu has a useful method of getting all items in a menu, as you see in the source code, I have used it to get the menu items:

var MenuItems = oMenuButton1.getMenu().getItems();

Now, in the labelCharCode, we have got the character which user has pressed, we need to match it with the first character of menu item. We access the text property of all menu items in a loop, slice the first character, match it in a if else block, if matched, simple old window.location takes us to the id of that menu item and then we fire the focus event for that menu item.

for (var i = 0; i < MenuItems.length; i++) {
			var firstChar = MenuItems[i].cfg.getProperty('text').slice(0,1);
			if(firstChar === Character){
				window.location = "#"+MenuItems[i].id;
				MenuItems[i].focus().fire;
				break;
			}

That’s it your SELECT dropdown element is ready which will work in all browsers and will adjust itself with the width of longest item in the menu!

Things which are still nagging me

The above code works as you may see in the example (I only tested that in IE8, Firefox 3.6 and Chrome 5), however I personally don’t like the concept of matching in a loop and slicing. I tried using YUI DataSource for this purpose but what I have seen in the YUI source code is that, it takes LocalDataSource array as it is and then apply matching on it, probably DataSource is more useful for remote data. However, I left it there after I tried seeing the code of AutoComplete widget and DataSource together, maybe I need to give it a bit more investigation. However, I dislike the current approach of this example because of processing involved. If you have a better understanding and know a better way of doing this, kindly embed the example or simply let me know, that will make this fix better!

Happy Coding!

Just a bit of background, I was working on live data coming through from Java applets into Javascript, there were strings which I had to match, the conditions were like if (thisID === “blahblahblah”) and there were a lot of them, I had to match strings and then do my stuff, the strings were all different, I had to cut each string into sub-strings because there was a variable portion of every string which I didn’t wanted to match. The result you can imagine is that I was sitting there, counting each string character by character and then putting a condition on it. Got the idea of this tool then (obviously I am lazy when it comes to code), just input your string, get the length, put it as a parameter for the Javascript equivalent of PHP substr or maybe use slice() method of JS and move on! Here is tool:

When I actually searched for such a simple tool online to find a string length straight away (like I have seen a simple tool the other day to convert px values in em for CSS), couldn’t find any (maybe there are but I couldn’t find them). However, when you will search you will get lots of functions in every language (C, C++, Java, Javascript etc.) to do that but what if I only want string length and don’t want to write a line, execute it, know the length, erase it and then continue? Well, here is one, it helped me, it may help someone else too!

Happy Coding!

The biggest news in April 2010 that the air-space over UK and several other European countries was closed due to the fears that volcanic ash cloud from Eyjafjallajokull volcano in Iceland can damage the airplanes, I got this news one fine Monday morning while going towards tube escalators that due to volcanic ash the airports are closed and passengers are advised to contact their airlines before leaving home. I never thought what could be the consequences of it, apparently the airspace remained closed for several days, caused airline industry millions of dollar damage and misery to the passengers who were caught oversees with no funds in their wallets.

Eyjafjallajokull Volcanic Ash Cloud

Well that is nature, I being a big supporter of nature and most of the time in-peace with whatever nature do with us, it always has a reason. Several of my friends marked it as the end of earth as there were couple of earth quacks in the world around the eruption as well but sadly what they forgot was when millions of years ago when earth was in it’s early stages,  the seismic activity was far frequent and was at a much larger scale. In fact today we make movies about the Ice Age is coming due to global warming etc. while we had an Ice Age before when likes of were not even on earth!  The only difference now is, we see every bit of this live on our television screens and our airspace get closed because of this and then in our comfortable routine lives, we think, oh that’s bizarre, no for me it’s not!

Well this disruption which this ash cloud is causing and will continue to cause for several days, holiday industry will be the one who will suffer most  this summer. I know this because I planned to go out traveling on next bank holiday weekend which is from 29th May to 31st May. Due to this cloud, I looked at euro-star website, even before good 3 weeks the prices were already near £86 one way for Paris. I had been to Paris last summer, that’s a wonderful city but can’t give that much money to just to be there again. After considering several options, I am now booked with Ryan Air for Stockholm. The ticket was cheap but now I am not sure whether I will be able to fly or should I have a plan B ready in case of disruption.
As I am now tracking this ash cloud from several days (since I booked my ticket), I now know that it all depends on the winds, the big ocean currents which rule the weather of earth. This ash cloud will be there for several months but it will keep on swaying itself. As UK is nearest to Iceland, the most disruptions will be caused here but again depends on the direction of wind. Stockholm again is not very far away.
As the ash cloud today again caused some airports to shut down for couple of days in south-east England which has the most busiest airports in UK, the MET office UK which is also acting as the main outlet to hand-out ash cloud predictions have decided to list next 5-days predictions of cloud direction on their website instead of only 18 hours.
So here are the charts for next 5 day prediction of volcanic ash cloud on MET Office UK Website. If you are like me, going out soon, booked your ticket and now praying that this cloud do not come on your way, you need to keep an eye on the cloud, we have the science to predict but do not have the science to control it. It’s nature at work!

I would like to clarify it first that I am a very loyal customer of PIA (Pakistan International Airlines), the reasons of this I will explain later in this blog. First, I would like to talk about a tiny news appeared in the 2nd May, 2010 Jang Newspaper which reported that pilot of PIA flight PK-712 refused to take the plane back to Lahore from New York because of non-availability of the rest cabin for the crew. Here is the snapshot of that news:

Snapshot of news appeared in Jang May 2nd, 2010

According to the newspaper, the flight leaves New York at 5:30am and in alternate crew, there is always a pilot and first officer which rest for first 8 hours of flight and take charge of the plane for the next 8 hours. I have checked the flight duration on PIA’s website and it is almost 16 hours. The requirement of alternate cock-pit crew is compulsory due to international safety standards.

PALPA (Pakistan Airline Pilots’ Association) took this matter to the international authority about 5 days before this incident. Newspaper further told that the administration of Airline is thinking of operating the flight with a stop in Manchester on the way-back, so the cock-pit crew can be changed at Manchester Airport.

Later that day, I read on the Newspaper’s latest news that PIA has denied the fact that the pilot has refused to fly any flight and this flight will leave New York at its due time.

As a frequent air traveler and a avid fan of Discovery’s Air Crash Investigations, I got worried after reading this news. This was a very small news in the inside pages but I know exactly how this can be the cause of a very big news if a crash happened just due to this. National flag carrier has 9 Boeing-777 airplanes including Boeing-777LR and holds the record for longest commercial jet flight in aviation industry. The airplanes are made for long range flights specifically and were bought to cater for Toronto, Chicago and New York flights basically. However, while it gives you a great flexibility of operating at longer routes, it gives you a great responsibility of handling the flight safely without any break on the way.

The New York flight takes a break in Manchester on it’s way from Lahore to New York while on the return it come as a direct flight and takes about 16 hours. I am sure that while ordering an airline can ask for any modifications in the plane seating-wise and I am sure the original design would have a rest cabin included with the airplane as the airplane was intended for long-haul flights and I am sure again that PIA would have asked to remove the cabin to increase seating capacity.

PIA-777ER at runway

What makes me worried is a tired pilot who remain seated for first 8 hours of the flight and then he would be flying the plane back to the safety of airport for the next 8 hours. Everyone in airline industry know what a tired pilot flying an aircraft means, a flight in danger of a clash if anything goes wrong, obviously if the pilot is tired, his capability of handling potential hazards would be very low than a fresh pilot. We have seen many airliners crashing in bad weather, low visibility areas or in case of engine failures because either the pilot or first officer was tired and they missed the steps to handle the hazard.

Recently, another news in the same newspaper I read was about the maintenance of these multi-million dollar airplanes (Boeing-777) because the hanger for these airplanes were not made at the home of PIA (Pakistan International Airlines), the Karachi Airport. As of this reason, PIA is already not maintaining these airplanes properly and at times the flights are getting delayed due to security reasons in flying a faulty aircraft.

PIA has recently reported a surge in it’s operating profit which remained about Rs.5 billion in the past year. However, if you are not maintaining the safety standards and stretching your crew to get profit, that is a very risky bet, if in-case an aircraft got crashed due to these reasons, the airline would not only lose it’s multi-million dollar investment in the aircraft but also hundreds of lives along with a bad name for the airline.

I am a frequent flyer with PIA and always choose this airline whenever I go back  home. The reasons behind why I always choose this airline are not that it is a great airline to fly with or they are very hospitable (steward never reply the call, I always have to go to the kitchen myself to drink water), the PIA tickets are not cheap if compared to other airline’s fares and they are not that great in flying according to schedule (flights are often late). The reasons are, number one you get a direct flight from London to Lahore, you are in Pakistan in 8 hours, you do not need to change planes etc. If you take Emirates or Etihad or any other airline, obviously they stop at their home airports en-route. Second reason is much emotional, when you are traveling with PIA, the time when you get to your departure gate, you feel yourself as you are in Pakistan because the passengers and crew will be of your country and that makes you more happy, while coming back until you don’t leave the exit gate of heathrow airport, you again feel yourself at home, within your own people. Other than this, in-flight meals are just OK, the floors are dirty and because mostly it’s Boeing-777 which operates at heathrow route as well, the LCD screens for entertainment on the back of seats are starting to pose problems as well. It never happened with me yet but the passengers sitting beside me, normally their in-flight entertainment system will not work and they will keep on complaining and stewards will keep on saying that I am looking at the problem and nothing will happen. Obviously the airline is not taking care of it’s assets and it’s name.

PIA is our national flag carrier and despite of the fact that I am concerned with the safety of it’s airplanes and other factors, I will keep on flying with this airline as for the reasons I stated above. However, the airline itself need to give itself some fact-check and see what can happen if they keep on ignoring it’s crew and the maintenance of it’s aircraft.

I recently came back from Pakistan and as most Pakistanis I was concerned with frequent power blackouts there. These power blackouts are known as load shedding in Pakistan as WAPDA (Water and Power Development Authority) and it’s controlling authority PEPCO (Pakistan Electric Power Company) try to manage the load across the power grids so none of them get blown off. The result of short fall of more than 5000MW daily is that public is sitting idle without electricity for more than 12 hours daily.

As a professional in web services I want to know every thing from the Web and on times I felt the urge to log-on to WAPDA’s website to get to know what is actually happening. What I would expect from the authority, is that, their website would have a map of Pakistan, which would get updated live through AJAX or it could be a Java applet which show you how many MWs are currently available, how many of them are actually getting distributed, how much are the line losses and how much is the demand. Then on the map additionally, you could see which areas are out of electricity at the particular moment.

I know that WAPDA will not do this ever until the political and bureaucratic structure of the authority get changed. The reason behind is, WAPDA has the capacity to generate more than 19,000MW a day through it’s own hydel power plants and through other IPP (Independent Power Producer) plants across the country. WAPDA hasn’t deliberately paid the payments to IPPs which in turn hasn’t paid fuel supplying companies, so those power plants are actually not running on their full strength and the power at the end available in the country is around 12,000MW a day.

Let’s take that in a bigger picture, when the government could get a loan of more than 7 billion dollar from international agencies with in a time frame of 2 years, it has taken too much loan from inside the company as well, why it couldn’t just pay back the IPPs debt which is around 100 billion Pakistani rupee (approximately 1.2 billion dollars) and due to only this reason, the whole country is in trouble including the industry and commercial sector and only this reason is causing a halt to growth and pushing the government to take more loans.

Yes, the last point is the answer, this is the game to pressurize the people of Pakistan so that they do not see toward the so-called war on terror game at the borders of Pakistan, secondly so that Pakistan should take more and more loans so like today, when international agencies ask something from us and we say we would not do that, they will say OK we will not release any more funds for you and as we will be down to our knees, we will do as “they” say.

Now on the corruption side of current “democratic” government of Pakistan, which country on earth would install more power plants when you have enough capacity available already and about 40% of it is not in use because of fuel supply? Well, the country’s name is Pakistan. In lieu of this scenario obviously Mr. 10% would like to have a bigger share out of his presidency, so what we are seeing is the Minister of Power saying again and again that it is due to the non-availability of power generation capacity (when 40% is idle) and then Pakistan is getting rental power plants which are expensive to get and install and more off they run on same kind of fuel which you are already not supplying to current power generators. The only purpose seems here to get kickbacks from those rental power plant operators.

This is a well known fact and every Pakistani is aware of that, anyway I got diverted here too  much from my subject, the reason behind is obviously to let the reader know that why WAPDA would not put this all live information on their website because that will put the orders in transparency and that is what the international pressure and local government do not want (that’s against the interests of those nations).

However, the grip of WAPDA’s IT department is so weak that when I searched wapda on Google and that is my habit which saved me here that I always search rather than typing in the address bar, the Google told me that visiting this website can be harmful. This is a bit shocking as the website’s domain is gov.pk and it is a government’s website, however I checked that on 7th April, the date of writing of this blog is 10th April and who knows from how long it has been hacked. Well hacked is probably not a right word here, what probably has happened that the OS it’s developer is using is pirated (shouldn’t be a shock, it’s WAPDA) or he has been installing pirated software on the system and there is probably no anti-virus on the web developer’s system as well as web server. So, this malware got it’s way all up to the one of the most important websites of Pakistan.

Here are few screen shots:

May Allah bless Pakistan!