Today is the last chance for a whole week to check out my archives, tomorrow at 10AM EDT this site will be replaced by the May 1 Reboot placeholder as per the rules. After that and until May 1, I will be working furiously to design and implement the best website I’ve ever done. So, check back on May first at 10AM EDIT (2PM UTC) to see the first official release of EricDeLabar.com.
Archive for April, 2008
Progressive Enhancement and LightWindow
Nothing says Web 2.0 like a lightbox, those nifty, little, modal dialogs that let you create pop-up-like functionality without the worry of pop-up blockers. There are quite a few variations of this concept, including Lightbox JS (and its many variants including Lightbox Gone Wild by the makers of Wufoo), Slimbox, and my personal favorite LightWindow. In general, they’re all pretty unobtrusive, but in this little tutorial I’m going to kick up the progressive enhancement a notch and make LightWindow even better!
Let’s start with a client who wants to use a lightbox to display a multi-view image viewer for an e-commerce site. In true progressive enhancement fashion, if JavaScript is disabled, the user should still be able to perform the basic functionality of the site. So, let’s assume our site has a simple layout with a header, a footer, and a main content area that looks something like this. When JavaScript is disabled the image viewer should show up with the header and footer, when it’s enabled, it should show up in a lightbox without the header and footer. So how do we do it?
LightWindow can be used to display any given webpage by simply setting the class of a link to that webpage to lightwindow. Simple enough. When the lightwindow.js file loads it searches your document for anchor elements with a class of lightwindow and adds the necessary onclick handler to make the link open in a lightbox instead of as a normal page, as unobtrusive as it gets. However, since we want our result page to look differently depending on whether it’s being displayed as a lightwindow or a regular page, we need some way to tell our back-end the display form-factor. To accomplish that we’ll add my own little progressive enhancement to the page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Event.observe( window, "load", function(e) { $$('.lightwindow').each( function( elem ) { if( elem.href ) { if( elem.href.indexOf('?') == -1 ) { elem.href += '?'; } elem.href += "lightwindow=true"; } } ); } ); |
This is simple enough prototype.js JavaScript code that crawls the DOM for elements with a class set to lightwindow and adds a parameter of lightwindow=true to the href attribute. With this parameter in place, the back-end now knows which form-factor to use when rendering the page and we can accomplish our goal with some simple PHP code. (Pardon my PHP, I’m by no means a PHP expert, this is only meant to be a simple example.):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php if( $_GET['lightwindow'] != 'true' ) { ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" debug="true"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-16" /> <title>Example Lighwindow (JavaScript Disabled)</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <?php } ?> <div class="container" <?php if( $_GET['lightwindow'] == 'true' ) { echo "style=\"width: 300px;\""; } ?>> <?php if( $_GET['lightwindow'] != 'true' ) { ?><h1 id="header">Header</h1><?php } ?> <p> This is my lightbox content, if JavaScript is enabled on your browser you should be seeing it in a LightWindow, if it's not, you should see it with a header and footer similar to <a href="index.html">this page</a>. </p> <?php if( $_GET['lightwindow'] != 'true' ) { ?> <ul id="footer"> <li><a href="/">Back to EricDeLabar.com</a></li> </ul> <?php } ?> </div> <?php if( $_GET['lightwindow'] != 'true' ) { ?> </body> </html> <?php } ?> |
Problem solved, have a look here and click on the “this link” link. Of course there are a few more programming alternative along these lines, including modifying the LightWindow object at runtime to prevent a second crawl of the DOM for elements with the lightwindow class, theoretically improving performance, but I’m going to leave that for another article.
As an interesting side benefit to this technique, web crawlers like the Googlebot, which don’t interpret JavaScript, will follow the link to the lightbox page and receive a full page as opposed to just the page content. This Allows the robot to continue crawling your site through the navigation and also allows it to see your page title and meta tags. Now, just a little forewarning, be careful with this technique, if you abuse it, it may be considered cloaking any you could have your site delisted for violating the webmaster guidelines. So in other words, use this technique to provide context and don’t try and stuff the pages with keywords or do anything underhanded.
Working With Code
Now that I have some content, and a nice habit of writing every day, I’ve started concentrating a little more on how this blog looks, especially since the May 1st reboot is only 8 days away!
To start, since this is a blog mainly about writing some form of code or another I needed a good way to do some syntax highlighting. My requirements were pretty simple, it should require very little manual intervention beyond the <code><pre></pre></code> tags, it should support HTML, CSS, JavaScript, Java, and possibly Ruby and PHP, and line numbers would be nice. I found all of this in the wonderful wp-syntax plug-in by Ryan McGeary based on the GeSHi Generic Syntax Highlighter.
Setting it up was a breeze, as usual for WordPress plug-ins, upload, unzip, and it works. Creating the markup was also pretty simple, since all of my code blocks were already wrapped in <code><pre></pre></code> it was just a matter of adding the appropriate lang attribute to the pre element. I did however, run into one minor problem, I had all of my HTML code escaped to to use < and > instead of < and >, but one quick search and replace in MarsEdit for each post, and that was solved as well.
Clearing My <head>
It always struck me as odd, but I originally had three types of feeds on this site, Atom, RSS 0.93, and RSS 2, this is accomplished quite simply with the following code block in WordPress:
10 11 12 | <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" > <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" > |
That code was only really there because the theme I used as my base had it, so I kept it without thinking. I run my feed through Feedburner, which has a feature that is supposed to provide the format that your reader can read, assumably making multiple feed definitions unnecessary. I’m not sure how that works, or if it works with the Feedburner plug-in for WordPress, but it’s turned on in my Feedburner account.
While hacking feeds out of my head I chose to keep the RSS 2.0 feed because WordPress seems to favor it based on URL structure; with RSS 2.0 being /feed and RSS .92 and ATOM being /feed/rss and /feed/atom respectively. With that answered, I suppose the next question is “why?” Well, mainly because of this article by Dean Allen over at Textism. It just makes sense, and from a usability standpoint, the easier to subscribe to my feed the better! Less choices equals easier to use, so maybe this will help my subscription numbers if people can subscribe without thinking.
With that being said, I initially 301 redirected the other two feed URLs to the RSS 2 URL using the technique described in this post, which I’m assume should work perfectly, but I’m guessing that is unnecessary, since the URLs themselves will continue to function thanks to WordPress’ default behavior, so I took the redirects out. If anybody has any problems accessing the feed, or thinks my methodology should change, please enlighten me with a comment to this post.
Content vs. Presentation: Just How Deep Are The Social Networks?
Without any CSS or fancy design, this site is pretty ugly. As the current ugly kid on the block I cry myself to sleep every night and my wife consoles me by saying that it’s what’s on inside that counts. “Google likes your content, just ignore those mean kids, one day your CSS will change and then they’ll appreciate you for who you are,”
she says. I sort-of believe her and resolve to finish my design by the end of the month, but the same thing will just happen tomorrow. The thing is, I just can’t help but ask myself, “self, does your content suck or is social media just that shallow?”
Here’s the thing, I’ve submitted three of my articles to Digg, one that I thought was pretty funny, one that was pretty technical, and one that was just on a whim to see what it would do. I followed the rules and didn’t blindly submit every post, I think I wrote a decent description for each, and my analytics account says I had some people click through. So, I managed to generate some interest, but, once they were there, they spent an average of ten seconds and then bounced immediately! I know for a fact that the posts took longer than 10 seconds to read, so what happened?
Speed shouldn’t be a factor, I’ve benchmarked the site, since there’s no CSS or JavaScript to download and process, and very few images, it’s really just a matter of downloading the content. I even have wp-cache installed and enabled so this site should be as fast as static HTML. Does that mean people are just so disgusted by my 1995 design sensibility that they can’t even stand to read an article they were interested enough in to click on? Would I be better to enable the default Wordpress theme? Is it a readability thing? I know I’m not using 80-character lines, but I don’t think it’s that hard to read. Or maybe my content just sucks and I should go back to being a mindless programming drone.
Social media I implore you, answer my question. Are you too shallow to vote for posts on this site because they’re ugly?
Following The Conversation Elsewhere
A few days ago I commented on this post over at Publishing 2.0, ignoring the semantic debate of whether the article described intermediation or disintermediation, I came up with an idea that I personally find very interesting. I touched on this idea on Tuesday’s post when I said:
How about blog and forum comments, it would be great to have an authenticated and decentralized means of establishing me on a site that is not my own. It would be even better if I could then aggregate these comments into my own site to track my current conversations in the blogosphere.
In that article I relied on Google to crawl the site and provide the aggregation for me, what if we looked at it more like my Publishing 2.0 comment and provided a reverse trackback ping.
In order for this to really work, we need a few things, one, we need a service that accepts the ping; Wordpress accepts trackback pings, so let’s assume this is easy to implement. Since most blog comment systems accept a blog URL, we know the author’s URL, append to that a well known URI to accept the ping and we now have an endpoint. So far, so good. Next, we need identity, in order for this to work people cannot be able to spam the system, we need a pretty solid concept of identity. To borrow from MicroID, URL + email = identity, since most (if not all) blog comments accept email and don’t show it, we can create a MicroID hash and add it to the comment’s container element as a class according to the Microformat class pattern. Finally, once the comment is approved and posted, the blog pings the commenter’s blog with the generated MicroID and the post URL, the commenter’s blog visits the site and extracts the comment via the MicroID class, and adds it to the feed of current conversations.
I like the concept, only one problem, it requires both the client and server to understand this reverse trackback ping. If we lived in a Wordpress-only world this would be pretty simple, one plug-in, or better yet a change to the code base, and the functionality is there. I’ve also considered a JavaScript bug placed in the post by the author who’s blog contains an endpoint, but javascript and comments probably don’t mix well, and we really only need a ping the first time not every time the page is loaded. Another option would be the manual approach, telling your own blog to go crawl the blog you’ve just posted on for your comments; or possibly even a third-party service that just crawls blogs looking for MicroID classes and then publishes the results as a feed that a commentor’s blog can consume. Manual is pretty much overkill, it would probably be easier to just create a new post and copy and paste the comments. The third party service just means one more service silo and eliminates the control of your own identity because now the content is stored there, as well as the problem of having to rely on a third party to spider the blog before your content gets updated. So there’s the impasse, a logical idea without a practical application.
For now, my first Wordpress plug-in is going to be an experiment to see if this works, and then we’ll move on from there, unless of course Chi.mp is moving in that direction, then I guess we’ll just have to see what they come up with.
More On Identity
First things first, three new entries to the Blogroll: Bokardo, Like It Matters, and Own Your Identity. I’ve been a long-time Bokardo reader, and the other two entries came from that. Josh Porter from Bokardo is a contributer to Own Your Identity, which is also contributed to by Brian Oberkirch of Like It Matters and Myles Weissleder. Own Your Identity is the blog for the Ch.imp (Content Hub and Identity Management Platform) project, which is described in this post. I love the concept, a decentralized identity hub that you install on your own domain.
I also came across ClaimID, a blog on managing your online identity, which lead me to MicroID, which seems like a microformat-based cross between FOAF’s foaf:mbox_sha1sum and an inverted XFN rel="me", in other words you place a meta element on pages that you own with a hash generated from your online identity (consisting of email and url), which looks something like this:
<meta name="microid" content="mailto+http:sha1:53410a9d6d408f3a92288a6543f16f4a9703ceea"/>I’m not 100% sold yet and I think I’m missing some of the details, but I’m interested, and I’ve added it to my head element.
Online Identity and the Social Graph
If I’m ever going to be rich and famous people will need to know who I am. *Removes tongue from cheek.* If anyone knows who I am it should probably be Google. How good is a web guru if they’re not number one in Google for their own name? Seriously would you trust anything I had to say if you couldn’t find me in Google? Well, it seems I have that covered, at least for now, I’m number one, two, three and four on a search for eric delabar. My problem starts with result number five.
The previous owner of the number one spot on Google is a professional soccer player and coach who shares my name. No offense to him, but I really don’t want the association. So here’s my problem, I can establish me, but how do I establish not me?
To establish me I’ve of course created this blog, it’s hosted on ericdelabar.com how more authoritative can you be. I’ve created an identity page written with XFN markup to establish what other sites, accounts, and profiles out there are mine, and I’ve created a FOAF file and linked to it from the head of this document. If I understand the Google Social Graph API, this pretty much means I’ve established me, at least I will have as soon as my site’s been crawled and indexed.
What about not me? Good question; there is no rel="not-me" in XFN, maybe there should be, but then again is it really necessary? It’s also really not the point of XFN, maybe Google needs some extensions in order to more appropriately identify the edge types. Or maybe they just figure that if I used my identity page to point to all sites that are me doesn’t that mean anything that isn’t specified isn’t me? What about things I haven’t written myself? For instance a news article on “Eric DeLabar,” can I establish that one article is about me and another article is about the soccer player? How about blog and forum comments, it would be great to have an authenticated and decentralized means of establishing me on a site that is not my own. It would be even better if I could then aggregate these comments into my own site to track my current conversations in the blogosphere.
I guess what this all comes down to is that I’m wondering how long until Google has the ability to generate something like the following:
Google, are you listening? A few more microformat parsers, an opt-out (or opt-in) page, and the information you already have.
Matt Snider, You’ve Been Blogrolled
I haven’t said anything about it yet, but I love Google Reader. Not only is it an amazing feed reader, it has a neat little service where it recommends feeds to you based on your existing reading list. Yesterday night it recommended Matt Snider’s blog to me.
Matt writes about JavaScript and JavaScript frameworks, and includes some very in depth analysis and excellent code examples. Matt, like myself, seems to prefer a very OO approach to JavaScript, so I will probably be referencing his articles in future posts. If JavaScript is your thing, go check out his site, subscribe to his feed, and be sure to checkout the archives for some great stuff like this article about an isDOMReady implementation, and a great overview of JavaScript frameworks and libraries.
As I said yesterday, if you or someone you know blogs about topics similar to mine, please let me know. If I like the site, I’ll gladly add it to my blogroll, write about it, and probably use it as a conversation started in a future article.
On Feeling Lonely
My blogroll needs some love. I’m looking for some quality blogs out there who are just starting up. They should be on a similar topic, somewhere close to SEO, CSS, JavaScript, Web Standards, and/or Java Programming, but that’s really open for negotiation.
Here’s my problem, my co-workers don’t blog, I doubt most of them have even heard of Wordpress, and nobody really has enough of a passion to take the time to write. So, if you’ve got a young blog, or you know of a blog on a similar topic, please send me a link in a comment. I’m looking for blogs that update often, or at least regularly, because I need some fresh, on-topic content to comment on and discuss. Who’s out there? This is not a link exchange request, I don’t expect reciprocation, but I wouldn’t complain if you did, and please don’t spam me with links to non-related sites.
In other news, I’ve come across a few interesting Wordpress plugins that I’m going to be trying out, wp-typogrify, and Registered Users Only (not for this blog). So, look for those changes and if I find anything interesting about them I’ll let you know!
