I went looking for a rails gem to detect browser types, and stumbled across this great little snip it of javascript code, inspired by 37 signals. It allows you to create CSS rules for specific browsers, versions, and even platform. I don't think I will ever see CSS the same way again.

From http://rafael.adm.br/css_browser_selector/

.ie .example {background-color: yellow}
.ie6 .example {background-color: #A02601}
.ie7 .example {background-color: #993d53}
.gecko .example {background-color: gray}
.win.gecko .example {background-color: red}
.linux.gecko .example {background-color: pink}
.opera .example {background-color: green}
.konqueror .example {background-color: blue}
.webkit .example {background-color: black}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

via yuiblog.com

"Firebug 1.0 hit the wires at Mozilla on Wednesday night and Firebug’s author Joe Hewitt of Parakey Inc. stopped by Yahoo! Thursday to debut the new features. Joe was kind enough to let us record his talk, and we’re pleased to share that with you in the YUI Theater. Although I use Firebug on a daily basis, this was an eye-opening talk for me — I had no idea how much Firebug was capable of until I saw Joe give the power-user tour."

I have talked about firebug before. Even if you currently use it, this video might illuminate some of the features you did even know were there.

The definitive heat map

I have seen these sorts of heat maps for sites like Google. It's interesting to see how important it to be the first link in the list of ads on the right given that one gets the vast majority of clicks. Looking at huge tables of numbers and trying to figure out what people are doing on your site can be difficult. Tools like Google analytics have made this task simpler, but heat maps could be a great tool in any web developers cms.

www.zebrarc.com
Project: Site rebuild
Languages: Ruby, Javascript, HTML
Database(s): MySQL

I led the design and development of an online product catalog and CMS for Hitec. The site was Developed in Ruby on Rails, and integrated technologies such Ajax, DHTML, ferret and Google Maps.

If you dont have it yet you can download it here. Go ahead. I'll wait.

If you haven't had a chance to use it yet, i can tell you that is has added years to my life by reducing stress and frustration. No more wondering why things don't line up, or what CSS classes are affecting that text. Just click inspect, click on the HTML element you want to find out about, and up comes the HTML and CSS for that DOM element. It shows what styles are applied to that element, and even the line number in the CSS file. You can even see what css style are being overwritten or edit the HTML and CSS in place.



Beyond that, it lets you view all http requests and responses, making Ajax debugging a breeze.



One of my new best friends is the net tab. It lest you see every http request and how long it takes to load in a nice time line. It then breaks things down into request for JS, CSS, images, HTML, flash files. I cant tell you how much time and money has been wasted trying to optimize code and database calls. Looking at one of our larger, and slower sites, I can see the the HTML is taking ~300ms, while it is taking close to 10 seconds to load the whole page. Where does that time come from? 3 seconds come from loading 11 CSS files, and 5 seconds are spent loading javascript files. that, combined with the flash and images on the site equals one sluggish site. I have made some modification to the the Drupal system as well as the default template so as to load all CSS and javascript files in line with the HTML. This bumped up the time to load the HTML page to ~350 ms, but dropped the time to load JS and CSS to under 1 sec! Now thats some low hanging performance fruit. I saved second of time on every page load with having to set up memcached, or MySQL replication. *Shutter*