JavaScript, CSS, HTML and Random Technical Stuff...

Awesome Presentation about “Career Development”

Manish — Fri, 27 Jan 2012 06:30:50 +0000

This is a presentation by Theo Schlossnagle during Velocity 2011 on “Career Development”, mostly geared towards career in the web industry. I love it!

Frontend Engineering Basics

Manish — Fri, 27 Jan 2012 06:05:11 +0000

This presentation is almost three years old but everytime I refer to it, I realize what a great place Yahoo! is for Frontend Engineers. I have learned so much from people like Nate Koechley at Yahoo! about frontend engineering. I thought of sharing this on my blog for fellow frontend engineers who are looking to make a career in this field. This is a must see for every F2E!

[ IE7 ] :hover on an empty anchor element with transparent PNG background

Manish — Fri, 23 Dec 2011 19:05:39 +0000

I ran into this bug the other day and thought of documenting it here about how I solved it. I hope it will save time for somebody. Here is the situation– I had an anchor element with no text inside. All I had in there was “ ” with text-indent: 5000px. This anchor element was absolutely positioned on top of an image. In css, I had a pseudo class hover on the same anchor which was supposed to add a background image (transparent PNG) on the anchor tag. The effect was trying to create was– when somebody hovers over an image, they will see another small image that adds an actionable button. Pretty simple. This didn’t work in IE7. The layout looked fine but when hovered hover nothing happened. The pseudo class hover selector wasn’t working at all. The fix was to add a 1 px gif image as a background on the empty anchor and when hovered over swap that image with the background image that I wanted.

WordPress Upgrade and Site Redesign

Manish — Sun, 27 Nov 2011 23:41:18 +0000

I made a good use of the Thanksgiving weekend this year. I successfully upgraded my blog to the latest WordPress version. I also changed the site design by creating a new WordPress theme. This was the first time I created a theme for WordPress and I learned a lot in this process. Since joining Netflix I haven’t been writing PHP at all. So working on my blog was a good refresher to my rusty PHP coding skills. Still there are lot of minor items on the site that need fixing but I will get to those as I get time.

Pure CSS3 Tabbed Interface

Manish — Sun, 13 Nov 2011 07:50:02 +0000

For a long time I wanted to play with CSS3 transitions so I decided to build a fancy tab view only with css (no Javascript needed). Switching between the tabs is handled using :target pseudo-class. The image animation and tab hover animation is implemented using CSS3 transitions. The challenging part in this example was how to show the selected state of the tab without using Javascript. If you look at the example, selected tab shows an arrow pointing left. I am using a combination of :target and :after pseudo classes to add an element dynamically and then styling it to make it look like an arrow. Another notable thing about this tab view is– it retains its state if refresh the page. This is possible because of the :target pseudo class which works in conjunction with url fragment identifier.

If you would like to make use of this tab view feel free to copy the code by viewing the source of the page. I am using embedded styles so that who ever finds this useful can copy the code very easily. I have tested this in Chrome 15.0, Firefox 8.0, and Safari 5.0 but it should work fine in all the CSS3 supporting browsers and it is expected to degrade gracefully in other browsers.

View Demo

Three column header with fluid center column with tabbed navigation

Manish — Mon, 11 Jul 2011 08:52:44 +0000

Recently in my one of my projects I needed to create a layout for header. It was a little complicated layout for me and here I want to present a demo page for the header I ended up creating. Hope this helps anybody who is trying to solve a similar problem.

Header needed to have three columns. Side columns should have fixed width and center column should be fluid. Center column has a tabbed navigation menu. While the center column is fluid I didn’t want horizontal navigation menu to span the entire center column because that creates too much distance between the tabs. (I have max five tabs). Minimum header this header supports is 1024px. I had the liberty of using as much CSS3 as I can with providing somewhat degraded experience to the browsers that don’t support CSS3. I also wanted the tabs to have min-width and max-width and when the text length hits the max-width, I wanted it to wrap to second line by staying vertically aligned middle. For smaller screen support I am using css media queries to change some styles. Thanks to Kristopher and Gabriel in helping me figure out the issues with small screen support and vertically aligning the tab text in the middle when it wraps to second line.

Following are the tools/techniques I used for this:

Holygrail technique for the three column layout
CSS3 for tabbed navigation menu
display:inline-block and shim technique for keeping the wrapping tab text vertically aligned middle
Media Queries to support smaller screens
jquery smartresize plugin to add support for smaller screens on IE6/7/8 [ not included in the demo ]

View Demo

Using del.icio.us to build a collection of web development articles I liked

Manish — Fri, 26 Nov 2010 10:47:16 +0000

I was reading an article by Chris Heilman about how he used delicious to aggregate interesting links he used to post on Yahoo Developer Network Blog. Based on the similar idea I decided to build a collection of cool stuff I encounter on the web related to frontend engineering and web development in general. I usually save interesting links, and articles on delicious. I used one of the delicious feeds to get a list of articles saved with certain tags. Using php I extracted the description, first paragraph text and an image from the article page and presented it with a nice template from styleshout. I used YUI3 to populate an article image and description after the page is loaded. Putting it all together there is now a page with collection of web development stuff I liked. This can be really helpful resource for anybody who wants to learn and read about frontend engineering.

Reasons to be cheerful – Chris Heilmann (Fronteers 2010)

Manish — Sat, 30 Oct 2010 04:04:31 +0000

Today I am posting something on my blog after a long time. I loved this video so much that I had to post it. If you work in web development field and especially if you are a web developer or front-end engineer you will really enjoy it.

Chris Heilmann | Reasons to be cheerful | Fronteers 2010 from Fronteers on Vimeo.

Yahoo! Updates Firehose API

Manish — Sun, 09 May 2010 04:29:53 +0000

During the hack day at Yahoo! I got a chance to play with Y! Firehose API. Using this api you can access the data generated by user actions on Yahoo! network and on third party sites from where user have connected to Yahoo!. Some of the third party sites are Twitter, Yelp, Youtube, Picasa. For ex. If I am sharing my Twitter activity on Yahoo! publicly then anybody can access your activity stream using Firehose api. Using the knowledge gained during hack day, I decided to build a little tool that will let you search through real-time Firehose stream. There is a huge amount of data on Y! network and if we search through that we can get lot of interesting information out of it. Some good examples are movie reviews, latest news, shopping deals. Try out the tool I built and let me know what you think? I built this using YQL, Firehose API, and JQuery. There is a lot of work I need to do to clean up the code, make it work in all the browsers etc.

Image onload and taking action if image fails to load

Manish — Sat, 06 Mar 2010 17:52:48 +0000

In one of our projects backend was sometimes returning a bad url for an image and we wanted a javascript way to detect if image url is good or not. (without making another request). I had a javascript function that was detecting if a particular image on the page is fully loaded or not. If it fails to load I wanted to replace it with a default image. For this I was checking expected image width and height when onContentReady event fires on the image wrapper. However, the problem with that approach was YUI onContentReady doesn’t really check if images inside the given element have loaded fully or not. Because of this, if the image takes longer to load, it was getting replaced with a default image even though the image url was good. To solve this I decided to use an onload event on the image element (instead of onContentReady on the wrapper). The problem with the second approach is that, if the image url is bad, onload event on the image element never fires and I wasn’t really able to replace the image with default one. I ended up using onload event on the window. When that fires, function tests for the expected height & width and if the image height & width is not correct then it replaces it with the default image.