Sidewalksoffox.com

Google Links Directly to Content Sections Inside Search Result Snippets

Fri, 25 Sep 2009 16:27:39 -0400

Google announced that they have added a new feature to search results. The brief summary in a result may contain links to specific sections of content on the page. This helps get a user directly to the most relevant content faster. For example, if I search for "jquery tabs", one of my results looks like this:

Clicking "How To..." would take me directly to this portion of the page (http://docs.jquery.com/UI/Tabs#How_to...) instead of the top of the page (http://docs.jquery.com/UI/Tabs). I think that I will enjoy this feature quite a bit, and since most users do not scroll, this should get some dusty content a little bit of fresh attention.

How I imagine It Works

I imagine that google installed an application on all of the computers in their daycare centers. The app rewards the toddlers with ice cream and candy for clicking all the "big words" on a page. All the while they track the clicks using a super-secret internal version of analytics, using the data to serve content to us with a better experience. Next time you see a first grader, let them know you appreciate it.

How it Actually Works

According to the offical google webmaster's blog, google is simply scanning the page for anchor tags in section headings. Sometimes things really are as simple as they seem. The good news is, it should be pretty easy to clean up your site and increase your chances of getting these links in your search results. In fact, you may already be there... or at least close.

How to Increase the Chance Your Google Search Results Snippets Will Include Content Links

Break up the content of your page into sections, giving each section a heading tag (h2 or h3, etc). Inside the sub-header tags, add an anchor.

<h2><a name="how-i-imagine-it-works" class="mceItemAnchor"/>How I imagine It Works</h2>

<h2><a name="how-it-actually-works" class="mceItemAnchor"/>How It Actually Works</h2>

You should also link to these anchors somewhere on the page, in a table of contents fashion.

As with anything google, nothing is a guarantee. Fortunately, this is something we should all probably be doing anyway. It makes it much more convenient to link to specific content when you want to share something. For example, the smashing magazine article I linked to above ("most users do not scroll") has no anchor tags, and if you click it, you'll have to scroll down and find the section that I was referencing.

A PHP Function to Automatically Generate Anchors Within Your Subheads

/**
 * generate a subhead with an anchor tag
 *
 *  Usage: 
 *    echo subhead("How it Actually Works");
 *  Prints:
 *    <h2><a name="how-it-actually-works">How it Actually Works</h2>
 * 
 * @param string $name 
 * @return string 
 */
function subhead($name) {
 $anchor_name = strtolower(str_replace(' ', '-', $name));
 return "<h2><a name=\"$anchor_name\" />$name</h2>";
}

Fixing Pixelation from Scaled Images in IE

Mon, 21 Sep 2009 19:23:41 -0400

A project I worked on recently called for a carousel with five images of different sizes -- somewhat like a "light" coverflow. I ended up building it with basic tags that get scaled by javascript which modified the width attribute.

One of the problems that I ran in to involved the loss of quality from Internet Explorer 6 and 7 when the browser renders the image at a smaller dimension than the file.

This project was for a site that still has a substantial amount of visitors using IE6 (and IE7's scaling abilities are not much better than 6). So I needed to come up with a way to correct the image scaling. A short google later, I found Ethan Marcotte's blog post Fluid Images [via Unstoppable Robot Ninja] and a post on flickr's developer blog.

It turns out that the Microsoft AlphaImageLoader used to support transparent pngs in IE6 will also cause the browser to use a better engine to render scale.

Here is how I fixed scaled images for IE6:

// apply AlphaImageLoader in IE6 for better image scaling
var broswerVersion=navigator.appVersion;
if(broswerVersion.indexOf('MSIE 6') >= 0) {
    $('.cover_slider .images img').each(function() {
        var imgSrc = $(this).attr('src');
        this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgSrc + "', sizingMethod='scale')";
        this.src = '/images/misc/spacer.gif';
    });
}

You use the src from the image in the AlphaImageLoader call, and then replace the src with a transparent "spacer" gif. It's not perfect, but it is definitely much better.

IE7 is even easier. It can be fixed with a simple MS specific CSS class.

.cover_slider img {
    -ms-interpolation-mode:bicubic;
}

Google's Custom Search Engine: Unsung Hero of Search Tools

Wed, 29 Jul 2009 08:46:35 -0400

Google provides an easy to use tool for building a "customized search engine" that only searches the sites you specify. Google Custom Search may not receive a lot of hype around the internet, but it is a very simple, yet powerful resource.

Sometimes you want to search for something, but only within a specific set of sites. For example, Smashing Magazine recently posted a list of 45+ Excellent Code Snippet Resources and Repositories. Occasionally, I find myself opening several tabs to search through a few of my favorite sites from this list in hopes that someone else has already figured out the best way to do something; so I decided to make a custom search engine.

To get started, visit http://www.google.com/cse and click "Create a Custom Search Engine." The form is pretty self-explanitory -- just enter the list of sites that you want to search.

Here is the list I created:

snipplr.com/*
*.smipple.net/*
tipster.carsonified.com/*
snipt.net/*
snippets.dzone.com/*
*.koders.com/*
codesnippets.joyent.com/*
*.bytemycode.com/
refactormycode.com/*
*.naslu.com/*
codecodex.com/wiki/*
*.jonasjohn.de/snippets/*
github.com/*
*.codase.com/*
*.google.com/codesearch/*
*.snipiti.com/*
codekeep.net/*
snippetsmania.com/*
devsnippets.com/*
*.refactory.org/*
*.code-sucks.com/code/*
*.phpsnips.com/*
*.phpclasses.org/*
wiki.greasespot.net/Code_snippets/*
*.stackoverflow.com/*

Once created, there are several more advanced options -- annotations, styling, custom logos, etc.

If you want to see what the result looks like, you can see the Code Snippet search engine I created, or jump straight into creating your own and let me know what you come up with.

7 jQuery Plugins You Should Use on Every Website

Mon, 13 Jul 2009 19:38:16 -0400

David Walsh recently posted a solid list of 7 MooTools Plugins You Should Use on Every Website. Many of his posts use jQuery, but since this one focused on MooTools, I thought I would put up a list of some jQuery plugins that perform similar tasks. This is not a jQuery vs MooTools post -- just a list for sites that already use jQuery.

1. autoResize

David makes the case that all textareas should be resizable, and I would have to agree. When text expands past the boundries of a textarea, autoResize will modify the size of the textarea, allowing the user to see all of the content in the box.

jQuery autoResize homepage

2. Custom Checkboxes with jQuery

Though less of a requirement, better looking checkboxes can make a big impact on user experience. The following tutorial shows you how to implement customized checkboxes (and radio controls).

Customize HTML control with jQuery (Checkbox + Radio)

3. FancyBox

Lightbox components are a slick and convenient addition to many sites. You can use the jQuery UI dialog features to create a lightbox, but FancyBox is a cleaner solution designed specifically for use as a lightbox.

jQuery FancyBox homepage

4. asmSelect

A jQuery alternative to David's quickboxes was not easily found. Instead, I offer you a plugin that improves upon the "select multiple" control of the browser.

jQuery asmSelect homepage

5. ScrollTo

This plugin allows you to cleanly scroll to a location on the page.

jQuery ScrollTo homepage

6. qTip

qTip is the full-featured tooltip solution. It includes just about anything you could ever want to do with a tooltip, including media/complex content inside the tooltip, arrows, positioning, and more.

jQuery qTip homepage

7. Zebra Tables

I am sure that there is an excellent plugin out there that will do this for you, but it seems just as easy to do it yourself.

Setup your styles:


table.zebra tr.odd {
 background-color: #CCCCCC;
}
table.zebra tr.hover {
 background-color: #99FF99;
}
table.zebra tr.selected {
 background-color: #9999FF;
}

after document.ready():


$('table.zebra')
 // add a class of 'odd' to all the odd rows
 .find('tr:odd').addClass('odd').end()
 // add a class of 'even' to all the even rows
 .find('tr:even').addClass('even').end()
 .find('tr')
 // when a row is clicked, give it a class of 'selected'
 .click(function() {
 $(this).toggleClass('selected');
 })
 // when a row is hovered over, give it a class of 'hover'
 .hover(
 // over
 function() {
 $(this).addClass('hover');
 },
 // mouse-out
 function() {
 $(this).removeClass('hover');
 }
 )
        .end();

jQuery Zebra Striping Demo

Thanks to David Walsh for the great post and set of tools.

Fever - My New Favorite RSS Reader

Sat, 11 Jul 2009 19:46:58 -0400

I was reading through my RSS feeds a few weeks ago and I came across a few posts referencing Shaun Inman's Fever app. I use google reader, but I often try alternatives. NetNewsWire is very powerful and Times looks clean, but neither of them worked for me as well as Google Reader. I decided to take the chance on fever and I haven't looked back since.

Fever allows you to set feeds as "sparks." A spark is a feed that you do not actually read every post for, but it seeds the list of "Hot" posts. Any hyperlinks within a spark gets tracked and added to the links in your normal subscriptions. The pages that are linked to the most bubble up to the top of the "Hot" list. This means that all the misc feeds that would occasionally have great posts have a proper place now. I don't have to filter through posts on my own, they naturally make their way to the top. You can also do some fun stuff like subscribing to the "popular" feed for delicious keywords of your choosing, and mark them as sparks to catch what people are bookmarking as well as blogging about.

The interface is really slick. It hides item counts by default (google reader was always 1000+ anyway). The iPhone interface works really well (better than google reader, which occasionally freezes up and resets).

My only complaint is that there is no "Share" feature. You can save items, but you can't generate a feed of items to share with friends. As a solution, I decided to start using my Tumblr account (http://michaelfox.tumblr.com) for sharing items. All of my activity is on FriendFeed (http://friendfeed.com/michaelfox), but I feel like that is too much... I want a way to share only items that I think others might find interesting.

If you are interested in what I find, you can subscribe to my tumblr mini-blog at http://michaelfox.tumblr.com/rss