During the redesign of the ngBot blog, we figured it’d be nice dedicating a part of the sidebar to some of ngBot updates on twitter. This is a common trend with blogs and sure should be a piece of cake.

Instead of re-inventing the wheel, I tried looking out for ready made scripts that perform similar functions – that is; pull out a user’s updates on twitter and integrate it in the blog.

I sure came across a couple like Twitterzoid and Twitter js. But very much like me, I wasn’t contented with them as most of them were too complicating. Or maybe just the normal me – always wanting to try out things my own way. And so, I decided to write my own script.

Attached is what I came up with in less than a hundred lines of code. Called “mytimeline.php” (Download this file [3.20kb] ), the script simply pulls a user’s latest updates (up to 20) from twitter. Below is a simple usage example as used on the ngBot blog;

<strong>Twitter stream (<a href="http://twitter.com/ngbot">@ngbot</a>)</strong>

<ul class="sidecat">
    <?php
    // The class accepts the username and number of wanted updates (up to 20)
    $timeline = new myTimeline('ngbot', 3);
    foreach($timeline->get() as $v)
    {
        list($tweet, $date, $link) = $v;
        ?>
        <li>
           <p><?= $tweet; ?> <span class="fade">&mdash; <a href="<?= $link; ?>"><?= $date; ?></a></span></p>
        </li>         <?php
    }
    ?>
    <li class="last">
        <p><a href="http://twitter.com/ngbot">More on Twitter &rarr;</a></p>
    </li>
</ul>

Final words:

Feel free to download, tweak and play around with it in whatever way you want. And don’t forget to hit me up in case you have any difficulties.

By the way, you may want to cache updates so that the script doesn’t connect to twitter on every visit to your site. Here is how we do it, using PEAR’s cache lite:

<?php
  // Pretend there are updates from twitter
$updates = true;
$cache = new Cache_Lite_Output(array(
    'cacheDir' => 'path/to/cache/directory/',
    'lifeTime' => 3600 * 3 // Cache for 3 hours
));

if(!($cache->start('tweets'))):
    // No update yet.
    $updates = false;
    $timeline = new myTimeline('ngbot', 3);
    foreach($timeline->get() as $v)
    {
        $updates = true;
        list($tweet, $date, $link) = $v;
        ?>
        <li>
            <p><?= $tweet; ?> <span class="fade">&mdash; <a href="<?= $link; ?>"><?= $date; ?></a></span></p>
        </li>
        <?php
    }
$cache->end();
endif;
// If no updates from twitter, dont cache
if(!$updates)    $cache->remove('tweets');
?>

File(s) used in this article:

mytimeline.php (size: 3.20kb)

Update

The script has been pushed to Google Code here: http://mytimeline.googlecode.com

One of the challenges web designers and developers face is preventing forms from automated programs that disguise as humans and fill forms (call them bots). And needless to say, this bots can really be a nuisance – posting bad content, stealing data and doing all kind of weird stuffs. And so there was Captcha – a test to verify human response and prevent such bots.

But then, personally I don’t like Captchas. Ok, I love reCaptcha, but just as an idea for digitalizing books; nothing more. Since I’m not a big fan then, I figured someone somewhere may as well not be, so I decide to go the way of a different technique for validating my forms. I call it the blank method. (No, that’s not an ‘official’ name :P)

To start with, the technique is not my idea. Actually, an attribution to the owner should come somewhere here but I just can’t remember where I came across it as its really been long. That said, also note that the technique is not 100% fool proof. While it may save your form from bots, it won’t save you from real human spammers that are around to purposely junk up your site and be a nuisance.

So what is it all about? The technique is based on the fact that bots can’t see. A text input field is created somewhere in the form and labelled “Don’t fill” or “Leave Blank” or anything to tell the user to leave the input box empty. The human user filling the form will do just this  i.e.  ignore the field but a bot will fill in something there. During validation, the field can then be checked for content. If there exist a content for it, it sure is a bot (or probably a stubborn human).

Here is an overview of what it looks like:

[The html code]

<form method="post" action="submitpage.php">
    <label>Name</label> <input type="text" name="name" />    
    <label>Email</label> <input type="text" name="email" />
    <label>Leave Blank</label> <input type="text" name="foo" />
    <input type="submit" name="submit" value="Submit" />
</form>

[The server-side validation (I use PHP)]

<?php
$foo = trim($_POST['foo']);
if(empty($foo))
{
  //ok, didnt fill anything in the field
  //most def a human
}
else
{
  //filled in something
  //bot! Kick out!
}
?>

And that’s all.

Let’s tweak things a little bit to make the form more beautiful. But not just only beautiful. What about we hide the ‘Leave Blank’ field with CSS so that normally users wont even see or notice it (and consequently won’t fill it)? Bots on the other hand will still ‘see’ it and fill it.

[The CSS]

/*resets*/
.nodisplay {
    display:none
} 

/*form*/
form label {
    float:left;
    text-align:right;
    padding-right:10px;
    width:100px
}

form input.txt {
    width:150px;
    padding:3px;
    border:1px solid #ACA899
}

form input.txt:hover, form input.txt:focus {
    border:1px solid #102336;
}

[The new html]

<form method="post" action="submitpage.php">
    <p><label>Name</label> <input type="text" name="name" class="txt" /></p>
    <p><label>Email</label> <input type="text" name="email" class="txt" /></p>
    <p class="nodisplay"><label>Leave Blank</label> <input type="text" name="foo" /></p>
    <p><label>&nbsp;</label><input type="submit" name="submit" value="Submit" /></p>
</form>

Generally, the believe about CSS is that no matter what order your property or value declaration comes in a selector, it is the same.

In other words, thus;

*{
margin: 0;

padding; 0;
}

is the same as

*{
padding: 0;

margin; 0;
}

But this is not always so.

Let’s take a look at borders;

The declarations for borders looks something like this;

.bordered{
  border: 1px solid #000;
  }

If you are however interested in just the top and bottom border, you may want to go this way;

.bordered{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  }

There is however a short-cut to that. A better way to go should be;

.bordered{
  border: solid #000;
  border-width: 1px 0;

/* the 1px is for top & bottom, while 0 is for left & right  */
  }

And that is where the order (which of ‘border’ & ‘border-width’ comes first) matters. If the ordering is reversed (as shown below), it won’t work as expected.

.bordered{
  border-width: 1px 0;

border: solid #000;

}