Azzcat Blast

Design stories & tips, peppered with life's little tidbits

Crazy Good Web Tools

September 16th, 2010


I’ve just wrapped up my portion of a site overhaul (design, HTML, CSS, jQuery) and am quite pleased with all the new tools at my disposal for this project. Sure, it took a little extra time to get the hang of them, but the learning curve was well worth the investment.

Note: my ratings are on a 1-5 point scale. 5 being Awesome!

HTML5 Boilerplate

This is a starting point for developming an HTML5 site. It claims to be “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.” And I’m inclined to agree. Coming from Paul Irish & Divya Manian is an impressive pedigree. I’ve been using HTML5 for almost a year, but have exponentially increased my understanding of how to build a site for best performance.

Azzcat rating: 4.5

(still need to better understand .htaccess!)

I admit it. After investigating Compass/SASS for Ruby (multiple times) I gave up. Tried again when Less first appeared. Still no go. I was totally enthralled with the idea of CSS mixins and variables, but just didn’t GET the Ruby gem thing—sorry! However, when the for Mac OSX appeared in my mailbox, I was all over it. THIS was easy peasy for me to install, understand and USE. It really makes all those CSS3 rules and prefixes (shadows, round corners, etc.) MUCH less time-consuming to write. Less IS More!
Here’s a sample:

@radius:            12px;

@rotate_R:      rotate(5deg);

@shadow:        0px 1px 10px rgba(84,109,51,.75);

.round  {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;

.shadow {
    -moz-box-shadow: @shadow;
    -webkit-box-shadow: @shadow;
    -o-box-shadow: @shadow;
    box-shadow: @shadow;

.rotate_R   {
    -webkit-transform: @rotate_R;
    -moz-transform: @rotate_R;
    -ms-transform: @rotate_R;
    -o-transform: @rotate_R;
    transform: @rotate_R;

Do read the content on Bryan’s site. He’s hilarious!

Azzcat rating: 4.75

(would like a teensy improvement in error messaging)


IE sucks. We know that. But a little PIE a la mode makes it taste a whole lot better. And even though IE9 is almost out of the bag, 7 and 8 (6 is SO dead!) will still be hanging around for some time—due to the XP/Windows 7 issue.

Long story short…PIE allows IE to cook with some CSS3 ingredients. Granted, IE still tastes like fast food, but it’s a little easier to digest with PIE.

Azzcat rating: 3.5

(no rgba or transition support…can’t make an element transparent or roll over and play dead ;-)

Google Maps Magic

Thanks again to CSS-Tricks! Chris just keeps the hits comin’. Neat-o! I knew this would be very applicable to my current project, where the client has two locations. Took me a little while to figure everything out to modify for my clients’ needs, but I got there. You can see my stripped-down version here. Hover over Facility #2 for effect. Heck, I didn’t even know you could place a Google map with only longitude and latitude—Wowza!

Azzcat rating: 4.5

(little tricky setting the variables in js)

All in all, I soaked up many new production tools this last project. And I plan on using most of them again! If you’d like to geek out some more, follow me on Forrst.

Comments are closed.