InitLabs

Cookies and Javascript

Fri, 28 Sep 2012 11:21:07 -0400

Below are snippets of code to manage browser cookies using javascript. Cookies can be used to store small amount of data about a website, usually configuration or personalization data about the website so that the web server or webapp can load customized webpage based on cookie data.

One of my webapp gramfeed uses these javascript cookie code to manage settings for whether the user wants to show the map visualization by default or not.

Below are 3 functions to create a cookie and read a cookie:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Example of usage:

createCookie("color", "red", 10);
readCookie("color");

The code above will create a cookie called “color” and will set a value as “red” and will expire after 10 days. The value “red” can be retrieved next time the webapp loads and set the personalized color of webapp for example. The cookie data can be deleted by setting null value.

createCookie("color", "", -1);

Hopefully this helps, comments or questions below :)

iOS email sign-in implementation UX

Wed, 04 Apr 2012 14:40:25 -0400

Just came across this new browser app for iPhone called Dolphin. I usually don’t sign up using facebook or twitter for new apps, I use the classic email sign-up. This app makes email signup one set easier by showing the different email service provider as you start typing your email id, little implementation details that makes a big difference for user experience. Most people use either gmail, yahoo or hotmail, this app just gives you those options and many more as you type. Something for every other app developer to consider when implementing email sign-up.

Checkout the screenshots below showing email sign-in form and options shown as you start typing.

BTW, if you have not tried this app, this browser app is pretty slick for browsing on iPhone.

gramfeed: 2 hour side-project to 2 million visitors

Tue, 28 Feb 2012 22:58:35 -0500

gramfeed: 2 hour side-project to 2 million visitors:

Here is a blog post I wrote about how I developed, launched and scaled gramfeed.com to 2 million visitors.

Read it here

gramfeed:

Exactly a year ago was when gramfeed.com launched. Instagram had released developer APIs couple weeks prior and I started playing with the APIs and started creating a web interface for Instagram to pretty much do everything that the Instagram iPhone app did on the web.

How to pin blocked content to Pinterest

Fri, 24 Feb 2012 22:06:00 -0500

Pinterest just introduced a way for websites to block people from pinning their content to Pinterest by adding a small snippet of meta tag code to HTML:

Sites like Flickr have already implemented this to block people from pinning copyrighted photos to be pinned on Pinterest. You will see a message like this:

Here is a simple way to get around this and pin it anyway if you want to do so:

(You have to use Google Chrome)

If you see the blocked message, reload the page by hitting “Reload” button in Chrome.
Right-click and select “Inspect Element”
In the panel that opens at the bottom, expand the <head></head> tag
You will see a line <meta name=”pinterest” content=”nopin” />, right-click on it and select “Delete Node” (see picture below)
Now go to bookmarks and click your “Pin It” bookmarklet to pin the image to Pinterest

Disclaimer: I’m not really recommending you to do so ;)

How to get url parameter or hash fragment using javascript

Tue, 31 Jan 2012 20:27:00 -0500

Below is javascript code snippets that show how to get read url parameters and hash fragment from url. Will be useful when reading url parameters or hash fragments in urls like http://gramfeed.com/?view=popular or http://gramfeed.com/instagram/tags#sunset

Below is code to get url parameter from url:

function getUrlParam( param ){
	param = param.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var exp = "[\\?&]"+param+"=([^&#]*)";
	var regexp = new RegExp( exp );	
	var results = regexp.exec( window.location.href );
	if( results == null ){
		return "";
	} else {
		return results[1];
	}
}

Getting hash fragment from url is much easier:

hash = window.location.hash;

How I reduced Google App Engine costs by 75%

Mon, 23 Jan 2012 14:19:33 -0500

My Instagram project gramfeed.com was created over a weekend, its a full feature web interface for Instagram. I built it for me to view Instagram feed, comment, like photos and more on the web.

I had decided to use Google App Engine (GAE) to host the app since it was free to start and it remained free even as the site got over half a million pageviews/month and used only about 20-25% of the free quote under the old App Engine “CPU hours” pricing model, after the pricing model changed to “instance based” usage, my costs sky rocketed by about 30x and had to do something about bringing down the cost or move to a different App hosting solution. I took advantage of the $50 App Engine credit that google gave to continue on App Engine as I started to optimize my app to reduce the cost. Below are things I did to reduce the costs by about 75%, hope it is helpful:

Analyze App Engine usage

First thing I did was to setup Appstats (event recorder) for the application. It records all Datastore access, memcache and urlfetch calls to the application. This will show performance usage for every call made to application, which is very useful to analyze app usage and make optimizations.

Use Memcache:

Datastore usage on GAE is one of the biggest factors that can affect the cost. First thing I did was to analyze Appstats, look for any Datastore query calls and optimize by using memcache. One way to easily do this is by searching for any datastore put() call and set memcache after it. Next make sure to get data from memcache before attempting a datastore query.

Set memcache after writing to datastore:

data.put()
memcache.set(user_id, data)

Try getting data from memcache before doing a datastore query:

data = memcache.get(user_id)
if data is None:
    data = Data.get_by_key_name(user_id)
    memcache.set(user_id, data)

This reduced the cost significantly since gramfeed.com was checking for authentication on every page load, it was making a datastore query for every page load, using memcache significantly reduced these datastore queries.

Client side API calls:

Another change that made significant reduction in cost was reducing the number of GAE urlfetch calls made by the application, gramfeed.com makes well over a million Instagram API calls/month, the application was initially making all Instagram API calls using urlfetch call on the application server side, this not only increased the number of request to the application but also the incoming and outgoing bandwidth for the application, so I changed the design to make all GET API calls from client side using JQuery.

$.getJSON(url, function(data) {
...
});

Reduce requests to application:

A not so popular choice but something that reduced further costs was by serving all javascript and css embedded in the same html using <script> and <style> tags, this prevented additional requests to application for getting javascript and css files for every page load. Also I moved large images bigger than 30kb served in the application to external host like picasa.

Lightbox implementation to reduce unwanted page load:

The initial UI implementation for gramfeed.com opened a new photo page with full sized image when clicked on any thumbnail. Photo page contributed to about 30% of pageviews, I decided to implement lightbox using javascript to load full sized photos when clicked on thumbnails in the application. This not only reduced the requests to application by 30% but also significantly improved the user experience by loading images faster in lightbox instead of loading a whole new page. This resulted in more engagement by users and photo view has doubled because of this change.

Conclusion

In spite of the ridiculous price hike, GAE is still a very good app hosting service, you don’t have to worry about scaling your application. You however have to optimize and architect your application to reduce the usage cost.

Is Google App Engine the right platform for your application? It really depends on the type of application, gramfeed.com did not involve a lot of datastore query and processing, it uses datastore only for performing Oauth connection and performing any HTTP POST to instagram API, most of the HTTP GET to API are done on client side using javascript. So for applications that does not have a lot of backend processing it is definitely best to use GAE, you can host a web application and grow to thousands of users and still stay within the free quota.

Feel free to post any comments or suggestions

How to restore phone contacts lost after iOS5 update

Thu, 13 Oct 2011 05:07:31 -0400

Another major issue people are reporting after updating to IOS5 is missing contacts in the phone, dont freak out its all there, just follow these steps to get the contacts back:

On iPhone, open Settings -> iCloud
Turn OFF for “Contacts” option
Select “Keep on My iPhone” option
Close and Open Phone App, all your contacts should be back!
Now go back to Settings -> iCloud -> turn ON for “Contacts” and select “Merge All” option.
You are DONE.

Other issues seen include “error 3200” and Apps not restored, there is solution to get these resolved if the proper steps are followed.

How to upgrade to iOS5 without issues

Wed, 12 Oct 2011 17:36:00 -0400

Looks like lot of people are having iOS5 update issues, some are complaining about Error 3200 during update and some are saying Apps/Data is not restored after update, This instructions below I used, if followed should solve both the issues:

Make sure you have iTunes 10.5 installed on your computer
Connect iOS device via USB
Sync your device to backup all apps and data.
In iTunes, select your device and click “Check for updates”
Select, Download and Install
(If you get Error 3200, restart your computer and update again)
When device is restarting or after restarting wait patiently and do not try to mess with your iOS device
iTunes will have a popup “Restoring Apps…”, the device will NOT say syncing in progress, so DONT play with the device until the Apps restore is done, it will probably take over an hour.
After ITunes popup “Restoring Apps…” is gone, it will start a sync with a sync icon spinning in iOS device top bar, wait until this completes
Now unlock the iOS device and go through the setup process prompts to complete location, iCloud, Find my Phone,… setups.
You are DONE.

Update: Also see “How to restore phone contacts lost after iOS5 update”

Animate sliding subview just like UINavigationView

Sun, 01 May 2011 05:35:00 -0400

Here is another useful tip for iPhone/iPad programming on how to make a subview to slide horizontally just like UINavigationView using QuartzCore animation.

Assuming you have created a subView called nextView in the xib file, the functions in code snippet below shows how to slide from main view to nextView and back. This requires the QuartzCore framework to be added to the project and QuartzCore.h is imported.

- (void) showNextView{
	[self.view addSubview:nextView];
	CATransition *animation = [CATransition animation];
	[animation setDuration:0.5];
	[animation setType:kCATransitionPush];
	[animation setSubtype:kCATransitionFromRight];
	[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
	[[self.view layer] addAnimation:animation forKey:@"SlideView"];
}

- (void) hideNextView{
	[nextView removeFromSuperview];
	CATransition *animation = [CATransition animation];
	[animation setDuration:0.5];
	[animation setType:kCATransitionPush];
	[animation setSubtype:kCATransitionFromLeft];
	[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
	[[self.view layer] addAnimation:animation forKey:@"SlideView"];    
}

Be sure to add #import <QuartzCore/QuartzCore.h> in the main view controller header file.

This type of UIView sliding is implemented in my iPhone app Instalook

How to detect iOS device orientation on load

Fri, 04 Mar 2011 07:34:00 -0500

If you are designing your iPad or iPhone application to run in both portrait and landscape mode then you may have to make some changes to position/size of UI components on a view based on the orientation.

Detecting iOS device orientation when device is rotated is easy, there is a method that gets called when device orientation changes:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    if (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft || toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) {
	NSLog(@"Landscape");
    } else {
	NSLog(@"Portrait");
    }
}

But this method does not apply when the app is first launched, one way to make the changes to UIView based on device orientation on startup is to check the status bar orientation in viewDidLoad method:

if (([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft) || ([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight)) {
    NSLog(@"Landscape");
} else {
    NSLog(@"Portrait");
}

Hopefully this helps.

HTML5 geo location implementation

Mon, 10 Jan 2011 05:32:00 -0500

Most browsers have started supporting HTML5 location detection. This posts explains a simple way to implement HTML5 location detection. The browsers usually will show a popup bar for user to accept location sharing when the HTML5 geolocation API call is made, this post explains an alternative to get location if the user declines to accept location sharing. The alternative is to use Google ClientLocation API which detects location using IP address. This fallback can also be used if the browser does not support HTML5 geo location API.

The implementation below is very simple, first it checks whether the browser supports HTML geo location and gets the location, if browser does not support or if it fails to get HTML5 geo location (user declines or other error) then it goes to the fallback method of using Google ClientLocation API to get user location. The implementation is shown on a Google Maps.

var map;
var marker;
var defaultLocation = new google.maps.LatLng(40.72, -74.0);

function init () {
  var options = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), options);
  map.setCenter(defaultLocation);
  getLocation();
}

function getLocation () {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, fallback);
  } else {
    fallback();
  }
}

function success(position){
   addMarker(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
}

function fallback(){
  if (google.loader.ClientLocation) {
    addMarker(new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude));
  } else {
    addMarker(defaultLocation );
  }
}

function addMarker(latlng) {
  if(marker) marker.setMap(null);
    marker = new google.maps.Marker({
    position: latlng,  
  });
  marker.setMap(map);
  map.panTo(latlng);
}

View Example