Motyar's Blog

Simple Solution of a Big Problem : Blogger Redirect Hack

noreply@blogger.com (Motyar D) — Thu, 02 Feb 2012 03:39:00 +0000

Google changed a lot of things along with their policies. Google started redirecting blogger blogs to country-specific URL. Everyone was wondering and worrying about the bad effect this thing can cause in the future.

Problem solved, you can now redirect all the users to .com

I applies a simple Hack using JavaScript and its done. At least you can let users to share the .com domain. Here it is -


if ((window.location.href.toString().indexOf('.com/'))=='-1') {
  window.location.href =

  window.location.href.toString().replace('.blogspot.in/','.blogspot.com/ncr/');
}

Demo

Ok lets take a test drive if it works, Try to open my domain with .in like
http://motyar.blogspot.in/2012/01/firefly-effect-on-site-using-jquery.html
or
http://motyar.blogspot.in/
And you will be redirected to the .com domain.

What about other countries?

Above described code is just for India, You can write for others or can for more than one. like:-


if ((window.location.href.toString().indexOf('.com/'))=='-1') {
  window.location.href =

 window.location.href.toString().replace('.blogspot.com.au/','.blogspot.com/ncr/');
}

or for both India and Australia :-


if ((window.location.href.toString().indexOf('.com/'))=='-1') {
  window.location.href = window.location.href =

  window.location.href.toString().replace('.blogspot.in/','.blogspot.com/ncr/').replace('.blogspot.com.au/','.blogspot.com/ncr/');
}

What more you can do?

Replace all the interlinks to *.blogspot.com/ncr (You can do this manually or with JS too)
Link your blog to *.blogspot.com/ncr instead of *.blogspot.com in comments, forums and your public / social profiles.

That's all I know, Feel free to say your thought in comments.
Or reply me on twitter, I am @motyar

Colored mouse trails with jQuery Animate

noreply@blogger.com (Motyar D) — Mon, 30 Jan 2012 13:46:00 +0000

I want to share one more jQuery animation with you. I named it Colored mouse trails.
Feel free to edit code and use it. I would love to see your creative work, so please share in comments if you make something amazing.

Simple Chat Application with HTML5 Server-Sent Events

noreply@blogger.com (Motyar D) — Wed, 25 Jan 2012 17:29:00 +0000

Lets talk about HTML5's one of fancy feature Server-Sent Events that can be defined as

"API for opening an HTTP connection for receiving push notifications from a server".

Why Server-Sent Events when there is WebSockets?

WebSockets is richer protocol to perform bi-directional, full-duplex communication. WebSockets are useful where we need two-way, real-time updates in both directions; and can be used in Games, chat app.

When we simply need updates from some server action, like updating news, stocks or feeds. Server-Sent Events are your friend. SSEs have special features like automatic reconnection, event IDs, and the ability to send events. And doesn't require full-duplex connections and new Web Socket servers to handle the protocol.

Idea

In this post we will talk about the basic parts, implementation and using it to write a simple chat application. We ll be using PHP on server side.

JavaScript API


var source = new EventSource('/news/');
    source.onmessage = function(e) {
        alert('We got new news:'+e.data);
    }

Server

Server must send plaintext response, served with a 'Content-Type: text/event-stream' see this example using PHP for more info.

Simple chat application

I wrote a simple chat application using this technique. You can see a demo here.
TIP: You can create new chat room changing the url like http://motyar.info/mchat/room1or
http://motyar.info/mchat/anything

Code

Code is hosted on github. Feel free to fork. https://github.com/motyar/mchat

Resources

Stream Updates with Server-Sent Events on HTMLROCKS
Server-Sent Events by Remy Sharp on Html5doctor

Please feel free to share your ideas about it, here in comments or on Hacker News

Share the post if you enjoyed reading and think its useful.

Amazon announced DynamoDB : NoSQL database service

noreply@blogger.com (Motyar D) — Thu, 19 Jan 2012 12:33:00 +0000

Amazon announced NoSQL database service named DynamoDB, you can try it under your AWS Management Console.
Here’s a video:

Firefly effect on site using jQuery fireFly plugin

noreply@blogger.com (Motyar D) — Wed, 18 Jan 2012 03:24:00 +0000

I just posted a guest post on Nikos Tsaganos's blog backslash about one of my jQuery plugin fireFly.
His blog is sharing code and thoughts on web development. Its pretty new, fresh looking and well designed.
Here is the post :-

Add a firefly effect to your site with jQuery fireFly

Google's Currency Converter and JSON API

noreply@blogger.com (Motyar D) — Fri, 16 Dec 2011 08:20:00 +0000

There are a lot of online Currency Converter Calculators on web. I want to share one more with you.
You can believe it; because its Google's Currency Converter Calculator. It can be used to see changes live for currency and foreign exchange rates with this free currency converter.

Here is the Google's Currency Converter

Open JSON API
Good news is here - Google have a secrete API for Currency Conversion. Its a simple open API you can use for all type of foreign currencies.

How to use it?
If you want currency converter £ to dollars, use it like this -
http://www.google.com/ig/calculator?hl=en&q=1GBP=?USD

If you want to calculate currency converter $ to £ -
http://www.google.com/ig/calculator?hl=en&q=1USD=?GBP

You can change value of input currency, for example you want to know the value for $100 in India Rupees
http://www.google.com/ig/calculator?hl=en&q=100USD=?INR

Hope you enjoyed the post, I am on twitter @motyar.

Displaying JSON values with JavaScript : Basics of JSON Template with JavaScript

noreply@blogger.com (Motyar D) — Thu, 15 Dec 2011 09:15:00 +0000

Today morning I came through the knockout.js. I liked the idea of JSON Templating. You can read more about JSON Template in this post - "Introducing JSON Template".

I love JSON, because its light weighted and you can parse it easily any programming language. I wrote a simple prototype to display JSON data in HTML using JavaScript Template. I hope it will help you to understand the mechanism.

I took an example of Facebook graph API to show user information. In this template you can change the data attribute of the element to show the key value from JSON object returned from API.

Here is the code

You can see the working demo here.
I am on twitter @motyar.

Sunset and Sunrise Time using PHP

noreply@blogger.com (Motyar D) — Wed, 14 Dec 2011 07:26:00 +0000

PHP5 have few very interesting new functions, Using two of them you can create your own "Sunrise and Sunset Calculator" to Find sunrise and sunset for a location.

Here are these functions:-

date_sunrise
date_sunrise — Returns time of sunrise for a given day and location.

date_sunset
date_sunset — Returns time of sunset for a given day and location.

Uses


echo date_sunrise(time(), SUNFUNCS_RET_STRING, 29.91999999999999, 73.880, 90, 5.5);


echo date_sunset(time(), SUNFUNCS_RET_STRING, 29.91999999999999, 73.880, 90, 5.5);

You must know the latitude and longitude of the place, to use these functions.
Here in above example, 29.91999999999999 is latitude, 73.880 is longitude, 90 is Zenith, and 5.5 is gmtoffset.

So the format should be like this:-


echo date_sunrise(time(), format, latitude, longitude, zenith, gmtoffset);


echo date_sunset(time(), format, latitude, longitude, zenith, gmtoffset);

API for Google Plus Profile Info

noreply@blogger.com (Motyar D) — Sun, 11 Dec 2011 10:22:00 +0000

As an API developer, I always keep searching open APIs that can help to access public data for social profiles. Last week I posted about Open APIs to access Social Profile Avatar Images , Many found it very useful.

Someone asked me to if i know any open API that can be used to access basic information of a Google plus user profile. I Googled the problem and found an API, called Portable Contacts API . This API is designed to allows a client application to access contact and social networking information under the Portable Contacts standard.

You can access Google+ profile information just with user ID
Its what you want, you can get users basic info like name, profile images and profile url etc; using this simple JSON API.

https://www-opensocial.googleusercontent.com/api/people/116599978027440206136

Here "116599978027440206136" is my Google ID. Redirect your browser to plus.google.com/me and see it in address bar.

Go write your Google+ widget, or hovercard!!

Google Analytics Stats for November 2011

noreply@blogger.com (Motyar D) — Fri, 02 Dec 2011 08:10:00 +0000

Open APIs for Profile Avatar Images

noreply@blogger.com (Motyar D) — Wed, 30 Nov 2011 06:24:00 +0000

One of my friend Vineeth G S shared a Simple api for twitter avatar images on Twitter. I found it very usefull and want to share other such open APIs to get profile images for other social sites.

Simple api for Twitter avatar images

http://twitter.com/api/users/profile_image?screen_name=gsvineeth here "gsvineeth" is a Twitter username.
More example http://twitter.com/api/users/profile_image?screen_name=codeplayers

Open api for Facebook avatar images

Facebook graph APIs have an API for it.
https://graph.facebook.com/motyar/picture?type=large
https://graph.facebook.com/motyar/picture?type=square

Supported types are small, normal, large, square.

Open api for Google+ avatar images

I have shared this early in a post Fetch Google Plus Profile Picture using PHP
Simply its https://profiles.google.com/s2/photos/profile/116599978027440206136
Where "116599978027440206136" is my Google+ profile id, you can get your own by going to http://plus.google.com/me, It will redirect you to your profile and you can get the ID from URL.

You can use sz parameter to get a custom sized image something like
https://profiles.google.com/s2/photos/profile/116599978027440206136?sz=1000
or
https://profiles.google.com/s2/photos/profile/116599978027440206136?sz=100

Enjoy!!

How to make money with Facebook

noreply@blogger.com (Motyar D) — Tue, 15 Nov 2011 11:47:00 +0000

How to make money with Facebook!
Here are three simple steps:-

1) Go to profile
2) Go to edit profile
3) deactivate profile
4) Write some code people pay you for!

11 november 2011, Date Wont Be Repeated Again

noreply@blogger.com (Motyar D) — Fri, 11 Nov 2011 06:38:00 +0000

Its a special date today. Its 11 november 2011.

┈┏┓┈┏┓┈┈┏┓┈┏┓┈┈┏┓┈┏┓ 
┏╯┃┏╯┃┈┏╯┃┏╯┃┈┏╯┃┏╯┃ 
┗┓┃┗┓┃┈┗┓┃┗┓┃┈┗┓┃┗┓┃
┈┃┃┈┃┃╭╮┃┃┈┃┃╭╮┃┃┈┃┃
┈┗┛┈┗┛╰╯┗┛┈┗┛╰╯┗┛┈┗┛

This Date Wont Be Repeated Again.

i Google's Secret XML APIs

noreply@blogger.com (Motyar D) — Thu, 03 Nov 2011 12:42:00 +0000

I think you all know about iGoogle, Who they dont know can check it out here http://www.google.com/ig. iGoogle is personalized Google home page you can add Gadget that can show you information about Weather, Stocks, currencies etc.

Today in this post we are going to know about few of Google's secrete XML APIs, that make these Gadget work. And good news is that these are open APIs, that mean you have no need to use any key, or authentication mechanism to get data. You just have to parse these XML API data in your code.

Okey let me list out few of them.

Google's Weather API

You can use this API to show weather reports and weather forecasts for a city, it works for all the cities of world. Here is the Mountain View's weather report http://www.google.com/ig/api?weather=Mountain+View

You should check this post too Weather forecast php application in 7 lines

Google's Movies API

Ok movies lover? Want to get report about the movies running in your Theaters? Here is the API -
http://www.google.com/ig/api?movies=chandigarh. You can replace Chandigarh with your own city name.

Google's Stock API

This API will provide you information about Stock values.
http://www.google.com/ig/api?stock=SENSEX
or
Google's own stock -
http://www.google.co.in/ig/api?stock=GOOG

Google's News API

Here is the Google's News API, showing top news of today
http://www.google.com/ig/api?news

You can translate them to any language using &hl parameter like -
http://www.google.co.in/ig/api?news&hl=hi

If you need local news change the URL to your countries Google URL, for India its http://www.google.co.in/ig/api?news

Go write your own weather widgets!!!

I hope this post will be very useful for you. You can use these XML APIs for personal use, I suggest not use in a client project, because Google can make them stop anytime.

Enjoy!!

Getting Started with Amazon EC2 Cloud Hosting

noreply@blogger.com (Motyar D) — Wed, 19 Oct 2011 14:46:00 +0000

Today I was looking for a dedicated hosting for one of my client. Someone suggested me to try Amazon Elastic Compute Cloud (Amazon EC2). I get started and want to share the process with you.

My friend Sri wrote a detailed tutorial about the whole process on his blog 9lessons. Here is the tutorial
http://www.9lessons.info/2011/09/amazon-ec2-cloud-installation.html

IMP: I found that they provide AWS Free Usage Tier to help new customers. You can run a free Amazon EC2 Micro Instance for a year without any charges.

Fetch Google Plus Profile Picture using PHP

noreply@blogger.com (Motyar D) — Wed, 28 Sep 2011 18:52:00 +0000

Google plus APIs are out now, you can fetch profile images or avatar using that too. But I am here to show you how you can fetch google plus profile image without using their API. Simple and short, and no call limit.

Profile URL schema

Before launching the Google plus, Google's user profiles URL schema was something like this
http://profile.google.com/GoogleIdHere, For example my Google profile link was https://profile.google.com/dharmmotyar or https://profile.google.com/116599978027440206136

On Google Plus its https://plus.google.com/116599978027440206136

Profile Image URL schema

Ok lets talk about profile image, You can get a profile image by ID (or mail ID too) here is the url
https://profiles.google.com/s2/photos/profile/GoogleIdHere, mine is https://profiles.google.com/s2/photos/profile/116599978027440206136
Note: This is not the permalink to profile picture, this will redirect you.

Using PHP to get Picture URL

Its simple with PHP, we are just fetching where its redirecting us, we are going to use a old trick, here is the code:


$headers = get_headers("https://profiles.google.com/s2/photos/profile/".$id, 1);
$PicUrl = $headers['Location'];

You can use it for mail id like this


$email                  =      "something@gmail.com";
list($id, $domain) = split("@",$email);
$headers = get_headers("https://profiles.google.com/s2/photos/profile/".$id, 1);
$PicUrl = $headers['Location'];

You can Discussion and Commets on Google plus

Post a blank status on Facebook

noreply@blogger.com (Motyar D) — Tue, 20 Sep 2011 14:29:00 +0000

Yes you can post a blank facebook status.
Just type @[0:0: ] and click post.

I just posted here https://www.facebook.com/motyar/posts/2218564915092

Creating Cache Manifest File using PHP

noreply@blogger.com (Motyar D) — Sat, 17 Sep 2011 18:05:00 +0000

HTML5 Application Cache provides a way to make your application work offline. Once your application resources got saved to browser cache, it remains cached until the manifest file is modified. ( Note that updating a file listed in the manifest doesn't mean the browser will re-cache that resource.) The manifest file itself must be changed.

For example you are using this manifest file :-


CACHE MANIFEST
index.html
js/app.js

Changes in index.html or app.js will not force to re-cache. There must be few changes made in manifest file to update the cache.

If there are a lot of files and filders in your web application, manually listing them all in a manifest file would be a pain.
We have a simple solution of above problem. We can use PHP to list out all files and alter manifest file when any file got changed, so the cache can be updated.

How to use PHP code in .appcache file
We can use .php as menifest file but .appcache is the new recommended file extension for menifest file, and .manifest was the old one. So we are going to mimic file extensions and ll be running PHP code in the .appcache file. Its possible by adding this simple line to your .htaccess file :-


AddType application/x-httpd-php .appcache

The menifest file
We are going to write a little PHP code that reads the contents of the application directory (and its subdirectories) and creates the file list. Create a any.appcache file and put this code to it:-


  header('Content-Type: text/cache-manifest');
  echo "CACHE MANIFEST\n";

  $hashes = "";

  $dir = new RecursiveDirectoryIterator(".");
  foreach(new RecursiveIteratorIterator($dir) as $file) {
    if ($file->IsFile() &&
        $file != "./any.appcache" &&
        substr($file->getFilename(), 0, 1) != ".")
    {
      echo $file . "\n";
      $hashes .= md5_file($file);
    }
  }
  echo "# Hash: " . md5($hashes) . "\n";

In this code the last last does a great trick, If anything from your list of files got changed, the line would be changes, and the browser file found that there is a need of cache update.

Ref:-
This trick was originally shared by the Jonathan Stark in his book "Building iPhone Apps with HTML, CSS, and JavaScript". I added some spices (using PHP code in .appcache file) and reshaped it.

Follow me on twitter.

Handling HTML5 Application Cache with JavaScript

noreply@blogger.com (Motyar D) — Wed, 14 Sep 2011 18:08:00 +0000

HTML5 Application Cache provides a way to make your application work offline. HTML5 also provides a JavaScript API to handle Application Cache.

The window.applicationCache can be used to access browser's app cache with JavaScript.

We can check current state of the cache using its status property. It may have six different values.


var appCache = window.applicationCache;

switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};

To update the cache, first call applicationCache.update() method. This will attempt to update the user's cache (which requires the manifest file to have changed). Finally, when the applicationCache.status is in its UPDATEREADY state, calling applicationCache.swapCache() will change the old cache for the new one.

update() and swapCache() simply tells the browser to check for a new manifest, but does not updated resources to users.

To update users to the newest version of site, set a listener to monitor the updateready event on page load:


// on page load.
window.addEventListener('load', function(e) {
  //Check if a new cache is available 
  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new version.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new yet.
    }
  }, false);

}, false);

Managing HTML5 Application Cache in Chrome

noreply@blogger.com (Motyar D) — Tue, 13 Sep 2011 18:13:00 +0000

To check saved Application Cache data by HTML5 applications, Navigate your Chrome browser to chrome://appcache-internals/

You will be able to see all the details like Size, Creation Time, Last Access Time, Last Update Time and a button to "Remove this AppCache". I found this tip very helpful while debugging/testing your applications.

Offline Web Applications Using HTML5 Application Cache

noreply@blogger.com (Motyar D) — Sun, 11 Sep 2011 07:44:00 +0000

HTML5 provides a way to use application even when you are offline, developers can list the files that are required for the Web application to work offline and browser keep a copy of that files using its caching mechanisms.

A manifest file is a text file contains the file list. A web browser will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When user try to access the web application without a network connection, web browser will automatically switch over to the local copies instead.

To enable the application cache for an app, include the manifest attribute on the document's html tag, like this


<html manifest="example.appcache">
  ...
</html>

A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.

For example, to serve this mime-type in Apache, add this line to your .htaccess file:


AddType text/cache-manifest .appcache

A simple manifest may look something like this:


CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
js/app.js

But a manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.

CACHE:
Files listed under this will be explicitly cached after they're downloaded for the first time.

NETWORK:
Files listed under this section are resources that require a connection to the server.

FALLBACK:
An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback.

Here is a more complex example:


CACHE MANIFEST

# Explicitly cached entries.
CACHE:
/favicon.ico
index.html

# Resources that require the user to be online.
NETWORK:
login.php
/api

# main.html will be served if main.php is inaccessible
FALLBACK:
/main.php /main.html

Writing your First Mobile App for Nokia

noreply@blogger.com (Motyar D) — Sat, 10 Sep 2011 09:06:00 +0000

This is the next step of my journey towards mobile development. I want to introduce you with Nokia's Symbian Web Runtime (WRT) technology, and show you how easy it is to write your first WRT widget application.

You must have basic knowledge of HTML, CSS and JavaScript and you are ready!!

Step1 :- Write your application with HTML, CSS and JS, and test it in browser. You can start with alerting "Hello" or a simple calculator to add two digits. Feel free to use JS libraries like jQuery etc. Put all these files to a folder. For example "HelloApp".

Step2 :- Create an info.plist file in the same folder there your main HTML file is situated.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/DTDs/plist-1.0.dtd">
<plist version="1.0">
<dict>
  <key>DisplayName</key>
  <string>Hello</string>
  <key>Identifier</key>
  <string>com.Hello.basic.widget</string>
  <key>Version</key>
  <string>1.0</string>
  <key>MainHTML</key>
  <string>index.html</string>
</dict>
</plist>

In this file you must put the "DisplayName" (You can put anything), "Identifire" (Something like com.anything.anything) and your "MainHTML" ( Main HTML file name).

Step3 :- Zip your folder and rename it to ".wgz" from ".zip". As example HelloApp.zip to HelloApp.wgz

Step4 :- Install it to your Nokia S60 or S40 phone.

You can check if your Nokia device supports for WRT technology here.

Share your MP3s with Motyar

noreply@blogger.com (Motyar D) — Mon, 05 Sep 2011 09:43:00 +0000

Hi friends, last day I build an application using HTML5 Drag and Drop and Audio tag. You can upload your music MP3 by Draging and Droping to web page. You can play a song by clicking on that song form list.

I welcome your ideas, suggestions and compliments in comments. I have to work on its design yet. Check the application here http://motyar.info/mp3s/

Should you read the blog post that have question mark in the title?

noreply@blogger.com (Motyar D) — Wed, 24 Aug 2011 18:54:00 +0000

Hacker Street India

noreply@blogger.com (Motyar D) — Mon, 15 Aug 2011 07:04:00 +0000

I hope you all know about the ycombinator's Hacker News
Last night I found HackerStreet.India That is designed for Indian Hackers.
I hope you all would love to check this out.