Eric DeLabarWeb 2.0 from a Web Purist and J2EE Developer

At one point in high school I went to a workshop on making a great yearbook. It was interesting, got me out of a day of school, and really helped with the two pages of the book I actually got to work on. Besides that, I took out of it a few facts about portrait composition, mainly that looking right is generally associated with looking into the future and looking left into the past. Recently there’s even been some talk about Obama and his “looking into the future” pose, which definitely follows these guidelines.

But seriously, The Onion aside, every self-respection “Web 2.0” site out there has some sort of avatar available to its users. What does your avatar say about you? Well, I’m no psychologist, in fact I didn’t even take the course on it in college, but here’s what I think anyway.

• Facing Right - Already covered, looking into the future. Possibly optimistic, probably at least positive in nature.
• Facing Left - Again, already covered, looking into the past, possibly back through history. Nostalgic. May or may not be negative, sometimes may seem a little jaded.
• Looking Straight Ahead - Sometimes dominant, sometimes playful, sometimes creepy. As with the next two seems to have more to do with the rest of the facial expression.
• Looking Up - If straight ahead, can be submissive or unconfident, if facing right, increases positive feel, if left, seems narcissistic.
• Looking Down - If straight head, definite dominance, if left or right, shows increasing negativity on past or future view.
• Serious - Boring, possibly pompous; only has an avatar to get 100% on LinkedIn profile or because boss or some self-help personal-branding article said so.
• Goofy - Fun, party-animal, not ready to settle down now, or potentially ever. Probably not the best worker-drone code-monkey but could make a great rock star.
• Picture of Somebody Else - Personally, I find this quite creepy. Usually very hard to actually identify these, in my experience when meeting somebody in the real world and finding their avatar doesn’t match I get a little turned off. This can be pulled off ironically by using an obvious-not-you type of photo as more of a caricature, but I have only seen this pulled off well a few times.
• Picture of Somebody Famous - The more famous the better, if the picture is not recognized by he majority of your audience it simply becomes “Picture of Somebody Else” and therefore loses its power. May also appear very stalker-like or just plain juvenile if done in a fan-boy manner.
• Professional Portrait - See “serious” above, screams real estate agent, lawyer, sales person, or scammy-internet marketer.
• Candid - Probably my favorite type. Seems sincere and real.
• Group Photo - Lack of self-confidence or own identity, possibly critical of own appearance.
• Caricature - Makes me wonder about self-confidence, but could be done in irony. Potential for inside jokes here. A good caricature plays on flaws, so this may say positive things about self confidence.
• Animal(s) - Awe!!!1 OMG look at the cute kittens and ponies! I can haz cheesburger? Seriously. Unless you’re twelve or doing it for purely and obviously ironic reasons I usually look down on this as somebody I’m not even interested in listening to.
• Logo or Mascot - Definitely used for self-branding or maybe just branding in general, if done well can be a great asset, but may also appear very spammy if done poorly. May say things about self-image or confidence, especially if hiding behind anonymity.
• Object - Like an animal, logo, or picture of somebody else, this gives the user complete anonymity and can become very hard to read-into. Lots of room for irony or playfulness can allow personality to shine through, but if not done well it may just turn into a poor inside joke.

Now, please understand, I’m not necessarily criticizing ANY use of an avatar in one of these manners; in fact there is probably somebody out there that has a very good reason for using a pony for their avatar, and I’m sure they do it well. I’m just saying this is what my first impression of you is based on the two seconds I’ve had to see your avatar.

Well, what do you think? Am I right? Am I completely wrong? Did I just insult you and your mother with my analysis of your avatar? Just to remind you, I have no scientific backing for doing this, which I’m guessing makes it a better analysis, but if you disagree, tell me why I’m wrong.

If you’re here because of Josh Porter’s posts on social network and social niche sites on his blog Bokardo, you might find these posts interesting:

• Following The Conversation Elsewhere
• More On Identity
• Online Identity and the Social Graph
• Identity and OpenId

If you like what you’re reading, please subscribe! I post every weekday on “Web 2.0” topics like JavaScript, CSS, web semantics, and of course the social web.

(Please excuse the looks, I’m not quite done with the theme for this site yet, but it looks much better than a week ago!)

For those of you visiting to check out my changes for the May 1st Reboot, I’d like to welcome you and encourage you to subscribe to my RSS feed. Sadly, I did not get my design totally finished thanks in part to life in general. If you’ve seen my design before the reboot I think this is a definite improvement; however there are plenty of tiny details that still need a lot of work.

Since I’m away for most of next week at the JavaOne conference in San Francisco I’m planning to do a bit of work on this site while in the air. So, with any luck it should be prettier than it currently is sometime next weekend. If you have any comments, concerns, or suggestions, please feel free to leave a comment on this post. This is a design in progress and I welcome any and all criticism.

Regular updates should now resume since I don’t need the reboot splash screen any longer, so check back tomorrow for a brand new article.

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.

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.

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?

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.

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.

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!

To continue the discussion on the design of this blog, I’m going to take a moment and step onto my soapbox. But first, a brief introduction to the topic at hand.

I think I noticed this whole grid revolution back in December 2006 when Cameron Moll mentioned it in his article Gridding the 960, based on the optimal layout width for a 1024px wide screen. I was interested, and sites designed using a grid seemed pretty sharp, so I added it to ma.gnolia and moved on. A few months later I caught an article on ALA about the baseline grid, a post to 24-ways about vertical rhythm, and after that a nice 7-step guide to creating a grid-based design, and a great piece on incremental leading. Between these five articles, (and about a year’s worth of time) the concept finally clicked in my mind.

Enter the frameworks. Sometime in the last few years a number of CSS frameworks have emerged, including frameworks from giants like Yahoo, and brand-new frameworks like the 960 Grid System. The most popular, as far as blogosphere-based chatter is concerned, is probably Blueprint, which recently released version 0.7, giving you a pretty good idea of how young this technology is. So, with (at least) three frameworks out there you must be saying. “Surely one is a suitable fit for EricDeLabar.com?” That’s exactly incorrect, at least for Blueprint, but not for 960.gs and here is my reason why.

Semantics. Please, put the pitchforks and torches down, I’m not saying that Blueprint and 960.gs are is un-semantic, I’m saying they it could be more semantic. I’m a strong believer in separation of content from presentation, and IMHO, this is the reason why CSS is as amazing as it is. If you’re not 100% sold on this concept, check out Zen Garden and order yourself a copy of Dave Shea and Molly Holzschlag’s book The Zen of CSS Design. For today’s post I’m going to ignore YUI, mainly because it’s too huge for my taste, and concentrate only on Blueprint and 960.gs.

Both Blueprint and 960.gs use HTML class names to specify the width of the grid, these class names are specifically named with the number of columns the content block is supposed to span. This violates the separation of content from presentation because now the HTML contains instructions on how to render the page. That’s it, my two-sentance, semantic-web-purist’s argument against the current batch of CSS frameworks. Can it be fixed? Of course it can! The easiest way to do this is probably with some sort of script-based solution that provides CSS post-processing. Initially I thought of CleverCSS, but then I realized that the newest version of Blueprint already does this! Imagine my surprise when I discovered this wonderful fact a half hour into writing my post! Oh well, I’ve learned something, and the web is a better place, so I’m going to post this anyway, send you over to the details on the Blueprint Compress ruby script on jdclayton.com, and formally state that I stand corrected and I will probably be using Blueprint for this site’s layout.