AB Development Site Launch

Today sees the launch of my own site AB Development. It has officially been in development from start to finish for the last month on and off. Its nothing complicated and shouldn’t have taken me so long to develop but what I can say is that the site is mine, designed and built from the ground up.

Its certainly not the most creatively inspiring piece of work but its not meant to be, it is designed for function not to create an experience. I’ve been using, where appropriate, a lot of what I have been experimenting with over the past year in this blog. It is specifically built not to act the same in all browsers, I’m not interested in breaking my back making it look exactly the same in all browsers. I have used a lot of progressive enhancement to make it look better in browsers with better CSS support, but not look too bad in other browsers either.

What have I used?

  • A HTML5 doctype, the site isn’t necessarily HTML5 but I needed a doctype to trigger standards mode and the HTML5 doctype is as good as any.
  • Reset v2.0, recently released by Eric Meyer, again in keeping with the HTML5 doctype.
  • A grid system, more specifically I have used the 960 grid system as the basis for the design
  • CSS3 has been liberally applied to produced the alpha transparency effects, rounded corners and text shadows. Don’t have a browser which supports CSS3, well there are fallbacks in place for these browsers courtesy of CSS3 please!
  • JQuery has been used, with a few plugins for the menu, and scroll behaviour, and the also the form submits via AJAX.
  • Twitter feed uses the widget provided by twitter in their resource site, it was customised using CSS

I haven’t fully tested the site in all browsers, but have looked at it in IE6, 7 and 8. Unsurprisingly there were a number of bugs found and surprisingly they were easy to fix to the extent where the site was both functional and visually stable. There is probably more work to do here. Similarly I haven’t provided a fallback mechanism for the form as yet, so if you don’t have javascript enabled you can’t submit the form as yet. No doubt these little additions will be dealt with over time.

In the immortal words of Neil Crookes, abdevelopment.co.uk CHECK IT OUT!

What Use is a Modern Browser?

For people who thought the browser wars were over, the message coming out of the big 5 vendors is that it is well and truly alive. With Google releasing a new major version of its browser Chrome every 6 weeks, and having already surpassed IE in version number, and major releases for both Microsoft and Mozilla coming soon we are once again deep in the midst of a browser war.

Or so the vendors would have you believe if you follow what they have to say. First Microsoft comes out and says their upcoming browser IE9 has the best HTML5 features – note here the best not the most – then a Mozilla evangelist calls foul and says what about all the features it is missing? I’m sure their are many developers out there who nodded their head in agreement, sadly I wasn’t one of them. I was going to write about how pointless this propaganda war was when Faruk Ateş (Author of Modernizr) wrote almost exactly what I was thinking, it is therefore well worth a read.

As a developer I would be extremely happy if IE9 was indeed supporting all of the current HTML spec, and indeed if all the other browser vendors did the same, but even if they did who’d really give a fuck? Not most users, and probably not most developers, because you can’t use these features, or they are overkill for all but a small proportion of web sites. Here’s what is more important in my eyes, the best browser out there, the most modern, is Chrome, and not because of its lightning fast JavaScript engine, or its implementation of SVG. The killer feature for me as a developer is that it auto updates to the latest version, in the background. That means that at any given time you can be fairly certain what a user who is running Chrome can use, and therefore what you can use as well. The following chart shows what a success this strategy is, but just compare it to the other browsers.

Sure there are situations where an auto update can be bad, for enterprises being the best example, but for the vast majority of users out there, who don’t even get what a browser is, it is practically essential. Security updates can be applied automatically keeping the average joe six-pack safe. IE9 looks to have some excellent new security features, excellent but whats the point if the very people it is supposed to protect don’t install it, cause they are scared to break their computer? Take this decision out of their hands as Google have, and leave auto-update as an option to turn off for the savvy, or IT admins.

A byproduct of this for us developers is that if feature a isn’t available, but due in the next iteration, we can wait and when it is available we can be safe in the knowledge it will be available to us. Instead we are left saying if only IE9 had drag and drop just like Firefox 4, when in reality even if it did all the people using Firefox haven’t upgraded from 3.6 so don’t have it anyway.

IE9 looks good, and I’m sure down the line IE10 will be even better, but it matters not to the developers, cause we can’t use all the great new features in the wild. Please browser vendors, take a look at the Chrome model, iterate fast, update immediately, and then perhaps we can push the web forward.

Google Provide Fix for HTML Video Woes?

Last week was Google’s IO conference where the internet giant got to showcase some of what it has been working on recently. One of the biggest announcements in my opinion was the WebM project which could have far reaching waves in the open web.

The debate over video has been quietly raging for the past year or so with the major browser vendors unable to come to an agreement over which codec to use for open video. The W3C stepped back from this by refusing to specify a codec in the HTML5 spec effectively leaving it up to the browser vendors to decide.

Codec’s are surrounded by complex patent issues and these have lead to a divide in the browser camps. Mozilla and Opera chose to put their support behind Theora, Apple and very recently Microsoft threw their not insignificant weight behind H.264, Google well they supported both. The reasons behind the split decision rested largely around licensing issues for the H.264 codec which Microsoft and Apple already had, indeed they are both party to the MPEG-LA patent holders. Mozilla and Opera couldn’t really compete with this so rested with Theora which they claimed not to have these patent issues, although again this was murky legally.

Google well they hold the trump card in this as they own YouTube, if they supported either then that format would have a huge head start in online video. Up until Google IO they had thrown their YouTube weight behind H.264 as they argued the performance of this format was far superior to Theora.

And of course lets still not forget the incumbent format Flash Video which is pretty much ubiquitous for web video. Flash has also been in the news a lot recently with the war of words between Apple and Adobe, a lot of it centred around flash video.

A bit of a mess really and with the part video will play in the mobile web something really needed to be done. It seems that Google could possibly be the saviour here. They had acquired a company called On2 Technologies which held patent rights to a codec named VP8 which has a far superior quality to Theora. Google’s announcement of open sourcing the Codec under a permissive use license, and the packaging of it under the Matroska container to form the WebM project could quite possibly be the solution to this mess. They have already thrown YouTube behind it with the promise to recode every video in this format! Mozilla and Opera amongst others were part of this announcement so they will support the format. Microsoft quickly followed suit with the announcement they will also support VP8, and Apple, well no word from Apple yet. Adobe have even said the flash video container will support the format.

This announcement was huge and will have far reaching impacts on open video. Of course there are still a few unanswered questions. What will Apple do? Will content providers such as Hulu embrace this given the openness of the video and the technical challenges that brings to their business models? What does this mean for Flash Video and therefore Flash itself in the long run? How long will it be before we can reliably use WebM HTML5 video?

Creating a Logo in <canvas>

Over the last week I’ve had the opportunity to work a bit more on the skin of the blog turning my attention to the last major component of the skin not to receive some love and attention, the blog header. So far with the exception of a few icons I have managed to build the entire skin without using any images. No background images, no header images, just plain old CSS. Whilst the result wouldn’t win any creative design awards its not an ugly skin either.

I’ve wanted to add a logo for a little bit of visual tweak, a bit of branding I guess. I could have mocked something up in photoshop easily enough however creating a programmatic logo had some appeal. Luckily HTML5 affords me this opportunity with not one but two methods. Strictly speaking not HTML5, SVG could have been used and this is something I do want to look at in the future, however for the logo I decided to take a look at <canvas> which supports a basic drawing API.

The logo I had in mind was basically a mashed together A and B, a fairly simple geometric shape and one that I thought would be fairly simple to implement. The API is JavaScript and how it works reminded me a lot of an old program from my distant youth called funnily enough “Logo”. Overall I found the experience to be very easy however there are a number of concepts which are not obvious from the documentation but which I figured out eventually. I’ll take you through a step by step example shortly.

Before I do that I’d also like to hightlight the text I’ve used in the header banner. Although having been around for a very long time, downloadable web fonts have long been hard to achieve cross-browser. Legal issues have meant that the font format for @font-face has long been debated. Recently it looks like this has been resolved and WOFF has won the format war. Luckily for me and my blog Firefox 3.6 supports the WOFF format and it being my target browser of choice I decided to implement it in the banner. The font I have used is NuvoWeb which is a free font. I won’t go into the implementation as it isn’t that exciting, it is however good to be using a native font without having to resort to a work around such as image replacement or flash replacement.

Anyway back to the use of <canvas>. I’m first going to describe the basics before going through an example of creating the logo I use on this blog now. The basics I’m going to describe are obviously not an exhaustive list just what I required to make the logo.

Canvas Basics

To start using canvas you must first add one to your page this is simply a case of adding the following html:


Using the id attribute you can then grab DOM handle to it in JavaScript and start drawing, in my examples I’ve wrapped this in a function and this is called in the onload handler, barebones the handle looks like this:

var canvas = document.getElementById("test");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
}  

Now we have a handle on the canvas object we can start drawing. Ther are 4 main base methods for drawing complex shapes (or paths):

  • beginPath()
  • closePath()
  • stroke()
  • fill()

Using stroke() or fill() implicitly calls closePath() also. The <canvas> is made up of pixels which are referenced as a coordinate system from the top left (0,0), using this coordinate system you have 4 methods on top of the base methods for drawing paths.

  • lineTo(x, y)
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • quadraticCurveTo(cp1x, cp1y, x, y)
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Finally there is also one other method which allows you to position the start point of a path or paths:

  • moveTo(x, y)

I’m going to use the lineTo() and arc() methods to create the logo

Creating the logo

Using a piece of graph paper 10×10 I sketched out the logo I desired using full squares to make the maths easier. I then translated the coordinates of each point into the functions. The following are the steps I went through, if you would like to see the code behind each logo please click on the image for a demo file.

Step 1. Creating the outside shape

The logo is made up of simple lines and a couple of half arcs making up the ‘B’.

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.closePath();
ctx.stroke();     
     

Step 2. Cutting out the inside shapes

The inside shapes are fairly simplistic as well, 3 new paths were added.

ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.stroke(); 
     

Step 3. Filling in the logo

Up until this point the logo has just been an outline however I wanted a solid logo. In order to do this I assumed that instead of using 4 paths, 1 path would be required, so I modified the paths to utilising moveTo() and created a single path, then used the fill() method.

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.lineTo(20, 180);

ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.lineTo(80, 100);

ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(160, 50);

ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(160, 130);

ctx.fill();
     

As can be seen from the resultant image the result was not what I expect. Where I had cut out shapes I expect the fill to honour them. This was the first problem. It wasn’t obvious to me from the documentation why this hadn’t worked as expected so I decided to take a different approach.

Step 4. Cutting out the inside shapes (take 2)

Instead of cutting out the inside shapes I decided to fill the shapes in with the same background colour as they were painted in, utilising a layer effect as in photoshop.

ctx.fillStyle = "#000000";

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#FFFFFF";

ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.fill();
     

This approach looks to have the desired effect.

Step 5. Adding a shadow

Currently the logo looks a little flat so I decided to add a drop shadow to the whole thing. <canvas> has a set if method for doing this so I added the relevant code:

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
     

The more eagle eyed amongst you will now spot the issue I have. Where I have layered the shapes the shadow isn’t present, it looks like my inside shape method hasn’t worked. At this point I was fairly stumped.

Step 6. Cutting out the inside shapes (take 3)

After re-reading the documentation a few times I came across the following passage:

Note: Thus, if two overlapping but otherwise independent subpaths have opposite windings, they cancel out and result in no fill. If the overlapping but otherwise independent subpaths have the same winding, that area just gets painted once.

Windings is not a term I had come across before so after some digging it looks like it is the direction (clockwise or anticlockwise) the shape is created in. All I had to do was go back to my single path and cut the bits out in the oppoiste direction.

ctx.beginPath();

ctx.moveTo(80, 100);
ctx.lineTo(90, 60);
ctx.lineTo(100, 60);
ctx.lineTo(110, 100);

ctx.moveTo(160, 50);
ctx.lineTo(190, 50);
ctx.arc(190, 60, 10, (Math.PI/180)*270, (Math.PI/180)*90, 0);
ctx.lineTo(190, 70);
ctx.lineTo(160, 70);

ctx.moveTo(160, 130);
ctx.lineTo(190, 130);
ctx.arc(190, 140, 10, (Math.PI/180)*270, (Math.PI/180)*90, 0);
ctx.lineTo(190, 150);
ctx.lineTo(160, 150);

ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.lineTo(20, 180);

ctx.fill();
     

This filled the shape correctly and whats more the shadows worked perfectly as well.

Step 7. Adding a gradient fill

The final touch I want to implement was a nice gradient fill so again it didn’t look too flat. You can create a different types of gradient and then apply them to the fill style so this is what I did:

var fs = ctx.createLinearGradient(0,0,0,180);
fs.addColorStop(0, '#c08e93');
fs.addColorStop(1, '#BE1E2D');

ctx.fillStyle = fs;
     

Logo complete!

Conclusion

Overall, with the exception of the windings aspect, I found <canvas> fairly intuitive to work with. Creating aimple shapes like this doesn’t take a lot of brain power, sure its a bit fiddly but I’m sure in time tools will be developed to make this a lot easier.

As for the logo I’m pretty happy with the result for anyone interested here is my the final complete script

function drawLogo() {
  var canvas = document.getElementById("logo");
  if (canvas.getContext) {

    var c = canvas.getContext("2d");

    var offsetX = 14;
    var offsetY = 14;
    var scale = 5;

    var fs = c.createLinearGradient(0,0,0,18*scale);
    fs.addColorStop(0, '#c08e93');
    fs.addColorStop(1, '#BE1E2D');

    c.shadowOffsetX = 2;
    c.shadowOffsetY = 2;
    c.shadowBlur = 2;
    c.shadowColor = "rgba(0, 0, 0, 0.5)";

    c.fillStyle = fs;

    c.beginPath();
    c.moveTo(offsetX+(6*scale), offsetY+(8*scale));
    c.lineTo(offsetX+(7*scale), offsetY+(4*scale));
    c.lineTo(offsetX+(8*scale), offsetY+(4*scale));
    c.lineTo(offsetX+(9*scale), offsetY+(8*scale));

    c.moveTo(offsetX+(14*scale), offsetY+(3*scale));
    c.lineTo(offsetX+(17*scale), offsetY+(3*scale));
    c.arc(offsetX+(17*scale), offsetY+(4*scale), (1*scale), (Math.PI/180)*270, (Math.PI/180)*90, 0);
    c.lineTo(offsetX+(17*scale), offsetY+(5*scale));
    c.lineTo(offsetX+(14*scale), offsetY+(5*scale));

    c.moveTo(offsetX+(14*scale), offsetY+(11*scale));
    c.lineTo(offsetX+(17*scale), offsetY+(11*scale));
    c.arc(offsetX+(17*scale), offsetY+(12*scale), (1*scale), (Math.PI/180)*270, (Math.PI/180)*90, 0);
    c.lineTo(offsetX+(17*scale), offsetY+(13*scale));
    c.lineTo(offsetX+(14*scale), offsetY+(13*scale));

    c.moveTo(offsetX, offsetY+(16*scale));
    c.lineTo(offsetX+(4*scale), offsetY+(16*scale));
    c.lineTo(offsetX+(5*scale), offsetY+(12*scale));
    c.lineTo(offsetX+(10*scale), offsetY+(12*scale));
    c.lineTo(offsetX+(11*scale), offsetY+(16*scale));
    c.lineTo(offsetX+(18*scale), offsetY+(16*scale));
    c.arc(offsetX+(18*scale), offsetY+(12*scale), (4*scale), (Math.PI/180)*90, (Math.PI/180)*270, 1);
    c.arc(offsetX+(18*scale), offsetY+(4*scale), (4*scale), (Math.PI/180)*90, (Math.PI/180)*270, 1);
    c.lineTo(offsetX+(4*scale), offsetY);
    c.closePath();
    c.fill();

  }
}

The iPad Revolution

OK I may have got it wrong, there I said it. When Apple announced its latest much anticipated tablet form device or iPad back in January my immediate reaction was that its primary function was flawed. Lack of Flash support in the device practically doomed it to failure, simply because I saw its primary function as a device to surf the net. As almost all video content on the web is available in FLV format browsing the internet would become a frustrating affair.

This device will be revolutionary, really? A PC in tablet form has been around for ages, netbooks are great for surfing the web, what makes this device so revolutionary? Well it could just turn out that this device is revolutionary, a game changer in fact, and no I’m not talking about the device itself. I’m talking about the effect it could have on the open web. It may just give site operators the push they need to embrace open video. Take a look at this list of sites that are now iPad friendly. Sure its not massive in the context of the billions of sites out there but its got some big names on there. Large numbers of videos available via HTML5 <video> tags, beautiful, thats a revolution I can get behind!

Well perhaps not, all these videos will be based on the H.264 codec which isn’t exactly open. Every silver lining has a cloud. However its definitely a step in the right direction, and who knows if H.264 wins the open video format war all browser vendors may unite behind it and the patents that encumber H.264 may not be an issue afterall.

Does this mean I will be rushing out to buy an iPad? No, I still think its an overhyped and overpriced product. I’ll leave the revolution to others out there. Who knows if I ever get my hands on one I could make an informed decision instead of the zero experience I have to go on at the moment.

It does look shiny tho…

Let the Demolition Begin!

When I decided to theme this blog I had a few choices. Start completely from scratch using HTML5, start from scratch using normal HTML4, obtain a HTML5 theme and modify or modify a HTML4 theme? Well although I know wordpress fairly well, and what I don’t know about it I could work out it just didn’t make much sense starting from scratch. The main reason being that it would take too much time and effort (have I told people I’m lazy?) just to get a minimal blog template up and running. Another factor is that HTML5 support if Firefox isn’t really at the point where I can take advantage of the new features. I won’t rule this out in the future if at somepoint I do decide to start completely from scratch, if I do I would definitely use HTML5 but for now I’ve gone for the easy option, use the existing default HTML4 theme which comes with wordpress.

Sometimes you have to tear things down to start afresh. So here you see the results of the demolition I have done – a very minimalist theme indeed! I’m tempted to say and thats my theme done, I quite like it takes me back to my earliest memories of the web on Mosaic – the web how it was meant to be! But alas we’ve moved on since then and so shall I. Below are the few steps it took me to get to this point.

Creating my own theme

Creating a theme in WordPress is easy. All I did was copy the default folder, renamed it albinns, editted the styles.css file with the following information then activated it.

Theme Name: Al Binns
Theme URI: http://albinns.com/
Description: The theme is based originally on the default
             WordPress theme based on the famous
             <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 0.1
Author: Al Binns
Author URI: http://albinns.com/
Tags: blue, custom header, fixed width, two columns, widgets

I then removed all of the CSS from the styles.css and replaced them with a very basic layout:

body {
 margin: 0 0 20px 0;
 padding: 0;
}

#page {
 background-color: white;
 margin: 20px auto;
 padding: 0;
 width: 760px;
 border: 1px solid #959596;
 position: relative;
}

#content {
 width: 500px;
 display: inline;
 float: left;
}

#sidebar {
 display: inline;
 float: right;
 width: 260px;
}

#footer {
 clear: both;
}

Job done and the theme is ready to go. More about where I’m going to take the theme in my next post.