Notes Log

Goon is a JavaScript tool for DOM-based on-demand script loading

Features

• Independent
  Goon is a selfcontained script, no external library needed
   
• Short
  Goon is less than 2 KB (packed)
   
• Rigorous
  Goon guarantees that required scripts are executed before the requiring script is executed
   
• Clean
  Goon is tree oriented. Each gooned script is a node: if it’s not required by another node, then it’s a root, and if it’s not requiring any node, then it’s a leaf. Loading goes from root to leaves, while execution goes the other way around.
   
• Easy
  Goon’s nodes are calls to the Goon() function, nodes’ results are available as entries of the goon repository, and the last tree’s result by means of the goony shortcut
   
• Elegant
  Goon provides a simple environment, where a node can access imported results by means of this, and export its own results by means of return
   
• Flexible
  Goon can load the same node many times in the same tree and its behavior can be tailored by specifying how each script is required: in link mode, in exec mode, or in redo mode
   
• Flexible
  Goon’s nodes can be used as roots for their subtrees, without any modification, simply by loading them directly from a page
   
• Flexible
  Gooned pages can load all the needed trees, each with its own root, and they can be completely independent or grafted
   
• Flexible
  Goon’s loading trees can be transplanted between hosts, for example from localhost to a deployment host, by changing the query string used for loading Goon itself
   

Files

• download all in a zip (ver. 1.1 - 2007/02/06: minor bugs fixed)
• read the manual

Another little improvement for the HTML recipe. This time is for properly highlighting attributes whose name contains a dash, like “http-equiv”. I also touched the tag rule, so that the DOCTYPE is recognized now:

/*
===============================================================================
Chili Recipe for the XHTML language
...............................................................................

Version: 1.5b - 2007/02 - http://noteslog.com/chili/

-------------------------------------------------------------------------------
Copyright (c) 2006 Andrea Ercolino
http://www.opensource.org/licenses/mit-license.php
===============================================================================
*/

{
	steps: {
		  mlcom : { exp: /\<!--(?:.|\n)*?--\>/ }
		, tag   : { exp: /(?:\<\!?\w+)|(?:\>)|(?:\<\/\w+\>)|(?:\/\>)/ }
		, aname : { exp: /\s+[\w-]+(?=\s*=)/ }
        , avalue: { exp: /([\"\'])(?:(?:[^\1\\]*?(?:\1\1|\\.))*[^\1\\]*?)\1/ }
		, entity: { exp: /&[\w#]+?;/ }
	}
}

Some days ago I discovered that an HTML tag can have attributes whose values span multiple lines. This is very useful when the value is a piece of javascript code, which in fact is immune to white space.

The HTML recipe I bundled to Chili 1.5 is a bit wrong, though, because it doesn’t consider that possibility. This is one that does:

/*  
===============================================================================
Chili Recipe for the HTML language
...............................................................................

Version: 1.5a - 2007/02 - http://noteslog.com/chili/

-------------------------------------------------------------------------------
Copyright (c) 2006 Andrea Ercolino
http://www.opensource.org/licenses/mit-license.php
===============================================================================
*/

{
	steps: {		
		  mlcom : { exp: /\<!--(?:.|\n)*?--\>/ }
		, tag   : { exp: /(?:\<\w+)|(?:\>)|(?:\<\/\w+\>)|(?:\/\>)/ }
		, aname : { exp: /\s+\w+(?=\s*=)/ }
        , avalue: { exp: /([\"\'])(?:(?:[^\1\\]*?(?:\1\1|\\.))*[^\1\\]*?)\1/ }
		, entity: { exp: /&[\w#]+?;/ }
	}
}

What you find in the PunchCard Manual is valid in general for any html page and blog system, but if you need a 5 minutes guide for adding a properly formatted PunchCard to each WordPress post, here it is.

1. download PunchCard 1.2, and extract it to a local folder
2. locate the file jquery-1.1.1.pack.js and upload it to the remote folder / wp-content / jquery /
3. upload all the other files to the remote folder / wp-content / jquery / punchcard /
4. edit the remote file / wp-content / themes / default / header.php, 
   locate the </head> tag, add the following code right before it, and then close and save the file:
   

   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/jquery-1.1.1.pack.js">
   	</script>
   
   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/punchcard-1.2.pack.js">
   	</script>
   
   <script type="text/javascript">
   PunchCard.icons = "/aercolino/punchcard/icons/";
   PunchCard.styles = "<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/";
   </script>

5. edit the remote file / wp-content / themes / default / index.php, 
   locate the <p class="postmetadata"> tag, add the following code right before it, and then close and save the file:
   

   <?php 
   ob_start();
   the_title();
   $title = ob_get_contents();
   ob_clean();
   the_permalink();
   $permalink = ob_get_contents();
   ob_end_clean();
   ?>
   
   <div style="text-align:center;" class="pc_MINI"><div class="punchcard">
   	<object>
   	<param name="punchcard" value='{
   		title: "<?php echo $title; ?>"
   		, url: "<?php echo $permalink; ?>"
   		, id : "<?php $pieces = explode( "?", $permalink ); echo $pieces[1]; ?>"
   	}'/>
   	</object>
   </div></div>

That’s all.

• you can repeat step 5. for the file / wp-content / themes / default / single.php
• if you are not using the default theme, remember to appropriately change the path to the theme folder in the previous steps

Following this fast guide you’ll get a PunchCard at the bottom of each post, like mine. Each PunchCard will reference your post (title and URL).

Feel free to play with the PunchCard stylesheet and setup for customizing your punchcards.

I’ve found that dp.SyntaxHighlighter is similar to Chili, in that it uses language descriptions based on JavaScript regular expressions, so it’s quite easy to convert them to Chili recipes. Here are the first 5 conversions (more to come): Java, C++, C#, CSS, and Delphi.