Saturday, February 28, 2015

Running Out of Data? Mobile Sites to the Rescue!

You may certainly have faced situations where you have only a few megabytes left on your internet plan subscription. However, you may not be aware yet that you can survive in the internet for several hours using those few megabytes!

Currently, many of the leading web services maintain mobile-friendly versions of their websites, which work well under low bandwidths. Here we present a list of some of such websites which may come handy at the hour of need.

  • Gmail Mobile - https://mail.google.com/mail/u/0/x
  • This is one of the many Gmail sites available for mobile viewing. It lacks all the fancy features of automatic email notifications, HTML-formatted email views and such, but it's a handy tool for viewing your emails at the cost of just a few kilobytes.

  • Gmail Basic HTML View - https://mail.google.com/mail/u/0/h

    This is the old Gmail desktop site (the "basic HTML" view). It's only slightly heavier than the genuine mobile site, but offers almost all Gmail functionalities and settings, minus the fancy AJAX stuff and the chat interface. In my opinion, it's more than sufficient for all your daily Gmail chores.

  • Facebook Mobile - https://m.facebook.com
  • Although this is officially for mobile devices, it can easily be accessed even on a desktop computer using the above link.

    Facebook Mobile comes in 2 main versions; on some browsers (Opera and some versions of Firefox) it renders as a plain site, with much less interactivity. But the other version (especially on Google Chrome) is a nearly fully-functional website which even has real-time chatting facilities and a high degrees of responsiveness (AJAX). (Of course, this version consumes significantly more data than the plain version (a page load on the former consumes ~10 KB while the latter needs ~100 KB), but still it is much less than the actual WWW version; with images turned off, you can survive for a whole day for much less than 20MB.

  • Twitter Mobile - https://mobile.twitter.com
  • This is similar in functionality to the responsive Facebook mobile site. It offers a limited set of basic Twitter functionalities.

  • Google Drive Mobile - https://drive.google.com/m
  • Although this used to be a plain site, it has recently been converted into a responsive version. It's similar to the old Google Drive desktop site in functionality, and especially by the fact that you can preview files without actually opening them. However, data usage for this site is significantly high.

  • Wikipedia Mobile - http://en.m.wikipedia.org
  • This is a lightweight version of the mother site, with simple navigation, content folding etc. There are no dedicated sidebars or table-of-contents sections, but the content is almost as descriptive as the original articles.

  • LinkedIn Mobile - https://touch.www.linkedin.com
  • This is similar to the Twitter Mobile website, and provides a sufficiently rich set of functionalities compared to the desktop version.

  • PayPal Mobile - https://mobile.paypal.com
  • This is extremely lightweight, at the cost of the fact that it only allows you to view your existing PayPal balance. Although there's a "send money" option, currently it is linked back to the facility on the desktop site.

  • eBay Mobile
  • The WAP site http://wap.ebay.com is the default eBay mobile site for WAP clients, but it works on desktops as well. It has low responsiveness but still provides basic functionalities.

    There is a more sophisticated version at http://m.ebay.com for smartphones, but it consumes more data than the WAP version. Nevertheless it provides a significantly close-to-the-real-thing experience at a fraction of the data cost.

  • oDesk Mobile - https://www.odesk.com/m
  • This is the mobile optimized version of the famous freelancing site, and offers messaging and job search features. However at the time of this writing, it does not permit you to submit job applications.

  • Blogger Mobile
  • Unless the blog admin has either disabled mobile view or has used a non-mobile-friendly theme, you can view the mobile version of any blog or post by appending "?m=1" to the relevant URL (or, if "m=0" is already in the URL, by changing it to "m=1").

  • Google Mobile Site Viewer - http://www.google.com/gwt/n
  • This site can convert almost any public web page into a mobile-friendly, plain version. However the converted page would lose its interactivity and styling. It is also not applicable for pages or sites that rely on cookies for proper functionality. Still, it's a great resource when you want to check out the bare-bones content of a really bulky website, strippling off the fancy styling and JavaScript stuff.

  • Stack Exchange
  • Stack Exchange offers an option for you to switch between desktop and mobile views when visiting their websites. This switch is persistent until you decide to switch back again manually.

    ...and the list keeps growing...

Apart from these, most websites (such as Google Search, Fiverr, Facebook, LinkedIn and Atlassian Confluence-powered websites) can now recognize which type of device you are using to access them (via the HTTP User-Agent header), and serve mobile-friendly version. (Check this out for more information; unfortunately there's no English version of the article available yet.)

However, it should be noted that mobile sites may not always be more lightweight than their desktop counterparts; the default Gmail Mobile site (https://mail.google.com/mail/mu/mp), to which smartphones are automatically redirected, can be cited as an example; at times it can consume more data than the actual default desktop site (https://mail.google.com/mail/u/0). So, keep an eye on your gauges when surfing unforeseen mobile sites!

Thursday, February 26, 2015

xcalib: Say No to Eye Strain - Exclusively for You on Linux!

Eyes getting tired after staring at the computer screen for a couple of hours? Don't take it lightly; eye strain, if neglected, can eventually lead to catastrophic conditions like glucoma and even total blindness. And it's quite common around members of the IT sector, who have no other option than staring at their computer screens for long periods each day.

Eye strain often traces back to computer screens that are too bright (although lack of brightness can also cause problems at times). If you are a frequent computer user, you would have noticed that reading text on white or other light-coloured backgrounds over prolonged times can lead to eye strain quite quickly.

As a result, many applications now provide themes and configurations to ensure minimum eye strain. Ubuntu Linux, for example, offers a (PDF) Document Viewer featuring an 'Inverted Colors' option, while IDEs like NetBeans and IntelliJ IDEA have specialized 'dark themes' that provide similar colour configurations. Even the default text editor, gedit, can be configured to display light-coloured text on a black background.

However, if you are frequently switching between the 'light' and 'dark' modes, you will soon realize how painful it is to configure each application individually during the transition process. Besides, there's no guarantee that every arbitrary application would support colour inversion, so you may very well end up in situations where you are stuck with black text on white on one application and the eye-friendly inverse on all the others.

On Ubuntu Linux, as with anything else, there's a workaround: xcalib.

Installation takes the usual, friendly path: sudo apt-get install xcalib

This utility can be used to completely invert screen colours with a single command, so you never have to mess with individual configurations again:

xcalib -i -a

Repeating the same command will bring the screen back to normal.

The catch, however, is that it will also swap the other screen colours (red becomes cyan, blue becomes yellow, and so on). It takes some time for the brain to get used to this strangeness, but after that it just becomes normal.

xcalib only seems to trigger the colour swap on the display; if you take a screenshot with xcalib executed, you will notice that it would still be a 'natural colour' screenshot.

Still, it may be required to configure some colour schemes, such as that on the terminal, so that whether you are in the inverted mode or not, you would be seeing a 'natural' (light text on dark background) terminal.

Here are two shell scripts, zkreen and swap, that I use for inverting my screen and the terminal colours together so that I always see a green-text-on-black terminal but everything else gets swapped (please note that you need gconftool-2 installed, for the swap operation to work).


zkreen:

xcalib -i -a
swap


swap:

xcalib -i -a
fore=`gconftool-2 --get "/apps/gnome-terminal/profiles/Profile0/foreground_color"`;
if [ $fore = "#0000FFFF0000" ]; then
	gconftool-2 --set "/apps/gnome-terminal/profiles/Profile0/background_color" --type string "#FFFFFFFFFFFF";
	gconftool-2 --set "/apps/gnome-terminal/profiles/Profile0/foreground_color" --type string "#FFFF0000FFFF";
else
	gconftool-2 --set "/apps/gnome-terminal/profiles/Profile0/background_color" --type string "#000000000000";
	gconftool-2 --set "/apps/gnome-terminal/profiles/Profile0/foreground_color" --type string "#0000FFFF0000";
fi;


(Make sure that you set executable permissions on both scripts, using chmod +x.)

I leave other configurations untouched so that I can switch back to the dark-on-light scheme easily when I get bored with light-on-dark, or have some special requirement such as viewing a colour image.

On both Ubuntu systems that I am using, the effect of xcalib seems to wear off suddenly during certain operations (such as pressing Ctrl+C or Ctrl+V, on the terminal or in other applications). The issue is intermittent and I believe it is a bug (not a serious one, though). The second script (swap) is for such situations, whose job is to solely swap terminal colours when such a thing happens (otherwise the terminal will retain a funny-looking pink-text-on-pink scheme, which we had actually set during the xcalib swap so as to get a natural-looking terminal under colour inversion).

Using dconf and other related utility commands, you will be able to customize the script to trigger colour changes on other selected applications such as gedit, and maybe even get rid of xcalib and rely solely on application configurations for colour inversions.

MyLightBlog - Lightweight Blogging Champion

Blogger is becoming increasingly popular as a feature-full, free and smart blogging platform available to everyone.

However, one would have realized that the Blogger web interface is quite complicated and, more than all, bulky. It may contain a million smart features, but most of the time an average blogger just will just step in to compose and post an article, and nothing beyond. The interface takes nearly a megabyte of bandwidth on first load, and continues to communicate with Blogger for post draft auto-saving and such. Moreover, it does not get cached properly in the browser (at least in Firefox) so it practically loads everything from scratch during the next visit if you happen to close the browser between sessions.

So, rather than sitting back and criticizing, I wrote a Blogger browser client on my own, using the Blogger API v3

It's now public, available right here on GitHub.

The catch is that it requires a web browser to run on the machine (a simple HTTP web server would do; there's no need to go for a full stack with PHP/MySQL).

Put more precisely, it needs to be able to navigate to the address http://127.0.0.1/blogger/oauth (whose corresponding web page is included in the project itself) for Google OAuth authorization.

You can simply clone the repository into the web data folder of your web server (www on Apache, unless you're using a specialized stack like XAMPP where the corresponding folder is named htdocs; for example, in Linux it's the famous /var/www/html directory).

Note that you may also have to set executable permissions on the two html files in Linux, which is easily done by cd ing into the blogger directory and running chmod +x blogger.html oauth.html.

Now, simply navigate to http://127.0.0.1/blogger/blogger.html to access the one-page client.

You can load the blogs associated with your Blogger account, and their posts, using the Blogs and Posts buttons. You can use the corresponding lists to switch among blogs and posts, and the All and Draft buttons to load either all posts or just the draft posts, respectively.

At first use, you will have to authorize the backend application MyLightBlog, which is hosted on Google App Engine, by clicking the Authorize button. In this case a pop-up will open, asking you to authorize the application for your Google account. You will have to click 'Accept' so that the client is granted permission to manage blogs on your Google account. Authorization is granted merely for Blogger-related features (the dialog will clearly state so) so you don't have to worry about your account or any unintended parts of it falling into evil hands. (Refer to this nice post for more information on how OAuth works.)

The page layout is quite crude at the moment, but it features all basic Blogger operations required by the average blogger, like listing your blogs and posts, creating new posts, and editing, publishing, unpublishing and deleting existing posts.

It may seem inconvenient that you have to edit the post as raw HTML, but it eliminates a great deal of redundancy that would otherwise creep into the actual blog in case you use an actual HTML editor such as the one you see on Blogger.

Just as an example, each <p> is automatically given a dir="ltr" attribute by Google's editor, which increases by five-fold the amount of characters used for the tag alone. In case you blog in a non-ASCII character set like Sinhala, each letter would be separately escaped (as &xxxx;), bloating the post content dramatically. (While these 'intelligent' features may be useful for writing truly international blogs, I don't believe they are worth the obvious overhead in our cases.)

A good alternative would be to create the document in a simple HTML-supporting editor (word processing software will almost always produce bulky HTML requiring heavy cleansing) and pasting the HTML content into the post content field.

To compensate for the lack of direct HTML support, the middle right region of the document will display a HTML preview of the post as it is being edited.

You can add or modify the title and labels (tags) of the post using the text boxes above and below the main content text area, respectively. You can use the Update button to post your changes to the actual blog post online on Blogger, or the New Post button to post the current content as a new blog post.

(WARNING: Be sure to refresh the posts list and load the new post, if you happen to make a new post; as of now the client will not automatically refresh the list, so if you click Update again, the currently selected post from the list will get overwritten automatically!)

My main intention is to keep this client as light as possible, hence future improvements will focus on removing jQuery altogether, as soon as possible. No external CSS or JS would be included unless absolutely necessary.

Feedback on the client is always welcome, preferably as comments here itself, or (if more critical) as issues here.

P.S.: This article was composed, formatted, finalized and published using the Blogger client itself.