No Mod Required » tips-and-tricks

rel="canonical?" I'm Down. More Importantly, So Are Yahoo! and Google

rob — Fri, 13 Feb 2009 17:02:13 +0000

In the middle of moving all those underscore delineated URLs to dash delineated URLs*, Google went ahead and announced the rel="canonical" scheme for defining the preferred URL for a piece of content. While it's not the biggest deal for me, other than the "/" vs "/index.php" question, for many people with more dynamic systems it's a big deal. Bravo to everyone involved as it's a really straightforward, easy-to-implement solution to a common, troublesome problem.

Google
Specify your canonical

Carpe diem on any duplicate content worries: we now support a format that allows you to publicly specify your preferred version of a URL. If your site has identical or vastly similar content that's accessible through multiple URLs, this format provides you with more control over the URL returned in search results. It also helps to make sure that properties such as link popularity are consolidated to your preferred version.

Yahoo!
Fighting Duplication: Adding more arrows to your quiver

Avoiding duplicates in the search engine index has consistently been a key concern we’ve heard from webmasters and site owners. Over the last few years, we have made significant strides in finding duplicates in our crawler and index algorithmically and provided webmasters with better tools for controlling these. Today we are announcing our support for a new HTML tag, the tag, which helps reduce duplicates by documenting the preferred URL form to access each page.

*yes, I'm done. Three days, a lot of careful planning and more regular expressions that I've ever written later, everything on my site is now cool like this ( http://www.drunkenfist.com/art/graffiti-art/black-book/index.php ) Dash heaven.

Code I Like – Link Prefetching

rob — Mon, 24 Nov 2008 21:35:45 +0000

I was reading John Resig's Browser Page Load Performance post earlier today and followed up from there on the concept of Link prefetching. Currently supported by Firefox 2+, Link prefetching is a browser based mechanism for fetching "future" content. Considering I wrote (and ultimately scrapped*) similar functionality for my gallery pages, I was obviously intrigued.

In its basic version it looks like this:

With the href being the target content and the rel attribute triggering the prefetching mechanism. Pretty simple. I've already implemented it here on my gallery pages.

One thing I would like to see, and this is hinted at on the above linked Mozilla FAQ page, is prefetching performed automatically on anchor () tags with rel attribute set appropriately. In my mind that would be any anchor with a rel attribute of next, but the prefetch value would be fine as well. Personally, if that were supported I wouldn't have any (or very little) work to do to take advantage of this feature and in a general sense it would build on what people are already doing using prev, next and toc rel attributes on gallery links.

*it was scrapped because I hated the idea of forcing bandwidth usage on people with metered accounts. Since this is a browser based mechanism, it should be relatively painless for people in that situation to control whether or not content is prefetched.

Webmonkey Relaunches and I Flashback to the 90s

rob — Mon, 19 May 2008 18:29:15 +0000

For real! I ran through all of the primordial webmonkey tutorials* when I was starting out building sites (10-11 years ago now!) and if the newly relaunched site is half as helpful it will be a great boon to the community. Great info and a friendly, funny attitude made it the place for me to learn about the web thing back in the last century. Honestly, I owe a lot to the usefulness of those early tutorials. Looking back on it I realize that Webmonkey, coupled with the community that sprang up around Dreamweaver at the time**, was a great forge upon which to build up my web chops.

We're Back! Webmonkey Relaunches, Rejoins Wired

The original web developer's resource has returned. Webmonkey has been completely redesigned, and we're ready to rock once more. Also, our entire content library is now hosted on a wiki, so every tutorial, reference page and code example is open for editing. Come on in and show us what you've got!

Webmonkey: the Web Developers Resource

*Some still exist: like Thau's JavaScript Tutorial, which is over ten years old now.

**I've been a Dreamweaver user since Version 1.2.

Google Doctype – First Pass? Very cool.

rob — Wed, 14 May 2008 21:19:25 +0000

Google Doctype, as introduced by Mark Pilgrim:

The open web is the web built on open standards: HTML, JavaScript, CSS, and more. The open web is a beautiful soup of barely compatible clients and servers. It comprises billions of pages, millions of users, and thousands of browser-based applications. You can access the open web with open source and proprietary browsers, on open source and proprietary operating systems, on open source and proprietary hardware.

Google has built its business here, on the open web, and we want to help you build here too. To that end, we are happy to announce the formation of an encyclopedia for web developers, by web developers: Google Doctype.

Google Code Blog: Introducing Google Doctype

Personally, I'm excited by this development (both practically and philosophically) and will likely contribute wherever it makes sense for me to lend a hand. Looking at it quickly some of the HOWTO information is already very useful (the web security information especially) and it will only improve with time as more and more dedicated people get involved with the project.

Twenty New Yahoo! Performance Breakthroughs

rob — Tue, 18 Mar 2008 01:09:14 +0000

I don't know how many of these are "breakthroughs," but if you really are getting an A (and even if you're not), you might want to take a look at the following enhancements to squeeze the most out of your site's performance:

| View | Upload your own

Looking at the list, many are already very familiar to me, but there are definitely a couple I'm interested in learning more about- more than a full bullet points in the above slideshare. Hopefully the teaser of "more detail coming soon" in the YDN blog post will come to pass sooner rather than later.

And no, I don't yet score an A, but I do get a 96 for the components I fully control, so I'm more than happy to look to other suggestions (like the ones below that I don't already practice) to get this place running a little quicker.

1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access [javascript]
12. Develop smart event handlers [javascript]
13. Choose over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don't scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

More at the YDN blog:

Yahoo!'s Latest Performance Breakthroughs