HTML5 and CSS3 wizardry wokshop06
Sep

At 6:15am on Wednesday 2nd September I left Reading to travel to Brighton. On arrival, after a swift Sausage McMuffin breakfast, I headed to the Clearleft office to attend a workshop entitled HTML5 and CSS3 Wizardry.

img_3020CSS3 workshop in progessBrighton pier

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.

0 Comments | Posted in: Events

Pride of Reading nomination18
Aug

This week I was pleasantly surprised to discover that some of my colleagues and I had been nominated for a Pride of Reading award. The nomination was for a community project which I organised in the Summer of last year.

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.

0 Comments | Posted in: personal

Geek in the park 200916
Aug

Yesterday I spent an enjoyable afternoon in Jephson Gardens, Royal Leamington Spa, for this year’s Geek in the Park event. The afternoon consisted of lounging in the sun, feasting on our picnic and drinking rather a lot of red wine. This was interspersed with several somewhat amateur rounds of ‘keepy uppy’ none of which lasted very long because of the glorious heat. Later on in the afternoon we were lucky enough to get ringside seats for a drunken brawl between two of Leamington’s finest skinhead cider connoisseurs. This incredibly one-sided fight disbanded after the three rounds of pummeling and was then cleaned up by the local police.

Jephson Garden's band stand, geek in the park 2009

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’

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’

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’

1 Comment | Posted in: Events

jQuery Slideshow Plugin09
Jul

This is a really simple plugin but it is code that I have found myself re-using on various projects and I therefore assume that it will be of use to others as well. The overall effect is very straight forward. A slideshow which fades cyclically between images in a gallery.

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.

12345

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.

abc

 
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.

0 Comments | Posted in: jQuery

Generating double borders with CSS04
May

I was working on a site the other day which had double borders around images. This is nothing new and is easily achievable with no extra markup and a bit of basic CSS. The problems arose when I wanted to achieve the same effect using a div.

Let’s start with the image example…

img {
background:#222;
padding:3px;
border:3px solid #666;
}

This gives us the following effect…

Baby red howler monkey which I photographed on the Tambopata river in Peru.

I then wanted to achieve the same effect with a div. The most obvious option was to use two divs and put one border on each div.


#innerDiv{
background:#fff;
border:3px solid #222;
padding:8px;
}
#outerDiv{
border:3px solid #666;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ultrices dignissim neque. Suspendisse potenti.

Although this worked I was not keen on using an extra div purely for presentational purposes and decided to work on a more css-based solution. I refreshed my knowledge of the CSS border property and then came up with the idea of combining border-style:ridge and border-style:groove to make a two-tone double border.


#myDiv1{
background:#fff;
padding:8px;
border-top:6px ridge #444;
border-right:6px groove #444;
border-bottom:6px groove #444;
border-left:6px ridge #444;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ultrices dignissim neque. Suspendisse potenti.

This approach enabled me to get a double border only using one div but it still had it’s limitations. The groove and ridge border styles spilt the border in half so for this example 3px and 3px it worked fine. However if I had wanted to make one border thicker than the other this would not have been possible. Also you only get to define a starting colour for the border, in this example #444. The browser then uses this to generate a lighter (#c6c6c6) and darker (#262626) border. Not being able to specify border colours and border widths meant that this solution was not feasible.

Finally I tried using the css outline property. CSS outlines are similar to borders but they do not take up any room on the page. This means that they overlap other elements that are next to them in the page. To counter act this it is therefore also necessary to add some margin to our div.


#myDiv2{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ultrices dignissim neque. Suspendisse potenti.

This solution enables us to control the thicknesses and colours of each border independently and does not require any extra html markup. This was the option that I went with.

EDIT 28/05/09: Unfortunately (but not suprisingly) this last option does not work in Internet Explorer due to lack of support for the CSS outline property. Back to the drawing board.

3 Comments | Posted in: css

Designing the Firehorse Digital website04
Apr

« Older Entries
Newer Entries »
« Older Entries
Newer Entries »