HTML. An alternative to Word?

When I’m writing code, be it CSS, Javascript, Ruby, whatever, I don’t like big bulky IDE’s. Give me TextMate or Vim any day. Going all freelance I now have the occasional need to produce nice documents and being in charge means I get to decide what I use to produce them. I never really liked working in Microsoft Word so decided against it. But rather than sensibly going for an obviously alternative I decided to just use HTML, or rather more specifically, Textile.

An example of a current document

As an old time textpattern I learned to love the simple text transformation language and it’s inclusion in the 37signals apps made me smile and more likely to use them. Why use it over HTML you may ask? For me I think about HTML like a browser, as a tree of nodes. I end up spending quite a bit of time writing content then going backwards and wrapping what I just wrote in markup. This is fine for your typical site, but for writing documents it’s hard to get into a flow. With textile I can flow in one direction.

So far I’m liking it alot. I can seperate content from presentation (Word styles are a myth), easily repurpose my content (text, html, pdf) and write documents in anything I like, including Word if I chose to.

It’s been a pretty good excuse to play with various bits of CSS3, including multi-columns, advanced layout, generated content and the various print offerings. Given I can control the rendering engine then produce a PDF to distribute I can use anything that the latest browser builds can deal with.

I’ve not got all the workflow steps automated yet, I’m using Firefox to print documents to PDF (via Preview) at the moment which works fine but is still a manual process I can get rid of using something like css2xslfo and fop. I’m also pretty sure the PDFs won’t be accessible, although the original markup certainly should be.

As I produce more complex documents I’ll likely miss things like automated table of contents generation, footnotes and page numbering but, then again, I can write that in Javascript (or on the server) if I so choose. I was impressed listening to HÃ¥kon Wium Lie at @media about the process they used to format his last book using CSS and PrinceXML. I’m half tempted to spend time rolling all this together into a web app. It would be pretty good fun really; APIs, XSLT, CSS, PDF, some nice UI problems, etc. Only problem I see would be entering a market contested by Microsoft, Google, Sun and er, lots of others.

Some Thoughts on Good Conferences to Attend - UK

Ben Metcalfe just posted a run down of some thoughts on conferences to attend. With all my travels this year I thought I’d join in.

I’ve spend quite a bit of time this year travelling the UK for various get togethers, conferences, meetups and the like and had great fun doing so. I go mainly because nowhere else do I find quite such a critical mass of smart interesting people to have a pint with and discuss the intricacies of the web. For 2007, in roughly chronological order: WebDD, Barcamp London, Future of Web Apps, Highland Fling, Refresh Edinburgh, @media, Hackday. I’ll be at dConstruct, Future of Web Apps (again) and possibly Future of Mobile and a Rails meetup in London as well to finish off the year.

I won’t go on about how cool Barcamp was. I actually think the whole unconference thing sits alongside the more formal conference scene quite nicely rather than acting as a direct challenge. Safe to say if you have yet to make a Barcamp then be on the lookout (although if you could not pick brighton please. I really want to go and it’s going to be hard enough to get tickets anyway!)

Highland Fling was excellent. Alan did a bang up job of picking a pretty focused topic and getting a gang of safe hands in to do the talking. Everything seemed to follow on from the previous talk, or catch a thread only touched on earlier in the day. This turned out to be down to the specific topic rather than some pre-conference collusion which I thing bodes well for other such topic centric mini-conferences. It was all rounded off (as all conferences must be) with a rousing talk from Andy Clarke and a panel chaired by Jeremy Paxman Keith.

media is still the daddy of the UK web standards scene. Personally I want more advanced materials and I'd love to see more audience interaction, but the scale of it makes that a little difficult I acknowledge. I'll keep going as long as I learn something new and come away feeling a little bit inspired. I'll be going next year. Maybe it's not going to hit the heights of the very firstmedia a couple of years back but that was my first trip out into the world. Oh, and patrick throws good parties in pubs with beer.

I think dConstruct is basically a grown up Highland Fling. It was great fun last year so here’s hoping it’s as much fun this year. Again, the idea of a particular topic is in place. I’m still thinking about @media Ajax if I can get enough work together to pay for it (note to people trying to keep up - I now work for myself as a freelancer) and I have a sneaking suspicion I’ll want to get along to Future of Mobile in a couple of months too.

My plan for next year is to try and get out of the country and hopefully to some of the events in the US and Europe that offer something different. SXSW is an obvious choice, but I’d be interested in any other ideas on top of Ben’s list. I’d also like to think in a year of so I might even end up talking at some nice event or other - but I need to pick a topic and stick to it I reckon instead of flitting between whatever I feel like that afternoon. Oh and probably practice.

Nabaztag REST API

I’m having quite a bit of fun with my rabbit, cambridge, at the moment. Their were a number of projects at Hackday involving the ever so cute Nabaztag and I had a feeling I’d probably go home and adopt one. The idea of a rabbit with APIs was simple too much fun.

Nabaztag

The Nabaztag API docs can be found in two places (the rest of the site unfortunately has a number of issues when it comes to finding information easily); in the help section and on the API site. The latter are much better than the former by the way.

Lots of people have already been hacking on the wireless rabbit. Their are some good tools over on the Nabaztag Sourceforge project, a handy Ruby module and a prospective PEAR module for PHP.

I’ve been getting more and more into the ideas behind REST recently and one thing that disappointed me a litte was the HTTP RPC style Nabaztag API (note to anyone thinking REST simply means using a GET request rather than something like SOAP or XML-RPC, it doesn’t). I couldn’t help seeing PUTs to ears and POSTs to the mouth.

Inspired a little by Arals Bunny Talk I’ve started implementing parts of the API in a RESTful manner, and used my API abstraction layer to build a similar application.

Head over to morethanseven.net/presents/nabaztag/ and send me a message (via my rabbit obviously) or, er, play with cambridges ears (he likes that). At the moment the API is configured only for my rabbit, although you can download the source code and run it yourself if you like. It requires PHP5 at the moment as one of the required modules is PHP5 only. But you are using PHP5 now aren’t you?

If you don’t want to use the form you can access the API directly. Here are a couple of examples using curl:

<code>curl http://morethanseven.net/presents/nabaztag/ears/left</code>

<code>curl -X 'PUT' http://morethanseven.net/presents/nabaztag/ears/left/13</code>

<code>curl -X 'POST' -d "message" http://morethanseven.net/presents/nabaztag/mouth</code>

Their’s a litte documentation in the source. I’ll add more methods, more documentation and maybe make an API anyone with a Nabaztag can use by authenticating either as I need it or if people actually want it. Let me know what you think (via the rabbit obviously!)

Ruby on Rails on Nokia N800

My latest job has allowed me to get back into playing with Rails, something I’ve been meaning to do for a year or so. Having got everything up to date and installed on my virtual server and on my laptop I couldn’t resist seeing if I could get it going on my N800.

The reasons for this are mainly that the idea of a wireless web server in my pocket is pretty intriguing. Think about it. If you’re at an event with Wi-Fi you can just point people to an IP address and hey presto they have access to your details, or a set of photos, or whatever you want to show them. I’ve also got nginx installed, but I’m not as yet that up on running python or PHP behind it on the N800. So, no need to carry around the laptop. OK, maybe it’s just me and all this going to web conferences? We’ll have to see if I actually knock up anything useful for the next conference and see. Saving that I’ve been travelling quite a bit recently and it’s handy when reading a Rails book to be able to try out the examples.

Anyway, it turns out that you can indeed install Ruby and Rails on the N800, although their isn’t much information around and non of it worked exactly as stated for me - hence this post.

I followed along with a pretty good tutorial, although I already had Red Pill Mode, XTerm and SSH installed. Ruby is also now available in the Garage.

The crux of the post is that you can find the required packages, in particular for Gem, here. But unfortunately that is were the problems start. I ran into exactly the same problem as described in the comments in the above post, on this blog post and on this Internet Tablet Talk forum thread. Specifically, Gem hanging, crashing or returning a segmentation fault in the yaml.rb file on line 133.

The problem appears to be (this is me guessing here) with gem and the N800 being able download all the info for Gem to update it’s package list. The solution, or rather a suitable workaround, is to download the individual gems yourself to the local file system or a memory card and then install them from there. You can get all the Rails gems here. A quick script/server later and I had the familiar Rails welcome screen on port 3000. This should in theory work for oher gems as well. You can either download them directly or use Gem on a local machine and them move the files across via bluetooth or USB.

A round-up

Being busy is to be expected with this new start-up malarkey but whoa. The problem is I have even more ideas for real posts or articles (the type you research, play around with, then write properly) and, for the next few weeks, not the time to do them justice. I’ll be back with gusto when I find the time. In the interim here are a few things from the last month or so I consider cool.

  • I has Nabaztag! Sorry, but I couldn’t resist after Hackday. Expect API hacking and silly photos on flickr aplenty.
  • Oh, Hackday was an absolute blast. Thanks to Matt, Ian, Tom and the cast of hundreds.
  • I’m working on a cool Ruby on Rails app in the real world, up here in Newcastle no less.
  • media":http://vivabit.com/atmedia2007 was, yet again, fab. A (very) late shout to Patrick and the umper lumpers. Can I make it tomedia Ajax?
  • Refresh Newcastle got a minor update with more flickr and upcoming goodness. Tag things refreshnewcastle for some lovin.
  • hedgehoglab.com has a few more pages, a survey on web training needs and more microformats than you can shake a stick at.
  • I’ll be at dconstruct (just). Another jigsaw piece of my increasingly bloody minded attempt to get to as many UK web get-togethers as possible.
  • I’ll be along to ncl.rb tomorrow night (thursday) and in the pub afterwards if anyone is around. Their have been a few good events in Newcastle recently, only some of which I’ve managed to get along to. I’m considering getting an Open Coffee do up and running in Newcastle as well. If anyone is interested let me know.

More (interesting) work beckons…

Target(ing) on CSS3

Apologies up front for the bad pun but I’ve been busy playing with another little feature found in CSS3, namely the :target pseudo-class.

It’s actually pretty well described in the CSS3 Selectors module, (although given that the specs make lots of use of partial URLs the spec style sheet is crying out for use of said selector to I digress).

Put simply it allows you to style elements of a page that are the target of in page anchors, ie. <a href=”#target”>in page link</a>

For example. The following CSS hides all div children of an element with an id of example3.

<code>#example3 >div {
    display: none;
}</code>

The we can say “if said element has been targetted then display them all”

<code>#example3:target >div {
    display: block;
}</code>

So if you visiting #example3 you would see the divs, otherwise they will be hidden away.

I’ve set up a couple of examples over on morethanseven.net/presents/target.

These examples basically remove the need for Javascript implementations but I’m not sure whether I’d actually use either of these. But you get the general idea. One thing about the examples was their simplicity compared with similar approaches though.

It’s already pretty well implemented according to this handy compatability table from CSS3.info and I would imagine an ideal candidate for Andy Budd’s CSS2.2.

Encoded Characters in CSS3 Generated Content

A quick, but hopefully informative post on something that took me a little time to work out and I thought might trip a few others up too.

I’m playing with quite a bit of CSS3 at the moment for our new company site. It seemed like a good excuse to put into practice lots of progressive enhancement and the like and so far is going nicely if I do say so my self.

The CSS3 Generated Content Module has some nice little bits in and I decided to use it to put some icons after external link ala wikipedia (but with nicer icons). Actually what I wanted was simply an arrow and I didn’t really need an image for that did I?

Well my first try went a little something like this:

<code>p a[href^="http:"]:after {
    content: "#8594;";
}</code>

Nope, no luck. By the time it hits the browser it’s not what I was looking for. I didn’t think old style named entities would work but what the heck?

<code>p a[href^="http:"]:after {
    content: "&rarr;";
}</code>

Nope. As I thought. No luck their either. I also tried the character itself (but forgot to put that in the first post - thanks Joe) but again to no avail.

<code>p a[href^="http:"]:after {
    content: "→";
}</code>

Some digging around and I managed to infer the correct syntax from some hidden away examples about something else.

<code>p a[href^="http:"]:after {
    content: "\2192";
}</code>

You need to use the Unicode encoding. Doh. Job done.

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.