Gravatars & Comment Links, Part 2

By Shamus Posted Tuesday Dec 11, 2007

Filed under: Projects 97 comments

As a follow-up to the slowdowns yesterday. If you remember, I added two things to the blog. One was just a plugin to remove the “nofollow” from comment links. The other was Gravatars.

Around mid-morning I noticed the site was really getting slow. Just before noon my host emailed me and let me know my site was beating the crap out of the server and I needed to do something about it. (They were very nice about it, considering.) By the time I checked on it the site was crashed.

For the next half-hour I experimented with settings, turning features on and off. I enabled Akismet. I upgraded Akisment to the latest version. I disabled Gravatars. I disabled comments. Nothing worked. Finally I disabled the “nofollow” plugin. I didn’t expect that to have any effect, since the plugin is very small and what it’s doing is supposedly simple, but I was out of ideas at that point.

I’m not sure what was wrong with that plugin, but it was devouring system resources at an outrageous pace and is simply not fit for use on any blog with more than the most modest traffic. Kind of shocking, really. I should have suspected it right away (because it was new) but I just couldn’t imagine something so simple going so wrong.

Ah well. Lesson learned. Nofollow is back in effect, so the site is once again treating everyone like a spammer. Grrr. I could fix this with a very, very minor change to the WordPress source, but I dislike branching off like that.

In contrast, Gravatars are looking good. I messed around with the theme to make them fit in a bit more. To get things working the way I wanted I was forced to leave the rigid safety of <tables> for formatting and use <div>s instead. I have a horrible time getting <div>s to behave in a predictable way on the various browser flavors. I’m too old school for this newfangled CSS crap.

At any rate, I’ve got the changes in place. Tested with Firefox, IE and Opera. Looks good as far as I can tell. Please let me know if you spot any problems.

 


From The Archives:
 

97 thoughts on “Gravatars & Comment Links, Part 2

  1. 11 says:

    Hmmm… looks like the avatars are being cropped a bit on the top and left-hand side now.

  2. Kennet says:

    Looks good.
    (I considered mentioning that the design could use a bit of work yesterday but I didn’t feel like making my first post here a negative one. Glad to see that you felt the same way ;)

    Now I just need to go get myself one of those Gravatar thingies.

  3. Phlux says:

    I’ve always hated div tags as well. I taught myself HTML in about 1997, and that’s about the last time I updated my knowledge of it, aside from a little javascript in college and some PHP in grad school.

    CSS is probably great for the pros, but I think it makes HTML difficult to approach for novices. Maybe that’s just because I learned the old (now wrong) way.

  4. Shamus says:

    Note: If the icons are being cropped, it most likely means you’re using Internet Explorer and it’s being an idiot by not checking the CSS for changes. Do a ctrl-refresh on the page, and it should be good.

  5. Mari says:

    No, CSS is in fact difficult to teach, even to novices that haven’t learned the “wrong” way. I’m teaching web design to a bunch of 4-H kids and it’s all roses until we get to CSS.

  6. wererogue says:

    Divs and CSS really are the way forward. The two properties of CSS (related to divs) that I find people (myself included) have a while getting used to are float and clear – since I got the hang of those, I’ve only ever used tables for tabular data.

  7. Telas says:

    It looks good. I hope my page refresh times yesterday helped. I’m using Firefox, and it does look like the icons are a bit cropped; I’ll be able to tell on mine.

    I can barely read HTML, much less code in it. My greatest weakness as a geek is that I do not have the coder gene, whatever it may be.

  8. 11 says:

    Hmm. I am indeed using IEv6.0 at the moment (since, as you can see, I’m diligently doing my job at my workplace *cough cough* and thus can’t use my preferred FireFox) Ahem, anyway IE still doesn’t like the avatars upon refresh.

    (Or more accurately, it looks as if the gravatars are set to 66px in size. Instead of resizing the 80px versions from the gravatar site, its cropping off the top and left portions of the images. Certainly not the end of the world, it just looks off, as the tops of people’s heads are cut off x_x)

    *Sigh*

  9. Telas says:

    Nope, that’s my icon, a bit smaller than it appears on the Gravatar site. It’s a cleaner version than yesterday’s, even.

  10. Lebkin says:

    The page is running much better now. And I like the icons. It will make it easier to see who is who. A good choice.

  11. Taffer says:

    CSS, and are your friends, as is properly-formed HTML (or, preferably, XHTML). There’s an excellent book Designing with Web Standards by Jeffrey Zeldman that’ll tell you why and how. It also covers accessibility, which was something I hadn’t considered before.

    [Also posting to see if my Gravatar works. ;-) I’m using the MessageFaces add-on for Thunderbird, too, which adds Gravatar support to your email.]

    – chrish

  12. testing my gravatar.. didnt seem to show up on the other thread…

  13. Neil K. says:

    Oh, wow! I’m loving the visual refresh on the comments. Very web 2.0

    Love the blog. Long-time reader, first-time commenter.

  14. Clyde says:

    I like the Gravatars. It’s interesting to see some of the different choices people make.

  15. McNutcase says:

    Looks good, loads fast from here (Firefox, Ubuntu, UK). I may be able to let you know how Safari copes later this week…

  16. I think there’s still a little problem. If you look at comments by people that have lots of dice on their left, you’ll notice that the comment text gets pushed down. I noticed by looking at some people on http://www.shamusyoung.com/twentysidedtale/?p=1455 with four dice or more…

  17. TheMatt says:

    Yay for gravatars. Now if only mine would work…I’ve never been able to get it to. Perhaps your site will be the first.

  18. 11 says:

    Fledgling Otaku:
    You have apparently uploaded an avatar to the gravatar site… have you assigned it to your email address yet? You apparently can have a number of avatars ready for use, but you actually have to select one to have it show up at all.

  19. Ben says:

    Safari works A-OK. Just need to put up a gravatar now…

  20. Shawn says:

    The 20sider is a huge improvement over the generic Gravatar logo.

  21. BlueFaeMoon says:

    Looks good to me, Shamus. :) Gravatar is probably wondering about the sudden influx of registrants. I’ve seen their icon on other sites (love that you replaced it with the D20), but I never bothered to register. I’m just not much of a comments-leaver. Don’t you feel special, then? lol

    I’m glad you found the real problem. I like avatars for the same reason you mentioned (visual identification). And I MUCH prefer them like this! So much less distracting. Your site looks great! I am so very envious. Some day I’ll step out of my musty old HTML box and learn some new tricks. Geriatric canines and all that.

  22. M says:

    I think I’ll stay iconless…but those do look really cool.

  23. Joe says:

    Time to see how these Gavamadoodles look, along with your pretty new divs!

  24. Joe says:

    Hooray for trying again with double posts

  25. RudeMorgue says:

    Just trying out my gravatar. Let’s see…

  26. MSchmahl says:

    That’ll teach you to make multiple changes without testing them individually. I’m curious why a simple change like that would have such disastrous side-effects. You said, “I could fix this with a very, very minor change to the WordPress source, but I dislike branching off like that.” Have you considered submitting a patch?

    I like the gravatar layout changes a lot, and the new default image. Is it possible to round off the corners of the avatar box a bit, to match your post icons?

  27. Samrobb says:

    I was holding off on getting a gravatar until you figured out if you were going to keep the feature… since it looks like it’s here to stay, well, then gravatar gets another user.

  28. Shawn says:

    I think it would be funny if someone signed up for Gravatar, and set their icon to the blue d20. Unless they went to another blog that uses Gravatars, the world would never know.

  29. Shamus says:

    You could also be a smart-alec and set your icon to the blue Gravatar logo. :)

  30. Joe says:

    But the D20 for the gravatarless… It’s a 20, though at first glance you might think it’s an 8.

    So, is that like “you just rolled a natural 20 on your save vs. awesome. Congrats.”?

  31. Tango says:

    Oddly, my Gravatar failed to load yesterday…

  32. Davesnot says:

    My Gravitar is still in Limbo too… so I put a new one in to a new address.. we’ll see.. but I’m glad I don’t have to wait forever for the site today!

  33. Shawn says:

    You know, I’ve always read it as rolling an 8, but now I realize I’m horribly wrong.

  34. Katy says:

    Um, “me too!”

    Looks good Shamus. And yes, this is a shameless comment soley for the purpose of showing that I followed the herd and signed up for a Gravatar. I don’t even have to ID myself as “that other person named Katy” anymore.

  35. Hm, I believe ‘nofollow’ is a good thing for comments.

    The site looks fine, Seamus. (But then it really doesn’t matter much to me; I’m here for the contents.)

  36. McNutcase says:

    Camera angles can be tricky with a D20, but it’s definitely a natural 20. Is Seamus training his D20?

  37. SiliconScout says:

    Bonus brownie points to anyone who recognises my gravitarythingamajiger.

    and yeah the dice are bumping the comments down for me to (using Firefox).

  38. Henebry says:

    Glad to hear the gravatars weren’t the problem. Funny to hear that the problem came from the other big change you’d made.

    I remember, after making similar mistakes while coding, pledging to never again implement more than one change at a time. The fact that I’ve made this pledge repeatedly in the course of my life (probably once every six months) shows just how tempting it can be to “just add a little fix” when you’re in the midst of coding.

  39. Katy says:

    SiliconScout — that’s Groo, isn’t it?

  40. Gothmog says:

    Hooray! Looks good, Shamus. Glad to hear you figured out the problem. :)

  41. Hal says:

    Shawn
    I’d like to think I took a better approach.

  42. Hal says:

    Er, well, never mind. My gravatar didn’t load, apparently.

  43. 11 says:

    Hmm? I can see it, Hal. Don’t ever let me catch you using that in one of my games.

    For curiosity sake only, where does one get one of those dice? (j/k of course)

  44. Eric J says:

    Another Gravatar test. Last one didn’t work.

  45. Eric J says:

    Is it possible you don’t see your own? Anyone else see a Tardis there?

  46. Gahaz says:

    My Grav is still not working, i have tried 4 different images and so far they are all unusable I guess.

  47. Gahaz says:

    Woooo! I retract my statement!

  48. Luke Maciak says:

    Ugh… I’m guessing the plugin writer decided to remove nofollow links the hard way by parsing the comment text or something. :P

  49. Rustybadger says:

    Cool plugin! Now you have a record of my mug on here…

  50. bargamer says:

    Woot for Groo! *Joins in the fray! With a donut-eating Elf.*

  51. Hal says:

    I guess it takes a little while for changes to your gravatar to be reflected in sites using it.

  52. Gary says:

    I’m really liking these new changes, including the Gravatars thing, Shamus. Now you are making me want to update my website…..

  53. Jansolo says:

    The only comment is about Gravatar site.

    I attached and modified one image, but it seems to upload three, 2 of them without modifications.

    The modified one was rated G. The other appears X rated, so they don’t appear in the website, nor the default choiced by Shamus.

    I’m still working on it.

    Meanwhile I’ve selected the modified G rated image.

    By the way: congratulations to Shamus.

    1. azanbang says:

      Required fields image are marked.

      1. azanbang says:

        The only Edit and Modified Gravatar site.

  54. Zaghadka says:

    Wow. That looks really sharp.

  55. lxs says:

    Well, I had to try it…

  56. krellen says:

    I really like the way the new layout jives, Shamus. Since I was one of the detractors back when you first redesigned, I thought you’d want to know that.

    I also dig the Gravatars, and the red box around your comments are a nice bonus.

    On topic: even veteran web designers have troubles getting CSS to render in every web browser. My boss (who is our webmaster, and has been doing webmastering professionally for years) is a huge fan of CSS and still has problems with it rendering right in every browser. But your layout looks good, so I wouldn’t sweat it.

  57. krellen says:

    I notice now that the comments pad to make room for the dice counters, though. That might be something to look in to.

  58. SiliconScout says:

    Cheese Dip for all!

    Groo it is indeed, my most favorite of comic characters. Where is HIS movie eh!?

  59. Will says:

    Hrm… IE7 at work and on my new machine looks fine, but IE6 is cropping the top and left-hand side of every image to fit in the comment box.

  60. Will says:

    And it would appear I’m also in image-limbo. Does it take a while to filter dwon from their system?

  61. Ben says:

    Testing the gravatar, if you don’t mind…

  62. Chris Arndt says:

    I only learned CSS so I could properly tweak my blog, as HTML wasn’t sufficient alone for a unified effect.

    Of course, since blogger stopped using CSS and is not primarily a WYSIWYG set-up, my blog template is either too obsolete for the new Blogger-created gadgets or I’m damned lost and I cannot tweak a new blogspot blog that I create.

    Coding is not instinctive. I hate this. I’m glad I can peel back a good number of my blogs and read the code but… whatever.

    I’m late.

  63. Scott says:

    Hrrrm… one thing I just noticed is that the comments have a big space between the name/date and the body of the comment. It seems to be the same size as the dice comment counter thingie. Is this just a Firefox thing or do other people see it as well?

  64. K says:

    Seeing the same thing as Scott, on current Opera (Mac). Also, the distance between two comments is rather large.

    And please use a CSS, that will make life easier for you. A lot.

  65. James says:

    Here’s to testing my Gravatar.

    James :D

  66. Chris Arndt says:

    I do not understand the dice counters.

    yet.

  67. Viktor says:

    The dice counter error is showing up on Firefox, too. Just thought you should know.

    Also, I wanted to see if my Gravitar worked.

  68. BlueFaeMoon says:

    If your Gravatar is still not showing up, try a page refresh. I have no idea why, but that made mine show up for me. And a few others, too. It must be the caching thinger-doodle.

  69. Ben says:

    Dice counter problem, and I love my gravatar. Just saying.

  70. Ben says:

    Oh, and I’m using Firefox. Latest edition and all. Windows XP.

  71. wildweasel says:

    I like these gravatars. It makes me want to try and come up with some kind of “tag image” system for my blog, a la Slashdot, that adds a little icon to the top-right of my post for each label that I use on a post.

  72. ClearWater says:

    Ah, so that’s why I was getting 403 Forbidden Yesterday. (Still getting it for the previous two entries, oddly.)

  73. ClearWater says:

    (Never mind. It appears that the 403 was cached somewhere but I managed to trick it.)

  74. Sem says:

    I’m also not to keen on ‘s. They do have more possibilities than but it’s usually more work to get it right.

    Besides, in my team I’m already known for programs that are sometimes a little too complex. If I dare to mention ‘regex’ or ‘meta-programming’ again they’ll kill me ~_~. If I would come up with instead of , that would be the last drop :).

  75. Sem says:

    In my previous post I used the words ‘div’ and ‘table’ between greater-than and lower-than signs. Seems that wordpress filters those out.

    I’ll repost it here but with the ‘div’ and ‘table’ :

    I'm also not to keen on ‘div’. It does have more possibilities than ‘table’ but it's usually more work to get it right.

    Besides, in my team I'm already known for programs that are sometimes a little too complex. If I dare to mention “˜regex' or “˜meta-programming' again they'll kill me ~_~. If I would come up with ‘div’ instead of ‘table’, that would be the last drop :).

  76. Davesnot says:

    all this coding talk… I coulda woulda shoulda been a code monkey.. instead I had tons of odd jobs.. worked on top of a ski mountain taking photos.. was a P.I. that followed workman’s comp claims.. wrote some books.. Now I’m an Full-time at-home Dad with two kids… but I love to program (that’s what we used to call it).. now I have to write scripts for NWN1 to get my fix.. or spew out some html.. I think CSS is just there because people are entirely tooooo anal about what their crap looks like on someone’s screen. (ducks the impending storm)…

    Anyway.. I write all that to say I’ve got some experience.. but I still have these Gravitationizerscons cropped.. looks like I get the lower right of them..

    Cest la vie.. I like the names anyway.. the icons make it so the other side of my brain gets in the way of processing the comments as quickly.. the reading takes me longer with the iconsatars.. but they look neato.. at least the lower right of them do. (BTW, I did ctl-refresh to no avail).

    I’d come to the site if it had yellow text on white background… so.. whatever… I’m there, Dude… I sound like a stalker.. I’m not.. just a bored Dad.

  77. Davesnot says:

    It looks like the text box for the comments needs more padding for my machine.. the top left border of the box is shared with the Gravitatorcon.. which seems to be competing for screen time.

  78. Hugo Riley says:

    I like DIV+CSS more then tables, HTML looks cleaner in the end.
    Problem is that tables are more intuitive way to make pages. You make table and your page looks like table. If you look at your table styled page without CSS it’s organization looks more or less the same. When you remove CSS from DIV styled page it looks completely different. Sidebar is then below the content and menus are bulleted items.

  79. Shamus says:

    Thanks for the heads-up on the odd spacing in Firefox. Should be fixed now.

  80. scragar says:

    gota say I love how the gravitars seam to hover outside of the box, that’s a great effect(the old one looks very square in comparison).

  81. K says:

    Yes, spacing is fixed, but the distance between two posts is still rather big, about 3 or 4 dice. (those on the left side). Opera.

  82. Thijs says:

    Just wanted to find out if it worked…

    what a wonderful application

  83. Scott says:

    Bah… it’s been a day and my Gravatar still does not seem to work.

  84. Davesnot says:

    #80 scragar says, .. gota say I love how the gravitars seam to hover outside of the box, that's a great effect(the old one looks very square in comparison).

    Uh.. mine doesn’t hover out of anywhere?? maybe thats why I only get the lower right parts.. because the upper bits our outside the text box.. and my browser doesn’t show it.

  85. scragar says:

    84 Davesnot:

    your using IE right? it’s an IE problem, I’m sure it could be fixed using a few work arounds(making the images “position: absolute” to break the box then using negative margins to position them, but then you’d need another element to act in the same position as the images currently do, which is far more css and html so the page will load slower as a result…).

  86. Joerg Mosthaf says:

    Well, looks good here on firefox. And waitong to see my new gravatar :)

  87. ArchU says:

    Actually, moreso than the gravatars (which are neat) I like that the comments are now boxed. Also good is the red outline for the chanop ^_~

  88. Alden says:

    Hrm, the wordpress blog on my site is a lot lower trafficed than this site, which no doubt explains why the nofollow plugin hasn’t caused any trouble on it. I should check and make sure.

  89. Dihydrogen says:

    I wonder if my Gravatar works…

  90. James says:

    My gravatar is still not showing up!

    James :/

  91. Nyxia says:

    looks awesome!

  92. Ravs says:

    Just want to see my gravatar!

  93. Pidmon says:

    I was having some trouble for a few days here – continous 403 errors for days on end, pretty much since the Riding Shotgun HL2 post.

  94. Joerg Mosthaf says:

    ‘nother gravatar test – don’t see it on my last post :(

  95. David says:

    Realise this post is 3+ years old, but it’s not that hard to remove nofollow from links, add this to your functions.php file

    remove_filter('pre_comment_content', 'wp_rel_nofollow', 15);

    Since you made this post Google has changed how nofollow works, where before it protected the link benefit now it deletes it. So really bad idea to use nofollow on links.

    Because of link spammers I’ve converted the links to post forms with styling, they look like links, but are forms.

    David

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply

Your email address will not be published. Required fields are marked *