not only code

[notonlycode-blog]

when on SCREEN; do something.!!

As a web developer the most common usecase we tend to have is doing something when an element is actually visible on screen. Some examples are like when the image element is visible then only load it, or when you reach last element on the page then trigger the request for next set.

I could develop a simple utility for that -whenOnScreen using the getBoundingClientRect function that we have as part of W3C standard. Now this function is pretty cool; it will return you an object which has the dimension and the position of the element as if it were absolutely positioned from the window.

But webpages generally have scrollable divs instead of page scroll (more evident now in single page apps). So we have to take care of the case that even if the element is present absolutely from screen, it may be hidden behind the parent container. This plugin handles that by first checking the visibility of the parent and then that of element relative to the parent.

The plugin works well on both mobile and desktop. For both it uses different event to identify scrolling behaviour. Also one can use it both as normal standalone utility and as jquery plugin.

[notonlycode-blog]

Server vs Client side rendering

The topic has gained attention with the mobile domain picking pace and fortunately or unfortunately the presence of such a wide variety of mobile devices now available.

First; simply put; client side rendering is executing your javascript to render content on your browser. In server side; all the content is prepared on server using any server side scripting language and javascript has a little or no role to play and thus very little processing by browser.

Now client side rendering has some problems. With different mobile devices; we have an endless number of browsers based on different web browser engines which are different from each other mainly in terms of their performance and the javascript (ecma) standards supported.As a result the way one browser renders a webpage could be different from another browser. There are workarounds and hacks written to get around the disparity between standards but I dont believe if anyone can say with gurantee he has a fix for all of them. In terms of performance there's nothing much anyone can do since the browsers also take use of the underlying phone configuration to deliver that and thats where you reach a physical boundary. These problems directly lead to inconsistent experience of a webapp across devices and when you see the marketshare of not the latest smartphones around the world the situation becomes alarming.

Server side rendering; minimalises the use of browser by preparing all of the content on server and shipping it to the client. Since the use of browser is minimal the problems posed by it will be minimal. This will directly lead to a more consistent experience on different mobile devices. That is why companies like twitter have switched to server side rendering. This is what twitter says on their blog - "By rendering our page content on the server and deferring all JavaScript execution until well after that content has been rendered, we’ve dropped the time to first Tweet to one-fifth of what it was." On top of server rendering you can take advantage of it by caching the content to be shipped on server side. Server again has a upper hand here in terms of amount of memory it can handle.

I did a quick demo using nodejs to compare the performance between the two. A simple program below is what i ran in nodejs and client javascript and I printed the time taken by two complete the processing.

//Print user agent in node/client-js var htmlDump = ""; var stTime = new Date().getTime(); for (var i = 0; i < 1000000; i++) { htmlDump += "Time is : " + (new Date().getTime()) + "<br>"; } //Print end time in node/client-js

The results were what I expected but the numbers were a bit alarming.

Summarising here

1.Only in desktop chrome browser both of them were at par with average time close to ~450ms.

2.In android advanced s - gingerbread; android default browser client side rendering - average time - ~17000 ms server side rendering - average time - ~500 ms

3. server side rendering took almost the same time in every device within a range of 400 - 550 ms.

The complete results for both are here - server-side; client-side.

Server side rendering definitely looks a way out from the problems posed by multiple browsers. But its a one step back towards developing rich single page apps with think client side where every interaction is dynamic.

[notonlycode-blog]

CSS Hardware acceleration - a brief history.

Hardware acceleration in browsers is actually a concept made possible by two technologies; Graphics processing unit(GPU) in computing machines(computers, mobile devices) and new version of browsers which can interact with GPU. If we see the wikipedia definition of GPU it says - "a specialised electronic circuit designed to rapidly manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a display". In simple words it basically is used to optimise and serve better performance when we have image or videos displaying. Better the GPU; better the performance. An example of GPU config; my macbook has "Intel HD Graphics 4000 512 MB".

Now, modern browsers have been able to use the GPU (first browser to use is IE9 in 2010) to show rich media on the webpage. Rich media here refers to things like images, videos, css animations and 3D graphics. Earlier, only applications like desktop games, video players were able to use them and browsers relied on CPU to do all the rich media processing.

The way browsers do it is by offloading all the rich media layers to the GPU which takes on the work of moving and presenting them. A very good blog explains how chrome does it - "Chrome uses textures(a bitmap image that’s moved from main memory i.e. RAM to video memory i.e. VRAM, on your GPU) to get chunks of web page content onto the GPU. Textures can be cheaply mapped to different positions and transformations by applying them to a really simple rectangular mesh." There's a lot of technical detail to it which google has shared here . For now, understanding that rich media presentation happens through GPU in modern browsers should be enough. Also there are limits how a web application can use it,since the GPU memory is limited and if you overuse it by having a lot of rich media it does cause crashes.

[notonlycode-blog]

Setting up mobile simulators for android and IOS on Mac...

Iam going to write about how can you setup development simulators for both android and ios on your mac machine.

First of all, for android it as an emulator and for IOS its a simulator. There are some differences between the two; the high level difference being that emulator also kind of mimicks the hardware architecture of the real device while the simulator does not. You can read more about this on this stack overflow thread.

IOS

1. You need XCODE which actually has your simulator program inside it. Download it from here or directly from the apple store

2. When the download is finished you can run your simulator by running the following command - /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator .platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator

3. You dont need to type in this command everytime. You can create a bash file and put the command inside it.

4. Open vi and copy paste the following text #!/bin/sh  /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator .platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator & Give the file a name - (i've given mine iossim)

5. Save the file in some location. I generally store this file under /Users/bin/aseem

6. You can then input the above folder location in your PATH variable which is in ~/.bash_profile

7. Prefix the PATH variable with /Users/aseem/bin:

8. Open terminal again and type iossim and voilà your simulator is up and running.

Android-

1. Go here - https://developer.android.com/sdk/index.html#download

2. Click "Download the SDK tools for MAC." under "Use an existing IDE."

3. Once its downloaded; put the folder location in the PATH variable till the tools folder in .bash_profile

e.g /Users/aseem/Downloads/apps-raw/android-sdk-macosx 2/tools should be in your PATH variable

4.Open terminal again and enter android.

5. A window will open. Select the platform you want the emulator for. For e.g for 2.3 select "SDK platform" under "Android 2.3" and install it.

6. Once its installed; next you will have to create a configuration for that platform to run.

7. This command will list all the platforms installed         android list targets

8. Run below command to create a configuration. name: any name you want to give the configuration.  id: the id of the platform that comes when you list targets using 7.

      android create avd -n <name> -t <id>

9. Once done, launch the emulator by running below command       emulator -avd <configname>

10. Similarly you can install platform for other android versions, create a configuration and run it.

[notonlycode-blog]

Cover your iframes...!!

Recently I got stuck with a problem that seems to have no solution; just the workarounds.

The problem is the usage of iframes within iscroll or infact any touch based scroll mechanisms. The issue is that when you have an iframe in your page it swallows your touch events (literally). The touch event generated are essentially the events of the document within the iframe and so if you have a touch event required to trigger on your parent window; you are dead.!! Lets take my usecase to understand it more clearly.

In my case I was using iscroll essentially to provide scrolling on mobile devices and as soon as I had some inline ads which covered the whole window, you are stuck since you dont have your normal but the scroll through touch and the touch is now swallowed by iframe. So you have literally no way of scrolling up and down. (See the below image for reference)

You can actually set the iframe to ignore touch event by setting the css property pointer-events as none. But I wanted the click event to happen in this case (since the iframe was an ad and it needs to be clickable).

After lot of struggling I could finally get a somewhat clean workaround, thanks to this guy on this stack overflow thread.

I could tweak it to write a generic code which can cover all the iframes inside an element such that they allow you to listen to touch events on parent container. The basic idea is to wrap the iframe with a transparent div and listen to the click event on that div and then dispatch that event to the iframe. Here is it.

https://gist.github.com/agaase/6971953

The usage is pretty simple; its a jquery extended function; so just run it on the element you want the iframes to be covered. e.g

$("#myele").coverIframes();

NOTE: 

The above code assumes you only want the click event inside your iframe since other events are not dispatched.

[notonlycode-blog]

Detecting orientation change event in mobile browsers.

Lately I have been trying to get the orientation change event correctly for the many devices and their browsers we test our html5 websites against. The browsers we primarily test against are chrome and android native browser across S3, nexus 7in, samsung tab 10 in and safari across ipad and iphone.

So after much hit and trial and analysis I could reach a point where I can say it should work across all of these. Here is the code to that.

1.var isIOS = /safari/g.test(navigator.userAgent.toLowerCase()); 2.var ev = isIOS ? 'orientationchange':'resize'; 3.var diff = (window.innerWidth-window.innerHeight); 4. $(window).bind(ev,function(){ 5. setTimeout(function(){ 6. if(diff*(window.innerWidth-window.innerHeight)<0){ 7. orientationChanged(); 8. },500); 9.});

Line 2 takes up the resize event for any non-safari browsers since other browsers in other devices take up resize event more consistently than orientation change event.http://www.quirksmode.org/m/table.html

Line 5 performs the check in a timeout since what I found is that some of the android native browsers  dont take up the new dimensions immediately.

Line 6 For the orientation change to take place the product of the differences of old and new height and width should be negative. This accounts for the use case where the resize event is called for cases like keyboard opening up and browser is minimize and maximized.

Line 7 is where you can comfortably call your event where you can do whatever you want to make your site look good in new orientaiton.

[notonlycode-blog]

Quora: What’s preventing HTML based apps to take on Native Apps?

Answer by Aseem Agarwal:

Well. There are many valid reasons. Lets get straight to some of them.  Performance Native apps score on many things on this front 1.Simply said native apps is a compiled byte code processed and executed by the hardware which result in much faster execution than the interpretation done by browser. 2.Native apps can do a lot of caching and local storage beforehand to run content rich apps for e.g a magazine. On the other hand HTML5 apps; though they support local storage; its still limited to what and how much it can store. See here - Client-Side Storage - HTML5 Rocks For e.g storing a complete file is still is still a far-fetched dream in html5.  Graphics Support Native has a lot better support in terms of providing graphics API’s which can be used to a high level of complexity and again utilise the hardware to execute. In comparison to this we have the Canvas in html5 which again has its limitation both in terms of usage and processing abilities. Browser incompatibility -  The biggest bane and probably the first thing to get right to reach level of native apps is the incompatibility among browsers to run the same thing in a standard way. Inspite of concentrated efforts on making the web follow a certain set of standards which every browser should follow; there are still some valid inconsistencies which can leave you helpless at any point of time.  For instance: There is still no standard css property to have a smooth scrolling across all the browsers.  -webkit-overflow-scrolling is now introduced in mobile safari in IOS5 but is not supported all the time in chrome and android browsers.( How much support is there for -webkit-overflow-scrolling:touch ) As a workaround you simply have to go to third party libraries and other hacks for a simple task. Lack of Concentrated effort. This may be a vague point to discuss; but there is a always one thing that always makes the development of IOS and android apps easier which is the availability of so many docs, forums, books towards development on their platform and the effort towards maintaining its popularity. But in case of HTML5 there is no such effort towards making this job easier and make it more widespread.

View Answer on Quora

[notonlycode-blog]

Quora: Sublime Text: What are the must have packages for Sublime Text 2?

Answer by Aseem Agarwal:

A few that I use regularly SublimeTabsLimiter Great when you want to control the number of tabs that are opened in sublime text. Closes the unused tabs automatically after a certain time duration. SublimeLinter As its description says "SublimeLinter is a plugin that supports "lint" programs (known as "linters"). SublimeLinter highlights lines of code the linter deems to contain (potential) errors." BracketHighlighter Higlights opening/closing brackets to a great detail.

vishr/local-history · GitHub

  Maintains a local history of the files you edit in sublime text.

View Answer on Quora