<?xml version="1.0" encoding="UTF-8"?>
<feed xml:lang="en-gb" xmlns="http://www.w3.org/2005/Atom"><title type="text">beardscratchers.com</title>
<subtitle type="text">A music-focused web experiment and creative-arts journal from London, England</subtitle>
<link rel="self" href="https://beardscratchers.com/journal/atom/" />
<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/" />
<id>tag:beardscratchers.com,2005:4357bcf9c70b1807791cd39e76b16baa</id>
<generator uri="http://textpattern.com/" version="4.4.0">Textpattern</generator>
<updated>2012-01-31T00:56:28Z</updated>
<author>
		<name>Nick</name>
		
		<uri>https://beardscratchers.com/journal/</uri>
</author>

<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2010-02-09T01:16:49Z</published>
		<updated>2010-02-09T01:22:58Z</updated>
		<title type="html">Reviews. Hacked Out.</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/reviews-hacked-out" />
		<id>tag:beardscratchers.com,2010-02-09:4357bcf9c70b1807791cd39e76b16baa/1d7353e279caaf9b907e1ee92b817fed</id>
		<category term="compendium" />
		
		<content type="html">
<![CDATA[<p class="first">Quick update. I set myself a small challenge. A teeny, tiny, micro <a href="http://en.wikipedia.org/wiki/Hack_Day">Hack Day</a> of my own. With a simple rule to commit myself to completing one of the 101 new things I have in the pipeline, end-to-end, and get it live in a couple of hours. Pointedly it&#8217;s a course of discipline since I&#8217;ve fallen into a bottomless pit of tweaking and fine-tuning of late.</p>

	<p><img src="https://beardscratchers.com/journal/images/145.png" alt="" class="ir" width="404" height="206" /> As the title of this entry might suggest, it involves <strong>record reviews</strong>! Reviews are already an integral part of release entries on <a href="https://beardscratchers.com/">The Compendium</a>, but I&#8217;ve never opted to start recording their existence. So I have, and this in turn means that aggregated review listings for an artist&#8217;s back-catalogue become available. Well, <em>will become</em>, once more reviews are recorded; the testing sample covered less than 100. Some examples:</p>

	<ul>
		<li><a href="https://beardscratchers.com/artist/mogwai/reviews?m=d700b3f5-45af-4d02-95ed-57d301bda93e">Mogwai Reviews</a></li>
		<li><a href="https://beardscratchers.com/artist/ke$ha/reviews?m=fab34286-b8e1-4879-bce3-194e1358fbd2">Ke$ha Reviews</a></li>
		<li><a href="https://beardscratchers.com/artist/beach-house/reviews?m=d5cc67b8-1cc4-453b-96e8-44487acdebea">Beach House Reviews</a></li>
		<li><a href="https://beardscratchers.com/artist/taylor-swift/reviews?m=20244d07-534f-4eff-b4d4-930878889970">Taylor Swift Reviews</a></li>
		<li><a href="https://beardscratchers.com/artist/grizzly-bear/reviews?m=59a7fbcb-ff74-494d-abd0-9c82359040c9">Grizzly Bear Reviews</a></li>
	</ul>

	<p>It&#8217;s a first-cut, and there are many improvements needed, but fortunately it was fairly successful. In part through opting for something fairly trivial, but mainly because I had a reason to commit myself to producing an end result.</p>

	<p>I need to do that more often. I&#8217;m already responsible for more than one orphan:</p>

	<ul>
		<li><a href="https://beardscratchers.com/news">/news</a></li>
		<li><a href="https://beardscratchers.com/chirps">/chirps</a></li>
	</ul>

	<p>All in good time, all in good time&#8230;</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-12-31T18:08:26Z</published>
		<updated>2010-01-30T23:05:04Z</updated>
		<title type="html">Hot Photos. Let me show you them.</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/hot-photos-let-me-show-you-them" />
		<id>tag:beardscratchers.com,2009-12-31:4357bcf9c70b1807791cd39e76b16baa/7b3a7722ef985ce95d0cbf03dceb2dc4</id>
		<category term="compendium" />
		
		<content type="html">
<![CDATA[<p class="first">If there&#8217;s one thing the Internet loves, it&#8217;s photographs. While I&#8217;ve invested quite a bit of time teaching <a href="https://beardscratchers.com/">The Compendium</a> how to retrieve appropriate artist images &#8212;a bit of filtering here, and a little heuristics magic there&#8212; it&#8217;s never been quite enough to find flawlessly accurate photos across the hundreds of thousands of artists featured on the site, especially those that are less widely published.</p>

	<p>To rectify this I&#8217;ve finally managed to set aside some time to add a feature that&#8217;s been on the backlog for a <em>very</em> long time. <strong>Photo galleries!</strong> Yes, I know they are pretty ubiquitous things, so I won&#8217;t be offended if you&#8217;re not bowled over with amazement. But while photos galleries <em>have</em> been around since the dawn of the first Web browser, filling this big feature void has been a really successful and pleasing end to an intense year of development.</p>

	<h2>Photo Galleries on The Beardscratchers Compendium </h2>

	<p><img src="https://beardscratchers.com/journal/images/143.jpg" alt="" class="ic" width="600" height="283" /></p>

	<p>As with all other parts of The Compendium, the new artist photo gallery feature is privately managed behind-the-scenes to maintain quality. This is to ensure only relevant and high-resolution images are displayed, and not a slew of thumbnail-sized low-quality images. </p>

	<p>However, one of the major plans for 2010 is to open up a lot of the data on the site. Both in terms of providing the data externally via webservices (an <span class="caps">API</span> of <span class="caps">API</span>s, no less) and creating a community of editors to help maintain and and improve entries. I&#8217;ve always been mindful of this, and there&#8217;ll be more about it in the future&#8230;</p>

	<p>This first cut of photo-galleries is in two parts. A preview of the gallery is displayed as the primary focus point of artist profile pages. This preview area provides a number of options to <strong>view the complete gallery</strong> in its own separate area (click the &#8216;<em>x</em> images available&#8217; link), <strong>view images sourced from flickr</strong> or <strong>quickly scan through all images</strong> available in the gallery. Gallery pages are quite simple, nothing more than images and navigation, and no other clutter to get in the way of your pixel consumption pleasure.</p>

	<p><img src="https://beardscratchers.com/journal/images/144.jpg" alt="" class="ic" width="450" height="400" /></p>

	<p>Where no photo gallery exists, images are automatically sourced externally and displayed as they always have been. </p>

	<h2>See some Photo Galleries in action</h2>

	<p>I&#8217;ve already started sourcing promo images and where possible attributing photoshoots to the original photographer. Attribution is not an easy task and I&#8217;m getting in touch with people to find providers of original source material.</p>

	<ul>
		<li><a href="https://beardscratchers.com/artist/lady-gaga?m=650e7db6-b795-4eb5-a702-5ea2fc46c848">Lady Gaga</a> or view the <a href="https://beardscratchers.com/artist/lady-gaga/images/list?m=650e7db6-b795-4eb5-a702-5ea2fc46c848">Gallery</a></li>
		<li><a href="https://beardscratchers.com/artist/sufjan-stevens?m=01d3c51b-9b98-418a-8d8e-37f6fab59d8c">Sufjan Stevens</a> or view the <a href="https://beardscratchers.com/artist/sufjan-stevens/images/list?m=01d3c51b-9b98-418a-8d8e-37f6fab59d8c">Gallery</a></li>
		<li><a href="https://beardscratchers.com/artist/miles-davis?m=561d854a-6a28-4aa7-8c99-323e6ce46c2a">Miles Davis</a> or view the <a href="https://beardscratchers.com/artist/miles-davis/images/list?m=561d854a-6a28-4aa7-8c99-323e6ce46c2a">Gallery</a></li>
		<li><a href="https://beardscratchers.com/artist/my-brightest-diamond?m=15f835dc-ee52-4b74-b889-113678f54119">My Brightest Diamond</a> or view the <a href="https://beardscratchers.com/artist/my-brightest-diamond/images/list?m=15f835dc-ee52-4b74-b889-113678f54119">Gallery</a></li>
	</ul>

	<p>These are all well-known artists, but what about something you may not have heard of, like the <a href="https://beardscratchers.com/artist/black-pig-border-morris?m=66cf0586-5ff9-49e2-b220-db6d643b5b4d">Black Pig Border</a> Morris Dancing group? One of the most  satisfying things about running a site like this is that I can give exposure, whatever it might be worth, to artists or music that might not be a chart-topping fad or hugely marketed megalith. All it takes is <a href="https://beardscratchers.com/journal/contact">sending a quick message</a> with links to images and anything else that could be useful. Please include a link to the profile page in question so I can connect up the right things.</p>

	<h2>And finally&#8230;</h2>

	<p>Big stuff like this is cool, but it hasn&#8217;t been the only work since the last update entry. Hundreds of code commits have been made in areas such as site performance &#8212;the site scores &gt; 90 in <a href="http://developer.yahoo.com/yslow/">YSlow</a> tests and pleases  <a href="http://code.google.com/speed/page-speed/">PageSpeed</a> &#8212; little-but-makes-all-the-difference bugfixes, improved profiles for artists with unknown/incomplete discographies, more news and review providers, better parsing of discographies, more accurate image matching and much more&#8230;</p>

	<p>Here&#8217;s to 2010. Have a Happy New Year!</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-11-22T21:28:07Z</published>
		<updated>2009-11-22T21:29:56Z</updated>
		<title type="html">Introducing The BeardDex</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/introducing-the-bearddex" />
		<id>tag:beardscratchers.com,2009-11-22:4357bcf9c70b1807791cd39e76b16baa/0341566b258f70f56141dcfefcdfe132</id>
		<category term="compendium" />
		
		<content type="html">
<![CDATA[<p class="first">It&#8217;s been almost a week since the relaunch of the <a href="https://beardscratchers.com/">Beardscratchers Compendium</a>. Amongst the furious bug-fixing, performance tweaks and watching lines in error logs fly past the screen, I&#8217;ve managed to get a few updates out the door.</p>

	<p>But before I get on to introducing the biggest new feature, let&#8217;s get the not so exciting things out the way:</p>

	<h2>Fixes, Improvements and Changes</h2>

	<p><em>Many</em> behind-the-scenes bugs have been fixed, along with a little smoothing of the layout in places that are probably not obvious, but make a big difference. Some notable changes:</p>

	<ul>
		<li>Artist news pages have been tuned up and tweaked to display much more cleanly and with better formatting. Many articles now display associated thumbnail images.</li>
		<li>A few interesting news sources have been added that might generate some better matches for all the artists.</li>
		<li><span class="caps">RSS</span> feeds were being quite broken by dodgy <span class="caps">HTML</span> from various news articles. The code that generates <span class="caps">RSS</span> feeds has had a real workout and can almost handle anything thrown at it.</li>
	</ul>

	<h2>Introducing the BeardDex</h2>

	<p><img src="https://beardscratchers.com/journal/images/142.png" alt="" class="nobg ir" width="328" height="61" />This update post is really about the latest feature to have been added to the Compendium. It&#8217;s something I&#8217;ve called the <strong>&#8220;BeardDex&#8221;</strong>! You might have inferred from the name&#8212;which hasn&#8217;t had much thought put into it, I must admit&#8212;that it&#8217;s some kind of index, like one of the many stock market indices. </p>

	<p>It&#8217;s exactly that. Simply put, it&#8217;s a measure of an artist&#8217;s &#8216;notoriety&#8217; over time as viewed by the Compendium. It&#8217;s how the Compendium is seeing the rise and fall in things like <em>popularity</em>, <em>activity</em> and &#8220;<em>chatter</em>&#8220; of a particular artist. In these early days, the factors that contribute to a rise in notoriety are quite primitive. Further up the road, there will be <em>much more</em> data driving the generation of the BeardDex.</p>

	<p>The BeardDex is featured on every artist profile page, right in the header. The graph shows you how the artist has rated on the BeardDex over time, most recently on the right. Additionally, it graces the top of artist news pages, and you&#8217;ll see this graph crawling along the top of the news stream as the days go past.</p>

	<p>One thing to bear in mind, is that the BeardDex has only a few weeks of data to work with at the moment and the generated graphs tend to be a bit sparse, but there are already a few artists with interesting graphs:</p>

	<ul>
		<li><a href="https://beardscratchers.com/artist/radiohead?m=a74b1b7f-71a5-4011-9441-d0b5e4122711">Radiohead</a></li>
		<li>&#8216;King of Pop&#8217; <a href="https://beardscratchers.com/artist/michael-jackson?m=f27ec8db-af05-4f36-916e-3d57f91ecf5e">Michael Jackson</a></li>
		<li><a href="https://beardscratchers.com/artist/muse?m=9c9f1380-2516-4fc9-a3e6-f9f61941d090">Muse</a></li>
		<li><a href="https://beardscratchers.com/artist/britney-spears?m=45a663b5-b1cb-4a91-bff6-2bef7bbfdd76">Britney Spears</a></li>
	</ul>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-11-19T00:54:35Z</published>
		<updated>2009-11-19T01:51:08Z</updated>
		<title type="html">New! I made new things.</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/new-i-made-new-things" />
		<id>tag:beardscratchers.com,2009-11-18:4357bcf9c70b1807791cd39e76b16baa/7e8085623429c97ba877f20e216eeb42</id>
		<category term="compendium" />
		
		<content type="html">
<![CDATA[<p class="first">Last night, in what might have been a whisky-fuelled moment of bravado, I switched Old Beardscratchers Compendium to <a href="https://beardscratchers.com/"><em>New</em> Beardscratchers Compendium</a>. Like the sprightly young whippersnapper it is, this new version does everything the last one did, but comes much leaner, meaner and greener and with some extra tricks up its sleeves.</p>

	<p>It&#8217;s something I&#8217;ve been working at like a bad itch for quite some time. I&#8217;ve been desperate to get it out there but hampered at every turn by a desire to get it &#8216;just right&#8217;. Well, by all means it&#8217;s not perfect, but it&#8217;s starting to feel a little bit closer. </p>

	<h2>Papa&#8217;s Got a Brand New Bag</h2>

	<p><img src="https://beardscratchers.com/graphics/common/circle-logo.png" alt="" class="nobg ir"> Probably the most significant change is that all the code has been entirely rewritten from the ground-up. The bits that power the metadata discovery, to the fluff that garnishes buttons. The Compendium was originally borne out of laziness, at a time when this site operated as a place for creative-arts reviews. In attempting to automate the process of adding album and film details to reviews, I wrote a little plugin for the Textpattern <span class="caps">CMS</span> powering the site. That plugin got bigger&#8230; and bigger&#8230; and bigger, and eventually outgrew its shoes in, well, a <em>big</em> way.</p>

	<p>So it&#8217;s been rewritten. For the geeks among you, it&#8217;s all now underpinned by the brilliant <a href="http://kohanaphp.com">Kohana</a> <span class="caps">MVC</span> framework. By rewriting the code, there&#8217;s a huge opportunity to roll-out new features, make rapid fixes and add new content. There&#8217;s a slew of new <span class="caps">API</span>s introduced, and it&#8217;s even (albeit half-heartedly) authored in HTML5.</p>

	<h2>What&#8217;s New, Pussycat?</h2>

	<p>Best to keep as much a surprise as possible. <a href="http://beardscratchers.com/">Pick an artist</a> and just see where you end up. Click about. The Compendiums&#8217;s all about discovery and play. <strong>A few highlights:</strong></p>

	<h2>Artist News!</h2>

	<p><img src="https://beardscratchers.com/journal/images/141.png" alt="" class="nobg ir" width="339" height="185" /> Every artist you can view in The Compendium &#8211; based off Musicbrainz, that&#8217;s more than <em>half a million</em> &#8211; has their very own news stream updated several times a day.</p>

	<p>This news stream is a combination of a pretty broad selection of the UK and US music press. However, the aggregation started very recently and as I write this there are just over 2000 articles stored that were published in the last few weeks. Expect at least double in a week&#8217;s time, and it&#8217;ll continue to grow. </p>

	<p><img src="https://beardscratchers.com/journal/images/138.png" alt="" class="nobg il" width="149" height="133" />As there&#8217;s more to music journalism than what British and American hacks write, I <em>am</em> on the hunt for decent sources outside  these territories. Please <a href="https://beardscratchers.com/contact">send me a note</a> or comment below if you&#8217;re aware of any, particularly mainland Europe, Southeast Asia and Japan, would be greatly appreciated.</p>

	<p>And what would a news page be without a big orange &#8216;Subscribe!&#8217; button to get all the tasty newsbits as a juicy <span class="caps">RSS</span> feed in your very own news reader? Pretty rubbish. So there&#8217;s one of them too!</p>

	<h2>Record Reviews!</h2>

	<p><img src="https://beardscratchers.com/journal/images/137.png" alt="" class="nobg ir" width="246" height="137" /> While artist pages get spangly newsfeeds,  don&#8217;t think release pages have been forgotten about. They get reviews; they has them. I exemplify, thus:</p>

	<ul>
		<li><a href="https://beardscratchers.com/artist/lady-gaga/release/the-fame?m=785d7c67-a920-4cee-a871-8cd9896eb8aa">Lady Gaga &#8211; The Fame</a></li>
		<li><a href="https://beardscratchers.com/artist/st-vincent/release/actor?m=3fa36749-79ac-49b3-9bfb-eaac2f9162de">St. Vincent &#8211; Actor</a></li>
		<li><a href="https://beardscratchers.com/artist/explosions-in-the-sky/release/the-earth-is-not-a-cold-dead-place?m=57b15b44-0d31-40bd-9abc-aa13b1ddb307">Explosions in the Sky &#8211; The Earth Is Not a Cold Dead Place</a></li>
		<li><a href="https://beardscratchers.com/artist/the-beatles/release/abbey-road?m=d6010be3-98f8-422c-a6c9-787e2e491e58">The Beatles &#8211; Abbey Road</a></li>
	</ul>

	<p>Again, a broad but localised subset of music press are included; increasing the scope worldwide is planned.</p>

	<h2>Upcoming Gigs!</h2>

	<p><img src="https://beardscratchers.com/journal/images/140.png" alt="" class="nobg il" width="334" height="137" /> Gigs. Everyone loves gigs. We should all go to more. How about getting a combined listing from several major event sites of upcoming gigs for all the artists? Done. Oh, and it&#8217;s location-aware too. If a gig&#8217;s near you, it&#8217;ll make sure you know.</p>

	<p>This feature was present in v1. But it never really worked, and always pronounced it was  &#8216;Under development&#8217;. This was technically true, just not that particular version of it.</p>

	<h2>More</h2>

	<p>There&#8217;s more things to see, of course&#8230; <a href="https://beardscratchers.com/">Go! Find!</a> Hopefully they&#8217;ll delight you as much as they have sometimes perplexed me trying to get them working. Please feel free to contact me if you find odd bugs, think there&#8217;s something cool to add, you hate or love it, or perhaps just indifferent and would rather tell me how your day went.</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-03-22T15:03:55Z</published>
		<updated>2009-03-22T15:03:55Z</updated>
		<title type="html">Highlighting Google Search Result Pages with Stylish and CSS3</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/highlighting-google-search-result-pages-with-stylish-and-css3" />
		<id>tag:beardscratchers.com,2009-03-22:4357bcf9c70b1807791cd39e76b16baa/6ee358aa6707266c843ecd443af9feb3</id>
		<category term="css" />
		<category term="seo" />
		<content type="html">
<![CDATA[<p class="first">Like most websites, a significant portion of the beardscratchers.com audience arrive via a Google search query&#8212;you might well be one of them. And like most website owners, I have a minor obsession with viewing the latest stats to keep track of who&#8217;s coming in from where, why and what for. </p>

	<p>With Google frequently updating <acronym title="Search Engine Results Page"><span class="caps">SERP</span></acronym>s and different result sets showing dependant on the viewer&#8217;s geographical location, a small frustration I&#8217;ve had is being able to quickly pick out exactly where my site appears on a Google <span class="caps">SERP</span>. Wouldn&#8217;t it be nice if any time your site appears in the results of a Google search, it would be immediately visible to you? </p>

	<p><strong>From this&#8230;</strong></p>

	<p><img src="https://beardscratchers.com/journal/images/127.png" alt="" class="nobg ic" width="608" height="310" /></p>

	<p><strong>To this&#8230;</strong></p>

	<p><img src="https://beardscratchers.com/journal/images/126.png" alt="" class="nobg ic" width="591" height="301" /></p>

	<p>With just a few lines of <span class="caps">CSS</span> and a modern CSS3-capable browser like <a href="http://getfirefox.com">Firefox</a> or <a href="http://opera.com">Opera</a>, this is <em>incredibly easy</em> to do! Here&#8217;s the code we use:</p>

 <div class="code-sample"><table summary="This table lists the contents of the file google-highlighter"><colgroup><col class="line-no" /><col class="line" /></colgroup>
<thead><tr><th>#</th><th>Code</th></tr></thead>
<tbody><tr class="odd"><td>0001</td><td class="tab0">@-moz-document url-prefix(http://www.google) {</td></tr>
<tr><td>0002</td><td class="tab1">#res h3.r &gt; a[href*=&quot;beardscratchers.com&quot;] {</td></tr>
<tr class="odd"><td>0003</td><td class="tab2">background-color: #FFFFAA !important;</td></tr>
<tr><td>0004</td><td class="tab1">}</td></tr>
<tr class="odd"><td>0005</td><td class="tab0">}</td></tr>
<tr><td>0006</td><td class="tab0">&#160;</td></tr>
</tbody></table>
<p><a href="http://beardscratchers.com/journal/files/google-highlighter.txt" title="Downloads the above listing as a text file.">download this code</a></p>
</div>

	<p>First up, <code>@-moz-document url-prefix(http://www.google)</code> specifies the rule should run only on <span class="caps">URL</span>s that have the prefix &#8220;http://www.google&#8221;. This should cover all the Google bases&#8212;UK, US, Canada, Japan, Germany and so on&#8212; and avoid having the rule run on any other site. </p>

	<p>Next up, we have a <span class="caps">CSS</span> selector that makes use of some of the new CSS3 features of <a href="http://www-mit.w3.org/TR/2009/WD-css3-selectors-20090310/#attribute-substrings">attribute selectors</a> that allow us to perform substring matching on element attributes. <code>a[href*=&quot;beardscratchers.com&quot;]</code> pulls out any anchor on the page with an <code>href</code> attribute that contains the string &#8220;beardscratchers.com&#8221; somewhere within it. <code>^=</code> and <code>$=</code> allow you to match attributes that start and end with a string, respectively. The difference with CSS2 is that pattern matching can only work with <em>exact</em> matches.</p>

	<p>Note that substring matches with the attribute selector doesn&#8217;t permit the use of multiple strings to match. So in this example, we would need to duplicate the selector to add multiple sites: <code>a[href*=&quot;bbc.co.uk&quot;], a[href*=&quot;wikipedia.org&quot;]</code>.</p>

	<p>Finally <code>background-color: #FFFFAA !important;</code> provides our link with a subtle highlight.</p>

	<h2>Installing the code</h2>

	<p>For simplicity, I recommend the <a href="https://addons.mozilla.org/en-US/firefox/addon/2108">Stylish Extension</a> for Firefox. This extension is really just a nice <span class="caps">GUI</span> wrapper for a special file in Firefox called <code>userContent.css</code>. This file exists in the <a href="http://kb.mozillazine.org/Profile_folder">user profile folder</a> and allows users to add their own custom <span class="caps">CSS</span> rules to any site they view. For other modern browsers like Opera, there are some <a href="http://userstyles.org/styles/installing">useful details</a> on userstyles.org for alternative solutions.</p>

	<p>Once installed, simply create a new Blank rule:</p>

	<p><img src="https://beardscratchers.com/journal/images/128.png" alt="" class="nobg ic" width="386" height="159" /></p>

	<p>Paste the code in, change the site <span class="caps">URL</span> you wish to highlight, give it a title and click Save:</p>

	<p><img src="https://beardscratchers.com/journal/images/129.png" alt="" class="nobg ic" width="578" height="277" /></p>

	<p>And that&#8217;s it. As a quick test, search for the site&#8217;s domain in Google and you should find most of the results have been highlighted. </p>

	<p>There&#8217;s lots of potential here to do interesting things with <span class="caps">CSS</span> on Google <span class="caps">SERP</span>s;  let me know if you come up with anything useful.</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-03-09T23:58:57Z</published>
		<updated>2009-03-09T23:59:55Z</updated>
		<title type="html">Best API Update. Ever.</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/greatest-api-update-ever" />
		<id>tag:beardscratchers.com,2009-03-09:4357bcf9c70b1807791cd39e76b16baa/a9820d8d3f1ae8731cf823e196e0cebc</id>
		<category term="web" />
		<category term="web-services" />
		<content type="html">
<![CDATA[<p class="first">One thing I <strong>love</strong> about all the <span class="caps">API</span>s and web-services out there&#8212;especially those from commercial entities&#8212;is that they&#8217;re driven, designed and built <em>by</em> developers <em>for</em> developers. </p>

	<p>They bypass all the detritus in &#8216;economic leveraging&#8217;, &#8216;strategic incubation&#8217;, &#8216;synergistic e-business&#8217; and the rest of the bullshit and produce something simply for the challenge and love of experimentation. Last week <a href="http://flickr.com">flickr</a> exemplified this beautifully, and really renewed my faith in the development and web community at-large having a good sense of humour. Yet at the same time pushing forward at what&#8217;s possible with data and technology. I present:</p>

	<p><img src="https://beardscratchers.com/journal/images/125.jpg" alt="" class="nobg ic" width="500" height="341" /></p>

	<p class="c"><a href="http://code.flickr.com/blog/2009/03/03/panda-tuesday-the-history-of-the-panda-new-apis-explore-and-you/">The Rainbow Vomiting Panda of Awesomeness</a></p>

	<p>If the image wasn&#8217;t enough to warrant the highest of praise&#8212;I foresee pandas as the new meme to beat unicorns&#8212; flickr have just launched a couple of very curious and <em>fun</em> <span class="caps">API</span> calls that may have limited usefulness but really exalt what today&#8217;s Web should be about. </p>

	<p>We&#8217;re no longer a passive Web of static, inaccessible content. Today&#8217;s Web is a huge, living, breathing pool of data and it&#8217;s all about seeing what we can do with it!</p>

	<p><strong>Long may the renaissance continue!</strong></p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-03-09T00:16:59Z</published>
		<updated>2009-03-10T00:01:02Z</updated>
		<title type="html">Doing the Semantic-Web Tango with Wikipedia and Freebase</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/doing-the-semantic-tango-with-wikipedia-and-freebase" />
		<id>tag:beardscratchers.com,2009-01-18:4357bcf9c70b1807791cd39e76b16baa/e5c5722c52dcd5c6a23026fb174a3979</id>
		<category term="compendium" />
		<category term="web-services" />
		<content type="html">
<![CDATA[<p class="first">Behind the scenes, I&#8217;m working hard at writing a much improved <a href="https://beardscratchers.com/compendium">Beardscratchers Compendium</a> while still trying to trickle out new features in the current version. Recent browsing will have revealed the automatic inclusion of abstracts for both artists <em>and</em> releases direct from Wikipedia. Implementing this feature seemed, at first glance, to be very simple.</p>

	<p>In practice it ended up requiring the use of a completely separate <span class="caps">API</span>, lots of <span class="caps">RTFM</span>ing, and plenty of blind hacking. Let&#8217;s start with Wikipedia.</p>

	<h2>The Wikipedia Problem</h2>

	<p><img src="https://beardscratchers.com/journal/images/123.png" alt="" class="nobg ir" width="171" height="210" /> Wikipedia is built on top of the MediaWiki software; its content is fully accessible <a href="http://en.wikipedia.org/w/api.php">via an <span class="caps">API</span></a> without it needing to build one itself. Great, so what&#8217;s the problem?! Go check out the documentation in that <span class="caps">API</span> link. Actually accessing Wikipedia content directly involves a <em>lot of hard work</em>. I had imagined it would be a simple case of &#8220;query artist name&#8221; -&gt; &#8220;display article text&#8221;. I should try and remember that nothing is ever that simple. </p>

	<p>Let&#8217;s say we want to use the MediaWiki <span class="caps">API</span> to retrieve the content for <a href="http://en.wikipedia.org/wiki/Sting_(musician)">Sting&#8217;s Wikipedia entry</a>, to display it on <a href="https://beardscratchers.com/compendium/sting">Sting&#8217;s Compendium entry</a>. A read of the docs tells us the <span class="caps">URL</span> we&#8217;re after looks like <code>http://en.wikipedia.org/w/api.php?action=query&amp;prop=revisions&amp;pageids=123456&amp;rvprop=content&amp;format=xml</code>. The important bit here being the need of a <code>pageid</code> value to retrieve the content. </p>

	<p>The only useful query value we do have is the artist&#8217;s name &#8220;Sting&#8221;. A further read of the documentation tells us we can use <em>another</em> <span class="caps">API</span> call to search the Wikipedia database with a free-text query. However, take note that Sting&#8217;s page on Wikipedia is actually <code>Sting_(musician)</code>. Like many articles on Wikipedia, it&#8217;s a disambiguated title, used to distinguish identically named articles. There are <a href="http://en.wikipedia.org/wiki/Sting">many articles</a> entitled &#8220;Sting&#8221;. So how do we know which one to actually retrieve once we&#8217;ve managed to get a list of article pageids with the title &#8220;Sting&#8221;? </p>

	<p><em>The short answer is we can&#8217;t</em>. Not without lots of string parsing, munging and making assumptions in code. It&#8217;s not really possible to do this without producing a lot of false positives.</p>

	<p>To make matters worse, have a look at the data returned from the <a href="http://en.wikipedia.org/w/api.php?action=query&amp;prop=revisions&amp;pageids=83312&amp;rvprop=content&amp;format=xml"><span class="caps">XML</span> response</a>. All the content is still in wiki format. Even if we were able to pull the exact articles we needed, the content would have to be pushed through a MediaWiki parser before being pushed out into a usable format. I&#8217;ve as yet been unable to find a decent standalone wiki parser written in <span class="caps">PHP</span>. Please add a link in the comments if you do know of one (Pear isn&#8217;t standalone!).</p>

	<p>At this point I pretty much gave up&#8230; until I happened across the mighty Freebase. </p>

	<h2>The Freebase Solution</h2>

	<p><img src="https://beardscratchers.com/journal/images/124.png" alt="" class="nobg ir" width="220" height="42" /> What is <a href="http://www.freebase.com/">Freebase</a>? The official blurb says it&#8217;s &#8220;a massive, collaboratively-edited database of cross-linked data.&#8221;. In essence, it&#8217;s an encyclopaedia like Wikipedia but favours facts, relationships and explicit data over written content. </p>

	<p>It&#8217;s Wikipedia for machines and is a seriously fantastic idea. I&#8217;m not sure how I&#8217;ve previously manage to miss it. Freebase connects up many external data resources as well as its own data and gives them meaning, structure and relationships. The [open] community pitches in and helps maintain and expand the databases. <a href="http://www.metaweb.com/">Metaweb</a> then provides a hugely-featured open <span class="caps">API</span> to access this data with its own comprehensive query language to query it with&#8212; <a href="http://www.freebase.com/view/en/mql"><span class="caps">MQL</span></a>. While I&#8217;m a huge advocate of genuine <span class="caps">REST</span> <span class="caps">API</span>s with real <span class="caps">REST</span>ful endpoints, the flexibility and potential of the Freebase approach for an open webservice has got me very excited. It&#8217;s <span class="caps">SOAP</span>, but without all the rubbish it introduces.</p>

	<p>So how does it help with this problem of accessing Wikipedia content? As mentioned, Freebase connects many existing data-sets together in a structured manner. Two of these data-sets are Wikipedia and a beardscratcher&#8217;s favourite, Musicbrainz. Suddenly one of the world&#8217;s largest music databases is unambiguously connected with one of the world&#8217;s largest encyclopaedias, providing a <em>huge</em> mine of accurately related and structured information.</p>

	<h2>Connecting Freebase and Wikipedia</h2>

	<p>Covering the ins-and-outs of working with the Freebase <span class="caps">API</span> is well beyond the scope of this entry, and is expertly covered in the <a href="http://www.freebase.com/make">Make section</a> on freebase.com. </p>

	<p>In summary, the <span class="caps">API</span> has two core calls &#8211; database read and database write. Both simply take a single <span class="caps">MQL</span> query and return a response. You can experiment with <span class="caps">MQL</span> in their handy <a href="http://www.freebase.com/tools/queryeditor">query editor tool</a>.</p>

	<p>As I&#8217;m not much of a Sting fan, I&#8217;m going to continue this entry with a more interesting artist, <a href="http://beardscratchers.com/compendium/my-brightest-diamond">My Brightest Diamond</a>. Taking a look at the the Freebase front-end, there&#8217;s <a href="http://www.freebase.com/view/en/my_brightest_diamond">lots to discover</a> about the artist in the database. Here, we&#8217;re only interested in a few small specific pieces of data; namely <em>what is the entry on Wikipedia for the artist &#8220;My Brightest Diamond&#8221;?</em></p>

	<p>I&#8217;m repeating myself now, but I&#8217;ll reiterate that Freebase entries are interlinked datasets, and this relationship is formulated (in part) by identifying &#8216;keys&#8217;. Such keys are Freebase object types (like a &#8216;music artist&#8217; or &#8216;animal&#8217;) or keys from  external datasets like the Wikipedia article ID we&#8217;re after and the Musicbrainz <span class="caps">MBID</span> that uniquely identifies an artist in the Musicbrainz database. The <span class="caps">MQL</span> we need to use to query Freebase for an artist&#8217;s keys looks like the following:</p>

<pre><code>{
 &quot;query&quot; : {
  &quot;name&quot;:&quot;My Brightest Diamond&quot;,
  &quot;type&quot;:&quot;/music/artist&quot;,
  &quot;limit&quot;:1,
  &quot;key&quot; : [{
    &quot;namespace&quot; : null,
    &quot;value&quot; : null
   }]
 }
}
</code></pre>

	<p>This <span class="caps">MQL</span> should be fairly self-explanatory. We&#8217;re asking for a &#8220;/music/artist&#8221; with the name &#8220;My Brightest Diamond&#8221; and want just one result. The <code>null</code> values indicate the properties of the query that we want returned. It&#8217;s like saying &#8220;Hey Freebase, I&#8217;m stuck on a few things. Can you fill in the rest plz?&#8221;.</p>

	<p>Freebase responds with a number of keys in its response, a subset of which look like:</p>

<pre><code>{
 &quot;namespace&quot;: &quot;/authority/musicbrainz&quot;,
 &quot;value&quot;: &quot;15f835dc-ee52-4b74-b889-113678f54119&quot;
},
{
 &quot;namespace&quot;: &quot;/wikipedia/en_id&quot;,
 &quot;value&quot;: &quot;7490642&quot;
}
</code></pre>

	<p>Perfect. It appears we have the exact page id to use in a query to Wikipedia for the artist&#8217;s entry. What&#8217;s also fantastic is that we can actually verify the match by checking the <span class="caps">MBID</span> it&#8217;s linked to, if we have it available (The Compendium always has the <span class="caps">MBID</span> available). There are are a surprising number of artists with identical names!</p>

	<h2>Finally retrieving Wikipedia content</h2>

	<p>It doesn&#8217;t end there. Recall that I mentioned that the output of the Mediawiki api is wiki-encoded content. </p>

	<p><code>http://en.wikipedia.org/w/api.php?action=query&amp;prop=revisions&amp;pageids=7490642&amp;rvprop=content&amp;format=xml</code></p>

	<p>Screw this approach. Let&#8217;s do things old-school, and find an actual wikipedia.org page that uses the page id value and returns something approaching <span class="caps">HTML</span> or just plain text. Bingo, <a href="http://en.wikipedia.org/wiki/index.html?curid=7490642&amp;action=render">printable version</a>. Well, at least <em>someone</em> will be making use of a printable version link (I certainly can&#8217;t recall the last time I actually <em>needed</em> to use one).</p>

	<p>And that&#8217;s it! One accurately matched artist bio. With a little bit of strip_tags() and preg_match() voodoo, and a touch of substr(), extracts of Wikipedia articles now appear on both <a href="http://beardscratchers.com/compendium/my-brightest-diamond?m=15f835dc-ee52-4b74-b889-113678f54119">artist entries</a> and <a href="http://beardscratchers.com/compendium/my-brightest-diamond/tear-it-down?m=8f6648d0-7995-4568-990b-84c955ac17a8">release entries</a>.</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-03-08T18:14:19Z</published>
		<updated>2009-03-25T13:35:48Z</updated>
		<title type="html">How to inline Opensocial Message Bundles for improved performance</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/how-to-inline-opensocial-message-bundles-for-improved-performance" />
		<id>tag:beardscratchers.com,2009-03-08:4357bcf9c70b1807791cd39e76b16baa/77b589fb0222185b914044dd3a0f5772</id>
		<category term="web" />
		<category term="opensocial" />
		<content type="html">
<![CDATA[<p class="first">In my work at <a href="http://www.huddle.net">team collaboration</a> startup, Huddle.net, we&#8217;ve encountered a number of issues with externally referenced <a href="http://wiki.opensocial.org/index.php?title=Localizing_OpenSocial_applications">message bundles</a> in our Opensocial application, Huddle Workspaces.</p>

	<p><img src="https://beardscratchers.com/journal/images/122.png" alt="" class="nobg ir" width="288" height="70" /> Due to the size and scale of of the application&#8212;it&#8217;s quite big and complex in comparison to many Opensocial apps&#8212;our message bundle <span class="caps">XML</span> files contain a lot of content and, as a consequence, consume quite a lot of a bandwidth over the wire. </p>

	<p>Why is this a problem? Well, it shouldn&#8217;t be, but many Opensocial containers opt not to cache message bundles, and instead request them on every application invocation. The result is that network dropouts, latency or server-load can mean your message bundles occasionally fail to reach the consumer server and entirely prevent your app from loading. End-users shouldn&#8217;t ever have to suffer as a result of server-to-server communication.</p>

	<p>So, in lieu of consistent caching across Opensocial containers, this issue can be sidestepped by <em>inlining</em> the message bundle content inside your application gadget specification. This is a new feature introduced in Opensocial 0.8.1, and so you should ensure the container you&#8217;re working with is operating on a 0.8.1 codebase.</p>

	<h2>How to Inline a Message Bundle</h2>

	<p>It&#8217;s actually <em>very</em> simple, but it&#8217;s also something that isn&#8217;t officially documented anywhere. Opensocial development often involves shooting in the dark&#8230; but fortunately it&#8217;s well enough spec&#8217;ed that a little bit of guesswork goes a long way.</p>

	<p>Message bundles are always referenced from the <code>&lt;ModulePrefs /&gt;</code> block in a gadget spec, and look something like this:</p>

 <div class="code-sample"><table summary="This table lists the contents of the file moduleprefs-external"><colgroup><col class="line-no" /><col class="line" /></colgroup>
<thead><tr><th>#</th><th>Code</th></tr></thead>
<tbody><tr class="odd"><td>0001</td><td class="tab0">&lt;ModulePrefs title=&quot;beardscratchers.com&quot; author_email=&quot;nick@example.com&quot;&gt;</td></tr>
<tr><td>0002</td><td class="tab1">&lt;Require feature=&quot;tabs&quot; /&gt;</td></tr>
<tr class="odd"><td>0003</td><td class="tab1">&lt;Require feature=&quot;views&quot; /&gt;</td></tr>
<tr><td>0004</td><td class="tab1">&lt;Require feature=&quot;setprefs&quot;/&gt;</td></tr>
<tr class="odd"><td>0005</td><td class="tab1">&lt;Require feature=&quot;dynamic-height&quot;/&gt;</td></tr>
<tr><td>0006</td><td class="tab1">&lt;Require feature=&quot;settitle&quot;/&gt;</td></tr>
<tr class="odd"><td>0007</td><td class="tab1">&lt;Require feature=&quot;opensocial-0.8.1&quot;/&gt;</td></tr>
<tr><td>0008</td><td class="tab1">&lt;Locale messages=&quot;http://beardscratchers.com/lang/ALL_ALL.xml&quot;/&gt;</td></tr>
<tr class="odd"><td>0009</td><td class="tab1">&lt;Locale lang=&quot;fr&quot; country=&quot;fr&quot; messages=&quot;http://beardscratchers.com/lang/fr_ALL.xml&quot;/&gt;</td></tr>
<tr><td>0010</td><td class="tab1">&lt;Locale lang=&quot;es&quot; messages=&quot;http://beardscratchers.com/lang/es_ALL.xml&quot;/&gt;</td></tr>
<tr class="odd"><td>0011</td><td class="tab0">&lt;/ModulePrefs&gt;</td></tr>
<tr><td>0012</td><td class="tab0">&#160;</td></tr>
</tbody></table>
</div>

	<p>By simply removing the <code>messages</code> attribute from each <code>&lt;Locale /&gt;</code> element, and placing the relevant message bundle content (excluding the xml prolog), message bundles are no longer referenced externally and load along with your gadget spec:</p>

 <div class="code-sample"><table summary="This table lists the contents of the file moduleprefs-inline"><colgroup><col class="line-no" /><col class="line" /></colgroup>
<thead><tr><th>#</th><th>Code</th></tr></thead>
<tbody><tr class="odd"><td>0001</td><td class="tab0">&lt;ModulePrefs title=&quot;beardscratchers.com&quot; author_email=&quot;nick@example.com&quot;&gt;</td></tr>
<tr><td>0002</td><td class="tab1">&lt;Require feature=&quot;tabs&quot; /&gt;</td></tr>
<tr class="odd"><td>0003</td><td class="tab1">&lt;Require feature=&quot;views&quot; /&gt;</td></tr>
<tr><td>0004</td><td class="tab1">&lt;Require feature=&quot;setprefs&quot;/&gt;</td></tr>
<tr class="odd"><td>0005</td><td class="tab1">&lt;Require feature=&quot;dynamic-height&quot;/&gt;</td></tr>
<tr><td>0006</td><td class="tab1">&lt;Require feature=&quot;settitle&quot;/&gt;</td></tr>
<tr class="odd"><td>0007</td><td class="tab1">&lt;Require feature=&quot;opensocial-0.8.1&quot;/&gt;</td></tr>
<tr><td>0008</td><td class="tab1">&lt;Locale&gt;</td></tr>
<tr class="odd"><td>0009</td><td class="tab2">&lt;messagebundle&gt;</td></tr>
<tr><td>0010</td><td class="tab3">&lt;msg name=&quot;hello&quot;&gt;</td></tr>
<tr class="odd"><td>0011</td><td class="tab4">Hello!</td></tr>
<tr><td>0012</td><td class="tab3">&lt;/msg&gt;</td></tr>
<tr class="odd"><td>0013</td><td class="tab2">&lt;/messagebundle&gt;</td></tr>
<tr><td>0014</td><td class="tab1">&lt;/Locale&gt;</td></tr>
<tr class="odd"><td>0015</td><td class="tab1">&lt;Locale lang=&quot;fr&quot; country=&quot;fr&quot;&gt;</td></tr>
<tr><td>0016</td><td class="tab2">&lt;messagebundle&gt;</td></tr>
<tr class="odd"><td>0017</td><td class="tab3">&lt;msg name=&quot;hello&quot;&gt;</td></tr>
<tr><td>0018</td><td class="tab4">Bonjour!</td></tr>
<tr class="odd"><td>0019</td><td class="tab3">&lt;/msg&gt;</td></tr>
<tr><td>0020</td><td class="tab2">&lt;/messagebundle&gt;</td></tr>
<tr class="odd"><td>0021</td><td class="tab1">&lt;Locale lang=&quot;es&quot;&gt;</td></tr>
<tr><td>0022</td><td class="tab2">&lt;messagebundle&gt;</td></tr>
<tr class="odd"><td>0023</td><td class="tab3">&lt;msg name=&quot;hello&quot;&gt;</td></tr>
<tr><td>0024</td><td class="tab4">Hola!</td></tr>
<tr class="odd"><td>0025</td><td class="tab3">&lt;/msg&gt;</td></tr>
<tr><td>0026</td><td class="tab2">&lt;/messagebundle&gt;</td></tr>
<tr class="odd"><td>0027</td><td class="tab1">&lt;/Locale&gt;</td></tr>
<tr><td>0028</td><td class="tab0">&lt;/ModulePrefs&gt;</td></tr>
<tr class="odd"><td>0029</td><td class="tab0">&#160;</td></tr>
</tbody></table>
</div>

	<p>We&#8217;ve found that it&#8217;s much more common for gadget specs to be cached hard. Thus the additional weight of inlining your message bundle content inside your gadget <span class="caps">XML</span> is negated, and the application should&#8212;container-dependant&#8212;get some improvements to stability and performance.</p>

	<p>There is one caveat. Inlining content introduces maintenance and development issues, especially if you&#8217;re running several gadget specs for different enviroments i.e. development, QA and live. In respect of this, I&#8217;d recommend keeping all your message bundles in external files and instead adding something into your deployment process that will perform the inlining as and when it is needed.</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2009-01-18T12:39:58Z</published>
		<updated>2009-01-18T12:44:47Z</updated>
		<title type="html">Linux Tip: Connecting to a Remote Shell with RSync on a Port other than :22</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/linux-tip-connecting-to-a-remote-shell-with-rsync-on-a-port-other-than-22" />
		<id>tag:beardscratchers.com,2009-01-18:4357bcf9c70b1807791cd39e76b16baa/e44bea30cd263232475e6acd141007f0</id>
		<category term="Linux" />
		
		<content type="html">
<![CDATA[<p class="first">It&#8217;s fairly common that server admins will change the port that the <span class="caps">SSH</span> daemon listens on, to something other than 22. It&#8217;s security by obscurity; adding just a little extra hard work for those nefarious people trying to access public-facing machines they don&#8217;t own. </p>

	<p>Unfortunately this makes it a bit more tricky to use a number of ssh-enabled commands since it&#8217;s not always obvious how to pass the alternative port through. With rsync, it&#8217;s pretty easy once you know how.</p>

	<p>A normal rsync command to sync files <em>from</em> a remote machine to a local machine&#8212;over port 22&#8212;would look something like this:</p>

<pre><code>rsync -rav nick@myhostname.com:/home/nick/somedirectory .
</code></pre>

	<p>So, if instead we wanted to use port 12345, we simply add the <code>--rsh=</code> switch (or <code>-e</code>, which is an alias) to our command. This allows us to specify a *r*emote *sh*ell to connect to; in other words, the parameters to pass to the ssh command. Here&#8217;s how it looks:</p>

<pre><code>rsync -rav --rsh=&#39;ssh -p12345&#39; nick@myhostname.com:/home/nick/somedirectory .
</code></pre>

	<p>or using the <code>-e</code> alias:</p>

<pre><code>rsync -rav -e &#39;ssh -p12345&#39; nick@myhostname.com:/home/nick/somedirectory .
</code></pre>

	<p>Hopefully that saves a few headaches&#8230;</p>]]>
</content>
</entry>
<entry>
		<author>
			<name>Nick</name>
		</author>
		<published>2008-12-30T10:59:24Z</published>
		<updated>2008-12-30T11:20:16Z</updated>
		<title type="html">5 Hot Icon Sets for your Next Web Application Design</title>
		<link rel="alternate" type="text/html" href="https://beardscratchers.com/journal/5-icon-sets-for-your-next-web-app" />
		<id>tag:beardscratchers.com,2008-12-14:4357bcf9c70b1807791cd39e76b16baa/ebaacfc3ec0af065dc4fe7aaace17207</id>
		<category term="web" />
		<category term="design" />
		<content type="html">
<![CDATA[<p class="first">In this age of web-development, where static brochure sites are truly old-hat and every client demands interactivity, having a consistent theme for user interaction has become one of the most important steps in realising a successful design. </p>

	<p>One of the first lessons of <acronym title="Human Computer Interaction"><span class="caps">HCI</span></acronym> is the concept of <a href="http://en.wikipedia.org/wiki/Interface_metaphors">interface metaphors</a> &#8211; singular design elements that quickly infer an action or result of the user based on familiarity and association. The Recycle Bin and the Folder being two of the most well-known. </p>

	<p>On the web, icon design contributes to this hugely, and the success of a site&#8217;s design is largely thanks to a consistent icon set. Unfortunately most of us don&#8217;t have the time, patience (or talent!) to create an all-encompassing set of icons for a project, and so we must rely on the excellent work of designers around the World to help us on our way. </p>

	<p>Here are 5 free icon sets, available for commercial use, that I believe fit the bill over the plethora of icon sets available:</p>

	<h2>FamFamFam Silk</h2>

	<p>How could I not start with the ubiquitous Silk set. It&#8217;s a set that is seen absolutely everywhere, for a very good reason. It&#8217;s a huge set of 700 beautifully crafted icons that are free of a strong design-style; able to fit into any design and for any purpose.</p>

	<p class="clear"><img src="https://beardscratchers.com/journal/images/103.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/104.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/101.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/100.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/102.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/99.png" alt="" class="nobg" width="16" height="16" /></p>

	<p>&raquo; <a href="http://www.famfamfam.com/lab/icons/silk/">Download FamFamFam Silk</a></p>

	<h2>FamFamFam Mint</h2>

	<p>I&#8217;m particularly fond of this small set of minty-hued icons (apparently inspired by Shaun Inman&#8217;s <a href="http://haveamint.com">Mint</a>). While they might not find their place in every design, their minimalism and space-saving dimensions deserves giving them a look.</p>

	<p class="clear"><img src="https://beardscratchers.com/journal/images/98.png" alt="" class="nobg" width="11" height="11" /> <img src="https://beardscratchers.com/journal/images/97.png" alt="" class="nobg" width="11" height="11" /> <img src="https://beardscratchers.com/journal/images/95.png" alt="" class="nobg" width="11" height="11" /> <img src="https://beardscratchers.com/journal/images/96.png" alt="" class="nobg" width="11" height="11" /></p>

	<p>&raquo; <a href="http://www.famfamfam.com/lab/icons/mint/">Download FamFamFam Mint</a></p>

	<h2>Sweetie</h2>

	<p>Compact, but useful icon set with a glossy and colourful style. Comes with 4 icons sizes, from 8&#215;8 up to 24&#215;24, for a number of the included icons.</p>

	<p class="clear"><img src="https://beardscratchers.com/journal/images/105.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/106.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/107.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/108.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/109.png" alt="" class="nobg" width="16" height="16" /></p>

	<p>&raquo; <a href="http://sweetie.sublink.ca/">Download Sweetie</a></p>

	<h2>n-design Mini Pixel-Icons</h2>

	<p>A smart and well-featured set of 320 14&#215;14 icons; particularly good for e-commerce sites, as a good number of credit-card, shopping-cart and basket icons are included. Comes bundled with multiple shades to fit into and brighten up a plain app design.</p>

	<p class="clear"><img src="https://beardscratchers.com/journal/images/116.gif" alt="" class="nobg" width="14" height="14" /> <img src="https://beardscratchers.com/journal/images/117.gif" alt="" class="nobg" width="14" height="14" /> <img src="https://beardscratchers.com/journal/images/118.gif" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/119.gif" alt="" class="nobg" width="14" height="14" /> <img src="https://beardscratchers.com/journal/images/120.gif" alt="" class="nobg" width="14" height="14" /> <img src="https://beardscratchers.com/journal/images/121.gif" alt="" class="nobg" width="14" height="14" /></p>

	<p>&raquo; <a href="http://www.ndesign-studio.com/resources/mini-pixel-icons/">Download n-design Mini Pixel-Icons</a></p>

	<h2>Pinvoke Fugue</h2>

	<p>A huge, stylish icon set that I&#8217;ve not seen as widespread in the wild as Silk. Certainly one of the best large icon sets available on the Web.</p>

	<p class="clear"><img src="https://beardscratchers.com/journal/images/110.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/111.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/112.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/113.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/114.png" alt="" class="nobg" width="16" height="16" /> <img src="https://beardscratchers.com/journal/images/115.png" alt="" class="nobg" width="16" height="16" /></p>

	<p>&raquo; <a href="http://www.pinvoke.com/">Download Pinvoke Fugue</a></p>

	<h2>Closing Note</h2>

	<p>Most icon sets come prepared with transparent backgrounds, using <span class="caps">PNG</span> alpha-transparency. This type of transparency is unsupported in IE6 and produces undesirable results.</p>

	<p>The simplest solution to this problem, is to create alternative versions for IE6 in <span class="caps">PNG</span>-8 format (which supports 1-bit transparency). A little bit of pixel-pushing will be needed to make them look perfect, but I&#8217;ve never had any problems using this workaround. The Pinvoke and Sweetie sets already come bundled with alternative IE6-friendly versions.</p>]]>
</content>
</entry></feed>