I’m not sure I like this idea. You instinctively look at people in the face, so when a person with a bright white light on their helmet looks at you, you are left dazzled. This leaves me with stars in my eyes while I’m trying to cycle in the dark. I suppose it depends on the brightness of the white light, but whenever it has happened to me it has pissed me off.

Anyway, you can read more about the torch bicycle helmet over at kick starter.

I stumbled across a post by John Rohan on creating triangles in CSS and thought it would be useful for using in CSS only breadcrumbs. Basically borders are drawn by browsers at angles and you can use this to your advantage to draw triangles.

The HTML is fairly standard for a breadcrumb, an ordered list of links. I’ve then used the pseudo  :after selector to add content after each link, which is where I have used the triangle border technique to add the arrows. I have also used ems for sizing, so the breadcrumb should respond well to resizing. Firefox also has a nice transition effect for the hover state; however I’ve binned this in all other browsers because transitions with CSS generated content are not supported by them.

So far every browser I’ve tested, bar IE7, seems to like it. Take a look at the CSS3 breadcrumb on jsfiddle.

It’s fantastic to see people with disabilities still cycling and giving it everything they’ve got. Inspirational.

I recently encountered an issue with the craziness that is IE6 and 7 not using the values of multiple buttons and instead submitting the inner HTML. IE6 goes one step further into the abyss of despair and sends every button’s inner HTML on the current page with a single click of one button. You can read more about this specific unfriendly IE issue with buttons on Drew McLellen’s blog.

To get around this all buttons were changed to a mixture of links and inputs. Thankfully I’d styled buttons and inputs of type submit to appear the same, but I hadn’t considered links being used as buttons in the project I was working on. This led me to work on a specific set of classes that could be applied to inputs, buttons and links. Creating a standard look and feel for them regardless of their type. This gives you the freedom to use whichever element you need and not worry about it looking out of place. You can even mix and match the elements and they will blend together like milk in coffee.

Take a look at the buttons via the demo – multi element button styles.

The styles currently work in the following awesome browsers:

• Firefox
• Chrome
• Safari
• Opera

And these not so awesome browsers:

• IE6-7 (not perfect)
• IE8-9

In terms of the markup all you need is a list, ordered or unordered, with a class of ‘btnList’.

<ul class="btnList"></pre>
</ul>

Then create as many list items as you need and fill them with either buttons, inputs or links as well as the class ‘btn’.

<ul class="btnList">
  <li><a href="#" class="btn">Link 1</a></li>
  <li><button class="btn">Button 1</button></li>
  <li><input type="button" value="Input 1" class="btn" /></li>
</ul>

Add the class ‘active’ to whichever element you want to be the default active element and then switch that around using your preferred method.

<ul class="btnList">
  <li><a href="#" class="btn active">Link 1</a></li>
  <li><button class="btn">Button 1</button></li>
  <li><input type="button" value="Input 1" class="btn" /></li>
</ul>

The demo page uses a little jQuery to illustrate the active class in action when you click through the elements.

$('.btnList .btn').click(function (e) {
$(this).closest('.btnList').find('.btn').removeClass('active');
$(this).addClass('active');
});

You can also add the ‘btn’ class to individual buttons, inputs and links to have the styles applied to those.

<button class="btn">Button 1</button>

If you’re interested, then you can grab the files for these buttons from GitHub – Multi element button styles.

I read CSS3 for Web Designers published by A Book Apart on the train home last night and finished it off this morning. The author Dan Cederholm has done a great job of describing the use of the most widely supported CSS3 properties available to date. It’s really succinct and to the point, which is what you want from such a short book. There’s definitely no rambling here, but there are a few quirky turns of phrase to liven it up and keep you interested.

I’ve been using the CSS3 properties (and more) described in this book, but there were a few things I picked up on when reading through it. Providing a colour value when using RGBA values, giving browsers that don’t support RGBA colours something to fall back to. This is a prime example and common sense, really! I’m also keen to try out the parallax background idea using multiple CSS backgrounds. It looks so cool.

Overall I think this is a great entry point into CSS3 for someone that hasn’t really dabbled with it before. Like I said, I picked up a few key points I hadn’t thought of, or read about, that will be useful in the future. Even if you’ve been using CSS3 for a while I would say it’s a useful and good read.

I agree with the sentiment of this video. Cycling in the snow is fun.

A work colleague had a first gen iPod Nano that was eligible for Apple’s replacement program due to safety concerns regarding the battery. They sent it off for a replacement, received the latest incarnation of the Nano and kindly sold it to me.

I was keen to get my hands on it because I wanted a Lunatik watch strap to go with it. I’m really impressed with with the Nano and the Lunatik strap. The aluminium case on the Lunatik strap isn’t quite what I was expecting, but it’s still really smart. The whole thing assembled with the Nano inside the strap is very light. It’s much less noticeable than a normal watch despite it being a bit bulkier. Very happy.

It’s been a long time coming, but I’ve finally updated the CeeFourBee template. And to celebrate I’m updating the content at the same time to announce this news. Two birds with one stone always works best.

So basically it was well overdue. I didn’t realise that the old template was created back in 2008 and it hasn’t been updated with content since 2010. Very much neglected indeed. I suppose the reason for not keeping it up to date is being too busy with work and not a lot of spare time at home. The template isn’t 100% complete, but I thought I’d get it live so that it would force me to keep tweaking and improving it as I go along.

Anyway. I’m hoping and planning to keep it more up-to-date than I have been doing. I will hopefully be sharing my cycling adventures and progress with fixed gear/single speed riding. As well as my thoughts and little projects around front end development with HTML5, CSS3 and jQuery.

Ashley keeps bugging me to update my website. He also keeps bugging me to write a review on the iPhone. So two birds with one stone. I’ve had an iPhone for nearly 3 months and it’s awesome. It’s shiny, really pretty and you can phone people with it. Unfortunately, they can also phone you. The interface is really intuitive and there are loads of apps (free and money grabbing) available for any number of useful and useless things. The iPhone is just a great piece of technology. Buy one.

I treated myself to playTV a few weeks ago. It’s an excellent piece of hardware for the PS3. Plug your aerial into it, plug it into your PS3, install some software and voila. Pause, rewind and record Freeview onto your PS3 HDD. I wouldn’t bother getting a PS3 and playTV just for this functionality, but if you already have a PS3 it’s well worth it. The picture quality is vastly improved from the built in Freeview tuner in my Samsung TV. I assume this is because the PS3 upscales the picture, but I can’t find anywhere on the internet that confirms this. Visit the wiki entry for playTV to get the lowdown on its full capabilities.