Antanova Ltd. » Code-bits

Twitter status text links made clickable

Jason C — Tue, 23 Feb 2010 15:35:55 +0000

A new design agency being formed by an existing client needed a site. They had a good design ready, I just had to build the thing. It’s built in Wordpress, but I also pull in their Twitter stream on the client side.

Twitter’s api is easy enough to use. I opted for the JSON-p format, but something I didn’t realise at the time was that the status updates are purely the plain text. So any URLs, usernames or hashtags are just plain text: no wrapping in tags. It’s an easy problem to solve, though, and here it is for anyone else who needs it.

function twitify( text )
{
    // replace urls with linked ones
    var t2 = text.replace(/(http|https)(:\/\/)([^ ]+)/ig, '$1$2$3' );

    // replace @username with clickable twitter link
    t2 = t2.replace(/@([^ ]+)/gi,'@$1');

    // replace hashtags with Twitter searches
    t2 = t2.replace(/#([^ ]+)/gi,'#$1');

    return t2;
}

So, feed the tweet into that function, and back out it comes with links, @users and #hastags made clickable.

Did I mention I ♥ regular expressions?

ASP.net style master pages in PHP

Jason C — Tue, 08 Dec 2009 17:16:02 +0000

I’m not a .net developer. A few months ago, though, I was building a mini site for a property company, who’s hosting was on a .net server. I thought I’d have a go at using master pages instead of several different include files.

What a revelation! I really like the way that you specify a page that’s to be used as the template for the site, and simply add some place-holders that are to be populated with the content from your individual local pages. The whole thing then hangs together very nicely. You can even use relative links that are re-written by the server so no matter where you content page is, the link is always pointing at the same file. The code is clean, too, as the master and content pages are all marked up using XML, so all your code looks nice and is easy to follow in your editor of choice.

A different, but equally small site has now come up and it’s got me thinking about how to implement something like this in PHP. Now, there are several templating systems already out there for PHP, for example Smarty. I didn’t want to use one of those, because like I said the site’s very small, and adding all those extra files in there and using the Smarty syntax would just unnecessarily increase the development time for such a small site. So, I set about making something up myself.

I’m pretty pleased with what I came up with: it’s not quite as clean as the .net version, but it is simple and easy enough that it will help rather than hinder the development of such as small site. I’ve got my template (the ‘master’ page) on which I’ve defined a couple of areas where the content is to be dropped in.

template.php:



  
    <?php echo $page->title; ?>
    
    head; ?>
  
  
    
      
        Nav item 1
        ...
        Nav item n
      
    
    
      content; ?>
    
    
      footer message here
    
  
  foot; ?>

page.php:

title    = "Hello, world";
$page->template = "template.php";
?>

  
head = ob_get_clean(); 

?>

  The Page Title
  The article goes here
content = ob_get_clean(); 

?>

  
foot = ob_get_clean(); 

?>
template ?>

Code bits: PHP date year box script

Jason C — Thu, 13 Nov 2008 15:44:00 +0000

Creating a warranty registration form for the proud owners of a new LCD panel should have been a very straightforward job. Well, actually it was, but that sort of interrupts the flow of this post a bit, so I’ll skim over that inconvenient fact.

For the ‘date of purchase’ field, I simply added the day and months items as

So there you have it. HTH, and all that.

Code bits: reset / default stylesheet

Jason C — Wed, 13 Feb 2008 16:17:00 +0000

Browser inconsistencies are something that drives a sane web developer mad. For example, last week, I was trying to shoehorn a fairly simple-looking design into some html/css code, ready to be dynamicised (yes, I did just write dynamicised. Sorry.) Unfortunately, what happened, as always, was that Safari used a different line-height to everyone else, IE used a different heading size, and Firefox was absolutely perfect, because that’s what I was doing most of my testing with.

I come across this problem all the time, as you can probably imaging, and my solution is to have a base css file that I then modify and extend for every project. Doing that largely eliminates inconsistencies, or at least makes inconsistencies consistent project after project.

Eric Meyer’s ‘CSS reset’ stylesheet has been knocking around for some time, and is a useful resource to use or just to look at and understand why he’s done what he’s done. Anyway, he’s now given it a permanent home on his site, so there’s somewhere to check back for updates.

http://meyerweb.com/eric/tools/css/reset/

Here it is in full…

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Code bits: US states select box

Jason C — Fri, 29 Jun 2007 15:36:00 +0000

…and some more useful stuff. A select box, this time with the states of the USA listed along with their two letter codes as the values.

That site’s a honeypot of resources too; I recommend reading it.

Code bits: Country select box

Jason C — Fri, 29 Jun 2007 14:34:00 +0000

Here’s something that has been burning a hole in my library for a while and I never thought to put it up here. Thankfully, now I have realised that it could be useful to my colleagues around the world (although in this version the UK is selected). It was fully revised in March 2007 from ISO 3166-1 Alpha-2 country codes. Each country’s corresponding “value” property is the two-letter country code from the ISO. Use it in your code freely, but please link here if you want to share the code with others. Enjoy…