Wednesday, October 27, 2010

[How to] Show QR codes for links in your web page

QR (Quick Response) code is a two-dimensional bar code consists of black rectangular modules arranged in a square pattern on white background. QR codes can digitally store more data than the standard barcodes. QR code was used for the first time in Japan in 1994 but it became popular only in the last 3-4 years. Thanks to the iPhones and Androids. Almost all the smartphones have QR code readers and the reading of codes takes just few seconds. We may soon see QR Codes storing addresses and URLs appearing in magazines, on signs, buses, business cards, etc. QR codes can be used on your web pages to improve the mobile experience of your users. Making each link on your page available as a QR code will allow the users to quickly navigate to that link on their mobiles.

QR Code QR Code used on Varun's ScratchPad

Steps to be followed to add QR code for the links on your web page:

1. Include the jQuery library (if you have not included already) and jQuery.cluetip plug-in from within the HTML <head> section. Download it from here. [JavaScript experts may want to try this asynchronously loading JavaScripts. Link.]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>

2. Copy the following HTML snippet and paste it just before closing the </body> tag. The snippet uses Google charts for generating the QR code and the jQuery plug-in cluetip is used for showing the bubble.

<div id="divQR" style="background-color: #D9E6F7; border:4px solid #C1D9FF; text-align:center; display:none;
font-family:calibri;-moz-border-radius: 5px;-webkit-border-radius: 5px;width:200px;height:380px;padding:-5px;">
<img id="imgQR" src="" width="200" height="200" alt="" />
<p align="justify" style="padding-left:15px;padding-right:15px">QR code will be shown for each link on
hovering over it. Scan the QR code above using the Barcode Scanner from your smart phone, and the link
will be instantly accessible on your phone.
</p>
</div>

<script type="text/javascript">
$.fn.cluetip.defaults.dropShadow = false;
$.fn.cluetip.defaults.onActivate = function(e) {
if (e.length > 0) {
var anchor = e.context;
var link = anchor.href;
if (link.indexOf("javascript:") == 0)
return false;

$("#imgQR").attr("src", "http://chart.apis.google.com/chart?chf=a,s,000000&chs=200x200&chld=|2&cht=qr&chl=" + encodeURIComponent(link));
$("#imgQR").attr("alt", anchor.innerText);
return true;
} else
return false;
};
$("a").attr("rel", "#divQR");
$("a.qrLink").cluetip({local: true, hideLocal: true, showTitle: false, clickThrough: true});
</script>

3. Set the attribute class to “qrLink” for all the hyperlinks that you want to show as QR codes.

<a class="qrLink" href="http://blog.varunkumar.me" >Varun's ScratchPad</a>

4. Done. Hover over the hyperlinks to see their QR codes. Scan the codes from your mobile and navigate to the links quickly from your mobile.

Generate QR Code for hyperlinks on all the web pages

If you want to generate QR code for hyperlinks on all the web pages, use this GreaseMonkey script. It works only on Firefox as of now. Download and install GreaseMonkey add-on. Point your browser to this link. Now, the QR code will be shown on hovering over any of the hyperlinks on any web page.

-- Varun

Muffler Mobiles and the Muffler Shops that Made Them

Meineke Muffler Mobile Art CarI run into this muffler art car on Jalopnik last night and where there is one muffler car there is another.This "Muffler mobile" was created by Joe, Scott, and Steve Minghelli, family owners of two Meineke muffler shops in Southern New Jersey. They started out by creating art from used mufflers laying around like muffler men, muffler dogs, muffler waffle irons and

Sunday, October 24, 2010

Google App Scripts for Google Sites

If you are using Google Sites for your Public or Intranet sites, here is an awesome news for you. Google has enabled Google App Scripts for Google Sites. Google App Scripts, which is 1.5 years young can be used to automate business processes that involve multiple applications. This will be very handy if you are running a small business and want to setup the infrastructure needed for your company. You can setup multi-step workflows using the Google App scripts.

Google’s Cloud language

Google App Script, which was originally launched to automate tasks (macros) on Google Docs Spreadsheet, is a server side JavaScript that executes on the Google’s Cloud. Almost all the Google’s services can be accessed using Google App Scripts. Though Google App Scripts are not widely used yet, they have got so much of potential on the Cloud. Some of the popular services of Google App Script includes Calendar, Contacts, Mail, DocsList, Spreadsheet, URLFetch, etc. Google is also experimenting UI services using which you can create applications which interact with the users via rich graphical interfaces. Another interesting addition to the list of services is the JDBC service using which you can write JDBC queries to pull data from any of your data servers. (Supports only MySQL for now). Read more about Google App Scripts here.

Script editor showing a sample functionGoogle App Script for Google Sites

To create a new script, go to More Actions > Manage Site > App Scripts. Click on the Launch Editor option to open the editor where in you can write your scripts. Launch editor will compile and check your script for errors. Once your script is saved successfully, you can add links from your page to trigger these functions. App scripts serve as a perfect back end for all your site operations.

From Google Site, you can add links to trigger the App Script functions

Follow Google App Scripts blog to keep yourself updated on the happenings in the space. If you are new to Google App Scripts, check out this tutorial. I have created a working copy of the same on my sample site.

-- Varun

Friday, October 22, 2010

Google Indic Music Search

Google has made the search more musical when it announced Google Music Search about an year back. But, then, the service was available only in the U.S. Today, Google India has launched a new labs product “Indic Music Search”. It allows you to search for music by artists, albums or songs. Though the description of the Indic Music Search says that only Hindi songs are available, few other regional languages can also be found using this search.

Google MusicGoogle does not host the music files for you. It has partnered with in.com, saavn and saregama to stream the contents to the users. If you are an existing user of any of these services, probably, nothing new for you here. Flash player is needed to play the music straight from your browser.

(Via @Peeyush)

-- Varun

Thursday, October 21, 2010

Google India Engineering Tech Talk series

Google’s Engineering Productivity team is organizing a special event with talks by Google Engineers on October 27th at Google offices in Hyderabad and Bangalore. The theme for the talks will be Engineering at Google. The talks will focus on different phases (Design / Development / Coding / Testing and Release) of Engineering at Google and how the Engineering Productivity team executes on its mission of accelerating Google Engineering. Time: Wednesday, 27th Oct, 4:30 PM. Limited seats. Register here.

Google India

Talk 1

Web Testing at Google – Infrastructure for the world’s most demanding web developers – by Ted Mao. This talk will focus on the infrastructure Google has built to support web testing and how this infrastructure evolved as the web testing needs increased in scale and complexity.

Talk 2

Leveraging feedback and analysis to improve development process – by Brad Green. Brad will demonstrate two Google products Google Feedback and RoundUp using which they collect the feedback from hundreds of millions of users and identity the focus area after outages.

Talk 3

Tools for Continuous Integration at Global Scale – by Nathan York. This talk covers the key insights and technical design elements that enable us to scale the word’s largest continuously integrated code base to thousands of engineers worldwide.

Talk 4

Testing at Google – Dr. James Whittaker. James will focus on how the testing is done at Google to ensure the quality of the products.

Venue:

  • Google India Pvt Ltd, DivyaShree Omega, Hitech City, Hyderabad.
  • Google India Pvt Ltd, RMZ Infinity – Tower E, Old Madras Road, Bangalore.

More details and registration can be found here. Google's Engineering Productivity team is also hosting an invite-only event called GTAC in Hyderabad on Oct 28th and 29th.

-- Varun

Tuesday, October 19, 2010

Cowabunga Dude makes The Ninja Turtle Van

Here is a restored 1994 Dodge Caravan and made to look like the The Ninja Turtle Van. The Ninja Turtles had a vw but this guy choose a Caravan because it was easy to find parts easy to work on, comfortable for him to drive.The Turtles played a huge role in his childhood, growing up with all his cousins, playing Ninja Turtles while his Uncle Harry (Uncle Shredder) chased them around doing an exact

Monday, October 18, 2010

Clown car used to transport illegal immigrant clowns

According to JestReport.com the latest  immigration threat to the border of Arizona this Pontiac Bonneville clown art car was pulled over transporting illegal immigrants dressed as clowns. They reported that as many as 100 illegals were seeing exiting this car when pulled over by border patrol in Arizona. Its a serious situation and steps were taken to combat this influx of illegal clowns by

Wednesday, October 13, 2010

24oz Sunkist Impala

This was just sent in by Roland a 03 Chevy Impala, candy red sunkist, lambo front doors with suicide back doors, 5th wheel, 7 screens.., Beast Mode car club, Dallas Texas

Monday, October 11, 2010

Blog Action Day 2010!

Blog Action Day is an annual event held every October 15 that unites the world’s bloggers in posting about the same issue on the same day with the aim of sparking a global discussion and driving collective action. The topic for this year 2010 will be Water. The idea is to spread the awareness about making clean water available for all. Check out some of the interesting posts on this topic here.

In 2009, the topic of discussion was ‘Climate change’ and in 2008, it was ‘Poverty

-- Varun

Thursday, October 7, 2010

TEDxChennai, 2010

Series of short talks by achievers from various fields to inspire you with Ideas worth Spreading. After the tremendous success of the first edition in 2009, TEDxChennai 2010 is going to be a bigger and better one. An event to celebrate The Passion To ‘Do!’  Check out the list of speakers here. Also, a workshop about organizing TEDx events has been arranged on 09-10-10.

TEDxChennai 10-10-10 Event Details

TEDx Workshop

Date: 09-10-10

Time: 02:00 PM – 05:00 PM

Venue: IC & SR auditorium, IIT Madras, Chennai

TEDx Event

Date: 10-10-10

Time: 08:00 AM – 06:00 PM

Venue: IC & SR auditorium, IIT Madras, Chennai

What are you waiting for? Register yourself and get a chance to network with some wonderful people. For registrations, please visit this page. For more details, visit the official website of TEDxChennai. I will be live blogging from the event. Follow my blog or follow me (@varunkumar) on  Twitter. You can also follow the official hash tag #TEDxChennai

-- Varun

Sunday, October 3, 2010

[How to] Filter out updates on Facebook News feed

Facebook is a social networking site as opposed to Twitter which to me is a broadcasting medium. But, Facebook has been widely used for broadcasting messages as well. Similar to the Twitter timeline, your Facebook news feed often gets flooded with updates carrying similar message. Facebook handles these cases to a greater extent than Twitter. Facebook tries to group messages based on the sender, application and other parameters (like events). If a person is spamming your news feed, you can hide the updates from that person. You can also hide the updates from a particular application. The only missing feature here is the ability to hide updates on a particular topic. That is where my script will be useful. It is an extension to the script written for Twitter.

Facebook menu showing 'Filters'. Two updates have been filtered out.Filters option on FacebookFeatures

  • Filter out topics. Filter out updates containing a set of words from your news feed (works on profile pages also). You can enter multiple words separated by a comma. This will prevent your news feed getting flooded with the similar updates.
  • Filtered count Indicator. The filtered updates are not gone for ever. You can clear the filters to view them. The number of updates filtered out will be shown intuitively on the ‘Filters’ menu itself.
  • Remember your settings. The script has the ability to remember your filter settings on the browser and will reload the same when you sign in again. Also, the script applies the filters on new incoming updates as well (with a max time lag of 15 secs).
  • Hide the ‘Likes’ from friends. (v 1.2) If you don’t care about what your friends are liking on Facebook or on other sites, you can use this feature to hide the ‘Likes’ on your news feed.
  • Hide the friend connection updates. (v 1.2) Whenever a friend of yours is connected to another person, Facebook will notify you about the new connection on your news feed. If you are not interested in knowing who has be-friended whom, you can disable the friend connection notification using this feature.
  • Hide the attachments. (v 1.2) Enabling this option will hide all the attachments on your news feed. This includes shared videos, photos, links, etc.
  • Hide Facebook Places. (v 1.3) Enabling this option will hide the check-ins from your friends.
  • Hide Facebook Questions. (v 1.3)
  • Hide Facebook Ticker Section. (v 1.4). Facebook added a new section called “Ticker” which shows all the activities of your friends. It pushes the information that are already available on your friends’ profile. This section adds too much of noise to your news feed. Use this option to fix the section.
  • Show only the filtered posts. (v 1.4) Enabling this option will show the posts which match the search text specified. This will be handy if you want to know what friends say on a particular topic. Thanks to Raghu for the idea.
  • Hide Unread Count. (v 1.5). Facebook added a new feature called “Smart Lists” and showed the lists on the news feeds page. The unread count of the lists / groups clutters the UI. Use this option to hide the unread count.

How to install?

Compatible Browsers: Firefox 3+, Chrome 4+

Firefox 3+

  • Install the GreaseMonkey add-on for Firefox from here and restart the browser.
  • Get the script by pointing your browser to this.
  • GreaseMonkey Installation dialog box will appear. Please click on the “Install” button.
  • You are all set to use the script. Refresh the Facebook homepage. ‘Filters’ menu will appear next to ‘Account’ menu.

Chrome 4+

  • Chrome has native support for GreaseMonkey scripts. No additional extensions are needed to use the script.
  • Get the script by pointing your browser to this.
  • You will be prompted with a security alert. Please click on the ‘Continue’ button.
  • The script will be installed as an extension. Refresh the Facebook homepage to see the ‘Filters’ menu.

The script might contain few minor UI glitches. Please let me know if you find any. If you feel some other feature is missing in Facebook, please reach out to me. I shall try to extend this script. If you are looking for a similar solution for Twitter, try this script

Update: A new version (v 1.2) is available with three new features – Hide the ‘Likes’ from friends, Hide the friend connection updates, Hide the attachments. You can download the script from here.

Update-1: A new version (v 1.3) is available with two new features – Hide updates from Facebook Places, Hide Facebook Questions. You can download the script from here.

Update-2: Version 1.4 is just released to Userscripts.org. Features included: Hide Facebook Ticker, Show only the filtered posts. You can download the script from here.

Update-3: Version 1.5 is just released to Userscripts.org. Features included: Fix for new Facebook UI, Hide unread count of Groups / Lists updates. You can download the script from here.

Userscripts.org seems to go down frequently these days. Here is an alternate link to the script. Source code is available here.

-- Varun

[How to] Filter out tweets on New Twitter interface

Twitter has been rolling out the preview version of its new interface and I got the chance to try it out just few days back. One of the basic functionalities which is missing even in the new interface is the ability to filter out tweets. Twitter is a nice medium for catching up on the latest happenings. But, at times, you might get bombarded with tweets (all of which carrying the  same message) about the same topic from different people and might have to miss some important ones. Filtering is a must-to-have feature in an application like Twitter but Twitter is yet to realize the need for it. However, this feature is already available on some of the popular Twitter clients like Tweetdeck. I have written a simple GreaseMonkey script to add this functionality to New Twitter.

Twitter menu showing 'Filters'. 22 tweets have been filtered out.

Filter options

Filters menu on TwitterFeatures

  • Filter out a person. If a person on your timeline is on a spamming spree, you can temporarily unfollow him / her using this feature. Typical example for this could be a person attending a conference / tech talk and live tweeting from there. His / her tweets might not be applicable outside the conference room. You can use this feature to temporarily unfollow the person.
  • Filter out keywords. Filter out tweets containing a set of words. You can enter multiple words separated by a comma. This will prevent your timeline getting flooded with the trending topics.
  • Remove hyperlinks. In the past few weeks alone, there were two different cases of XSS attack on Twitter. This feature will safeguard you from these sort of attacks to some extent by removing all the external links from your timeline.
  • Filtered count Indicator. The filtered tweets are not gone for ever. You can clear the filters to view them. The number of tweets filtered out will be shown intuitively on the ‘Filters’ menu itself.
  • Remember your settings. The script has the ability to remember your filter settings on the browser and will reload the same when you sign in again. Also, the script applies the filters on new incoming tweets as well (with a max time lag of 15 secs).

How to install?

Compatible Browsers: Firefox 3+, Chrome 4+

Firefox 3+

  • Install the GreaseMonkey add-on for Firefox from here and restart the browser.
  • Get the script by pointing your browser to this.
  • GreaseMonkey Installation dialog box will appear. Please click on the “Install” button.
  • You are all set to use the script. Refresh the twitter homepage. ‘Filters’ menu will appear next to ‘Messages’ menu.

Chrome 4+

  • Chrome has native support for GreaseMonkey scripts. No additional extensions are needed to use the script.
  • Get the script by pointing your browser to this.
  • You will be prompted with a security alert. Please click on the ‘Continue’ button.
  • The script will be installed as an extension. Refresh the twitter homepage to see the ‘Filters’ menu.

The script might contain few minor UI glitches. Please let me know if you find any. If you feel some other feature is missing in Twitter, please reach out to me. I shall try to extend this script. If you are still on old Twitter and looking forward to one such script, try this script. If you are looking for a similar script for Facebook updates, try this script.

Userscripts.org seems to go down frequently these days. Here is an alternate link to the script. Source code is available here

-- Varun

google-site-verification: googlea4d68ed16ed2eea6.html