http://jaisanth.com/Ghost 0.7Sat, 27 Jan 2018 15:26:57 GMT60I was very excited to speak at the first-ever NodeDay conference in India. It was very heartening to see a very vibrant community who attended the conference.

In my talk, I spoke about how Node.js can accelerate your front-end development process and how it really worked for us at

]]>http://jaisanth.com/modern-front-end-engineers-toolbox-nodeday-bangalore/ae3a8462-df22-489c-a78e-3d01e918d3d5Thu, 22 Oct 2015 11:38:43 GMTI was very excited to speak at the first-ever NodeDay conference in India. It was very heartening to see a very vibrant community who attended the conference.

In my talk, I spoke about how Node.js can accelerate your front-end development process and how it really worked for us at Flipkart.

]]>React JS is a JavaScript library for building User Interfaces. It is used in Facebook, Instagram and a lot of other sites as well.

React can be used to manage all the views in your web applications in a simple and easy way.

The best thing about React is that

]]>http://jaisanth.com/react-js-a-sneak-peak/0f68c43d-82f1-475a-babf-4e691fca73d7Mon, 27 Jan 2014 11:02:00 GMTReact JS is a JavaScript library for building User Interfaces. It is used in Facebook, Instagram and a lot of other sites as well.

React can be used to manage all the views in your web applications in a simple and easy way.

The best thing about React is that it allows you to do "No Nonsense View Engineering"

React introduces something called "Immutable Components" instead of not-so-intelligent templates and instead of substituting variables whose values have changed in a component, it re-renders the whole component again.

Though the term "Re-render" sounds expensive, React overcomes this by maintaining a Virtual DOM (also called the Shadow DOM) technique, which is an in-memory "clone" of the actual DOM. It applies its re-rendering logic on the in-memory Virtual DOM and in the end interacts with the Window Document only once.

A very detailed explanation of how the Virtual DOM diff technique is intelligent is given here.

Well, React JS does make you feel you are a bit back to the pre-AJAX '90s era when any change in a web page means a page reload. The Web was indeed simple those days!!

I had also given a similar talk in the context of ad agencies where Yahoo! BOSS API can be put to use

]]>http://jaisanth.com/using-yahoo-boss-for-your-hacks/131bde86-eb3b-418d-9180-43900650673cWed, 27 Nov 2013 10:34:00 GMTSlides of the talk on using Yahoo!'s BOSS API and Content Analysis API for searching data on the Web given at the HackU event at IIT Bombay.

I had also given a similar talk in the context of ad agencies where Yahoo! BOSS API can be put to use to serve much more personalized content.

]]>http://jaisanth.com/yui-tidbits/99687364-8395-4b0a-8544-970745b2ef23Mon, 16 Apr 2012 10:26:00 GMTA bunch of extremely simple YUI3 helpers, which I found were very useful to me, for your daily YUI usage.

]]>http://jaisanth.com/hack-with-yui/e29925d5-537f-42a1-b60a-e78c88040395Wed, 19 Oct 2011 10:11:00 GMTI gave a talk upon using YUI for your hacks in the IIT Delhi HackU event (University Hackday) in 2011 conducted by Yahoo!

]]>In one of the projects I was working, we had an interaction where a DIV element pops up and demands some user action.

The DIV used to get obscured whenever it shows up over a select box in IE6 though i had applied a higer z-index compared to the select

]]>http://jaisanth.com/shim-technique-in-ie/25986182-0b07-479f-996d-9affd274f42cSun, 05 Jul 2009 09:50:00 GMTIn one of the projects I was working, we had an interaction where a DIV element pops up and demands some user action.

The DIV used to get obscured whenever it shows up over a select box in IE6 though i had applied a higer z-index compared to the select box on the page. One of my team-mates pointed me to a technique called “Shimming”.

I learnt that this problem apparently surfaces on browsers greater than IE 5.5 and happens when floated divs overlap with windowed control.

Now, the question is what is “windowed control”?

According to this KB Article, the various elements on a webpage can be classified as:-

Windowed Elements

tag elements

ActiveX controls

Plug-ins

Dynamic HTML (DHTML) Scriptlets

SELECT elements

IFRAMEs in Internet Explorer 5.01 and earlier

Windowless Elements

Windowless ActiveX controls

IFRAMEs in Internet Explorer 5.5 and later

Most DHTML elements, such as hyperlinks or tables

The article further says that -

All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container.

However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.

All windowless elements are rendered on the same MSHTML plane, and windowed elements draw on a separate MSHTML plane.

You can use z-index to manipulate elements on the same plane but not to mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane.

The Shim Technique

To overcome this problem, this shim technique is pretty useful. In this technique, we use an absolutely positioned iframe of exactly the same size as the windowed element and below the windowless element which you want to have a higher z-index.

Typically, while creating an i-frame shim, we do it dynamically. The script snippet would look something like this: