Search results are only as good as their relevancy. Sometimes the highest ranking results are stale but the google spider seems to like it regardless. If i’m not happy w/ results or I need timely results I find myself searching on Twitter or Delicious to get some good ‘ol human suggestions.

Now that I can get timely Google results I’ll add this tool in my arsenal. Only thing it’s a pain in the ass to remember the extra get params (&tbs=qdr:X##&tbo=1) that Google needs appended to the given search url so I made a bookmarklet to make things KISS. After your search, just trigger the bookmarklet (defaults to 1 day) and go from there.

Google Liveify « drag to your toolbar

Google Live Reference

Just add these to the end of your search url if you want to override the 24hour default.

&tbs=qdr:X##&tbo=1

The X## portion gets replaced with:

• s## for number of seconds in the past: &tbs=qdr:s45&tbo=1
• n## for number of minutes &tbs=qdr:n5&tbo=1
• h## for number of hours &tbs=qdr:h2&tbo=1

You get the idea. Enjoy!

picture courtesy of bripblap.com

So I have a confession to make, I love delicious, but I’m lousy at tagging bookmarks. I have a horrible memory so in my travels (and I delicious links a lot) I find myself wanting to tag a bookmark with as many keywords as possible on some off chance I don’t know what to search on to dig up the particular bookmark I’m trying to retrieve. I end up manually toggling every popular tag that is shown on a given post. It’s too time consuming for me.

I’ve been working with jQuery and bookmarklets a lot lately so I had the idea of leveraging the two to create my own LazyTagger bookmarklet for Del.icio.us.

The LazyTagger process is simple

1. You must have the Del.icio.us ‘post’ bookmarklet installed. Try my customized version (does away w/ the popup window which I find annoying) post to delicious « drag this to your toolbar
2. Drag the LazyTagger bookmarklet to your browser bookmarks toolbar
   
3. Copy and paste this code into the ‘location’ of your newly created bookmark – you’re going to have to go and edit the bookmark manually from the browser. This has to be done to the avoid character limit on drag-and-drop bookmarklets.
   

   javascript:var%20s=document.createElement('script');s.setAttribute('src','http://code.jquery.com/jquery-latest.min.js');document.body.appendChild(s);s.onload=function(){var%20tags=[];$('#save-reco-tags%20ul.tag-list%20li,#save-pop-tags%20ul.tag-list%20li').addClass("on").each(function(){tags.push($(this).text().match(/\D*/g)[0]);});tagit=tags.join('%20');$('input#tags').val('').val(tagit+'%20').focus();};void(s);

4. ‘post to delicious’ just like you normally would
5. When you’re at delicious, click the LazyTagger bookmarklet
6. All of the popular and recommended tags will be selected automatically. Laziness rocks.
7. After all of the tags are toggled the focus will be placed on the tags input so you can begin typing any other tags you deem necessary.

That’s LazyTagger. I’ve been using it for a long time and I can honestly say I don’t think I could go back. Feedback appreciated.

October pwns. The climate cools to the point where it’s actually enjoyable, leaves turn here in New England, baseball playoffs, and Halloween to name a bit of awesomeness. The lovely October holiday has kept a roof over my head since I graduated from WPI, minus a short stint distracting tweens.

On the eve of October, it’s worth mentioning that if you work with websites that spike ginormously in a short amount of time that up-time is critical. Each minute of downtime can have huge revenue ramifications.

At Fright Catalog I employed a free way of instantly being alerted via txt message if any of our sites were struggling.

Montastic

Montastic is a free service that will constantly ping your domain and alert you via email when there is a problem. It’s rock solid and it just works.

Send a text to my iPhone

It took a bit of research to figure out which email address on AT&T worked with my iPhone but after testing out a few:

• phone#@mmode.com
• phone#@txt.att.com
• phone#@mms.att.com
• phone#@cingularme.com – works, but on it’s way out

I finally found a winner: phone#@txt.att.net (Thanks to Ryan for the update)

It’s not sexy but it will work as an email address that when emailed will send an MMS message to your iPhone.

I’ve seen the recently popular downforeveryoneorjustme.com advertise uptimeparty.com. They’ll let you monitor 1 site for free, but otherwise you pay. Montastic does the same job and it’s free, so it makes a great alternative.

Montastic has helped me sleep easy many-a-night if we hit some up-time snags earlier that day. It could easily be used for your own personal blog as well.

Check out the Upcoming Event. Sign up sooner than later, as of this writing there were only about 20 slots left!

I’ll be talking about how I’ve used jQuery in some of my development projects and some tricks and best practices I’ve picked up along the way. I’ll also be talking about degradation, progressive enhancement and (time permitting) discuss how jQuery’s Plugin architecture lets small teams do a lot with little.

Update

The talk was a great success and I had a great time. I’ve posted my slides: jQuery Best Practices. Much thanks goes to the Betahouse for hosting the Refresh Boston event.

As well as the accompanying demos on Progressive Enhancement:

• jQuery Rating
• Toggle-able Forms

SQL Server 2000 by MICRO$OFT is the best SQL application I have ever used.

Select query text -> run (ctrl+enter) -> results. nothing out there does this simple behavior.

For everything I love about OSX I do miss a couple of apps since I jumped ship in June of ’06. A decent SQL application is right up there at the top.

The Candidates

Navicat

 I use Navicat on a daily basis but it drives me IN SANE. All I want is a simple application for running queries that’s easy to navigate and has plenty of hotkeys baked in so I can bounce around with ease and speed. Navicat fails miserably at this. I end up with 5 windows open just to do simple stuff, there’s not enough distinction between the behavior of browsing tables or writing queries. It’s a painful, verbose, hassle. Today I was so pumped I found a couple hotkeys that would save me a lot of time only to find out they were useless because they didn’t put focus on a textarea that would be painfully obvious to anyone actually using the program. Multiple queries require multiple windows and it all ends up being a CF in the end. I’m looking to replace Navicat pronto.

Query Browser

Query Browser could be awesome, but it comes up short. Again a lack of hot keys and cursor focus make using it a pain. Frequent crashes don’t help (it crashed on me twice while writing this). My biggest peeve by far is how Query Browser deals with errors. You end up getting this tiny sliver of an area dedicated to errors. If you get a couple in a row they all stack and become unreadable and you can’t even resize the errors window space OR clear them out. I do like how Query Browser makes use of tabs for multiple queries instead of creating a new window each time (take note Navicat).

phpMyAdmin

I know other mac users who just use phpMyAdmin for all their SQL needs. I hate the lag of a web interface for something that is screaming for an application interface. Again, phpMyAdmin is sans hotkeys. That’s a deal breaker.

Dismay

If anyone can enlightened me please speak up. I’ve looked near and far and this is the only list of apps I have found and I assume it’s pretty comprehensive. I tried a couple of these applications out and found that I was already using the best available out there.

I’m very close to just retreating back to the basics.

<form id="rate_this" action="/process/rating/" method="post">
    <div id="rating_scores">
        <label><input type="radio" value="1" name="rating" />1</label>
        <label><input type="radio" value="2" name="rating" />2</label>
        <label><input type="radio" value="3" name="rating" />3</label>
        <label><input type="radio" value="4" name="rating" />4</label>
        <label><input type="radio" value="5" name="rating" />5</label>
        <label><input type="radio" value="6" name="rating" />6</label>
        <label><input type="radio" value="7" name="rating" />7</label>
        <label><input type="radio" value="8" name="rating" />8</label>
        <label><input type="radio" value="9" name="rating" />9</label>
        <label><input type="radio" value="10" name="rating" />10</label>
        <input type="submit" value="Vote" />
    </div>
</form>

Which gives us this:

A simple radio list and a simple button to submit the form.

How can we make this 100x’s better? Simply clicking on a number to submit the form automagically would be the easiest and most friendly user interaction. So we lean on jQuery to provide progressive enhancement. Using these methods we can create a rating behavior infinitely better and more appealing like this:

jQuery

// hides the vote button
  $("form#ratethis input#votebutton").hide();


// hides all radio buttons
    $("form#rate_this input[@type=radio]").hide();

// format the labels to look clickable
    $("form#ratethis label").addClass("contestselector");

// change the formatting of the label when it is hovered over
// by assigning a different class
    $("label.selector, #ratingscores a").hover(function(){ 
      $(this).addClass("selectorh");
      }, function() {
      $(this).removeClass("selector_h");

    });

// submit the form when a label is clicked
    $("form#ratethis label").click(function() {
      $(this).find("input").attr("checked","checked");
      $("input#votebutton").trigger('click');
    });
}

CSS

#ratingscores {
margin: 20px 0 10px;
border: 1px solid #cacaca;
background-image: url("/images/ratingscoresbck.gif");
background-position: 0% 45%;
background-repeat: no-repeat;
background-color: #efefef;
padding: 5px 0;
padding-left: 130px;
}
.contestselector {
color: #000;
text-transform: uppercase;
cursor: pointer;
font-size: 167%;
font-weight:bold;
padding: 10px 13px 9px;
margin: 1px;
}
.contestselectorh {
background: #c00;
border: 1px solid #a00;
background: #00c705;
border: 1px solid #008004;
color: #fff !important;
text-decoration: none !important;
margin: 0px;
}

Why hide all the radio buttons? Aside from the fact that they’re ugly we don’t need to worry about them because we’re using <label&rt;s effectively.

The labels are surrounding the buttons with so they will still get focus

<label><input type="radio" value="1" name="rating" />1</label>

We let the user know that the numbered hot spots are indeed buttons by applying a mouseover behavior.

We submit the form when a label is clicked – not when the Vote Now button is pressed.

If Javascript was not available or the jQuery rules were not applied then the html would perfectly degrade and would be entirely usable otherwise.

For an example of this method in action venture over to the Costumzee Costume Contest.

I recently spent the day debugging Internet Explorer. I save it for the absolute last step in front end development before pushing a site live. I want to avoid Explorer as much as possible.

I figured my process would be worth sharing. This is my setup.

1. MacBook running Firefox with the Web Developer Plugin and Firebug plugins installed.
2. Old Toshiba Laptop 1.8ghz barebones Windows XP installation with IE6
3. Parallels installed on the MacBook with IE7 on Windows XP SP2

With this setup I can test for any modern browser with any kind of significant market share.

• Firefox Mac
• Firefox Win
• IE 6 + 7 (soon to be 8 as well)
• Camino
• Safari

Debugging IE issues is probably the most painful thing about my job, but one that’s made a little bit easier because of my approach so I thought it’d be useful to share.

I develop 9-5 in Firefox so any rendering bugs usually come to my attention right away and I’ll fix them immediately. Camino is based on the same Gecko rendering engine so I don’t have to worry about anomalies there. Safari does a good job rendering everything and my colleagues use it as their day to day browser so we usually catch any rendering bugs that way.

Then it comes down to IE debugging. I only concern myself with IE6 and above, I can handle well for modern browsers, besides the market share of browsers that fall outside this range is really insignificant statistically. For small development teams it’s hardly worth the extra effort to pay attention to the long tail of browsers.

Looking at Google Analytics for a heavy traffic site that I work on:

5.6m Visitors from 8/1/07 – 3/20/08

<br/> IE is still dominant – so testing for these browsers is essential.

<br/> If we look at the last 6 months, IE7.0 and IE6.0 are neck and neck ~50/50, however:

<br/> In the first 3+ months of 2008 you can see that IE7 has taken a significant leap above IE6 in the market 61/39 and IE 5.5 has gone to a 0.12% market share to a meager 0.07% market share.

That leaves us only concerned with IE6 and IE7 (and hopefully upcoming IE8 will be a non factor). The best way to deal with CSS and IE is by leveraging something called conditional comments

Before conditional comments I relied on browser hacks to differentiate between browsers, but conditional comments are a lot easier and so much more effective. Currently I use these declarations:

<!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/stylesheets/ie7.css" type="text/css" />
<![endif]-->

I start with IE6 and clean up any rendering issues – then I move on to IE7, which invariably has fewer issues to deal with. Because IE does not have a handy dandy tool like Firebug to help me diagnose the problem this process usually involves a lot of trial and error. It’s a very iterative process and one that my Agile Development Workflow is well suited for.

One technique I’ve found to be indispensable is assigning various background colors to the markup that I’m trying to debug. Often this is all I need to target CSS rules run amok. Over time you can avoid generating certain CSS + HTML that will break IE altogether – and that’s what separates the experts from novices.

Was this helpful? How do you approach debugging CSS in IE? Share!

When I work with large sites with many jQuery rules that have to be applied, sometimes this can cause sluggishness – especially if you’re using jQuery for progressive enhancement.

I was recently hit with a performance snag with jQuery – I just had too much going on in my jrules.js file – this is what I use to apply all of my DOM methods with jQuery. jQuery performance is great – and with the packed version it’s footprint is miniscule but when you parse a massive DOM and apply a ton of rules sluggishness ensues especially when using progressive enhancement to hide/show multiple objects.

Right now I have a jrules.js file that is big, mean and has over 200+ lines of jQuery goodness to apply every time a page loads.

I hit performance issues when I have pages with hundreds of tags in the markup and a ton of content – you can see where I’m going with this.

What I came up with and use for most of my recent projects is a way to pass over those jQuery rules that don’t need to be applied or even looked at on certain pages. This is how I go about it:

First I break up my rules according to what page they’re on.

document.ready(function() {

// GLOBAL

// HOME

// LOGIN

});

If you can segregate rules and only apply them when they’re needed you’ll significantly improve the speed with which jQuery can handle it all, especially when you’re dealing with massive DOM trees.

I leverage top level CSS inheritance to bring it together. On my pages assign an ID to the body tag from which all my jQuery rules will be executed upon.

<body id="home">

You can use .length or .size() – they’re synonymous to test if the jQuery object is avaiable in the DOM, if it doesn’t exist jQuery doesn’t have to bother with it.

Rules only used on certain pages can now be filtered and jQuery can pass over huge blocks of declarations of whom we know don’t exist in the current DOM anyhow.

document.ready(function() {

// GLOBAL
// DOM elements that exist on every page

$("input[@type=password], input[@type=text]").addClass("text");

$("input[@type=password], input[@type=text], textarea").focus(function() {
    $(this).addClass("focus");
});

// HOME body#home

if ($("body#home").size()) {
    // only applies rules on the homepage
    $("p").hover(function() {
        $(this).addClass("change")
    }, function() {
        $(this).removeClass("change")
    );
}

// LOGIN

if ($("body#login").size()) {
    // only applies rules on the login page
}

});

For simple pages with a few rules and a small DOM this is definitely overkill, but if you’ve noticed even a nano second of lag when jQuery applies your rules and see the DOM rearrange itself at page load try this out and let me know how it worked for you.

Last night when I attended a meeting of The Markup & Style Society at the Filament Group office. I got a chance to speak with Mr. jQuery himself – John Resig about my performance issue and I shared my solution to the problem. I was unsure I approached it the best way and there wasn’t a better solution available out there, but he assured me the way I was going about it was sound so consider this method Resig Approved™.

UPDATE

John alerted me to this: Seems that jQuery is now more popular than Prototype – far as search queries go at least. Congrats John & the jQuery team!

I work on Yumdrop.com, a popular lingerie site. Often I’m out there looking to see what the competition is doing to see how we stack up and also evaluate how well we’re pushing the envelope in our particular niche. Victoria’s Secret is by far the leader in this industry as far as market share, but their website could’ve been built in 2002.

When I peeled back Giselle’s onion I was flabbergasted. I haven’t seen egregious CSS like this in a long time. As developers have embraced web standards over the years (something I have done from the start) and standards based practices have been understood and adopted, people have just gotten a better understanding of how it all comes together. You don’t see blatant misuse of CSS like this anymore. Even basic knowledge of CSS inheritance could let them avoid this debacle.

On http://www2.victoriassecret.com/html/includes/globalstyles_normal.css for example:

.blacktext {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.blacktext2 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; font-weight:bold }
.blacktext3 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.text2 {color:#333333; font-family:Arial, Helvetica,sans-serif; font-size:11px; text-decoration: none;}
.text3 {color:#333333; font : 10px/14px Arial, Helvetica, sans-serif; text-decoration: none;}
.textPink {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.textPink11px {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.textPinkBold {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-weight:bold;font-size:11px; }

It goes on and on and makes me quite agitated

Turn off Javascript. They use it to write OUT their styling.

No Javascript, No Styling, NO degradation. You end up with something like THIS ». The complete header with site navigation and footer don’t even render, making the site pretty useless to navigate or use.

And as laughable as all this it keeps getting better!

The site navigation is 1 large image map! This is just not done in practice. How can screen readers access the content? How do visually impaired users shop?

Never mind degradation here, there are so many better ways to construct such navigation. Each time you visit a different department you must create a whole new image map image. What a waste of time. If your navigation changes, you have to recreate all of the active department images all over again. With modern development techniques this just makes no sense.

There’s just too much to point out so I’ll just list the rest I briefly spotted in the 5 minutes I looked..

• They’re using a centered div w/ css to center the containing wrapper, but they use tables for layout.
• Extraneous use of classes all over the markup because they don’t understand inheritance.
• Validate much? Of course not, are you even surprised though?

As a web developer, you think that “doing things the right way” is part of building a successful web presence, but as time goes on I’m beginning to realize that it really doesn’t matter as much as we often think. I wonder if Victoria’s Secret developers know that it is not developed with the best practices, I wonder if they care. I wonder if they have an internal team or whether they just outsourced it to a very misguided web shop.

If anyone at VS wants me to scramble their onion, contact me. You deserve better.

Chart From Hitwise

I have a MySpace and Facebook profile but I never go on MySpace anymore since FB opened up their network to 3rd party applications. Plus being a web developer I can just tell that FB was built right – as opposed to Myspace which is a giant CF.

So I looked down the list:

1. Myspace – check, I have a profile
2. Facebook – check check, I go there constantly
3. Bebo – Popular in Britain, ok I’m familiar with it
4. BlackPlanet – ???

So I figured I’d check it out. Then I was greeted with THIS Bitch Slapped!!!

Como? Huh? They don’t support the latest version of Camino?

It’s pretty funny that they want you to upgrade to Firefox 2 when Firefox and Camino are both open source projects of the Mozilla Foundation and share exactly the same Gecko rendering engine.

These days with standards based development processes we don’t have to “browser sniff” any longer. If BlackPlanet didn’t get the memo,the right way to go about it is “feature sniffing” with locked down degradation. You should really look into Jeremy Keith’s DOM Scripting and perhaps read A List Apart from time to time. It really pisses me off when I run across this type of neglect on the Internet…

Ongoing List of Neglect

As I find these offenders the list will grow.

• 02/26/08 MakesParties.com
• 03/05/08 Comcast.net