Sunday 31 March 2013

How to Prevent People from Stealing your Wi-Fi Network

The data LED of your wireless router is constantly blinking and none of the family members are using the Internet at home. This might indicate that someone outside – probably your neighbors – are surfing the web using your Wireless (Wi-Fi) network.
Are neighbors using your Wi-Fi network?
If you would like to confirm whether an outsider is using your wireless home network, here’s a trick. First enter the router’s IP address in the browser’s address bar – here’s how to find the router’s IP Address. Then open the DHCP Client Table (it is under Status – > Local Network – > DHCP Server for Linksys routers). This shows a list of all devices connected to your wireless network including those of strangers.

How to Prevent Wi-Fi Theft

You can’t block the Wi-Fi signals from reaching your neighbor’s house but there are several things you may do to prevent them from piggybacking on your wireless network. Some of the well-known techniques to secure your Wireless network include:
  1. Setup a password for your Wi-Fi network – Open your router’s admin dashboard and set the wireless security mode to either WPA, WPA2 or WEP (use WPA2-mixed if possible). Now people would have to know the password before they can join your Wi-Fi network.
  2. Use MAC Address Filtering – Your laptop computer, mobile phone, tablet and all other gadgets have a unique MAC address. Go to your router’s dashboard and under the Wireless Mac Filter section, add the MAC addresses of all your known devices so that only whitelisted devices can access your wireless Internet.

Discourage Neighbors from using your Wireless Network

Most people in the neighborhood, who are connecting to your Wi-Fi network without permission, could be doing so unintentionally just because their computer showed them that an open wireless network in available in that area.
wifi network SSID
Mikko Hypponen has a brilliant idea to discourage such people from connecting to your wireless network.
You can rename your wireless network name, also known as SSIDs to something scary – like c:\virus.exe - and your neighbors are less likely to connect to your Wi-Fi network ever again. Other suggestions for scary SSID names include Police Van and Network Service Unavailable.
To change the SSID of your wireless router, log in to your router’s admin console and rename the network under Basic Wireless setting.
[*] Find the MAC Address of your devices
If you type “ipconfig /all” at the command prompt, you can easily find the MAC address of your computer’s network card – just look for the string “Physical Address.” The Wi-Fi Mac address of mobile devices is often listed on their Settings page.
The MAC Addresses are also listed inside the DHCP Client Table of your router.

Thursday 21 March 2013

How to Get RSS Feeds for Twitter

Twitter is permanently retiring the Twitter API v1.0 sometime later this month and, to the end user, what it means is that all the existing Atom and RSS feeds of Twitter will stop working once the old API is turned off. With API v1.1, Twitter has completely switched from XML to JSON format and the other big change is that all requests to the Twitter API must now be authenticated with OAuth.
In simple English, you can no longer subscribe to any of the Twitter streams – be it search results, timelines of users, their favorites or even Twitter Lists – in your RSS Reader.
That said, there is any easy workaround.
Twitter RSS Feed

Twitter RSS Feeds – Demo

What we really need is some sort of a parsing program sitting between Twitter and our RSS Reader. The parser would fetch updates from Twitter at regular intervals and convert them from JSON to RSS which we can then subscribe in our favorite RSS Reader.
This can be easily accomplished with a simple Google Script but before getting your hands dirty, try any of the following RSS feeds. These feeds use the new Twitter API v1.1 and are served from the Google cloud.

How to Create RSS Feeds for Twitter

Step 1: Setup a Dummy Twitter App

Since the Twitter API now requires authentication for all requests, we will have to create a new Twitter App that our Google Script will use to communicate with the Twitter API.
  • Go to dev.twitter.com, sign-in with your Twitter account and create a Twitter app. Give your app any name, description, website (any URL) and put https://spreadsheets.google.com/macros/ in the callback URL field. Click Submit.
  • Once the Twitter app has been created, make a note of your Consumer Key and Consumer Secret Key.

Step 2: Configure your Google Script

  • Go to script.google.com and choose File->Make a Copy to copy that script into your Google Drive. Put the Twitter Consumer key and Secret in line # 24 and 26.
  • Go to File -> Manage Version and choose Save new version.
  • Go to Publish -> Deploy as Web App and choose Anyone, even anonymous under Who has Access. Click the Deploy button.

Step 3: Deploy the Twitter RSS Feed generator

  • Now that you have deployed the Google script, go to Run -> Start and grant the necessary permissions.
  • Choose Run -> Start again and the script will require access to Twitter. Grant access and you’ll get an email with links to some sample RSS feeds for Twitter.
That’s it. You can now generate custom RSS feeds for any Twitter Timeline, List or Search Results by simply change the value of “q” parameter in the feed’s URL. As always, you are free to use, modify and distribute the source code with attribution.

Use any YouTube Video as your Page Background

YouTube Video Background
You are probably using a single static image as the background for your website but it may offer a slightly more richer experience if you could consider placing moving images, like an animation or a self-playing video clip, in the background of your web pages.
The Bing homepage frequently uses video backgrounds, like those penguins jumping out of an ice hole one after another, and so can you on your own website.
There are several approaches here:
  • Bing uses the standard HTML5 <video> tags to serve videos on the homepage. The embedded video has a fixed size and it doesn’t resize itself with the browser.
  • There are ready-to-use jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, as page backgrounds.
  • The other more simple approach, as you can see in this demo, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background.

YouTube Video Backgrounds

To get started, simply paste the code below near the opening <body> tag of your web template. You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background.
  1. <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  2. <iframe frameborder="0" height="100%" width="100%"
  3. src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
  4. </iframe>
  5. </div>
  6.  
  7. // Replace ID with the actual ID of your YouTube video
Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page.
The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript.

Bonus Tip: Embed Background Music with YouTube

Remember the Geocities era when websites would automatically play background music as soon as you opened them much to the embarrassment of office workers. They mostly used raw audio files, like MP3, WAV or even the MIDI format, to embed music but you can even use any of your favorite YouTube tracks for embedding background audio.
The trick is that you embed a regular YouTube video (with autoplay=1) and set the height & width of the video player to zero so it stays invisible. This can be achieved with a single line of code which you can add anywhere on your web page.
  1. <embed height="0" width="0"
  2. src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />

Sunday 17 March 2013

How to Choose an Image Format for Screenshots

The quality of screenshot images and illustrations used on your website can make a difference.You may use the good-old Print Screen key or any of the professional screen capture tools to grab your desktop but the basic requirement remains same – the output image should be sharp and that the file size be well within a reasonable limit.

Now PNG, JPG and GIF are the three most popular image formats for sharing screen captures on the web. Of course there’s another format called BMP but people rarely use that for obvious reasons.
Text & Clipart – If you are capturing text (like a block of source code or Google search pages or a navigation menu), always use GIF or the PNG format – the screenshots are clear and file size remains pretty low.
text-screenshots
Regular Desktop Windows – If you need to screen capture a regular window on your screen, dialog boxes, Windows Explorer, DOS command prompt window, Google Maps or even splash screens – use the PNG format.
The advantage with PNG is that it preserves all the colors and yield a much sharper output when compared with JPG. See this Photoshop splash screen for a comparison between JPEG and PNG quality.
window-screenshot
Videos & Photographs – If you doing a still image screenshot of a video (YouTube Flash video player), Google Earth, video games, Flash animations, desktop wallpapers or photographs (like Flickr) – always go with JPG instead of PNG because the image file size would be smaller without much degradation in the quality.
To give you example, this Wall Strip video on YouTube would take around 92kb when saved in PNG format but that would fall to 20kb if we changed the format from PNG to JPG. Surprisingly, there isn’t any remarkable difference in quality.

Thursday 14 March 2013

Not Just Videos, Upload your Photos to YouTube

How do you share a picture slideshow on YouTube?
Previously, you would use a tool like Windows Movie Maker or Picasa to stitch the image files into a video for uploading to YouTube. That addition step is however not required as you can create a video slideshow from pictures directly inside YouTube. Here’s how:
YouTube Photo Slideshow

Create a Photo Slideshow in YouTube

While you are on the YouTube website, click the Upload button and then choose “Create” under “Photo Slideshow.” Here, switch to the Upload Photos section and drag-drop all the pictures that you would like to be included in your slideshow.
Once the photos are in timeline editor (see screenshot), you can drag them around to rearrange their position in the video. On the next screen, you have an option to change the default duration of individual slides and also the transition effect between pictures.
You can add background music to your slideshow though YouTube does not offer an option to upload your own audio files for the slideshow.
You can set the privacy to Unlisted if you would not like the video to appear in YouTube search. Also, YouTube might include ads in your video if you have attached a background track to your slideshow and the revenue in that case is shared with the music creator.

How to Load Social Widgets Conditionally to Improve your Site’s Performance

Social Sharing is now tightly integrated into all mobile OS platforms. That means if someone is viewing a web page on an Android phone, or inside the mobile Safari browser of an iPhone, they can share that web page on Twitter and Facebook using the system-wide sharing menu without having to rely on bookmarklets or those tiny social sharing widgets.
Facebook, Twitter Integration with iOS
These “tweet” and “like” buttons add several extra kilobytes to your web pages and if mobile users are less likely to use them, you may as well consider removing the social buttons completely when your website is accessed from a mobile phone. This reduces clutter and also improves the page speed score which is now a factor in Google search rankings.

Remove the Social Buttons on Mobile Devices

If you are sort-of convinced that social sharing widgets are less useful on your mobile site, here’s what you can do to prevent them from loading on the small screen. Remember, we aren’t just hiding the buttons but removing them completely so the associated JavaScript and CSS files won’t download on the user’s mobile device.
For a quick demo, open social-widgets.html in your desktop browser and then on a mobile device. The desktop view will load the social widgets but not the mobile device.

How to Load Social Widgets Conditionally

The technique is simple. We calculate the width of the user’s screen /browser and if the width exceeds a particular value (say 480 pixels), we load the associated social widgets.
To implement conditional loading on your blog /website, first add all the necessary social widgets to your blog using the usual procedure. For instance, you can visit facebook.com to generate code for the Like button while dev.twitter.com will provides codes the Tweet and Follow widgets of Twitter.
Remove the JavaScript from these generated codes – everything that’s between the <script> tags – and add everything else to your website template. Then copy-paste the following snippet before the closing </body> tag of your website template.
  1. <script type="text/javascript">
  2. (function(doc, script, minimum) {
  3.  
  4. // Calculate the width of the user's screen
  5. var browserWidth = window.innerWidth
  6. || doc.documentElement.clientWidth
  7. || doc.body.clientWidth;
  8.  
  9. // Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
  10. if (browserWidth > minimum) {
  11.  
  12. var js, frag = doc.createDocumentFragment(),
  13. // Credit : Stoyan Stefanov of phpied.com
  14. js_queue = function(url, id) {
  15. if ( ! doc.getElementById(id) ) {
  16. js = doc.createElement(script);
  17. js.src = url; js.id = id;
  18. frag.appendChild(js);
  19. }
  20. };
  21. // These are the most common social widgets, remove the ones you don't need
  22. js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
  23. js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
  24. js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
  25. js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
  26. js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");
  27.  
  28. var fjs = doc.getElementsByTagName(script)[0];
  29. fjs.parentNode.insertBefore(frag, fjs);
  30. }
  31.  
  32. // Set the minimum width here (default is 480 pixels)
  33. } ( document, 'script', 480 ) );
  34.  
  35. </script>
The above JavaScript code asynchronously loads all the popular social widgets – Twitter, Facebook, LinkedIn, Google+ and Pinterest – but you may remove the js_queue calls for widgets that you do not plan to use on your website. Save the changes and you are done.
I have implemented a variation of the above code on my site as well. There’s a Facebook Like box in the right sidebar but it won’t load if you open this site on a mobile device.

Tuesday 12 March 2013

How to Send Out of Office Replies in Twitter

Twitter, for many, has become a preferred medium of communication in recent years. Your email message may never get read or, in the worst case, may get caught in the Spam folder but tweets are less likely to suffer from such issues.
When you are travelling or take a “disconnected” vacation, with limited or no access to the Internet, you create an “out of office” reply in your email program to let people know that you won’t be able to respond to them right away. How about doing something similar for people who are trying to reach you through Twitter?
Twitter Auto-Reply

What will the Twitter Auto-Responder do

Unlike your email program, Twitter offers no easy way for you to setup out of office auto-replies but we can easily and quickly add such a feature to our Twitter account(s) with the help of a simple Google Script.
You specify the start date and the end date when the auto-responder should be active and any tweets sent to you during this period will automatically get a reply from your Twitter account saying you are out of office. The replies are sent once so if a person sends you two or more tweets during your vacation period, they will get only one out-of-office auto-reply.

How to Setup Out of Office Replies in Twitter

Step A: Setup a Twitter App

  1. Go to dev.twitter.com and sign-in with your existing Twitter account. Create a new Twitter app , add a description, website (any URL) and callback URL (https://spreadsheets.google.com/macros/).
  2. Once the Twitter app has been created, click the Settings tab and set Read and Write as the Application Type. Click Update to save your changes.
  3. Switch to the OAuth tool tab and make note of the Consumer Key and Consumer Secret.

Step B: Setup the Auto-responder Script

  1. Open script.google.com and choose File -> Make a copy to duplicate the auto-responder script into your Google Drive.
  2. Enter the start and end dates of your vacation, the Twitter app keys (from the previous step), and your Twitter handle.
  3. Go to Run -> Start to initialize the auto-responder. Say Yes if the script requires you to authorize access to certain Google Script services.
  4. Choose Run -> Start and it will show an “Authorization Required” dialog. Allow the script to access your Twitter account and you are done.
The script will invoke itself on the start date specified by you and will respond to all incoming tweets until the end date. It will then uninstall itself automatically. As always, you are free to use, modify and distribute the source code with attribution.
When you are taking another vacation, just open the auto-responder script already present in your Google Drive, change the Start and End dates and choose Run->Start to setup the autoresponder again.

Saturday 9 March 2013

How to Write a Twitter Bot in 5 Minutes

Meet @DearAssistant, a Twitter bot that is like a mini version of Siri. You can tweet your questions in plan English and the bot will reply with an answer.
The Twitter bot is internally using Wolfram Alpha so there’s a whole range of questions that it can answer. Here are some questions that people have asked @DearAssistant so far:
  • How many calories are in Diet Coke? (link)
  • When was Mahatama Gandhi born? (link)
  • What is the distance between city A and city B (link)
  • Who directed the film M (link)
  • What is the price of Kindle Paperwhite.
Twitter Bot
You can also ask the bot for word meanings, weather conditions, language translation, to convert between time zones, date calculations (how many days until Christmas) and more.

Writing a Twitter Bot – The Basic Ingredients

Writing a Twitter bot is surprisingly simple and you can get one up and running in 5 minutes. It helps if you know little bit of coding (simple JavaScript) but that’s certainly not a requirement for writing a basic Twitter bot.
A bot is essentially a program that is always running in the background and whenever it encounters a command (tweets in this), it processes it (based on the text of the tweeet) and sends a reply to the tweeter in another tweet.
Earlier, you would need a web server to run the bot while the bot itself would be written in languages like PHP, Perl or Python. That’s complicated so we will use Google Scripts to write the Twitter bot and host it on our Google Drive.

How to Write a Twitter Bot – Step by Step

Step A: Setup a Twitter App

  1. Create a new account at Twitter that will become the bot. Then go to dev.twitter.com, sign-in with your new Twitter account and create a Twitter app. Give your app a name, description, website (any URL) and callback URL (https://spreadsheets.google.com/macros/). Agree to the terms, fill in the CAPTCHA and submit the form to create your first Twitter application.
  2. Once the Twitter app has been created, click the Settings tab and choose Read and Write under Application Type. This is important since we want the bot to read tweets as well as post tweets. Click the Update button to save your changes.
  3. Switch to the OAuth tool tab and make note of the Consumer Key and Consumer Secret. We will need these later in our Google Apps Script.

Step B: Create a Wolfram Alpha App

  1. While the Twitter app will monitor and respond to tweets, the Wolfram App will be used to determine answers that users will be posing to your Twitter bot.
  2. Go to developer.wolfram.com, create an account and then choose “Get an App ID” to create your new app.
  3. We will need this App ID in the Google Script. Remember that your free Wolfram Alpha App can only be used for a non-commercial purpose.

Step C: Host the Twitter bot on Google Drive

  1. While you are signed-in to your Gmail account, go to script.google.com and then choose File -> Make a copy to duplicate the Twitter bot into your Google Drive.
  2. Edit the values of TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, TWITTER_HANDLE (your new Twitter account) and WOLFRAM_API_ID – you know them all from the previous steps.
  3. Go to Run -> Start to initialize the Twitter bot. Say yes if the script requires you to authorize access to certain Google Script services.
  4. Go to Run -> Start to actually run the Twitter bot. It will show an “Authorization Required” dialog and will redirect you to Twitter where you can grant the script access to your Twitter account.
That’s it. Close Google Scripts and your Twitter bot is now up and running, ready to take commands. As always, you are free to use, modify and distribute the source code with attribution.

Sunday 3 March 2013

Facebook Like Box Becomes Faster and Lighter

If you have the Facebook Like box embedded in your website, the good news is that the plugin should have little impact on the performance, or page speed, of your pages.
Stoyan Stefanov of the Facebook engineering team shares that the updated Like box is 2-4x faster and is considerably lighter than the previous version. The Facebook Like plugin now loads in 0.5 seconds, as opposed to 2.3 seconds and while the previous version was 245KB in size, it now weighs a mere 46KB.
Facebook Like Box - Old
Earlier, Facebook Like box made 24 web requests and would load in 2.4 seconds
Facebook improved the performance of the plugin by switching to inline CSS styles (as opposed to using external stylesheets) and by squeezing multiple scripts into one – the plugin thus has to make fewer web requests.
Facebook Like Box - New
Facebook Like box now loads in .7 seconds and makes just 13 requests (for photos)
How do you get the faster Facebook Like box for your website? First, does the Facebook embed code on your website look anything like this?
XFBML version (old)
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:fan stream="false" name="PAGE_NAME"></fb:fan>
IFRAME version (old):
https://www.facebook.com/plugins/fan.php?connections=10&name=PAGE_NAME
If your embed codes are different, you are covered as Facebook will automatically serve you the improved Like box. Else, you are using the older /deprecated version of the Facebook Like box  so head over to developers.facebook.com and generate the new embed codes.

How to Fake your Location in Google Chrome

Sometimes websites may request access to your location so that they can serve more relevant information. For instance, if you are looking for a gas station, a maps website may use your current geographic location to display stations that are near your place.
Share Location in Chrome
Google Chrome will only share your location if you click Allow.

How Browsers Determine your Location

Earlier, websites would use the IP address to determine your approximate location but with the HTML5 Geolocation API, web browsers can more accurately detect your location using data from GPS, Wi-Fi networks, cell towers, Bluetooth and the computer’s IP address. If you agree to share your location, the browser will send these details to Google Location Services for estimating your location which is then shared with the requesting website.
To give you an example, open the Where am I app in your browser, allow it to use your location information and the app should be able to display your latitude and longitude coordinates (it is more accurate on mobile browsers as those devices have built-in GPS).

Fake your Geolocation Coordinates

When you happen to visit a location-aware website, the browser will always ask for a confirmation before sharing your location. If you aren’t keen to share your geographic coordinates, you can always deny that request or, if you are using Google Chrome, you can even send a fake location to the website.
Here’s how. Press F12 (or Ctrl + Shift + I) in Google Chrome to open the Developer Tools. Click the Settings icon in the lower right corner and switch to the Overrides tab (see the next screenshot). Now you can specify the exact latitude and longitude coordinates* that you want to share with that website.
[*] You can use the Postal Address finder to know the latitude and location of a place.Make sure that the “Override Geolocation” setting is checked and then refresh the page to send that fake location. And this is obviously a useful feature for web developers who would like to test their geolocation-enabled apps from the same location.