Karthik's Blog

Tips to developers of Indian Government websites…

Websites run by Indian Government are undoubtedly the most hated ones in internet for a number of reasons well known to frequent visitors of these sites, which not only remind you the internet of 90’s, but also a perfect example of how annoying and frustrating they can be. Some examples: 1 2 3 4

Here are some of the most annoying experiences one would get on the websites run by Indian Government. I’m also offering tips to developers behind these sites to work around these issues.

Ugly bitmaps near new content

Kill them. Sort your list in reverse chronological order. If the link really deserves attention, just highlight them using <strong> tag.

Fly over menus

These menus break Find on page and Mobile viewing. Use sidebars instead.

Plain texts for better SEO

Google aren’t indexing texts in your pictures yet. So, better use plain texts.

GIF images distract visitors

Kill them

Scrolling texts

Kill them too. Wonder how mobile, tablet users are going to read and click them.

Make form fields auto fillable

It will take centuries to get our demographic details fetched from UID system and pre-populate the form, but you could follow some simple standards to get your form fields auto filled by the browser. You could save lots of our time by doing so.

Get rid of the autocomplete=”off” in your forms and fields

Use field names like,

firstname lastname birthday phone

instead of,

user_firstname user_phone

Ah, for God’s sake, please disable this feature in CAPTCHA field by adding the attribute autocomplete=”off”

Use labels in form

Use label fields in form, instead of texts. Map them to the input field with “for=id” attribute. This will make them clickable. This is particularly useful in a radio button, where you just click the label to select the button and save you from finding and clicking the tiny radio button.         

        <input id=”terms” name=”terms” type=”radio”/>

        <label for=”terms“>I agree to the terms</label>

Allow us to copy text into clipboard

Most of the websites prevent copying text into clipboard. Some websites go even further and prevent selecting texts and right clicking in their pages. You still can’t protect the data because one could copy contents from Developer tools, which are available in all modern browsers.

And its most important to make your content sharable in this age of social internet.

CAPTCHA and One Time Authorization (OTA) code fields

God knows, why these fields are of password type on some websites.

Allow copy pasting into these fields to save mobile users, who otherwise would have to switch between Messages app and Browser app to enter the OTA codes.

Browser compatibility

Get rid of that “Best viewed on Internet Explorer 6” tagline and test the site on all modern browsers, both PC and Mobile.

Get rid of,

Dead links

Expired links which are accessible through search engine results. They  present completely outdated information.

.PDF and .DOC files

Alert messages

Background images

Dark background colors

You’re the visitor number 92387 (victim number??)

Long term actions to do

Embrace HTML5 & open technologies like Twitter Bootstrap, Wordpress, jQuery

Keep the layout simple

Consistent layout for all Government run websites

Implement an OAUTH system based on UID

Develop more and more services and applications rather than static HTML pages

Give us an unified API

I wouldn’t blame just the developers of these websites. These outcomes are expected, when you work in one of the most corrupted systems in the world. And this annoyance is multi-fold, when you visit the websites of State governments and  government corporations.

Chennai power cutoff timings plotted on a Google Map

TNEB released timings of power cutoff in Chennai. Here is the report. 

Its a pain to find your locality in this huge chunk of text. All newspapers published it, but none cared to plot it on a map

I made a quick tool and plotted the areas and timings on a Google map.

http://www.yemkay.com/power-cutoff-timings/

How this map was made?

• Extract the region names from the report
• Geocode the regions using the Google Maps Geocoder API.
• Create a spreadsheet by populating Name, geo-coordinates & the time of all the regions
• The last column of this spreadsheet represents the JSON coded array of that row
• Create a simple Google Maps mashup by creating markers for the regions.
• The icons representing the cutoff time were created using this awesome tool
• The tool uses Twitter Bootstrap for visual features like push button and round cornered boxes

Released new version of “Daily Cartoons” App

Published next version of my Android app - Daily Cartoons. New features are,

• Ability to browse and view cartoons from various channels like AnderToons, Cricinfo, Times Of India, Deccan Chronicle, Amul.
• More channels will be added on the fly, without needing to upgrade the app
• Cartoons are now grouped by publishing date viz. Today, Yesterday, 2 days ago and older.

Download by clicking this link from an Android phone. Or scan this QR code 

Daily Cartoons - Android app

My first Android app is in market now. Its a simple app to browse cartoons from CricInfo. 

Download by clicking this link from an Android phone 

OR

Search for “Daily Cartoons” in market

OR

Scan this QR code

 

Future releases will add Cartoons from magazines like Times of India, Indian Express, Deccan Chronicle.

I also hope to add features like notifications, unread items, custom subscriptions in future releases.

Twitter OAuth PHP library

Twitter API shut down Basic Auth on August 31. I was a big fan of the Arc90 Twitter library, but its no longer usable because of the shutdown. Even before the shutdown, I’d been using Abraham’s twitterOAuth for Twitter Signin integration with my websites. Its a nice library that hides the OAuth security aspects from developers. But after having used Arc90 library in all my projects, migrating the code to another library was costly and time consuming.

So, I merged both the libraries. I enabled OAuth in Arc90 library by making some internal calls to twitterOAuth library. This way, I could continue using Arc90 library in my projects just by porting the new library and adding few lines of code to pass access tokens to the library object.

I’ve published the library in GitHub at http://github.com/yemkay/arc90-twitteroauth, which is also my first Open Source contribution. 

Here is a code snippet that retrieves Twitter home timeline using the new library:

<?php

require_once("lib/Arc90/Service/Twitter.php");

$twitter = new Arc90_Service_Twitter();
//Pass consumer key, secret of Oauth app and user's access token, secret
$twitter->useOAuth('OAUTH_CONSUMER_KEY', 'OAUTH_CONSUMER_SECRET', 'USER_TOKEN', 'USER_SECRET');

//Get tweets from user's timeline
$response = $this->twitter->getFriendsTimeline('json', array('count' => 200, 'page' => $page));

echo ('HTTP code: '.$response->getHttpCode());

if (!$response->isError())
{
	$messages = $response->getJsonData();
	echo 'Found '.count($messages).' new tweets';	
	/* GO AHEAD AND PROCESS TWEETS */
}
else
{
	echo 'Error description: '.$response->getData();
}


?>