Syntax Highlighter Chrome Extension: Sight

Last week a colleague introduced me to a handy Chrome Extension called Sight that allows syntax highlighting in your browser and "makes reading code on the browser a joy".

After using it for few days I have to admit that it does make javascript a lot easier on the eye. It has optional line numbers and supports syntax for about 35 different languages.

Sadly it doesn't support view-source highlighting, but apparently it's next on the to-do list and is still worth installing in it's current state.

If you're using Chrome you can get the extension from here https://chrome.google.com/webstore/detail/epmaefhielclhlnmjofcdapbeepkmggh

Wordpress colorpicker.js

The Wordpress wp_enqueue_script reference page lists Colorpicker as one of the default scripts imstalled, but doesn't offer any clues on how to implement it. The link on that page (currently) points to http://mattkruse.com/ which has no details on how to use it either.

The best online reference I've found so far is Matt Kruse's JavaScript Toolbox - Color Picker Swatch Popup which suggests you look at http://www.javascripttoolbox.com/ which doesn't have any documentation about colorpicker.js. Here's a link to the cached version of the documentation page just in case the source page is taken down: http://webcache.googleusercontent.com/search?q=cache:nlxkcPxsepEJ:mattkruse.com/javascript/colorpicker/

The javascript file /wp-includes/js/colorpicker.js is minified and browsing it doesn't easily reveal anything. There's a lot more information in /wp-includes/js/colorpicker.dev.js but it's not as straightforward as it could be.

What you need to do:

Include the colorpicker javascript file:
wp_enqueue_script( 'colorpicker');

Create a colorpicker object and hidden div, preferably put this near the end of your page:
<SCRIPT LANGUAGE="JavaScript">
var cp = new ColorPicker(); cp.writeDiv();
</SCRIPT>

Set up the input field and picker anchor tag:
Color: <INPUT TYPE="text" id="color2" name="color2" SIZE="20" VALUE=""> <A HREF="#" onClick="jQuery('#color2').each(function(index){cp.select(this,'pick2');return false;});return false;" NAME="pick2" ID="pick2">Pick color</A>

Alternatively, you could also try this approach where you ditch the anchor tag and use some jQuery to handle the rest:

<INPUT TYPE="text" id="color2" name="color2" SIZE="20" VALUE="" class="jColorpicker" >

<SCRIPT LANGUAGE="JavaScript">
jQuery(".jColorpicker").bind("click", function(){cp.select(this,jQuery(this).attr(\'name\')); });
</SCRIPT>


Conclusion
This snippet of code is showing it's age and there are better options out there if you need a color picker. The more I try to use it the more I become frustrated with it.

jQuery UI doesn't have a native one (yet) but I am guessing that will come in time. For now, probably the best candidate is the jQuery plugin jPicker from Digital Magic Productions.

"X-Moz: prefetch" and skewed page-hits

Earlier today I installed a WordPress plugin recommend for tracking the popularity of posts. The plugin is unsurprisingly named "Recently Popular". After installing the plugin I ran some quick tests and found that I was getting extra hits recorded. I spent a bit of time back-tracking to find the source and after systematically disabling all other plugins and page elements found that it was firing in wp_head() in the page header.

After some more digging, I noticed that the extra hit was for the chronologically next published post and that the problem occurred in both WordPress and WordPressMU. This wasn't making a lot of sense so I decided to try a different browser - more of a sanity test than anything. That's when I found it didn't occur in Chrome, or Opera - just Firefox 3.5.6 that I'd upgraded to a few hours earlier.

I fired up the Live HTTP Headers add-on and checked out the requests Firefox was making. It was definitely making both post requests. I took a closer look at the second request and noticed the extra header "X-Moz: prefetch".

A quick search for X-Moz: prefetch turns up Mozilla's Link prefetching FAQ which gives a good description of what is happening and why. WordPress creates a tag similar to the following when wp_head() is executed:

<link rel='next' title='The Next Post' href='http://your_domain/year/month/day/the_next_post/' />

I am unaware of anyway to disable the prefetch hints. You could edit your header.php and remove the wp_head() statement, but many plugins rely on the execution of this function so results could be unexpected and undesirable. The issue for me was not that the hint was published but that the prefetch hits were being counted as real post requests, as well as the actual request when I clicked through a second or two later. This would seriously skew the perceived popularity of posts.

My solution was to ensure that the Recently Popular plugin ignored post requests that passed the "X-Moz: prefetch" header. Depending on your server configuration, the method of checking the header exists may differ - apache_request_headers() (alias getallheaders()) is only supported when PHP is installed as an Apache module. Most servers should support checking for $_SERVER['HTTP_X_MOZ'].

I wonder how many other people will wonder why their page hit stats have mysteriously increased without any increase in ad impressions, etc.

I will contact the plugin author to suggest an update once I've published this post.

WordPress Plugins

Earlier this month I decided to move pantsonhead.com from it's ancient codebase onto a current CMS platform. The goal was to make it easier to manage, and hopefully spur me into making more frequent posts, and to get some experience with another platform.

After a little deliberation and discussion with friends I decided to go with WordPress. With WordPress MU and BuddyPress looking to be quite big in the near future I thought this was a smart choice. I'd tried Joomla! before but didn't have a great experience. ExpressionEngine was also a possibility, I've used it before and liked it a lot and ExpressionEngine 2.0 being built on CodeIgniter sounds great.

In the end WordPress won out because it's open-source, because pantsonhead.com is 90% blog, and because the plugin development community seems very active. For me, writing Plugins is an attractive way to work on some bite-sized code projects for fun, and maybe even profit.

The conversion to WordPress was fairly painless although I did have to create a couple of plugins to provide the functionality I wanted. I decided to release some of these into wild and the response so far has been quite positive.

Activity Sparks
Activity Sparks is a highly customizable widget to display a sparkline style graph in your sidebar indicate post and/or comment activity. This WordPress plugin leverages Google’s Chart API, so does not require the PHP GDI library. Customization options include Title, size, colour, background transparency, activity granularity and period.

RandomText
RandomText is a handy WordPress plugin that allows you to save, edit and delete categorized text, and inject random text by category into the sidebar (via widget) or pagebody (via template tags). Whether you want to display random trivia, quotes, helpful hints, featured articles, or snippets of html, you can do it all easily with RandomText.

RSS Blogroll
RSS Blogroll allows you to link to your favourite blogs via the latest items from their RSS feed. Article titles are much more attention grabbing and will deliver much higher quality traffic. We all hate clicking through to abandoned blogs – displaying article publication dates also lets readers know these are up to date and active sites. RSS Blogroll will create deeplinks to the target sites, which are much more useful for SEO than homepage links. Overall it’s a win-win situation with a better browsing experience for users and the linked sites getting more visitors who are actually interested in their content.

I'll be posting any future WordPress plugins on pantsonhead.com.