Coding with Jesse

How to add gravatars to your web page or blog

Last night, I added gravatars to the comments on this site. The best blog post to see them is Blog Tipping.

Gravatars are globally recognized avatars. It's a clever way to let people upload a little picture that goes beside their comments. This way, people only have to add them once (at the Gravatar website) and they automatically work across all web sites implementing them. They use the MD5 hash of your email address as an id, so you only need to put in the same email address when you write comments, and your gravatar will come.

Implementation is very easy. You don't need to make any HTTP request on the server or anything. You only need to add an image that points at the gravatar URL, with some optional parameters, and the browsers of people visiting your site will download the images from gravatar.com.

The only required parameter is gravatar_id, the md5 hash of the email address. Every programming language has a way of finding an MD5 hash. PHP probably has the most simple example:

<img src="http://www.gravatar.com/avatar.php?gravatar_id="/>

There are also optional parameters you can use. rating lets you make sure there are no pornographic or mature images on your site. size lets you set the width/height to something other than 80px. default lets you set the URL of a default image, in case you want to display something for people without a gravatar (a 1x1 invisible image is the default). border is supposed to let you set the colour of a 1px border on the image, though I wasn't able to get this working. So the output of a complex example might look like this:

<img src="http://www.gravatar.com/avatar.php?size=50&border=000&gravatar_id=eb22390416c3b62025dc9ad2120a8ade"/>

It's worth noting that adding gravatars can be a css and design challenge. You don't know whether the image will be a real gravatar or just a 1x1 invisible image. If you add margins or padding to the gravatar, they will end up on the invisible pixel as well, and this can look weird. I solved it by indenting all comments 60px to allow space for a 50px image. If the image isn't there, the comment is just indented anyway. You can also solve this by setting a default image to a "No gravatar" image.

Gravatars can really be implemented anywhere you know an email address and may want to show an image. There is a Thunderbird add-on that lets you see Gravatars while you're reading emails.

For more details, or to see how to implement gravatars in other languages and blog publishing software, the Gravatar web site has a detailed implementation guide. If you just want to upload your own gravatar, go sign up.

Published on August 23rd, 2006. © Jesse Skinner

Connecting People

I've become convinced the ultimate benefit of the Internet is and will always be the ability to connect people. Lots of people know this already. You can see evidence of it by the rapid pace of new Social Networking web sites being made. But I'm not interested in these billions of MySpace rip-offs.

There have always been people-matching sites on the web. Dating and Friend-finding sites (connecting individuals to meet in real life) and sites for finding jobs (connecting employers with employees) are some of the most common examples. We can also see people connecting through the uses of forums, blogs, online groups and other communities. But I think there is a lot of potential for specialized sites that solve a very specific problem for a potentially large group of people.

Take a look at BookMooch. This is a new site which lets people trade used books. No money is exchanged. Instead you get points for mailing books to people, and you can use those points to get books mailed to you. It is a perfect example of the potential of connecting people. It's not just connecting me to you so that we can chat about our shared interests. It's about connecting anyone who wants to trade books, and allowing the most complex of trades to happen very easily. "I'll give this book to her, and she'll give that other book to him, then he'll give some book to you, and finally you give this book to me."

Web professionals should check out Programmer Meet Designer. It's a place for finding freelancing partners who can help out each other in any number of ways, from a few hours on a single project to a permanent professional partnership. Most notably, it's geared to a specific yet large problem of matching programmers and designers, and it solves the problem well.

The possibilities are rather endless, and I think the room for competition or co-existence between these sites are quite large. For example, there are a large number of job searching sites which co-exist in harmony. As I outlined earlier this week, there are job searching sites which specialize in jobs for web professionals. There are also dating sites which specialize in every conceivable niche. People can use more than one of these sites at a time, and many do.

If you're trying to come up with a new web business, try to find a way to connect people who can benefit from each other. These sites will always be in demand, simply because everybody benefits.

Published on August 22nd, 2006. © Jesse Skinner

Carnival of the Web #3

Hello and welcome to the third edition of the Carnival of the Web! Despite this being the middle of the summer, it's obviously not everyone has been on holiday. This month we have some more great blog posts I hope you'll enjoy. For more information on this carnival, or to submit an article, check out the carnival info page.

First off, Dustin Diaz shows how JavaScript can be a bit more object-oriented by showing us How to achieve private, public, and privileged members in JavaScript.

Next, Simon Willison gives a detailed review with the ups and downs of Sticking with Opera 9.

Justin Palmer insists we should worry more about code readability than length by exploring Why Chef Boyardee Doesn't Write Javascript.

If you're hungry for some Bite Size Standards, why not learn how to Clean up code with semantic anchors.

Dean Edwards brings the for-loop into the 21st century in Enumerating JavaScript Objects.

Jeremy Keith explains why the only way web developers are going to be able to work with JavaScript is by Learning JavaScript.

James Bennett gives some perspective on what security really means with Let’s talk about frameworks, security edition.

Clay Mabbitt over at Web Design Business Best Practices walks us through a useful but often overlooked aspect of database design, showing how to leave an audit trail in your database.

Joe Kissell brings us the next Interesting Thing of the Day, a look at the million dollar homepage and how to make a fortune with paperclips and pixels.

D Kai Wilson of Mechanical Regurgitation brings us through an often necessary sanity check by asking the question: Are YOU listed on spam blacklists?

Sérgio Rebelo at twodotfive weighs the pros and cons of using a fixed layout with Blog Widths.

And to finish things off with a laugh, Avant News brings us news all the way from the year 2008, letting us know that Social Networking Site Digg.com to Replace Traditional Voting.

Published on August 20th, 2006. © Jesse Skinner

WikiMapia: Easiest Google Maps Ever

If you want to put a map on your web site using Google Maps, the easiest way to do that is by going to WikiMapia, finding the place you want, then going to the menu and selected "Map on your page". You'll be presented with a box that lets you pick the size and exact starting location of your map, and you'll be given a very simple HTML snippet (an iframe) you can put anywhere.

For example, I found my home in Berlin and was given the following snippet:

<iframe src=http://wikimapia.org/s/#y=52506879&x=13318394&z=19&l=0&m=a width=400 height=208 frameborder=0></iframe>

I had to change the HTML to XHTML myself by adding quotes around the attribute values and escaping the ampersands in the URL:

<iframe src="http://wikimapia.org/s/#y=52506879&amp;x=13318394&amp;z=19&amp;l=0&amp;m=a" width="400" height="208" frameborder="0"></iframe>

Unfortunately, iframe is deprecated in XHTML Strict, so this would make my page invalid. The way to embed a frame on a page in XHTML Strict is to use an object tag instead like so:

<object type="text/html" data="http://wikimapia.org/s/#y=52506879&amp;x=13318394&amp;z=19&amp;l=0&amp;m=a" width="400" height="208" style="border:0"></object>

It seems WikiMapia doesn't support the object tag when used with Internet Explorer. Well, as long as you're not using IE, you can see where I live in Berlin! The rest of you can click here instead.

Published on August 18th, 2006. © Jesse Skinner

Finding a job as a web professional

If you're a web professional looking for a job, or looking to find a better job, there are some really great job boards to keep an eye on:

  • 37signals Job Board

    This is a great site to find some of the best jobs out there. Many of them are looking for Rails developers, but there are other development, design and management jobs. Plus, I think it's a good sign when a company knows about 37signals.

  • jobs.rubynow.com

    Certainly the best place to find a Ruby On Rails job. There's new postings nearly every day.

  • Vitamin Job Board

    There's a nice variety of web professional jobs posted here, though mostly centred around development.

  • CSS Beauty

    If you're passionate about web standards and semantic markup, there's probably a good job for you on here. I bet it would be nice to work in a company where you don't have to convince anyone about the benefits of web standards.

  • craigslist

    If you know the city you want to work in, Craigslist is a great place to look for a job. It doesn't have every job, but in my experience the companies that post on there tend to be at least a little hip. The squares probably haven't even heard of craigslist.

  • Indeed

    Indeed's like the coolest job search out there. You can put together a complex search string and search across a number of job boards (including craigslist). Then, you can subscribe to the RSS feed for that search. This can be really great if you want to specialize in a particular technology or filter out all jobs mentioning ASP.NET.

When looking for a job, it helps if you either live in a great location like California, New York or London, or you're willing to relocate. Who knows, though, maybe your dream job is just around the corner.

I think all of these job boards have RSS available, so you can just subscribe now and keep an eye on the results while you mull over quitting your current job.

Published on August 17th, 2006. © Jesse Skinner
<< older posts newer posts >> All posts