Post #46

You are currently only viewing posts within the category: Site news
You are here: HomeArchiveSite news2003November10th → this post

Site updates

10th November 2003, lunch time | Comments (27)

Code information
Status
Code usage In use on this blog
Updates None
Demo Available
Downloads Available

I’ve recently added some new features to this site, and thought I may as well tell you about them, plus a few other things you might not notice at first glance.

Blockquotes

Adrian Holovaty, Simon Willison and Paul Hammond all had the idea of using javascript and CSS to dynamically place a citation link after any blockquotes in their pages. I took Simon’s code a step further and added in a few simple features:

  1. If the cite element contains a URL, print ‘— Quote source’ below the quote as a clickable link.
  2. If the cite element contains only plain text, print ‘— [the text]’ below the quote.
  3. If the cite element is empty or absent then print nothing below the quote.

Examples:

Examples of the different types of blockquotes in operation on this site

You can see the script in action on the demo page.

Comment-spam blacklists

Following the lead of others, I’ve implemented a comment-spam system on this blog. I don’t suffer from much spam (I’ve only received three up to this point) but I’d like to be prepared for the future.

If you haven’t heard of comment-spam before then I’ll explain what it is:

One of the ways in which Google determines the importance of a web site (and hence its placing in search results) is the number of incoming links to that site — if 4 million people link to a web site then, Google says, it has to be important. Comment-spammers try to take advantage of this by posting gibberish comments on blogs, each containing a link back to their web site. The comments add no value to the blog, but the more links the spammers can get pointing to their sites, the better they’ll do on Google.

Comment-spam then is an enormous pain for blog owners, and a lot of thought and discussion has gone in to combatting these attacks.

So, how does the anti-comment-spam system on this site work? Well, new comments are checked against a constantly growing list of spam domains harvested by myself and other bloggers. If any of these domains appear in the new comment then the submission is classed as spam and posting is denied.

If a matching domain is not found then the comment is posted as normal and I receive a notification email. At the bottom of this email are two links: one to the comment in question, and one to an administration page. If at that point I (as a human) deem the comment to be spam I simply click on the link to the admin page and the spam comment is deleted from the database. The spam’s URL is then added to the public and master blacklists for future use.

A warning notice has also been added to the comments form to try to stop the problem before it starts (this will only influence manual spammers). We’ll see how I get on.

Screen shot of anti-comment-spam message in operation on this site

Comment alerts

I often find that when I post comments to someone’s blog I’m not making a standalone comment, rather I’m replying to a point raised by another visitor. Unfortunately there’s no simple way for me to alert that person to my post — either their email address is hidden, or, if their address is visible, I have to fire up my email program and send a separate message to them as well. All a bit inconvenient.

Keith Devens suggests a solution: a comment subscription methodology, whereby someone leaving a comment could choose to be alerted when new comments were made (but then not be alerted again until they had re-visited the post in question).

I think that system would work well for blogs and threads where discussions take place and everyone’s interested in the outcome, such as Simple Bits’s quizzes. But for blogs such as mine I think the interaction between commentors (and between commentors and the site owner) is different.

When I post to blogs like mine I’m interested to see if the owner, or anyone else, replies to my comment. I’m not really interested in other people’s interactions with the site’s owner, and I don’t want to get alerts about their conversations. But if there was some easy way for people to notify me when they wrote something that related to what I previously said, I'd be happy.

So, my experimental solution is this: when you post a comment on this site you’re presented with a checkbox asking if you’d like to ‘Let future posters alert you of their replies.’

Screen shot of the comment alert feature in operation on this site

Checking this box will place a line underneath your finished post offering future posters the opportunity to ‘Alert [your name] to your comment’:

Screen shot of a post with accompanying comment alert box in operation on this site

If a future poster does decide to alert someone, their selections are shown in the comment preview window, along with the rest of their comment details:

Screen shot of a comment preview with two names selected for alerts

This system is meant to help one person interact with a small number of other people on a specific topic. This may turn out to be rubbish… we shall see.

Stylin’

Update: about 2 days after I wrote this post, Mozilla released a new version of Firebird (0.7), and a new verison of Mozilla (1.6a). In both new releases recognition of -moz-list-number was broken. This prompted me to remove this selector from the CSS and recode without it. Same effect, just takes a bit more effort to get it working.

In an effort to cut down on the number of extraneous DIVs and SPANs used to code this site I’ve ended up using some fairly advanced CSS selectors. Very occasionally I’ve resorted to a Mozilla-specific CSS rule. One of these is li:-moz-list-number which lets you easily style list numbers.

I’ve applied this rule to style the list numbers of comments and search engine results:

In an effort to cut down on the number of extraneous DIVs and SPANs used to code this site I’ve ended up using some fairly advanced CSS selectors. Very occasionally I’ve resorted to a Mozilla-specific CSS rule. One of these is li:-moz-list-number which lets you easily style list numbers.

I’ve applied this rule to style the list numbers of comments and search engine results:

Screen shot showing styled list numbers

On the whole this site looks at its best in Mozilla (certainly its support of max- and min- widths adds a lot), but occasionally Opera goes one better than Moz and manages to do something cool. I’ve styled some ordered lists to display inline. Opera copes with this, Moz and IE don’t:

Screen shot showing the difference between Opera and Mozilla when rending CSS sytled inline lists

Well, that’s all for now. There are a few other things in the site that might interest people, but I’ll leave them for another day.

Jump up to the start of the post


Comments (27)

Jump down to the comment form ↓

  1. Simon Willison:

    I've just gotta try out your comment notification thing - that's really clever. Of course I have to wait until someone else replies to this and ticks my box now...

    Posted 12 hours, 13 minutes after the fact
    Inspired: ↓ Matt, ↓ Jay Allen
  2. Matt:

    It is clever, and by this comment Simon should get a notification.

    Your blockquote code looks really nice and I'm going to try it out on my site later tonight. Of course I'm going to have to enhance my markup in a few places where I got lazy, but I'm not complaining. Another neat DOM/blockquote thing I should try out sometime: http://www.treetrybe.com/imm/archives/2003/10/#m00000392 .

    Of course your comment notification thing might be an incentive to spammers. If I was a spammer not only would I have my link on your site until you deleted it, but I can send an email to whoever has responded to a thread before me through your domain.

    Posted 12 hours, 38 minutes after the fact
    Inspired by: ↑ Simon Willison
    Inspired: ↓ Dunstan
  3. Anders:

    the right hand 'Navigation' menu doesn't work in Firebird 0.6.1 on linux. clicking any of the links ('Home','Archive', etc) has no effect.

    looks real nice otherwise.

    Posted 13 hours, 41 minutes after the fact
    Inspired: ↓ Dunstan
  4. Keith Devens:

    Keither Davis? Where'd that come from? That's the worst mangling of my name I've ever seen :)

    By the way, about the inline lists thing... you might want to try setting the list-style-type[1] and see what happens.

    [1] http://www.w3.org/TR/REC-CSS2/generate.html#lists

    Posted 16 hours, 50 minutes after the fact
    Inspired: ↓ Dunstan
  5. Dunstan:

    Damn, sorry Keith - as daft as it sounds my wireless keyboard has been playing silly buggers for the last couple of days and I'm finding the oddest things appearing on screen.

    But what's especially odd is that I'm sure I cut-and-pasted your name from http://www.clagnut.com/blog/191/

    Sorry for the mistake, I've corrected it :o)

    Posted 1 day after the fact
    Inspired by: ↑ Keith Devens
  6. Dunstan:

    Matt wrote: "Of course your comment notification thing might be an incentive to spammers."

    Yes, that is my only worry, but then any kind of notification system is going to suffer from this. I guess the _only_ way to stop that, and still allow this kind of interaction, would be for me to vett each comment before putting it live.

    And that's a bit boring.

    We'll see if that's what it comes down to. Hopefully though the spam bots won't pick up on this, and I'm sure they're doing the majority of the work.

    Posted 1 day after the fact
    Inspired by: ↑ Matt
  7. Dunstan:

    Anders wrote: "The right hand 'Navigation' menu doesn't work in Firebird 0.6.1 on linux. Clicking any of the links ('Home','Archive', etc) has no effect."

    Ah, I wonder if that's because I have z-indexes set (so the right hand col can slide beneath the main section when the browser window is narrowed).

    Bums.

    Well, thanks Anders.

    Posted 1 day, 4 hours after the fact
    Inspired by: ↑ Anders
  8. Jay Allen:

    You may be interested in a centralized comment spam blacklist database (http://www.jayallen.org/comment_spam) that I've started and a tool to put it into action (http://www.jayallen.org/projects/mt-blacklist/). Currently, the tool is for Movable Type users only, but that will certainly change in the future.

    Posted 1 day, 13 hours after the fact
    Inspired: ↓ Dunstan
  9. Dunstan:

    Thanks Jay, I have seen your site and your blacklist.txt file, but thought I'd get things working with a few of the other independent bloggers before I figured out how to parse your file properly.

    But that's kind of you to post your link, and I'll certainly be adding your hard work to my own blacklists in the near future :o)

    Posted 1 day, 14 hours after the fact
    Inspired by: ↑ Jay Allen
    Inspired: ↓ Jay Allen
  10. Jay Allen:

    Dunstan, are you interested in working on a cross-platform solution? There is one in the works...

    Posted 1 day, 14 hours after the fact
    Inspired: ↓ Dunstan, ↓ Jay Allen
  11. Jay Allen:

    Not cross-platform... Non-vendor-specific... Sorry, it's later.

    Posted 1 day, 14 hours after the fact
    Inspired by: ↑ Dunstan, ↑ Jay Allen, ↑ Simon Willison
  12. Dunstan:

    Sure thing Jay, that'd be great :o)

    I'm sure Simon is in there doing his thing as well - he can probably offer a lot more than me, but I'm happy to contribute what I can.

    Bung me some emails and let me know what's what.

    Posted 1 day, 14 hours after the fact
    Inspired by: ↑ Jay Allen
  13. Matt:

    This question seems so basic: how can I get the automatically generated attribution to align to the right?

    Posted 4 days, 21 hours after the fact
    Inspired: ↓ Dunstan
  14. Matt:

    More niggling: when it's a source link could the em dash not be part of the link?

    Posted 4 days, 21 hours after the fact
    Inspired: ↓ Dunstan
  15. Dunstan:

    Hey Matt, you need to use CSS, here are my rules, just add a 'text-align: right;' into it:

    blockquote div.source {
    color: #555;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 95%;
    font-style: normal;
    margin-top: 1em;
    }

    Posted 4 days, 22 hours after the fact
    Inspired by: ↑ Matt
  16. Dunstan:

    Matt, I've made that change for you, so just grab the file from here:

    http://www.1976design.com/blog/images/46_blockquotes.js

    Posted 4 days, 22 hours after the fact
    Inspired by: ↑ Matt
    Inspired: ↓ Jeff
  17. Roberto:

    Hi,

    the blockquotes script only worked for me (Mozilla 1.4, 1.5, 1.6a and Konqueror 2.2.2) by changing the last line from:

    window.onload = extractBlockquoteCitations();

    to:

    window.onload = extractBlockquoteCitations;

    Which seems more intuitive to me, since here you are defining the "onload" function, and not calling it.

    Posted 1 month after the fact
  18. Cool Cat:

    I concur: the blockquotes script also only worked for me (Mozilla 1.4, 1.5, 1.6a and Konqueror 2.2.2) by changing the last line from:

    window.onload = extractBlockquoteCitations();

    to:

    window.onload = extractBlockquoteCitations;
    And yes this seemed intuitive indeed.

    Posted 2 months, 2 weeks after the fact
  19. Karl Bedingfield:

    Hi there,

    On your article you mention 'Check this page’s source for its use' but I cannot see any instance of a blockquote example.

    I tried to use the code but I got a scripting error that related to the last line of the js code: window.onload = extractBlockquoteCitations();

    Any ideas what might be causing that?

    Thanks
    Karl

    Posted 2 months, 4 weeks after the fact
    Inspired: ↓ Dunstan
  20. Dunstan:

    Karl, see the comments above yours for a fix to that error.
    As for its use, I meant the JS file's inclusion, that wasn't very clear.

    If you're wondering how to code your blockquotes then there are examples at the start of this post - it's all to do with using the cite element within the blockquote tag.

    Posted 2 months, 4 weeks after the fact
    Inspired by: ↑ Karl Bedingfield
  21. Karl Bedingfield:

    Hi there,

    I have just one more question relating to bloclquotes.

    In my body tag I have the following:
    <body onload="fixscrollbars()">

    Now when this is in place your blockquote js does not work but when I take out the 'onload="fixscrollbars()' from the body tag it does work.

    Is there a solution to this?

    Thanks
    Karl

    Posted 2 months, 4 weeks after the fact
    Inspired: ↓ Dunstan
  22. Dunstan:

    Take out the onload thing from your body tag, add your scrollbars script into the same file as the blockquotes one, then add fixscrollbars() into the function runScripts(), so when runScripts runs it will run both fixscrollbars() and extractBlockquoteCitations().

    Does that make sense?

    That way you have one JS file containing all your scripts which are to run on window load, and they're all called from within a single function. It's that single function which is run on window load. Thus getting around the problem.

    Posted 2 months, 4 weeks after the fact
    Inspired by: ↑ Karl Bedingfield
  23. Karl Bedingfield:

    Yes it makes sense :)

    Like this?

    // run all the onload scripts
    function runScripts()
    {
    extractBlockquoteCitations();
    fixscrollbars();
    }

    I just wasn't sure if I needed the ';' after the 'fixscrollbars()'

    Thanks again
    Karl

    window.onload = runScripts;

    Posted 2 months, 4 weeks after the fact
    Inspired: ↓ Dunstan
  24. Dunstan:

    Perfic :o)

    Posted 2 months, 4 weeks after the fact
    Inspired by: ↑ Karl Bedingfield
  25. Karl Bedingfield:

    Thanks Dunstan,

    I promise that was the last question on this matter :)

    As you can see I don't know diddly squat on Javascript!

    Karl

    Posted 2 months, 4 weeks after the fact
  26. Jeff:

    Your comment (the one that inspired this one) now has a broken link because you changed the URL of the page. I figured by leaving this comment you'll see it and easily be able to fix it.

    edit: by the way, how did you do the spell-checker? that's awesome :D

    Posted 9 months, 1 week after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  27. Dunstan:

    Ah, thanks Jeff, I'll fix that.

    As for the spell checker, I'll write it up at a later date, but for now go see this post, it's where I started out:

    http://simon.incutio.com/archive/2003/03/18/phpAndJavascriptSpellChecker

    Posted 9 months, 1 week after the fact
    Inspired by: ↑ Jeff

Jump up to the start of the post


Add your comment

I'm sorry, but comments can no longer be posted to this blog.