JavaScript, CSS, HTML and Random Technical Stuff…

Several months ago I decided to try out BOSS api to search defined set of websites. I adopted a simple script from YUI Get utility examples and tweaked it. This script searches web development reference material from well known web sites. Search can be done in different categories such as JavaScript, CSS and Web Accessibility. When I worked on this script I had never thought that I will ever use it. I was spending time just for fun and to learn a little bit about BOSS api. However I use it very often now a days to look up some reference material related to front-end engineering. So I thought I will make it public and other people can try it out and can benefit from it. Try it out and let me know if you have any comments. Note: Currently it only works with JS enabled. I am planning to fix that very soon. Also I am planning to add some styling to make it look prettier.

For last two weeks I have been working on converting Scriptaculous based UI elements to YUI based elements for one of the websites. This is a fun process and I learned a lot about YUI. While doing this I was also working on improving the site performance in terms of response time by making changes to the site frontend.

For improving the web performance of the site, I was following the research done by Y!’s Exceptional Performance Team. I am still working on this process. This is the first time I actually worked on CSS Sprites. I knew this technique but never got a chance to use it. I reduced the number of background images from 19 to 8, which means, 11 less http requests when page loads. Reducing number of http requests helps a lot in improving site performance. Y! has also created an amazing tool called YSlow, which can be used as Firefox add-on integrated with Firebug to measure site’s performance.

If you want to learn more about this, here is the interesting video on High Performance Websites:

This was my first time using YUI Rich Text Editor in one of my projects. RTE is very flexible and highly customizable component of YUI Library. As a test I was trying to get simple form submit to work with RTE. There was only one textarea and one submit button in the form and on click on submit I was trying to print HTML content entered in textarea using print_r. This was giving me an error saying “J.form.submit is not a function”. After spending lot of time figuring out the problem, I wrote my question to our internal frontend developers list. One of the developers here at Y! pointed out that my form submit button name and id attribute was set to ‘submit’ and that was conflicting with form.submit. I changed the submit button name and it started working fine. I wanted to post this in my blog just in case if somebody is facing the same problem will find it useful.

Walt Mossberg saying:

This was a second Hackday at Yahoo! for me. I work on one of the internal portals here at Y!. My hack was a tool which measures user’s activity on this portal. Basically it was an interesting visual interpretation of existing data. Part of this visual interpretation was developed by using Y! maps api, and ChartDirector. This hack shows number of visitors to the site from different Y! offices on the map for any given date. I used internal search api to get visitor’s profile information including picture.

Sumo wrestling match between Yahoo! co-founders David Filo and Jerry Yang.

There was a Hack Day at Yahoo! today. Yahoo! Hack Day is a day long event where programmers present innovative applications and mashups built using Yahoo! web services and products. Developers start working on their application twenty four hours before the presentation which was Monday noon this time. If you are participating you can work on the project regardless of your day to day work. Today there were one hundred and thirty hacks presented.

This was a first Hack Day presentation for me. I developed a hack called Apartments on Yahoo! Map. I built this using Y! Maps, Y! Pipes, Y! Answers and craigslist apartment listings. The way it works is—after user selects a city; script pulls apartment listings RSS feed from craigslist. This RSS feed is ran through Y! Pipes to extract the location information. Once I have the location information, I am plotting every apartment location on Y! Map using Maps API. This hack also uses answers API to query real-estate and apartments related questions asked by Yahoo users. See it in action here.

I have been reading a lot about YUI and I attended several training sessions on it too. I have been looking for a chance to develop something using YUI but never got it. Recently I used this open source library for developing “Star Rating Module”. In the past I have played with Dojo and developed some stuff with scriptaculous but I like YUI the most.

Another cool thing about this library is you can use library files served from Yahoo! servers. You can simply reference YUI Javascript and CSS files in your application from Yahoo servers. Since the files are hosted on Yahoo! you get advantages such as fast response times, optimized caching, and use of gzip compression. YUI is a great resource for small companies who develop web-based applications with rich user interface but don’t want to spend time and resources in developing JS components from scratch because of shorter timelines.

Recently yahoo released new tool called pipes.yahoo.com. This is a JavaScript based tool which lets you create RSS mashups through web-based visual interface. You can combine different RSS feeds and use the output of that combination in your web application. You can also apply customized filters to the data mashup. The site has some cool examples which will help user building their own pipes!

Here is the video created by Yahoo! Engineers demonstrating how to build pipes.

Since I came from a startup culture, working at Yahoo! was a big difference (work culture wise) for me. Now I will be completing one month at Y! on this Wednesday, and I can tell you it’s a great place to work.

There are two most important factors which I like about Yahoo! work culture. First one is you have lots of freedom as a developer. Developers can try out and present their ideas in the events like Hack Day. Second one is huge developer community. Whenever you are stuck in any kind of a problem, there are so many internal developer mailing lists and forums where you can post your question and get into right direction. There are so many bright people around you can learn from. If you are working in a startup where you are the primary developer, you have to do all the research and find out the best solution to your problem, which is great way of learning too.