Introducing hedgehog lab

For both of you who care what I get up to during my work hours this post is for you. I’ve finally gotten involved in a new startup with a couple of friends. Look out for hedgehog lab related goings on in a Newcastle near you. We’ve got plans being drawn up as I type (multi-tasking) but a smattering of training and consultancy on web standards design and development and a very health dose of some of those new fangled online products (all with as many microformats as I can sneak in) sounds like fun to me.

hedgehog lab:http://hedgehoglab.com/

Bye bye to all the people at TH_NK. It’s been great for two years and I’ll miss the cunning hit and run attacks on asp.net that have yielded some pretty good results. I’m sure you’ll get more done without me being quite so obstinate!

It’s not just the impending job move that has been keeping me so busy. I finally, after much useful feedback and patience from Matt got my first Digital Web article done: APIs and Mashups For The Rest Of Us. As the title suggests it’s a quick run through the various goings on, in particular on what I find so interesting about the concepts of Open APIs and this web of data thing. I even squeezed in some talk of Microformats Let me know what you think. Thanks to Sam as well for a useful early proof read and to Tiff at Digital Web (who also has some interesting things to say on this here industry on her new blog, Lost Cog)

End of self reverential post. The list of real things I have to blog about is frankly too long to wait around. And it’s not helped by these trips to london which frankly just give me even more to write about. Incase anyone is interested (and more to remind me), expect something on automated site testing, some musings and code (!) for doing useful things with microformats, some cool CSS3 (or is it CSS2.2 now?) tricks and something involving flickr which should actually be quite interesting if I get the time.

JSON configuration example - Printing

As a quick follow up to my previous post on unobtrusive javascript I thought I’d expand it even more, but this time in an attempt to make it easier to use.

As we’ve already mentioned javascript should be treated like any other programming language - not necessarily left to the experts but their should ideally be an expert involved somewhere along the line. One way of doing this is to abstract out configuration from programmatic logic. This massively helps with code resuse as well, leaving everyone to play to their strengths. It’s interesting to note that even programmers who would always store configuration settings seperately when writing PHP or Rails applications don’t always get around to doing the same in Javascript. Hell, I used to be one of them until Chris Heilmann pointed out how patently obvious the solution was while at The Highland Fling.

The answer is JSON. I think it’s nearly always easier with a quick example so here’s the Print snippet from the previous post but this time with a few configurable options:

<code>var Print = {
   config: {
      "id": "iNav",
      "classname": "has-print",
      "text": "Print"
   },
   init: new domFunction(function() {
      if (list = document.getElementById(Print.config.id)) {
         if (list.nodeName.toLowerCase() === 'ul') {
            if (Print.hasClass(list,Print.config.classname)) {
               var item = document.createElement("li");
               item.className = "print";
               var link = document.createElement("a");
               link.href = "#";
               link.onclick = Print.printpage;
               var txt = document.createTextNode(Print.config.text);
               link.appendChild(txt);
               item.appendChild(link);
               list.appendChild(item);
            }
         }
      }
   }),
   hasClass: function(element,cName) { 
      return new RegExp('\\b''&#43;cName'&#43;'\\b').test(element.className);
   },
   printpage: function() {
      window.print();
      return false;
   }
}</code>

The main thing we have done is to add a new block:

<code>config: {
   "id": "iNav",
   "classname": "has-print",
   "text": "brand new text"
},</code>

This is simply a JSON object of name/value pairs. You can easily alter the right hand values and change the workings of the app. You then reference the settings in the rest of you’re code using dot notation:

<code>Print.config.text</code>

In the above example our configuration directives are stored in our Print object. Depending on the circumstances of use you might find it easier to have a seperate Config object which stores all the configuration settings for the entire site.

Unobtrusive Javascript Example - Printing

In lieu of some real posts here’s a quick code sample to keep things ticking along.

I’m sure you’ve had the need to place a nice print button on a web page from time to time. If you haven’t you’re probably alone. A quick google will throw up lots of results for print javascript - the problem is that most of them are horribly obtrusive.

OK, so it’s easy to write something like:

<code><a href="#" onclick="window.print();">print</a></code>

But the problem is What if you turn off javascript? The following unobtrusive script automagically adds a print link to the page - in this case as part of a list item which is added to the unordered list with the id of iNav and a class of has-print.

<code>var Print = {
   init: new domFunction(function() {
      if (list = document.getElementById("iNav")) {
         if (list.nodeName.toLowerCase() === 'ul') {
            if (Print.hasClass(list,'has-print')) {
               var item = document.createElement("li");
               item.className = "print";
               var link = document.createElement("a");
               link.href = "#";
               link.onclick = Print.printpage;
               var txt = document.createTextNode("Print");
               link.appendChild(txt);
               item.appendChild(link);
               list.appendChild(item);
            }
         }
      }
   }),

   hasClass: function(element,cName) { 
      return new RegExp('\\b'&#43;cName&#43;'\\b').test(element.className);
   },

   printpage: function() {
      window.print();
      return false;
   }
}</code>

With something like this you want it to load as soon as the dom is ready, rather than on page load. Brothercake’s domFunction comes to the rescue here. The namespacing is based on Stuarts technique which should make it more capable of just being dropped in to any site.

The only problem with this is that it’s just a little longer than the original. I think this is down to one often missed fact, at least until recently - Javascript is a programming language and should be treated as such.

Some good news

Yeah, I just got my confirmation email for hackday in a months time.

Hack Day: London, June 16/17 2007

So, who else is going along and does anyone have any ideas they want team mates for? I’m thinking something mobile or microformats related or alternatively something I know very little about. Any ideas?

Oh, and I know I’ve been quite around the place lately, more on that when I can talk about it.

CSSx.x

Andy gave a great thought provoking presentation (exactly what conference presentations should be) at the recent Highland Fling shindig on the future of CSS which he’s written up into a good thought provoking blog post on CSS2.2

The Problem

As web standards developers we want new toys! I took to CSS because it made sense set against the madness of table based layouts, not necessarily because it appeared easy or flexible. CSS has turned out to be hugely flexible, but some of that flexibility has come at the expense of some weird and wonderful and successful techniques. I love this ingenuity, I’d like to think that the original CSS specification allowed for this cleverness in real world use.

CSS3 has stalled. CSS3 is trying to solve a whole host of massive problems that others are better placed to comment on, but I’d love to hear some comment from members of the working group. If I’ve missed a regular blog by a working group member please leave a comment and let me know.

I’m a real believer in open standards and I think that it’s this issue that worries me more about the pace of CSS development. Yes, I want new toys, or more specifically I want to be more efficient (yes rounded corners, I’m looking at you) but actually, I’d rather have a good CSS3 spec than a fast and loose one. But the immenent fight between Flash/Adobe and Silverlight/Microsoft is showing how productive huge commercial companies can be when it wants to get something done. Both are introducing interesting new tools and allowing for what could be improvements to usability (or horribly confusing interfaces but hey). CSS and HTML should be the glue that binds all this together in a web where everything plays nicely together. But if CSS provides too little or too late then this is put in doubt. And if CSS falls I dont see microformats, rdf, html5 or whatever making a real dent - and I really want a semantic web (upper and lower case).

The Solution?

Well, I’d like to say the solution isn’t Browser Wars II - A good idea this time?

Andy’s suggestion of an interim step (or steps) between now and CSS3 modules raises a problem. If the working group do the work then it takes their eye further off getting CSS3 modules out. If they don’t, will they accept suggestions from outside? Will outsiders be able to grok the whole standardisation process?

What we need is a commercial company with lots of smart people and lots of cash - with a track record of working with standards. A member of the W3C would be a plus. Ideally they should have something invested in the web as a platform, maybe even in a smarter, cleverer, semantic web.

Google to the rescue maybe? If you’re really cynical you could see Silverlight as an end run around Google’s apparent dominance of the web as a platform. Lock content away in proprietary silos and traditional search becomes less appealing? And surely Google has lots to gain from the long term adoption of anything that increases the semantic nature of the web. If CSS is a battleground then maybe they need to come out and make a stand(ard)?

If computer scientists managed birth certificates

I’ve been pondering authority in microformats and as a result been taking a closer look at microID.

The situation I want to find a solution for is; If their are lots of published hcards for a given person they might be different, either out of date or more sinisterly fraudulent. If I do a search for contact details, lets say using the technorati hcard search engine, how do I know which one is to be trusted?

If I publish an hcard on my site using the following markup, including a microID using the included email and url details to form the hash.

<code><div 
   class="vcard microid-mailto+http:sha1:a52b4f86cfa4190b53634d99198c0f56970c8d83">
   <h2 class="fn">gareth rushgrove</h2>
   <a href="http://morethanseven.net" class="url" rel="me">
      morethanseven.net
   </a>
   <a href="mailto:[email protected]" class="email">
      [email protected]
   </a>
</div></code>

If the hcard search engine reads that hcard on the morethanseven.net domain it could check the hash in the vcard against doings it’s own hash with the specified email address and url (checking the url is the same as the one on which the vcard lives). “Ah ha”. It can say. This looks like an authoritive hcard.

This does however raise a couple of issues. In order for the search engine or external reader to be able to create its hash you have to include the email in your hcard. I’m also not sure it does solve the issue of evil me:

<code><div 
   class="vcard microid-mailto+http:sha1:40b46e5c349453bddd0dbd022fb33488494699cb">
   <h2 class="fn">evil gareth rushgrove</h2>
   <a href="http://spammer.com" class="url" rel="me">
      spammer.com
   </a>
   <a href="mailto:[email protected]" class="email">
      [email protected]
   </a>
</div></code>

Assuming the above is published on spammer.com then I’m sunk. It’s another authorative hcard with the same name, in this case my name. Of course therein lies another problem, when we name our children we tend to just do it on a whim, we even copy names we like from other people! And we change or subvert these names when we dont like them with nick names and the like. Domain names are unique so we avoid this problem.

So, a possible solution does present itself; using the uniqueness of domain names combined with the fact that most people aren’t evil spammers. Lets postulate a search engine finds lots of hcards for a given name. Most of these hcards probably point back to the url of the entity they are describing (so most hcards on the web describing me point back to this site). We can then check if one of the hcards is from that domain, and if it has a valid microID. In other words we use the lazy web to identify the most likely location of an authorative hcard.

Authoritative hCards - Authority in microformats

I’ve been pondering lots of potential uses for microformats of late and came up on one thing I thought worth asking what people thought; namely the issue of authority in microformatted data.

Technorati provide a very interesting Microformats search engine that allows you to search for a person and get back their contact details via hcards that it knows about. For instance try doing a search for me and you get seven results (ironic given the domain name), try with one of those famous people and you get lots more. This poses a problem, what is the various hcard disagree?

You can always look at the publication date but this might not be enough. I could publish an hcard with incorrect data for anyone right now on this site and it would be more recent that the other, possibly correct, information already available on the web. Note that this isn’t a problem with Microformats per ce, more an ever present problem with the web. It’s just that Microformats make the matter more of a potential issue.

Is their a need for the ability to provide an authoritative hCard, or other Microformat instance? One that can always be trusted? If I publish an hcard of my details I’d like to think the latest version of that would be the most trustworthy. But how do you make a claim of ownership over a piece of data on the web (microformatted or not)? And for some of this data do you need a way of deciding who has access to it and who does not in a standard manner?

I’m pretty interested in the issue of identity at the moment, spurred on by the likes of OpenID and MicroID. I’m wondering if their isn’t some clever cross over here? Sites like ClaimID are doing some things in this space already so we’ll have to see.

Working example of Microformats as an API

Drew posted a while ago asking can-your-website-be-your-api. The simple idea is that you just might be able to live without a dedicated API in favour of good use of microformats.

It also turns out Tantek has also been on the case with his presentation Can your website be your API? - Using semantic XHTML to show what you mean and

Glenn has spoken on the subject too at WebDD and BarCamp.

This has interested me for a while and I’ve finally gotten around to writing some code, in fact I wrote the bulk of it during The Highand Fling and then the rest before the Refresh event after I got to te venue an hour early.

I used Drew’s hKit for the microformat parsing so everything that follows is PHP5 only I’m afraid. The also means I dont have a working example on this server at the moment but you can grab the code and try it out yourself. It also makes use of a couple of PEAR modules; PEAR Validate and PEAR HTTP_Request.

At the moment I’ve worked on a simple hCard example. It demonstrates the idea of a website exposing methods based on the presense of microformats, plus using that exposed method to extract the information we’re looking for.

First we create objects for the parser and the website:

<code>$parser = new hKit;
$website = new Website('http://morethanseven.net',$parser);</code>

Then we’ll ask what methods the website exposes:

<code>$website->expose();</code>

In this example we get back an array of the available methods, in this case getContacts. Then just as an example lets print out some contact details:

<code>foreach ($website->getContacts() as $contact) {
   echo $contact->getFN();
}</code>

This is a very early release, more of a proof of concept and as such their is no documentation and only a portion of hCard is supported. Hell, their’s not even a name beginning with h! Having said that I have a plan for a little project to kick the tyres and so I’l l be adding to it and hopfully have a proper release at some point.

The plan is to introduce methods like getReviews, getEvents, etc. which allow for the extraction of the relevant details. The part I find most interesting however is the idea of the expose method - asking a web page if it has an API, and if it does then what information you can extract automagically. If you’re interested let me know what you think.

Download example

Software I Installed on my N800

Ok, so I’ve been shopping again but I’ll try and make this post a little more useful that oh, look at my shiny new toy.

I decided that what I was really missing to help with my twitter addiction and growing interest in the mobile web was a shiny new Nokia N800 Internet Tablet.

Nokia N800 Internet Tablet

I cant really write a fair review at the moment as I’ve only just got my mits on it so that will have to save for later. All I can think at the moment is “Oh, shiny”. What I will do is list the software I installed on it from the start, partly to demonstrate what you can get on it, partly to link to thinks I found useful and mostly to remind me if and when I need to do it again.

And just for Phil it already has GCC-3.4-base on so no need to install.

Oh, and for the nay sayers thinking iPhone I don’t care. From all I’ve read the iPhone is going to be a closed system and this is a full blown Linux OS that is designed expressly to be hackable. Plus the N800 makes people swoon now, not in six months or a year when the iPhone hits the shelves.

Even More Events

I occasionally get some stick for wandering the country attending as many web related get togethers as I can manage but in fairness their are so many good events to get along to at the moment it would be rude not to. So here’s yet another run down of some upcoming events that people really should try and get along to:

The Highland Fling

Yes! It’s The Highland Fling in only a couple of weeks and it’s still looking as great as when I bought my tickets. A nice, small, event with a host of good speakers (and good guys) and it’s not south of me for the first time ever. Props to Alan for getting this off the ground.

Refresh Edinburgh

If that wasn’t enought it’s worth staying around an extra day in Edinburgh for a Refresh get together. Again a good lineup of speakers and I would imagine a much interesting discussion and debate.

BarCamp NorthEast

With all the BarCamp goings on around BarCamp London lots of other UK BarCamps have started to get organised, including one around these parts. Heather, Alistair, Meri and myself (ably supported with some soon to be revealed logo design by Elly) have plans. Watch this space.

Barcamp Sheffield

While we’re getting out act together another northern BarCamp is about to get going. BarCamp Sheffield is happening in only a few weeks time. I’m hoping to make it along, maybe just for the saturday, but if anyone else is going along let me know.

HackDay

If that wasn’t already enought (and I haven’t even mentioned @media) their was something of a big announcement from Matt over at the BBC today. Matt, and Tom from Yahoo have put together what looks like being the event of the year over the weekend of June 16th and 17th. Hackday is going to involve 400 geeks (you and me and all our friends in other words) spending 48 hours hacking on APIs and the like then watching some suitably bemused band.

Most of these have details on Upcoming which I’m increasingly thinking could be incredibly useful if only a few more people used it. So after telling you to go to all these events (which would cost money) I’ll leave with telling you all to sign up for Upcoming (which costs nothing) and add me as a friend.