Nerds To Geeks - Blog

Basic and Useful Plugins for gEdit

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 29 Jan 2012 09:00:00 PST

If you are starting on Linux and getting used to gedit, you should try installing the basic official plugins which will make you love the gedit even more. To start, how about python console in the editor? Autocomplete the words you type in? You can have all of these in gedit. Here are the steps.

Open Terminal.
Run
```
sudo apt-get install gedit-plugins
```
Now open to gedit and go to preferences.
In the plugins tab, you can find all new plugins.
Just select what ever you want and have fun.

I would recommend these plugins if you are starting.

Snippets - An easy way to use the code snippets, would be great if you are used to textmate.
Word Completion - As the name says, complete your words with a tab.
Python Console - Run the console in your editor as a tab.
Bracket Completion - Though irritating at times, useful and must have.

I hope you find this useful and if you wanna see more of these follow us on nerdstogeeks.com/+

Pangrams and Python Way

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 15 Jan 2012 09:56:00 PST

'Lorem Ipsum' - the same old content used to fill up the templates, this is what you and I know till today. This kind of content has a name that I never knew, if you are one of those who don't know anything about pangrams, this post is for you.

While browsing through the web fonts of Google, I was expecting the same world sentence - "The quick brown fox jumps over the lazy dog", which has all the letters, but to my surprise there is a new sentence or rather paragraph which is neither lorem ipsum nor the quick brown fox - "Grumpy wizards make toxic brew for the evil Queen and Jack." So, I searched for the snippet of text and landed on a website that talks about the pangrams and found that these sentences are called pangrams and lorem ipsum is one of them.

If you are wondering what a pangram is, it is a sentence that contains all the letters of alphabet. My interest made me read through a couple more pangrams and after a while I just want to write a script that let you know if the given sentence is pangram or not. So, I came up with a python script that does basic checks to determine whether it is a pangram or not.

Here is the script I wrote in the first attempt:

inp_sent = raw_input('Enter Sentence')
inp_sent = inp_sent.replace(' ','').lower()

if len(set(inp_sent)) >= 26:
    print "Yes"
else:
    print "No"

After this I searched the web for a proper program for pangram and landed on this wiki page that has a bunch of languages writing the pangram. Here is the python way of the script on the page.

import string, sys
if sys.version_info[0] < 3:
    input = raw_input
 
def ispangram(sentence, alphabet=string.ascii_lowercase):
    alphaset = set(alphabet)
    return alphaset <= set(sentence.lower())
 
print ( ispangram(input('Sentence: ')) )

After going through this code, I noticed that something is not right with my code, what I am basically checking is that for a pangram, there need to be a set of more than 26 letters which is a very blind way of doing it. So, to put it straight you key in a bunch of special characters along with few letters and make sure the length of your input string is more than 26, these programs return a blind and wrong "True".

To solve this problem, an additional check for the character will do the trick. So, right after lowercase conversion just add this order check.

#loop along the sentence and check for the order.
for i in inp_sent:
  if ord(i) >=97 and ord(i) <=123:
    #count for length
    length = length + 1

This will do the trick for detecting the pangram.

CES 2012 - A touch of Future.

noreply@blogger.com (Srikanth Rayabhagi) — Mon, 09 Jan 2012 10:39:00 PST

Today, I am trying a new kind of live blogging, just based on the hash tags for CES both in twitter as well as Google plus. Why am I doing this? I know its tough to find the right links at the right time especially in these situations where the spam bots kick in spamming half the hash tags and gain control over the content. BTW, for those who don't know what is CES, it is called Consumer Electronics Show.

Some of those launches that attracted me:

Intel partnered with Nuance: This collaborative initiative results in bringing the natural voice experience to its ultrabooks. It will be a great move and would definitely challenge the Apple's voice enabled devices especially Apple TV.

Lenovo + Ice Cream Sandwich: This would be really interesting to see how far this integration effect the future devices. Lenovo is releasing a smart TV featuring Android 4.0 under the name Lenovo K91. The specs being: 55 inch LED screen, Qualcomm 8060 Snapdragon dual-core CPU, 1GB RAM, 8GB of storage, 2GB SD Card.

Lenovo reveals Ice cream sandwich.

LG + Google Smart TV: LG is on a roll in this series of CES. LG revealed its 55 inch OLED screen - Worlds Largest - 4mm thin - 1000 times faster than current LCD or LED screens. Along with this, to amuse its audience, it partnered with Google TV and preparing to launch it first in UK later in 2013.

[Image credit - PocketNow]

LG reveals world’s largest OLED TV.
A Refrigerator That Helps You Diet? LG Unveils High-Tech Smart Appliances.

Gorilla Glass 2 from Corning: Next generation of strong and damage resistant glass. 20% thinner than the current gorilla glass.

Acer Aspire A5: World's thinnest Ultrabook - 15mm at its thickest part.

Acer Unveils Aspire A5, World's Thinnest Ultrabook.

And a lot more, I guess, this is as far I can moderate this list and keep watching for the tag #CES in twitter and google plus for latest updates and links. All the tech freaks out there, hope you find this a repeated content, but all those folks who enjoyed this post, follow us on nerdstogeeks.com/+.

Google's Way of Creating Magic with Websites

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 08 Jan 2012 05:17:00 PST

We all know Google is good at creating stuff that make netizens go crazy and we do know that Google has several easter eggs planted in its search engine (my favorites - Recursion, Answer to Life Universe and Everything) to excite the users when they search those. Now Google seems to be coming up with newer ways to amuse its audience. They started creating websites that have some hidden easter eggs.

Confused? Let me get into the details.

Point your browser to Android's official website - http://www.android.com.
The website is cool right? The coolest stuff is at the bottom of the page. Head to the footer and you can see a small android logo.
Hover your mouse over that logo and you can see an animated play button popping up from the left hand of the android logo.
Just click it and enjoy the small game of throwing snow.

Here are the screen shots of the game.

Hidden Android Game in the Footer of Android.com

Let me know if you have seen any of these kind in any other Google Websites. And if you like this post, you can follow us on G+ at http://nerdstogeeks.com/+

Graphing with Google

noreply@blogger.com (Srikanth Rayabhagi) — Sat, 10 Dec 2011 20:46:00 PST

All you math lovers out there, you need not look out for the web graphing tools or graphing calculators any more. Google does that for you! Yeah, Google introduced an interactive graphing tool into its own search interface. The graphing calculator works with the formulae separated with comma as input and a beautiful SVG Graph as the output. Here are some screen shots, I have tried.

Single formula

Try the above formula from here on Google. These Graphs support you with options like Zoom in and Zoom out which adjusts the scale of the graphs and you can try the multi-formulae version from here.

Multiple Formulae

In this multi formulae version, you can see the point scale with the color you choose from the top right corner. This is one useful tool if you are into graphing off late. Did you find any thing more on this aspect, let us and your fellow readers know by commenting below.

If you find this post interesting, you can follow us on G+ at http://nerdstogeeks.com/+

Division Operator in Python - Whats Wrong?

noreply@blogger.com (Srikanth Rayabhagi) — Tue, 06 Dec 2011 09:30:00 PST

When I first tried using the division operator (/) directly in python, it gave me rounded values which was pretty confusing and so started looking for the reason behind it and how to solve this. Before getting into this issue, if you are here looking for a solution to get this working, here are couple of ways I found useful. Just to inform you this happens with lower version of python and is good with python 3.x versions.

Starting with a quick example

>>> 20/40 = 0

To fix this, here are couple of solutions. Use float() operator on either of the denominator or nominator.

>>> float(20)/40 = 0.5
>>> 20/float(40) = 0.5

Import the library from the future versions by adding this. This gets you the reqd behavior from python 3.x

from __future__ import division

Now coming to the reasons, here are few pages that made me understand what happening and if you would like to know please follow these

These links provide you enough details around the True division and Floor division. Also, explains how Python 3.x handles these.

NerdsToGeeks - Web App for Chrome Users!

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 06 Nov 2011 08:17:00 PST

Today, I am happy to announce that we have a new web app for the chrome users and you can grab the app from the chrome web store directly. The app is very basic one and as of now it just launches this blog directly from the chrome apps page of your browser. Nevertheless, I will try to keep it updated and serve you the content better. Some stats from the chrome store encouraged me to go for a blog post, there are already 103 installations in just couple of days. So, go ahead and try this if you like and follow the blog.

Download app from https://chrome.google.com/webstore/detail/lledbmhobfepinbeloekmpagkjghhbfk and tell us what you would like to see from now on. If you are curious about how we made this simple application, don't strain yourself from searching for the documentation. It is just a manifest file that helps to launch this and you can find this below. Create a folder with manifest.json and write something like this.

{
  "name": "App Name",
  "description": "Describe your application",
  "version": "1.0",
  "app": {
    "urls": [
      "http://blog.example.com/"
    ],
    "launch": {
      "web_url": "http://blog.example.com/"
    }
  },
  "icons": {
    "128": "logo128.png"
  }
}

When ever you build something useful in the future, make sure you build a simple app for your chrome users that make a lot of difference. Hopefully this will encourage few of you out there to begin! If you want to know how to create chrome extensions direct yourself to this blog post - Develop chrome extension practically or find the slides for even richer learning experience from this post.

The Good and Bad of Blogger Dynamic Views

noreply@blogger.com (Srikanth Rayabhagi) — Mon, 31 Oct 2011 09:47:00 PDT

When Blogger announced the dynamic views, I made up mind that I am not going to move to dynamic views as I had a self designed earlier and don't want to make my blog one amongst the half a million blogs that activated the new design template. But, the new customization options and serious crashing issue with my blog made me rethink. And finally I chose to move on with the trend that's around you. Well its been few days since I moved and I have few suggestions that may help you decide whether or not to move to new design based on my experience.

Lets start with the good part of the new templates.

Loading time - As the new templates load based on feed of your blog and uses JS to load pages it is damn quick and I bet you could ever get to this speed if you try on your own.
Ability to switch over the designs and let your reader choose what he likes is good.
The search box in the design is really cool and you get the content on the fly.
Increased number of scripts that are not often used kept piling in my template which I really don't require, right now there is no option for widgets or any JS, which essentially tackles this problem. So, this is a plus for me.

Nevertheless there are few things that these templates don't have yet

First of all, I don't have DISQUS Comments on my posts.
I don't have preview option while writing a new post.
No extensive customization for the template as of now.
Authorship markup has been broken as the profile still goes through the blogger profile and then to Google+ profile - Probably they are planning on fixing this in a better way.
The analytics seem to be broken as of now, can't use the histats counter.
Archives and label tags are not available.

But I weigh the positive part over the negative as these are mere fixes that blogger must be looking at. As a whole I really like the way the things are on my blog. And just to iterate this is my own personal opinion on dynamic views, make sure you consider reading other blogs and make a wise choice before you migrate. If you ask me, if you are not a big fan of comments, make a move right away and by the way there is an option to revert to previous template if you don't like dynamic views at any point of time.

Switch Focus between tabs in Chrome extensions - [How To]

noreply@blogger.com (Srikanth Rayabhagi) — Sat, 29 Oct 2011 00:43:00 PDT

Here is a quick tip for those who are involved in chrome extension development. If you have developed a chrome extension, then you might have known the

chrome.tabs.create()

function and the flags that can be used inside the function. For example, when you create a tab you can use the flag

{selected:true}

directly to switch the focus to the tab that is created. This is absolutely fine, but how about you already opened a tab and the focus is not on that tab, then how do you switch the focus to that tab? Well this may look silly, but it took some good amount of time for me to get this done!

The answer is simple and a line of code does that for you. Just use the update function on the tab and set its selected property to true.

chrome.tabs.update(tabId, {selected: true});

The only condition for this is you need to know the tab Id before using this. If you know the Url, you can loop around the windows and get the tab Id or if you are in luck, you can directly use the tabId in hand. I can't see any other way of doing other than relying on the pure Javascript method where you rely on the browser Instances to switch the focus.

Is the world big enough to find another Steve?

noreply@blogger.com (Srikanth Rayabhagi) — Wed, 05 Oct 2011 23:51:00 PDT

My mind used to visualize a fruit until my eyes saw an ipod shuffle in my friends hand and from that second it visualizes an immense company that changed this world. The first time I saw Steve was in this video where he explains the true meaning of education and how to live your life. I bet this video has inpired hell lot of people in their lives and changed the way they think.

There are millions of people out there who never met Steve in person (just like me) but still they feel the loss today. This man was kicked out of the company he founded and yet he was confident enough to come up with company like pixar, such a caliber he had. Today his death created a huge void in this world and I am not sure if I can see another Steve in my lifetime. I don't know about Albert Einstein (1879-1955) nor I heard his speech but I do know about the Einstein (1955-2011) of our era and did hear his speeches. To me, Steve is the Einstein of this era. This screenshot is going to be remembered my whole life and I am proud to say that I am of his era.

Apple.com homepage on october 6th 2011

The apricot orchards where he grew was now called Silicon Valley, a home place for many companies. Now the question stays intact and do we see another Steve from silicon valley. There are many people who have tasted success but is that mere factor to replace such a visionary? In Jobs words, 'Stay Hungry Stay Foolish', who has that hunger? Here are the cards we should look after Mark Zuckerberg of Facebook - Man who made people use internet to meet their friends, Larry-Sergey who didn't stop by just launching a search engine to find data.

Finally, I am happy that a person who fused the creativity into technology, the person who has no foes but fans, the person who resembles in every product that the company launched, who seek perfection in the design is of our times. Thanks for everything you have done to this world. R.I.P

4 CSS Tricks That You Should Know

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 02 Oct 2011 02:14:00 PDT

CSS is full of fun and you can't argue on this! The more you work on it, the more you learn about it. You might have seen several pages that are amazingly designed, but often fail to notice the concept behind that. Based on my experiences and observations, I have these 4 CSS techniques which aren't familiar enough to be used by you in your designs. Knowing these will help you a lot by giving you more customization options to your design.

1. Merge Textboxes into your Design

You can do this by selecting the textboxes you want and apply the CSS below. With this code you are removing the border and making the background of the text box transparent. Will be extremely useful in designs, where you want to remove border of the elements and merge them.

input[type='text'] {
    border: 0;
    outline: none;
    outline-offset: 0;
    background:transparent;
    padding:0px;
}

2. Access the disabled Textboxes
Sometimes the background color of the disabled text boxes may annoy your users, might be because of the gray color that comes by default.

input[disabled]{
  color:red;
  background:transparent;
}

3. Change the default selection text color
You can change the color of the selection with the CSS below. Works with webkit as well as firefox.

::selection{
  background-color:orange;
  color:green;
}
::-moz-selection{
  background-color:orange;
  color:green;
}
::-webkit-selection{
  background-color:orange;
  color:green;
}

4. Change the Look and Feel of scroll bars
You can access your scroll bars and modify them into what ever you want. You can see that this blog has different kind of scroll bar than the usual scroll bar ( if you are using webkit). I have no interest in finding the property for mozilla, opera and others, if you do care follow this bug, which might lead to right resource.

::-webkit-scrollbar {
margin-right: 5px;
background-color: #EEE;
width: 7px;
}

::-webkit-scrollbar:horizontal {
margin-right: 5px;
background-color: #EEE;
height: 7px;
}

::-webkit-scrollbar-thumb {
border: 1px #EEE solid;
border-radius: 12px;
background: #777;
-webit-box-shadow: 0 0 8px #555 inset;
box-shadow: 0 0 8px #555 inset;
-webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}

::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}

That's it for now and hopefully these are useful to you at one point or the other. Stay with us for more interesting posts. You might want to see these interesting posts about CSS.

Create Slides with HTML5 - [HowTo]

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 18 Sep 2011 04:14:00 PDT

The presentations out there have geared up and now its pretty common that you encounter with the presentations that are made in HTML5. Just like you, I used to wonder, how to create one and mesmerize my audience. After searching a lot, I found few interesting presentation slides but they are way complicated and I am too naive to have all those things in my presentation. I decided to create my own slides with basic effects. In this article, I will tell you my experience in creating the slides. This demo is the end result of my experiment.

VIEW DEMO

1. Setup the basic template
Let us have the template with just two slides in the presentation for now. I am also importing the Jquery library into the template. Each slide is covered by the section tags and the slide id's should be incremented according to the number of the slides like the third slide should have slide3 as the id.

<html>
    <head>
        <title>Chrome Extensions</title>
        <script type='text/javascript' src='../js/jquery.js'> </script>
    </head>
    <body>
        <section class='slide' id='slide1'>
            Slide1
        </section>
        <section class='slide' id='slide2'>
            Slide2
        </section>
    </body>
</html>

2. Defining Slides
Now that we have basic template we need to make sure that we display one slide to user at a time. So we need to style for section such that we monitor our display.

html,body{
    margin:0px;
    padding:0px;
    height:100%;
}
body{
    overflow:hidden;
}
.slide{
    height:100%;
    width:100%;
    background:-webkit-gradient(radial,
        50% 50%, 0,
        50% 50%, 500,
        from(white), to(#A2D2ED)) no-repeat #A2D2ED;
    padding:100px;
}

3. Navigating between Slides
In step2 we have defined our slides and are hiding the slides that are not necessary. Right now we need to provide a navigation functionality between the slides. For this we are going to use the Jquery and parse the URL to get the current slide.

$(document).ready(function() {
    $('body').bind("keydown", function(event) {
        if (event.keyCode == '40' || event.keyCode == '39') {
            var x = location.href;
            var currentSlideNumber = x.split('#slide')[1];
            var nextSlideNumber = 2;
            if (currentSlideNumber) {
                nextSlideNumber = parseInt(currentSlideNumber) + 1;
            }
            var target = '#slide' + nextSlideNumber;
            $("html, body").stop().animate({
                scrollTop: $(target).offset().top,
                scrollLeft: $(target).offset().left,
            }, 800, function() {
                location.href = target;
            });
        } else if (event.keyCode == '38' || event.keyCode == '37') {
            var x = location.href;
            var currentSlideNumber = x.split('#slide')[1];
            var nextSlideNumber = parseInt(currentSlideNumber) - 1;
            var target = '#slide' + nextSlideNumber;
            $("html, body").stop().animate({
                scrollTop: $(target).offset().top,
                scrollLeft: $(target).offset().left,
            }, 800, function() {
                location.href = target;
            });
        }
    });
});

Here we are binding a keydown listener and looking for the arrow keys to be pressed by the user. Once pressed, we get the url and split at

#slide

and process the slide number (if it not there we assume that we are on the first slide). Next we animate the slide and scroll accordingly. Note that we are continuously updating the slide number in the target url with a callback function, which keeps track of the slide to be able to navigate to the other slides. Feel free to edit the keycodes and make your slides feasible to your requirement. You can prevent the usage of keyboard by placing anchors according to the slide you want. This is kind of hardcoded fashion, if you need to slide to slide1 you place that anchor as

<a href='#slide2'>NextSlide</a>

but still a useful method to learn. Here is the binding function for these kind of links.

$("a[href*=#]").bind("click", function(event) {
    event.preventDefault();
    console.log('you');
    var target = $(this).attr("href");
    $("html, body").stop().animate({
        scrollTop: $(target).offset().top,
        scrollLeft: $(target).offset().left,
    }, 1500, function() {
        location.href = target;
    });
});

Finally, feel free to add your own style for the headings and the content of the slides. It rests on your creativity that how good you can tweak them and present them. Again, here is the demo for slide that are coded using this tutorial. So, did you like it. Feel free to drop any suggestions if you have.

Power of Optimization with Google Closure

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 04 Sep 2011 03:25:00 PDT

When I was new to closure library of the Google, I found it very useful for developing applications that require optimized performance. So, I started with the demos of the Google Closure. In my previous article, Tabbar and Google - [How To], I wrote a small tutorial for the demo of the Tabbar and didn't go for the building the code I wrote and just uploaded the library. It's good until I opened the demo of the tabbar. To my horror I found that its downloading nearly 1MB (omg!) of the dependency files from the closure library and that made me build the code. So, I edited this file and made a seperate .js file which I can compile with closure builder.

This is how I started with the code.

goog.provide('n2g.tabbar');

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.RoundedTabRenderer');
goog.require('goog.ui.Tab');
goog.require('goog.ui.TabBar');


n2g.tabbar.init = function() {
    var topTab = new goog.ui.TabBar();
    topTab.decorate(goog.dom.getElement('start'));
    goog.events.listen(topTab, 
                      goog.ui.Component.EventType.SELECT, function(e) {
        var tabSelected = e.target;
        var contentElement = goog.dom.getElement('start_content');
        if (tabSelected.getCaption() == 'Hello') {
            goog.dom.setTextContent(contentElement,
              goog.dom.getTextContent(goog.dom.getElement('hello_tab_content')));
        } else if (tabSelected.getCaption() == 'Settings') {
            contentElement.innerHTML =
            goog.dom.getElement('settings_tab_content').innerHTML;
        } else if (tabSelected.getCaption() == 'More') {
            var cont = "This is pre-stored in var and I am just printing.";
            goog.dom.setTextContent(contentElement, cont);
        }
    });
}

With this code in the common.js file, I initiated with the same tabbar.html as discussed in the article. Now I made a call to this function

 n2g.tabbar.init()

from the html file. Now enters the compilation phase for this code. Following the steps by Google, I compiled my file using this compiler script. Before I show you the script, let us check the file size of the scripts. The

common.js

file is of 4KB, but not to forget there is about 950KB of dependencies around this 4KB because of the use of Google Closure. So, we need to make sure that the compilation yields good compression. Lets look into the script.

closure-library/closure/bin/build/closurebuilder.py \
    --root=closure-library/ \
    --root=closure/ \
    --namespace="n2g.tabbar" \
    --output_mode=compiled \
    --compiler_jar=compiler.jar \
    > closure/compiled-js-tabbar.js

Now the script has been compiled along with dependencies and there comes

compiled-js-tabbar.js

with size of about 149KB which is terrific compression from 950KB to 150KB. But this is not where I stopped experimenting with optimization, reading further, came across the advanced optimization flag which reads the code and understands it before compilation. Here is the compilation script with the advanced optimization ON.

closure-library/closure/bin/build/closurebuilder.py \
    --root=closure-library/ \
    --root=closure/ \
    --namespace="n2g.tabbar" \
    --output_mode=compiled \
    --compiler_jar=compiler.jar \
    --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
    > closure/compiled-js-tabbar.js

That was even better, the compressed file is now just 41KB, which yielded in compression ratio of

5%

of the original dependencies. Now I just tried using this

compiled-js-tabbar.js

, but to my horror it turned up error. Examing the code of the

compiled-js-tabbar.js

files, tells you that there is nothing readable in that file. So, it was throwing an error for the

n2g.tabbar.init()

as there is no longer that terminology in the file. So, added this line to the file and re-compiled that. It is working in indeed! (lesson learnt!).

The bottom line here is that, if you are really worried about the performance and care for the users, use much optimized scripting library.

CSS3 techniques to spice up your design

noreply@blogger.com (Srikanth Rayabhagi) — Sat, 03 Sep 2011 01:47:00 PDT

With CSS3 coming into action and almost every modern browser supports wide range of features, you must start inducing yourself into CSS3 and improve your design perspective. In this article, I give you few snippets of code that let you do some basic CSS3 designs. Lets get started with these.

1. Say hello to image less striped backgrounds

background-color: #C8DE9D;
    background-color:#C8DE9D;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent),
        color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -moz-box-shadow: 1px 1px 8px gray;
    -webkit-box-shadow: 1px 1px 8px gray;
    box-shadow: 1px 1px 8px gray;

What happens with above code? Simple striped background for any element, in-specific a 45deg striped background with the provided color. The background of the blog has been coded with this. The best part is you can have variety of stripes by modifying the degree of the stripes and the color. You can see the output here

2. Say goodbye to traditional borders
Are you still using the traditional border with

border: 1px solid black

, then it is time that you change to advanced borders using the shadows feature of CSS3. Observe the green border with blur over this post. You will see how we have done that.

background-color: white;
padding: 10px;
-moz-box-shadow: inset 0 0 1em #98C429;
-webkit-box-shadow: inset 0 0 1em #98C429;
box-shadow: inset 0 0 1em #98C429;

Though these are not supported by the old browsers, hoping that the users migrate to the latest browsers at the faster rate, you need to get used to these kind of styling to keep up with latest designs. Hope these were useful and let me know in case of any issues.

PlayCez: Upcoming Era of Recommendation Engines

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 21 Aug 2011 00:49:00 PDT

Had this been a decade ago, people would have been satisfied with whatever info you provide them irrespective of the fashion in which you serve them. But technologies emerge around you and people are seeking for the best of the best out there. This is where the concept of Recommendation Engines come into play. Recommendation Engines are not new to this world, but the density of users seeking these have been on rise. Geo location based recommendations need pioneers at work to promise the service. Talking of these services, I need to talk about an upcoming "Visual Recommendation Engine", PlayCez.

PlayCez is a web application, that recommends places to people based on the interests and the likes of their pals. PlayCez takes the inputs from the user in well designed and structured way to provide them the most appropriate places accordingly. The application uses latest technologies out there to make users feel the freshness of the web. Some quick technologies, I can point out to - Google Maps v3, JQuery and not to miss, their mobile site is through JQuery Mobile, which will be launched very soon.

The developers are keeping every aspect of this application quite different and innovative. For example, the error page of this application is amazingly built and poured in the dynamic entity with the usage of Google Maps API and unlike the boring "Oops 404" pages, you see across the web. You can check the error page over here. As said earlier, the application uses the Google Maps v3 for recommending the users the places in their neighborhood with beautiful overlays embedded into the maps with several options. If you are really interested in Maps v3, here is a small snippet of code and make similar kind of pages for yourself.

Basic template:

<!doctype html>
<html>
  <head>
    <title>Google Maps V3 Demo - NerdsToGeeks</title>
    <style>
     html, body, #myMapCanvas {
       padding:0;
       margin:0;
       height:100%;
     }
   </style>
  </head>
  <body>
   <div id='myMapCanvas'></div>  
  </body>
</html>

The logic:

<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  var map;
  function initialize() {
     var myOptions = {
          zoom: 3,
          center: new google.maps.LatLng(17.0477624, 80.0981869),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('myMapCanvas'),
            myOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

This application is budding and has been launched over 3 cities in India. So when you are in India, and don't know where to hangout, use PlayCez to make your day delightful.

Prevent parent DIV Collapse while using Float - [How to]

noreply@blogger.com (Srikanth Rayabhagi) — Mon, 15 Aug 2011 02:44:00 PDT

Are you tired of using tables for your layout design? Then you might have considered the usage of div elements to design your page. One major issue with the use of div's is that the alignment of these elements need to be done so precisely, that the parent element and the child elements align with each other accordingly or it will completely ruin your layout. For example you might have come across a case where the parent element of these divs doesn't be intact and just collapses, leaving the rest of the divs floating around. In this article we will see how to create a layout with four boxes and which will in turn prevent the container div from collapsing. Lets get started with the implementation.

<div id='container'></div>

Now let us have four blocks that need to be placed in the container div. Lets name them as div1, div2, div3 and div4 respectively.

<div id='container'>
  <div class='divStyle' id='div1'></div>
  <div class='divStyle' id='div2'></div>
  <div class='divStyle' id='div3'></div>
  <div class='divStyle' id='div4'></div>
</div>

Now lets define the styling for this, ofcourse the basic styles for the container too..

#container{
  width:700px;
  background-color:#CCC;
  border:1px solid black;
}
.divStyle {
  width:300px;
  min-height:300px;
  background-color:green;
  border:1px solid orange;
  margin: 10px;
}

Save the page and load it in the browser. You can see that all the elements come one below the other which is not exactly because of the default settings for the division elements. Now lets tweak a little to make them look like rows and columns of table.

.divStyle {
  width:300px;
  min-height:300px;
  background-color:green;
  border:1px solid orange;
  float:left;
  margin:10px;
}

Save it now and try again. Now you notice that there are four blocks just like table. But you should have noticed by now that the container backgorund has been collapsed to the top of the page and not serving as background for these elements. You must see some thing like this version. Now let us explain you how to avoid this situation. We need a spacer that essentially tells the container div to "Dude Hang ON!"

<div id='container'>
  <div class='divStyle' id='div1'></div>
  <div class='divStyle' id='div2'></div>
  <div class='divStyle' id='div3'></div>
  <div class='divStyle' id='div4'></div>
  <div class='spacer'></div>
</div>
.spacer{
 clear:both;
}

Now we have updated the code with the spacer and style of the space takes care of the floating elements. You can try it out here and see what will be the result of the code. You can see the final result over here

Hope this article helps you and support you when needed. Let me know in case of any issues.

Finding the Words - RegEx Wins!

noreply@blogger.com (Srikanth Rayabhagi) — Thu, 11 Aug 2011 10:35:00 PDT

"Finding the words", this may not be as easy as it sounds when it comes to scalability. Oh yeah! When you are working on small sample, then you might not consider this seriously. If you are reading ahead of this, make sure that you are working on big data sample and agree with the above stmt. In this article, we will look into pain points of the approaches that can be used for finding the words in a page. I will share my experience on working a large set of data and how I explored the possible ways of doing that.

Let us get started with each method and pain points.

Finding using the find!

if(window.find){
    var length = arr.length; 
    for(var i=0;i<length;i++) {
       strfound = self.find(arr[i],false);
       if(strfound) {
         console.log(arr[i]);
       } 
     }
   }

Pros: This method works exactly like Ctrl+F or cmd+F in your browser and is supported by modern browsers and the input for this is the whole page on which the data set will run. The second parameter of the find() is useful for dealing with the case sensitive issues.

Cons: You can only find that is visible to you on the page and not to the source code. It might trouble you in some cases.

The Jquery way!

Jquery is well known for its in built library functions that serve the need exactly. For now we use a selector called :contains() which looks for the text inside the element that has been selected. Below is the code for doing this.

$.each(arr,function(index,value){
    if($('*:contains(' + value + ')').length >0){
         console.log(value);
    }
 });

The problem with this is that this is case-sensitive and we need to make it case-insensitive. After some lookup in the web, I found a method that makes the above function insensitive to the case.


$.expr[':'].icontains = function(obj, index, meta, stack){
return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; }; 
    
  $.each(arr,function(index,value){
    if($('*:icontains(' + value + ')').length >0){
         console.log(value);
    }
  });

Pros: *:contains selector process every element of the page and gives you the exhaustive matches for the set of data you are looking for.

Cons: Selecting the elements and processing through the big set of data takes some good amount of time. So, if you are in hurry, avoid this method.

Optimal RegEx:
Finally, we need to find a perfect balance between the Jquery way and the find method discussed above. So, here is the solution for that.

    
    function myescape(text) {
        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    }
    var text = document.body.innerHTML;
    for(var i=0,ii=arr.length;i<ii;i++) {
         var kwd = myescape(arr[i]);
         var matches = text.match(new RegExp('\\b'+kwd+'\\b','i'));
         if(matches){
           console.log(arr[i]);
         }
       }

This one is fast and most reliable one and it served my purpose for the day. So, if you are looking for some thing similar to this, Let me know if you have any concerns regarding this. Btw, if you are looking for optimizing the code in JS, have a glance at my previous article on Optimizing JS coding practices

GunBros and Guns: A Gamers view

noreply@blogger.com (Srikanth Rayabhagi) — Fri, 15 Jul 2011 22:37:00 PDT

The Bros

If you are a elegant gamer and know of the game called GunBros or have been playing it of a while, you understand the fact that earning credit in games is not as easy as those legendary old games. So, what is this post about? I document my personal experience with an Android/Iphone game called 'Gun Bros' made by glu. Earning the coins in this game is as tough as playing this game without proper weapons. So, this post covers the weapons, their pros and cons making it easier for you to choose the appropriate one. Before I begin let you people know that I am also just a beginner in this one and have been playing just over a couple of weeks. Currently I am in L32 of the game with some solid weapons. So, lets begin.

Categories - Thats what you have:

There are different categories in the weapons as can be seen on the lower left of the screen with a filter button, which on clicking will show you the categories of the weapons like pistol, rifle, shotgun, spread, heavy and special ones. You need to choose the guns according to the situation. In the beginning of the game, the waves will be smaller and the number of enemies would be easier to handle, so you can try out the pistol and rifle at the beginning. Later, you need to kick in through the herd of enemies. So, use your damn mind over here!

Guns - Thats what you need:

Logo of GunBros

I don't waste my time explaining all the hundred weapons out there in the game. I just tell you what's the best and worst of my experience with the guns. Lets see them individually. Lets start with my best.

1. Tetraspear: The best one out there for me till now. It got a wide spread of coverage and the RPM is good enough to tacle the enemies till now. The damage power of this weapon is pretty ordinary but is better than that of other weapons when it comes to the impact of this one. This would be my primary weapon for now.

2. WarBringers: These are dual pistols and are quite effective in dealing the bigger enemies that are pretty slow in motion and you need to hit them continuously. So, this is perfect for those as these are lighter and increase the speed by 12% which is quite a take in good stages.

3. Pulse Rifle: This is one damn shitty thing out there in the shop, which collect a huge amount of 24K coins and isn't worth the money. The description goes "lighting hot projectiles in an expanding wave pattern" which sound pretty awesome and wasted my 24K on this which is just another rifle with much better RPM. I seriously consider this as one damn thing you should be off.

4. Energy Gauntlet: This one is a rapid fire canon and throws the plasma bullets at a rapid pace and good enough to deal with the enemies that keep on coming but not in a pace to cover you around. For the amount of 1.9K this one is good to buy.

5. Super scorcher: Claims to be flame burner and class 4 weapon. This one is pretty good when the enemies are slower but I don't suggest this one because of the impact it produces, when the enemies are surrounding you, use this weapon and I am sure that you will go red and don't understand what the hell this weapon is doing out there.

Armor:

If you are interested and have war bucks just go and get the titanium pants, helmet and trousers, these will give you a boost in your defense on the cost of your speed, which you need not care if you have strong enough weapons in your hand.

PowerUps:

I normally don't use them but if I use them, I use the shock and awesome which is quite destructive and just cost you 350 coins in the game. If you are planning to buy Orbital Strike give up on that and instead buy the shock and awesome twice as the later costs you 700 coins.

Airstrike image from the web

Finally I end this post with a small cheat in gun bros, its not a cheat its just a way through which you can gain the war bucks in the game. When ever you play this game, you see the ads that ask you to download the app and get 2 or 5 war bucks. Just follow the download and delete approach which will give you enough war bucks to buy even powerful weapons than described above. Will update the post once I proceed further.

TabBar and Google Closure - [How To]

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 10 Jul 2011 09:23:00 PDT

When it comes to Jquery vs Google closure, many would say go with Jquery as it is pretty easy to understand and also gives the users a nice documentation for reference. But in my personal view, it would be good to start with Jquery and then migrate to more stronger (in terms of performance) library like closure. You can't deny the fact that Jquery is slower than any of the existing libraries now. So, I suggest you guys to migrate and rely on more stronger if you are looking for big projects.

In this article, you can learn how to use the Google UI components and make tab bar that is similar to the Gmail and other Google components. Before getting started, let me show you what are we trying to achieve today in this article.

DEMO

Preparation of the libraries:

Firstly import the closure library to your local machine by checking out the code from this project page. After this create a test file under the name sample.html and place the file adjacent to the closure-library folder. This will give us easier access to the google library. After this we create our basic template required for accessing the library files.

<html> 
<head> 
  <title>Google Closure TabBar</title> 
  <link rel="stylesheet" href="../closure-library/closure/goog/css/tab.css"> 
  <link rel="stylesheet" href="../closure-library/closure/goog/css/tabbar.css">
  <script src="../closure-library/closure/goog/base.js" type="text/javascript">
  </script>
  <script> 
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.object');
    goog.require('goog.ui.Component.EventType');
    goog.require('goog.ui.RoundedTabRenderer');
    goog.require('goog.ui.Tab');
    goog.require('goog.ui.TabBar');
  </script> 
</head>

Tabs and the structure:

Now that the libraries are ready we need to prepare the tab structure and the content if possible. I am considering three tabs with three different types of content. Here is what we have for now.

<body>
<div id="start" class="goog-tab-bar goog-tab-bar-start">
	<div class="goog-tab goog-tab-selected">Hello</div>
	<div class="goog-tab">Settings</div>
	<div class="goog-tab">More</div>
</div>
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
<div id="start_content" class="goog-tab-content">
	 Use the keyboard or the mouse to switch tabs.
</div>
<div id='hello_tab_content' class='hid'>
	 This is the content for Hello tab.
</div>
<div id='settings_tab_content' class='hid'>
	 Rendering the HTML here.
	<li>Setting1</li>
	<li>Setting2</li>
	<li>Setting3</li>
</div>
</body>

You can see that there are three tabs here ( Hello, Settings, More) and each tab has a class called goog-tab which acquires definition from the style sheets attached earlier. Also, the tab structure will be defined based on the class name of the top div that covers all these tabs. Here you can see that the class being used is 'goog-tab-bar-start' which defines that the tabs will be at the start of the content. Let us add some basic styling to hide the tabs content with the class hid. Here is the style sheet you need to attach.

<style>fieldset {padding:10px;
	border:1px solid #369;
}
.goog-tab-content {
	height:9em;
	margin:0;
	border:1px solid #6b90da;
	border-top:0;
	padding:4px 8px;
	background:#fff;
	overflow:auto;
}
.hid {
	display: none;
}
</style>

After adding the above styling, your file will look as shown below at this point.

The tabs in the left side due to the usage of goog-tab-bar-start class.

You can change the position of tabs by using different class name like goog-tab-bar-top, goog-tab-bar-bottom, goog-tab-bar-end which sends the tabs to top, bottom and end respectively.

Control over the component:

Everything is good but the core-functionality is missing. Yes, the event controls on the element is missing in this case. Now, let us add the event mechanism to the tabbar. Go through this piece of Javascript that adds this.

<script>var topTab = new goog.ui.TabBar();
  topTab.decorate(goog.dom.getElement('start'));
  goog.events.listen(topTab, goog.ui.Component.EventType.SELECT, function(e) {
    var tabSelected = e.target;
    var contentElement = goog.dom.getElement('start_content');
    if (tabSelected.getCaption() == 'Hello') {
      goog.dom.setTextContent(contentElement, 
          goog.dom.getTextContent(goog.dom.getElement('hello_tab_content')));
    } else if (tabSelected.getCaption() == 'Settings') {
      contentElement.innerHTML = 
           goog.dom.getElement('settings_tab_content').innerHTML;
    } else if (tabSelected.getCaption() == 'More') {
      var cont = "This is pre-stored in var and I am just printing.";
      goog.dom.setTextContent(contentElement, cont);
    }
  });
</script>

You can see the if..else.. conditions running to provide the content of the tabs. The hello tab reads the content of the element hello_tab_content while the settings tab renders the html stored in settings_tab_content. You can see that the third tab More is just getting the data from pre-stored variable. Hopefully this worked for you guys. You can learn more about tabBar in the demo of the Google.

Optimize your JS Coding Practices

noreply@blogger.com (Srikanth Rayabhagi) — Sat, 09 Jul 2011 10:17:00 PDT

If you are programming in Javascript and reached a stage where you are looking into the optimizations that can be made into your code, then this post might help you a bit. This post portraits the novice JS coder and shows the differences between the normal and the effective coding practices. So, lets begin.

1. Stop repetitive access of elements - Cache them
Accessing elements again and again in your code can make it slow and you might be wasting your resources too unknowingly. Below is the normal snippet that you might write.

document.getElementById('div1').innerHTML = 
                 document.getElementById('div1').innerHTML + 'blah';

The above snippet access the element twice and may not be a big issue but consider this in case of a loop, you are accessing again and again which is definitely bad for your program. This is how you can optimize your script.

var el = document.getElementById('div1');
el.innerHTML = el.innerHTML + 'blah';

2. Say good bye to traditional looping practice
It is very common that every one starts with a basic for loop as shown below.

for(var i=0;i<10;i++) {
  // Some looping code
}

This is perfectly fine if you are using some static variables or some numbers (in this case number 10). Consider the case where you operate on array involved with big numbers, if you use this kind of looping you will be on the tortoise edition. For eg check the below code.

var arr = ['1','2','3',..........,'10000'];
for( var i=0; i< arr.length; i++) {
  // Some code in the loop
}

This can be optimized by removing the arr.length condition in the loop which is being calculated 10K times in the above loop. So, here is the optimized version of the code and consider this one as replacement of traditional for loop and start adopting this.

var arr = ['1','2','3',..........,'10000'];
for( var i=0, ii = arr.length; i< ii; i++) {
  // Some code in the loop
}

You can check the performance of these two in JSPerf.

3. Do not concatenate instead join them
I know many of us use the default + operator to concatenate the strings in a loop. Experts say that this is not the best of the practices out there.

for (var i = 0; i < 100; i++) {
  str = str + ' ' + arr[i];
}
console.log(str);

Instead of the above code you should start using the push and join properties of the arrays.

for (var i = 0; i < 100; i++) {
  strArr.push(arr[i]);
}
str = strArr.join(' ');
console.log(str);

4. Kick out big inline styles
This one is in specific to Jquery css property which is generally used with .css() of the library. This one can be used directly with the element like shown below.

$('#ele').css({ 'color':'red','width':'100px'});

So, what wrong about this? Inline style are good when the number of styling attributes are minimal (say 4 attributes). If you exceed the limit try adding a class rather than simply adjusting the properties on the fly. Though animations make exception, try adopting the followed coding style.

.dynAdditionClass{
  color:red;
  width:100px;
  //Even more
}
$('#ele').addClass('dynAddtionClass');

These are some of the coding practices that may help you in optimizing the performance. Let me know in case of any suggestions. I will keep this post updated when ever I come across some good practices.

Titbit: more interested in knowing more about these JSPerf test? Follow this link.

Disable MouseEvents on an Element - [How To]

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 26 Jun 2011 08:15:00 PDT

Are you trying to disable your mouse events and make the element opaque to certain extent or make it completely transparent, allowing the mouse to click the elements behind the actual element? Then this small CSS piece lets you do that with a single line. Before getting started, let me give you a scenario where this will be actually effective.

Consider, a case where you create a banner, fixed it position and want that to be an overlay above all the elements. Now you scroll through the content and you may see that this banner is blocking certain elements of the page. This is where exactly, you will find this useful. So, lets get started.

Here I am using this technique over the Image which is analogy to the banner of the above scenario. Firstly fix the position of the image.

.imgClass{
  position:fixed;
  bottom:0px;
  right:0px;
}

The above code lets you keep the banner fixed at the bottom right on the screen. You might have designed considereing that there won't be any case where the data comes below this but still you need to take care of those. Add the code to the css class.

.imgClass{
  position:fixed;
  bottom:0px;
  right:0px;
  opacity:0.4;
  pointer-events:none;
}

Now your image becomes transparent and you can click through an element. Not only that you can disable the pointer events, but you can tweak that with visible portions too. You can learn more about these in this Mozilla Doc. Hope this one is useful to some guys out there!

Handling anomalies of goog.array.removeDuplicates in Google Closure

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 19 Jun 2011 07:23:00 PDT

If you are working on Google Closure and your script involves something related to Array and the elements in it, you probably might have faced few anomalies in the process. Posting this for further reference for myself and it may be useful if you are reading this, because you came here with the same issue.

Okay in to the anomaly I faced. I have a string array that has duplicate elements in it. I need to eliminate the duplicate elements from that. How do I do? Here comes the goog.array.removeDuplicates function of the closure library. So, what happened and what should ideally happen. Consider the code below.

//TestingCode
  var str1 = "This is my place. This is my land";
  strArray = str1.split(" "); //Splitting at spaces.
  console.log(strArray);
  goog.array.removeDuplicates(strArray);
  console.log(strArray);

Ideally what do you expect when you run this code? Yes, you expect the following results of the above code.

["This", "is", "my", "place.","This", "is", "my", "land"]
["This", "is", "my", "place.", "land"]

But this is what it gives us as the output.

["This", "is", "my", "place.", "land"]
["This", "is", "my", "place.", "land"]

Being new to Closure, I am not sure why this is happening and went ahead to the documents of the goog.array.removeDuplicates and found that there is an optional parameter which might be useful.
So, changing the above code to this works as expected.

//TestingCode
  var str1 = "This is my place. This is my land";
  strArray = str1.split(" "); //Splitting at spaces.
  console.log(strArray);
  var strArrayDup = new Array();
  goog.array.removeDuplicates(strArray,strArrayDup);
  console.log(strArrayDup);

Here, the second argument lets you keep the array untouched and stores the output in the new array that is duplicate. So, if you are using this function of the closure, make sure you use this approach or atleast use goog.array.clone which should solve this issue. If you have any clue to why this is happening, post it in the comments!

How to Get GoldBalls in Home Run Battle 3D

noreply@blogger.com (Srikanth Rayabhagi) — Thu, 09 Jun 2011 10:27:00 PDT

If your are interested in Android development, you would have tried few interested games on your Android device. When I was first introduced to Android, I was in the perception that Iphone is way better than Android in the field of gaming. But, to my surprise I could find almost every game of Iphone in Android. In search of a good action game, found two interesting games. Firstly, Gun Bros, a multiplayer action game with multiplayer currently disabled in the free version and second is the Home Run Battle 3D. If you don't know this game already, go get this game at Android market now and if you are familiar with this one. Here is a decent trick through which you can increase the number of gold balls and can get the equipment for you.

Let me warn you before we actually run you through this trick. This is not a cheat or a hack that erases your data or manipulates. This may happen rarely and you need to utilize on such occasion.

1. Connect your device to WiFi.

2. Start your game and proceed till the menu, there you can see an offer popping out asking for a click and you will receive 20 GoldBalls.

3. Click the Ad and press the back button, you will get a msg saying you received 20 gold balls.

4. Repeat the step 3 and you can increase the number of gold balls on the fly.

Though this offer might not come always, it will be useful if you are in desperate need of the Gold balls and you can't wait to get them. Hope this hack of Home Run Battle 3D helps some of you out there!

The Era Where URL Shorteners Rule!

noreply@blogger.com (Srikanth Rayabhagi) — Sat, 04 Jun 2011 01:21:00 PDT

If you are in sync with the technology around, you might be aware of the different kinds of urls floating around you when shared in the social networks. If you notice them, you can actually make out the brand names from them and you can remember them easily. In this article, we will discuss the some URL shorteners and rank them if they are appropriate to their brand name. Let us dive into this and start with the nicely branded design.

3 Starred:
In this group of url shorteners, you can make out the company names right from there and shorteners are efficient without any additions as such. Some techniques used here are removing the silent letters.

-- goo.gl - Yes,removed the letter 'e' but still reads Google.
-- fb.me - Facebook, tried utilizing its cool short form 'fb' for its shortener.
-- lifehac.kr - If you are tech savvy, you would have known it is Lifehacker. 
-- youtu.be - Youtube it is. Also, there is extension to it with very
 short url - y2u.be which further shortens the URL's.
-- pep.si - Pepsi, a well branded shortener.
-- lnkd.in - Linked In, Professional Social Network service.
-- es.pn - ESPN
-- flic.kr - Flickr
-- 4sq.me - FourSquare
-- gr.pn - Groupon
-- itun.es - Itunes
-- tcrn.ch - TechCrunch
-- slidesha.re - SlideShare

2 Starred:

These use the brand names but unnecessary additions to them which make them miss their place in the above slots.

-- yhoo.it - Yahoo
-- binged.it - Bing
-- cnet.co - CNET
-- adobe.ly - Adobe
-- digg.com - Digg
-- mzl.la - Mozilla, though this one is kind of removing some letters,
 it is tough to make out that this one is mozilla, but still tried optimizing it.

No Stars:

These are the URL shorteners that really don't bring out their brand names into the URL shorteners.

-- t.co - Can't guess right? Twitter it is which is really hard to guess.
-- mash.to - Mashable
-- su.pr - StumbleUpon
-- go.me - Go Daddy
-- db.tt - Dropbox
-- qr.ae - Quora

Wait there are some special editions here!

- go.usa.gov - This one has been created by the Government of USA helping the other government sites to have the shortened URLs with porper authentication.

Now you don't believe what I am going to say! Justin Bieber got an URL Shortener too!!

-- beiber.ly -Though this doesn't belong to the official Justin Bieber site.This one is for real and the funniest part is that the developers of this url shorteners are ashamed of themselves!

*This is my personal ranking of the URL Shorteners. Let me know in case of any suggestions and questions below.

Reading Excel data using Python

noreply@blogger.com (Srikanth Rayabhagi) — Sun, 15 May 2011 00:18:00 PDT

Spreadsheets are the best way to organize the abundant data that flow around you. And Python provides you the easiest libraries to operate with such excel files. In this articles, you will come to know how you can read the excel files in the python and run you through a sample example too. So, lets get started.

First things first, you need to install the library xlrd which basically handles the reading mechanism of excel files. You can get the library from this page. Once you download that library, you can cd into that directory and run the following command.

python setup.py install

Now you have the libraries to access the spreadsheets. Now the script to retrieve the data. Below is the script for accessing the data.

#!/usr/bin/python 

import xlrd

myexcel = xlrd.open_workbook('sample.xls')
print "WorkSheets:", myexcel.sheet_by_names()
sheet = myexcel.sheet_by_index(0)

for row_index in range(0,10):
    print sheet.cell(row_index,0).value
    print sheet.cell(row_index,3).value

Now let me run you through the above script. After importing the xlrd library, open_workbook() allows you to open an already created excel file (sample.xls). Next we are printing the sheets names in the excel sheet by the sheet_by_names(). Then we are accessing the first sheet by sheet_by_index(0). Next I am trying to print the first 10 rows of the sheet and restricted to column1 and column4. Basically the function cell(rowindex, colindex).value will return the value of that particular cell.

I will try to show you guys how to create the sheet using python xlwt library in upcoming posts.. Hold there or try finding other guys ! Leave your suggestions and comments below.