should i take anti diarrhea medicine

Resizing Canvas to fit across multiple Resolutions

Apr 25 2013

Mobile webapp/game developers often face issue to support the application across multiple mobile devices. This is largely because resolutions of mobile are very different.

Take for example iphone. Following are the resolutions of different versions of iphone

iphone <4 320/480.

iphone 4 640/960

iphone 5 640/1136

So now we need a fluid layout that fit across multiple resolutions. So that application can be supported in multiple mobile devices irrespective of the resolution. However, If the application/game is canvas based we need a technique to resize the canvas. Here, I am going to illustrate an awesome technique found from html5 rocks case study. Where we autoresize the canvas with help of wrapper div. Sounds awesome! right. Lets look into the technique.

 

Technique to resize canvas to fit all multiple resolutions:

Technique:

Wrap the canvas with a div tag and make canvas width and height 100%. Reset the height and width of the div tag via Javascript. Canvas also resizes according to the div tag.

Example:

1)      Create a container with the position absolute wrapper div

2)      Create the canvas tag and make it as the position absolute and define the height and width of the div as 100%

 

Html changes:

 

<div id=”canvasWrapper”>

<canvas  id=”canvas” width=”600” height=”700”>

</div>

 

CSS changes:

 

#canvasWrapper{
position:absolute;

top:50% (optional)

left:50%(optional)

}

 

#canvas{

position:absolute; (This is optional)

height:100%;

width:100%

}

 

Javascript Changes:

 

Define the window resize handler to control to update the container div based on the view port height  and width

 

$(window).on(“resize”,function(){

                            var $canvasWrapper =  $(‘#canvasWrapper’);

                            $canvasWrapper.width(document.documentElement.clientWidth);

                            $canvasWrapper.height(document.documentElement.clientHeight);

   });

 

Reference: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

No responses yet

Mobile Web App/Game Remote Debugging in Chrome (Works for Andriod mobiles)

Apr 24 2013

Mobile Webapp/Game Debugging Issue:

Mobile WebApp/ Game Developers need mobile browser debuggers to debug the issues while developing the Mobile WebApp/Game. However, having debugger in mobile browser like firebug, webkit inspector might not be a good idea, considering the real estate available in the mobile.

Solution:

To solve this issue, Desktop browsers like chrome support remote debugging of the mobile webapp. Any application opened in mobile chrome browser can be debugged remotely from desktop (mobile connected desktop) using chrome browser developer tools .

How To Setup:

  • Download the Android sdk
  •  Set the devtools into the path
  •  Connect the mobile to desktop via USB and open the chrome mobile browser
  •  Enable USB debugging option present in settings  of mobile device and in mobile browser
  •  Run “adb devices” command, to see the list of devices
  •  Run the remote command
  • adb forward tcp:9222 localabstract:chrome_devtools_remote
  • Open localhost:9222 in the desktop chrome browser to start debugging using chrome dev tools
  • Open the mobile web application in mobile and now you can see your desktop chrome browser shows the inspector to corresponding to mobile app

Ensure Following points, If you are unable to do remote debugging:

1) Make sure the USB is enabled
Solution: Enable usb with help of administrator

2) Make sure proper usb driver is installed.
Solution: Install the Samsung usb driver, If samsung mobile is connected like (Galaxy s2 or nexus 4).
Recommendation: Install Samsung “Kies”, which updates the usb driver.

3) Enable the usb debugging option in mobile in both settings of mobile device and settings of the mobile browser.

Reference: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#installing-androidsdk

No responses yet

Backbone JS Tutorial

Jan 01 2013

Backbone JS (Stop tying your data to DOM)

Backbone.js is not a full fledged mvc or mvp or mvvm framework, Basically it provides the event bindings between the model and view, so that changes in the view will update the attributes of model and corresponding views listening to the model will get updated.

But there are many backbone js plugins, which help us to create a web application using backbone depending on the requirement. So we can implement mvc, mvp, mvvm or anything using these plugins.

What is a backbone model ? (State)

Backbone model maintains state of the application. Following things can be done in the model.

Responsibilities:

1)Getting the data from server
2)Save data to the server
3)Validation of data
4)Syncing of the data from server to client
5)Destroying the model (data,if no longer needed )

Usage:

A model has attributes to store the data, on change of any of the attribute a change event will be triggered by the model
However, this change event can also be suppressed by passing {silent:true}. views should listen to this events and display the data

Gotchas:

1)If the attribute is again a model, then the change in the attribute of the submodel will not be triggered in parent model. Use the deepModelbinderplugin.
2)Even while instantiating a model with an object, the attributes will be set and validation if exist on any attribute will trigger.
3)Becareful in specifying the initial values, if initial value is not set, then the value is treated as undefined

What is a backbone collection?

A collection is just a list of models.

Responsibilities:

1)Fetch data from server
2)Sync data to the server

Usage:

On addition or removal of model to a collection the change event will be triggered. Views should listen to this events and display the data

Gotchas:

1)While creating the collection from a model, if the validate method fails then the model will not get added into the collection

What is a backbone view ?

A view is basically UI component that displays the data to the user intutively. it interacts with the template for markup

Responsibilities:

1)listen to the model and display data when data is changed.

Gotchas:

1)Beware of zombie views, they should be destroyed and all their events should be undelegated otherwise they will become zombies

What is a backbone router?

A router allows us to configure url corresponding to the view. It should be used only to provide views as a bookmarkable url. Don’t use it as a controller.

Responsibilties:

1)It provides route and callback method corresponding to the creation of view

Usage:

Use router.navigate or Backbone.history.navigate to route to a different url. Pass {trigger:true} to trigger the callback method corresponding to the view

Gotachs:

1)By default callback corresponding to the empty route will be called.
2)This is not a controller and never should be used a controller. it should not be passed to the views. use Backbone.history.navigate() method for such cases.

P.S: This post is for developers, who are new to backbone. Shortly, Continue Reading »

No responses yet

Compass n Sass

Sep 26 2012

Compass n Sass from Pradeep Saraswathi

No responses yet

Preventing Xss Attack in Client Side

Jun 05 2012

If users are allowed to enter html content via a textfield or any other UI element,Chances are that your application might be prone to XSS Attack. Let us see,How we can Prevent XSS Attack in Such Scenarios

1)Html Encode(a.k.a Html Escape) the content entered by the user in the text field.Following function will come in handy,if you are using jQuery

function htmlEncode(value){
return $(‘<div/>’).text(value).html();
}

Here,Value is set as innerText and encoded innerHtml is retrieved

2)While displaying the user entered content,then decode the encoded content.Following function will come in handy,if you are using jQuery

function htmlDecode(value){
return $(‘<div/>’).html(value).text();
}

Here,Value is set as innerHtml and the innerText is retrieved

P.S:The above functions have really worked well for me till now.

No responses yet

Sass & Compass

Jun 04 2012

SASS (Syntactically Awesome Stylesheets)

Sass is a language that is interpreted into css,Basically its an extension of CSS3 which adds nested rules,variables,mixins,selector inheritance and more. it helps us to organize and maintian our css files

Compass

Compass is a framework which reads the scss files and generate css files for us.Before moving furthur,following are few things one should know, while working with Sass and Compass

Partials

partials are scss files which has to be imported to compile to a css file.usually they are named as

_(fileName).scss

However, while importing they are included with out underscore as follows

@import “fileName”

Working with Sass and Compass:

1)Install Ruby

2)Instal Ruby Gem

3)Intall sass by following command

gem install sass

4)Install compass by following command

gem install compass

5)Create a Project by following command

compass create

Following folders will be created
a)stylesheets
b)sass
and config.rb file.

sass directory is the input folder,place all yout .scss files here.
stylesheets is the output folder,all the css files are generated here

6)Compile all the scss files into css files by following command

compass watch

7)keep running the console, so that all the changes are automatically detected and css files are generated.

8)Configuring the input and output directories can be done by modifiying the config.rb file

Tip: To make the relative path to appear in the css file, edit the config.rb file and the stylesheets directory and rerun the compass watch command.

No responses yet

JavaScript Concepts that every UI Engineer should be aware off

Mar 21 2012

Following are some of the Javascript Concepts, Which every engineer should be aware off.

1)why Functions are called first class objects in javascript?

Explanation:

a) Functions can be assigned as a variables
b) Stored in data structures
c) Passed into functions as arguments
d) Returned from functions

 

2)What is a Closure in JavaScript ?

Explanation:

A closure is a function with access to variables in its containing scope..(the function closes over the variables).This is due to the lexical scoping. the inner function can access variables of outer function.

Example:
function attachListeners() {
for (var i = 0; i < 10; i++) {
$(‘#id-’ + i).click(
function () { alert(“I am element number ” + i); }); } }

 

There are 10 DOM elements in the page with id’s as follows “id-1″,”id-2″ …..etc. onclick of the element with “id-1″ will show the value of the i as 10 !!!!.

To solve the above issue,place the click callback in a separate function.

No responses yet

Debugging With FireBug

Dec 23 2011

Following is my Presentation on jQuery,Presented to my Team

No responses yet

jQuery Introduction

Dec 12 2011

No responses yet

jQuery’s $.animate() API ‘s drawbacks

Sep 18 2011

While working with jQuery animate() API, Following are the issues,I faced.

1) CSS ClassName cannot be added.

$.animate(className,1000);

I feel this is a biggest draw back of the animate() api. because we need to add css properties in the following tricky way,instead of adding ClassName straight away

Usage:

$(“#foo”).animate({  ”margin-left” : “40px”,  ”width” : “300px” }, 1000);

Solution:

Use the following plugin,which goes by the name as Animate to Class plugin.

http://plugins.jquery.com/project/animate-to-class

 

2)Limited CSS properties supported by $.animate() API.

Some CSS properties like “background-color,color..” cannot be used in this $.animate() API.

$.animate({“background-color”:”#b0d2f1″},1000);

This is the biggest drawback,Even though it is mentioned in the documentation.Developers mostly like to animate background-color in 50% of the use cases.

Solution

Following is the plugin,goes by the name “color” plugin has to be included,If you plan to use animate API to animate background color.

https://github.com/jquery/jquery-color

 

 

 

 

No responses yet

Older posts »