I am really excited to be able to announce the publishing of my guest author post, HTML5 Custom Data Attributes (data-*) on the HTML5 Doctor website.

I have used HTML5 Doctor as a learning resource many times in the past and it feels great to be able to give a little something back.

Many thanks to Richard Clark, Remy Sharp and Mike Robinson for their constructive feedback on the article.

I haven’t felt this left out since my mum refused to buy me proper Nike trainers at school. Dribbbling is a new phenomenom all about sharing what you are working on and getting encouraging, inspiring and constructive feedback from other designers.

I think it is a fantastic idea and I love the execution of it, the site is simply stunning. Unfortunately dribbble is still an invite only proposition which is a bit whack if you are not friends of friends of the creators or an internationally renowned design super hero.

Whilst I am still unable to dribbble in public I thought I would dribbble in private and put out a blog post with the shots I would be dribbbling if I could.

These shots are both from projects I am currently working on and any dribbble-esque feedback on either would be much appreciated.

A current client project

An ongoing personal project

PS - If anyone out there has a spare dribbble invite they could send my way I’d be as happy as a kid with proper Nike trainers.

UPDATE: I now have my very own Nike trainers thanks to the lovely Matt Carey!

I was rather amused by this proposition and set to work on my own idea which has now been uploaded to the Hardboiled card flickr group. The nine best entries (as judged by Mr Clarke himself) will go on to feature in the pages of his forthcoming book “Hardboiled web design” to assist in the explanation of CSS3 selectors.

Shortly after my last post, Snap Bird creator Remy Sharp (@rem) replied to my email and said that he wanted to incorporate some of my ideas into the Snap Bird design. A couple of weeks later, after some great work from Clearleft’s Paul Annett (@nicepaul), the final Snap Bird design has now been launched.

Much to my delight, my bird illustration has been adopted as the Snap Bird mascot and has also been made into a favicon!

Many thanks to Remy and Paul for a credit in the final design, much appreciated.

On arrival in Brighton I was faced with a 10 minute uphill trudge in the rain. This was not an ideal start to the day but, before too long I had successfully navigated to my destination, which as had been pointed out to me a couple of days earlier “cannot be missed” due to a massive pair of stocking-clad legs sticking out of the roof. After a well needed cup of tea and two (yeah that’s right, two!) pain au chocolat I settled down into what must have been the most comfortable conference seat ever and prepared myself for the day’s talks.

Full Frontal 2009 Itinerary

• Christian Heilmann – Frontloaded and zipped up
• Robert Nyman – JavaScript: From Birth to Closure
• Peter-Paul Koch – W3C Widgets
• Stuart Langridge – The Future
• Todd Kloots – More accessible user interfaces with ARIA
• Jake Archibald – Optimising where it hurts
• Simon Willison – Node.js

A day of firsts…

Full frontal was a day of firsts… It was the first time I had been to a purely javascript conference, it was the first time I had properly understood closures (thanks to @robertnyman) and most importantly, it was the first time I had ever been to a conference where I had enjoyed every single talk. This was a brilliant suprise because in the past at conferences I have always found myself clock-watching in at least one presentation and wishing it would finish so I could go and get another free tea and danish.

The highlight of the day for me was Robert Nyman’s talk, which was a fantastic (albeit heavily Ben Affleck orientated) summary of everything you needed to know in order to be a JavaScript wizard. I also really enjoyed Jake Archibald’s talk on performing your own JavaScript performance research and how best to incorporate JavaScript libraries. The humour and enthusiasm he put into this potentially very boring topic was excellent.

Original presentation methods

Another thing that really impressed was the quality and originality of the presentation materials used, with three out of the seven talks not using powerpoint or keynote. Jake Archibald’s presentation was done entirely in flash, which despite being a little controversial for a JavaScript conference was incredibly well designed and animated. Stuart Langridge had made his own Javascript/CSS3 web-based presentation software, which he later told me would be available to download once he could sort out all the “fucking trigonometry”. Last but not least was Simon Willison’s presentation, which consisted of an original and brave navigation around 16 Mac OSX spaces arranged in a 4 x 4 grid, it was pretty hectic but it worked.

All in all the conference was a wonderful success and I really hope it happens again in 2010. The night ended with what was possibly the best burger I have ever tasted and a few beers at the OHSO Social on Brighton beach. Higher resolution versions of my photos are available on flickr along with many others in the Full Frontal Conference pool.

“Found a decent name for my app: http://snapbird.org - as in “snap! I’ve found my tweet”, pretty design hopefully soon-give-or-take” - @rem

Snap Bird is essentially an enhanced twitter search application that Remy has built to find archived tweets which are more than seven days old. I liked the idea and also liked the name ‘Snap Bird’ and I then began to wonder what a snap bird might look like if it where real creature. Before I knew it, this day dreaming had spawned an impromptu design session and moments later I’d cracked out Fireworks and had begun creating an illustration of a snap bird.

From this simple character I continued to develop a logo/brand and before too long I had created an entire layout for the Snap Bird home page.

I was quite pleased with how this design had turned out and decided to email Remy a link to the design to see if he was interested in using it to replace the largely unstyled version that he currently has up. As yet I have had no reply, although judging by further tweets from Remy today, it seems that he has already begun work on his own design.

I look forward to seeing what he produces.

EDIT: Find out what happened in this follow up blog post

HTML5

The workshop which was part of dConstruct 2009 was split into two halves. In the morning Jeremy Keith (@adactio) explained the evolution of HTML. This interesting journey covered the complete history of HTML and introduced the various individuals and associations responsible for its development over the years. The focus then shifted to the future of HTML and new HTML5 specification. Jeremy introduced the new doctypes, tags and attributes available to web authors and gave examples of their usage. Much like Remy Sharp’s HTML5 presentation at geek in the park a few weeks earlier Jeremy explained how these new tags can be incorporated into existing websites and how best to approach support in older browsers.

Jeremy was also very keen to highlight areas of the spec which he believed could be improved. In particular the disambiguation of the usage of section/article tags and similarly the figure/aside tags. He also raised concerns about the strict and counter-intuitive usage defined for the new footer tag*. Jeremy encouraged others to get involved with the WHATWG mailing list and raise any concerns before the working draft deadline in October.

* The very next day the footer tag specification was amended to be more inline with the header element… hooray!

CSS3

The afternoon session run by Richard Rutter (@clagnut) and Natalie Downe (@Natbat) focused on CSS3. The talk covered, in detail, a large number of the new CSS3 modules and discussed how best to implement these new technologies without compromising backwards compatibility. Of particular interest to me was the advanced use of border-radius and understanding the full list of options available for box-shadow.

Towards the end of the session they demonstrated some of the more bizarre elements of CSS3. The weirdest of these by far was the css3 template module, a quirky new way to define a web page layout by drawing an ASCII art blue print (complete with dimensions) within your CSS file… very strange indeed.

The venue and hospitality at the workshop were great, the presentations were well researched and hugely informative. Unfortunately, due to the experimental nature of the content covered I felt that there was very little that I could implement at work due of the huge proportion of our users still using legacy browsers. With such a small audience and no immediate impact on revenue I think it will be a long time before large corporate websites will invest any significant resources into CSS3 related projects. On a brighter note the examples demonstrated contained some inspiring eye-candy which I will definitely consider for personal projects outside of the corporate environment.

After an enjoyable early evening drink in The Fountain Head and some fish and chips on Brighton pier I returned to Reading.

On the 15th of August 2008 myself and about twenty others from Yell spent a hard, but enjoyable day at the Albert Road Day Centre in Caversham. Whilst there we stormed our way through a seemingly endless list of jobs including; redecorating the reading room, painting the external pillars, pagodas and trellis, landscaping the car park, building a rockery, trimming the hedges, mowing the lawn and weeding the gardens.

My personal highlight of the day was the installation of a chicken coop kindly donated by Graham Barnard of Happy Hutch. Well… that and the BBQ lunch cooked by yours truly!

You can read more about the project and the nomination on the Get Reading website.

As seven o’clock approached the geeks gathered in the south east corner of the park, between the bandstand and the Royal Pump Rooms, our home for the evening. The conference room was smaller than I had expected but was very pleasant. I decided to get the beers in before the first talk, however this turned out to be a lot harder than I had expected. Both Carlsberg and John Smiths had run dry and then the barkeep proceeded to tell me that the single bottle of corona was only in the fridge ‘just in case’. Eventually, armed with a bottle of Bud I settled in my seat ready for the first talk.

Simon Collison - ‘Nailing your own projects’

First up was Simon Collison (@colly) who was talking about project management and process. Particular focus was given to the strategies used at Erskine Design when redesigning their own portfolio website. Simon sung the praises of several project management/planning tools including basecamp, codebase and some hexagonal magnets for team brainstorming from logo visual. Simon then went on to share some of the tools he likes to use to collect inspirational materials and share them with his team online. Using LittleSnapper and Dropbox Erskine are able to create communal, collaborative mood boards. The talk was an interesting insight into how Erskine design approach a project as a team and I found it quite motivating.

Remy Sharp - ‘HTML5 and friends’

After a short interval and more amusement from the barkeep pooring coke all over his hand instead of in the glass I returned to my seat for the second half of the evening. Next up was Remy Sharp (@rem) who was here to talk about ‘HTML5 and Friends’. I had already read a fair amount of Remy’s HTML 5 work on his blog and on the HTML 5 Doctor website so I was familiar with a lot of his material. Despite this it was great to have these ideas reinforced and demonstrated in person. It was also nice to see the personality behind the pages of words that had filled my screen over the previous weeks. The take home message from the talk was HTML 5 is ready to start implementing now and with minimal effort the core features can be made to work in all major browsers.

All in all it was a great day and I will definitely keep an eye open for more geek in the park events. You can see the rest of my photos on flickr. Big thanks to @doodlemoonch for driving to Leamington Spa and back.

Slides from the presentations

Simon Collison - ‘Nailing your own projects’
Remy Sharp - ‘HTML5 and friends’

The plugin can be implemented as follows.

HTML

<div id='myID'>
<img src='path/to/image-1.jpg' />
<img src='path/to/image-2.jpg' />
<img src='path/to/image-3.jpg' />
...
<img src='path/to/image-n.jpg' />
</div>

JavaScript

$('#myDiv').slideshow();


That’s it! This results in the following effect.

There are two optional parameters that can be passed to the slideshow method. The first is an integer which represents the duration of the fade effect (default 800ms). The second is also an integer and represents the amount of time each image is shown for (default 6000ms). If we wanted to have a faster fade, say 300ms and show each image for only 2 seconds we could use the following code.

JavaScript

$('#myDiv').slideshow(300,2000);


This code would achieve the following effect.

 
As demonstrated by this page it is possible to animate multiple galleries on the same page. Each gallery works independently and can have a any number of images. It is also possible to specify different fade times and display times for each gallery if required.

This plugin is available for download both as a zipped folder containing a full demo (16k) or as a single javascript file. If you use the plugin on a project I would love from you. Additionally if anyone finds any bugs or would like to see any new features please let me know and I will do my best to help.