PunchCard 1.0 Released Today – updated

see the PunchCard category for updates


  • A jQuery widget for displaying in a small area a lot of social bookmarking sites, like del.icio.us, digg, technorati… (there are 45 now)
  • Punchcard metaphore
    1. Every button is a tiny mark in a punchcard
    2. When the mouse hovers the punchcard a tooltip pops up
    3. The tooltip shows icon and name of the site
    4. If the user punches the mark, the site opens in a new window, and
    5. The punchcard gets a new hole which stays put


  • You can add as many punchcards as you like to the same page, each one for submitting a different content: the holes belong to that content
  • Easy to add
    1. Use a div element with a ‘punchcard’ class
    2. Set its ‘title’ and ‘id’ attributes to the title and URL of your contentFor example, this is the html code used to display the above punchcard
<div class="punchcard" title="PunchCard 1.0 Released Today" 
  • Easy to install
    1. HEAD: reference all the needed scripts and stylesheets
    2. BODY: set the path of the icons folder (relative to your domain)


<script type="text/javascript" src="jquery-1.0.3.pack.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="cooltip.js"></script>
<link rel="stylesheet" type="text/css" href="cooltip.css" />
<script type="text/javascript" src="crc32.js"></script>
<script type="text/javascript" src="punchcard.js"></script>
<link rel="stylesheet" type="text/css" href="punchcard.css" />


<script language="JavaScript">
PunchCard.icons = "/punchcard/icons/";
  • Easy to customize
    Change everything from colors to links, directly in the code and stylesheet files.


  • download all in a zip

Entity enzyme, or The pacman effect strikes back

This is so much a basic enzyme, as it is also necessary for what it does.

If you want to represent an HTML entity in a post, you’re going to struggle with the escaping / unescaping issue.

For example, to write that an ampersand is represented by an ampersand followed by ‘amp;’ is not as visually appealing as it is to show it right away, like & = &amp;

You begin this adventure by writing & = &amp; and after a Save and Continue Editing (SCE) roundtrip you get & = &, which is certainly true but not what you meant.

You think, well it’s obvious, I should have used that HTML trick in the first place. Do you remember that trick, don’t you? You have to escape the ampersand twice: it works in a plain HTML file. You think that the WordPress editor should have done it by itself: it’s simple enough! But you want things done, you’re not interested in polemical discussions with your beloved blogging tool. So you write & = &amp;amp; and go for another SCE roundtrip and & = &amp; shows up.

Wow! You’ve done it, pal. Time for a reward. Go for a coffee and back soon. You’re inspired now, not a good idea to waste too much time.

Just before the last molecules of coffee disappear from your tongue, you want to check that all is OK for a Publish trip, and go back trough your post. Suddenly you see something that makes you feel guilty for a simple coffee, whose taste was still there, just because. You saw it right, it was & = &amp; but now it is & = & again!! How can it be?

Soon you’ll discover that that old trick is useless. It only delayed the problem twice. Yes, each time you Save your post, an &amp; of your escaped entity gets unescaped automatically, that is & eats amp; up. So &amp;amp; will be &amp; after the first new Save, and & after just the second one. Thus, & = pacman.

Well, you only lose a couple of battles. You recently installed that new plugin that promised miracles about transclusions, don’t you? Yeah, Enzymes was its name.

OK, lets add a custom field called ‘amp’ with &amp; as its value. Then write & = {[.amp]} and save and continue editing. Try it now, you’ll see that this solves the issue.

Done? Isn’t it wonderful?

What? What are you saying? It doen’t work?!?! My Enzymes is BS? Well, I’m sorry. I put many hours into it, and it’s a bit ungrateful on your side, considering that I didn’t charge you a dime!

Are you sure you did exactly what I said? Please check again. Have you found the problem? Yes, that is the problem. The pacman effect strikes back! The & in your ‘amp’ custom field ate its ‘amp;’ up.

Eh man, stop joking now! Tell me the solution please, I’m exhausted!

The solution is:

add a custom field called ‘entity’ with ‘echo htmlentities( htmlentities( $this->substrate ) );’ as its value (without quotes). Then write & = {[.entity(.amp)]}

Remember this post pal! You’re going to use it over and over: {[123.entity(123.amp)]}, if the ID of your post is 123.