fraserpearce.com

After leaving the BBC a year ago I moved on to an advertising agency called iris (it was called iris Digital when I took the job that November, but had been renamed to iris Worldwide buy the time I started in January). I met some good people there, worked on some interesting campaigns and learnt a bit about the commercial side of web development – although I also realised I knew more about his than I initially though.

Then late in the summer I got a call from Microsoft, with a very interesting job proposition. So interesting in fact that I chose to leave iris an join Microsoft, which is where I am now. I can’t say a lot about what I do at Microsoft, yet, but I’m very excited to be here and to be working on some of their most impressive output to date. I’m sure everyone will hear about it in due course.

After leaving the BBC a year ago I moved on to an advertising agency called iris (it was called iris Digital when I took the job that November, but had...

Inspired by the recent efforts of Laura Kalbag (@laurakalbag) in trying to make CSS3 ‘tag’ tags (or is it tag ‘tags’?), I came up with the following:

Live Demo here: /experiments/tagtags/

It’s not perfect mind you. I’ve used a circle Unicode character for the punched hole – the problem being the centre of hole should be transparent showing the background behind, but instead it shows the background of the gat itself, in my case a soft gradient.

I spent ages trying to use the circle bullet as the hole instead (which seemed most appropriate), but couldn’t get the darned thing to relocate to where I wanted it, thus gave up and went for the circle character. This actually really frustrates me that we still don’t have much control over list bullet positioning in CSS3. W3C CSS working group please take note and put it on your (probably quite long) list of things to do!

Still, it’s a CSS only solution and uses no images or scripts, and works off a simple list in HTML markup.

Inspired by the recent efforts of Laura Kalbag (@laurakalbag) in trying to make CSS3 ‘tag’ tags (or is it tag ‘tags’?), I came up with the following: Live Demo here: /experiments/tagtags/...

Firstly, I’d like to thank the Webkit team and the CSS Working Group for settling on a single syntax for CSS gradients. Having more than one way of skinning the same cat was painful for both the cat and the owner.

However, in reading the syntax I can’t help but feel the way the repeated gradients work is still a bit long winded, and duplicate the non-repeating version. I can think of two other, potentially better, ways of writing it in CSS that I think would be simpler and clearer.

My preferred method would simply to have a repeat keyword in the syntax, so the following:

-webkit-repeating-linear-gradient(left, red, green, blue)

Would be written:

-webkit-linear-gradient(left, red, green, blue, repeat)

The other option would be to observe the background-repeat value instead, seeing as ultimately these gradients are generated background images… but in this option I can’t help but think I’m missing taking into account some kind of effect you wouldn’t be able to do this way.

[Update 7/2/2011] Submitted this to the W3C CSS WG: http://lists.w3.org/Archives/Public/www-style/2011Feb/0138.html

Firstly, I’d like to thank the Webkit team and the CSS Working Group for settling on a single syntax for CSS gradients. Having more than one way of skinning the...

In response to Bruce Lawsons Tweet, these are the features I’d like to see in a future version of Opera:

Better Session Management

The Session feature of Opera is actually quite useful, but underutilised. I’d like to be able to name sessions, switch between them wholesale and have the sessions sync via Opera Link. My use-case example would be that I’s like to have a sets of of tabs open for:

• General browsing: links I’ve been sent, my usual haunts, interesting articles I’ve come across but not yet had time to read
• Personal projects: with tabs such as inspiration, reference material and web based tools (could be a web development project or planning a holiday)
• Professional work: web based tools, intranet and internet based resources, pages I need open to do my work, etc.

Socks Proxy support

I’m sure I’ve submitted a bug/feature request for this before a long log time ago, but having worked in organisations with arcane, unusual and borderline dark art based network set-ups, lack of Socks Proxy support has prevented me using Opera, or some of its features at least, in the past.

Manually assign bookmark favicon

This is of most use to me for the personal bar. It enables a faster work-flow for commonly used personal bar items if they have a recognisable favicon. Bookmarklets in particular in Opera don’t have favicons so aren’t instantly recognisable. If I could have the icons, I could do away with the text next to them making more room in my Opera Layout (for more icons or for other things). Ideally, in addition to this it would be nice to enable/disable the text labels for the personal bar items individually rather than for the whole bar only.

In response to Bruce Lawsons Tweet, these are the features I’d like to see in a future version of Opera: Better Session Management The Session feature of Opera is actually...

I was recently asked a question by a colleague, that I’ve been asked before:

Why do you use Opera? Really, I’m interested, I’m not just being facetious.

Perhaps a bit of context first: I was at that time leading a development team in the public service arm (the largest part of) the BBC. The status quo there, like many organisations, is that most web and front-end developers are largely Macbook brandishing devout Firefox users. Many have come to realise that browsing and developing in the same browser is not ideal – all those helpful development extensions get in the way of a pleasant and fluid browsing experience – so in recent months many have started to ‘dual-wield’ with Chrome being their other browser, or in some cases Safari. Firefox is still the development browser of choice. Nobody uses Internet Explorer as their main browser if nothing else through fear of ridicule. And then there’s Opera. The joke I’d hear the most was:

Oh so you’re one of the two Opera users? Have you met the other one?

Joking aside, I actually knew at least 2 others in the BBC, and I didn’t know everyone of course. Sure, there aren’t many of us, and the BBC browser stats show that Opera has a small but consistent user base in the UK, but that’s not really the point. Choice is good and competition drives innovation, and its clear looking at the browsers over the last 10 years that Opera has played a strong part in bringing new features to the mainstream despite its apparently small western user base (its a different story for its Russian and Eastern European stats where its a much more dominant browser).

I started using Opera at a time when IE6 was still new. Opera 6 was buggy back then but was innovating in a space that Microsoft had seemingly decided they had won, hung up their towel and walked away. Netscape was clearly struggling, and this left room for a lot of interesting innovation from the smaller browsers on the fringe.

So back to my original point: Why I use Opera. I could justify it several ways:

• Using a clearly different browser interface and engine is better for test coverage than everyone using the same one
• Its on our (the BBC’s) supported browser list so someone should be using it from day to day so we have someone who understands it
• Because its a ground-breaking browser engine with unique features and a different performance profile
• It supports many new features and standards as yet not supported by any other browser
• Its fast – possibly the fastest (although the gap has become much smaller over recent years – i.e. since Chrome)

All valid reasons, but actually none of them hit the nail on the head for me. I use Opera because it suits my browsing style. I like having my tabs on the left, and having anything from 5 to 50 tabs open. I like having my bookmarks and personal bar sync to wherever I’m using Opera. I like a fairly minimalist interface and I like nippy browsing experience. I also like to feel the people who make my browser are committed to continually developing it – i.e. regular updates. Opera does all of this for me and does it fairly gracefully. Sure, like any piece of software, it has its bugs, shortcomings and foibles, but Opera works well enough for me and feels right.

However, one sad side note is that being the most prominent Opera user in the BBC’s developer community, and a co-author of the BBC Browser Support Standard, but having now left the BBC, Opera have now lost their key advocate and point of contact. I hope that doesn’t work to their detriment – if it does I will be very sad.

I was recently asked a question by a colleague, that I’ve been asked before: Why do you use Opera? Really, I’m interested, I’m not just being facetious. Perhaps a bit of...

From time to time I like to set myself challenges of reproducing certain design elements in pure code, partly as  amean to fex my development muscle and partly to try and learn something absolutely new. When I first decided I would play with some typographical effects some months ago I was playing Borderlands and figured reproducing the Borderlands logo in CSS should be relatively straight forward. Unfortunately I was wrong and even though I’ve come pretty close I can’t quite reproduce it. Here’s the original logo I’m trying to reproduce:

Should be challenging, yet achievable right?

Continue reading

From time to time I like to set myself challenges of reproducing certain design elements in pure code, partly as  amean to fex my development muscle and partly to try...

I’ve been playing with a new homepage/showcase for a few weeks now and in trying to expand my CSS3 and HTML5 skills have run into a few interesting bugs and edge-cases – one of which is Chrome’s poor rendering of CSS Transforms which manifests itself in a variety of ways. The one that’s got me most perplexed right now, mainly because it looks so obviously bad and I’m using CSS 2d Transforms fairly heavily in my new design, is the lack of anti-aliasing of objects after the CSS Transform. Take this example:

That output was captured from Opera 11 (build 1128), but it looks nigh-on identical in Firefox 4 (beta 7) or Safari 5 (.0.3), and should look the same in IE9 (I can’t test that as I’m on an XP machine right now). All 5 images are correctly anti-aliased, and in the centre 3 the borders are also correctly anti-aliased. Now compare that to Chrome 9 (.0.597.10):

This is where things go wrong and get perplexing. First, let me now explain what the 5 examples are:

1. Image inside a DIV, Image is rotated
2. Image inside a DIV, DIV is rotated
3. Image inside a DIV, DIV is rotated and -webkit-transform-style:preserve-3d is applied
4. Image inside a DIV, DIV is rotated (same as 2)
5. Image inside a DIV, Image is rotated (same as 1)

I’ve uploaded the code I used for this here: /experiments/transform_bug/

Going back to the example we can observe the following output:

1. Image is rotated but aliased
2. Image and DIV are rotated, image is aliased but DIV border is anti-aliased
3. Image and DIV are rotated, image is anti-aliased but DIV border is aliased (see update)
4. Image and DIV are rotated, image is anti-aliased but DIV border is aliased (see update)
5. Image is rotated but aliased

So, as you can see none of them are 100% correct. It would seem that in order to force Chrome to anti-alias images after a rotation you need to set -webkit-transform-style:preserve-3d but that only works on child elements and breaks anti-aliasing for the element its applied to. Plus is seems to hang-over to adjacent elements in some cases, but not all. In the page I’m working on the code is nowhere near this simplistic so in some cases I’m simply struggling to get Chrome to anti-alias rotated objects.

This seems to have been a bug in Chrome for some time, since v4 in fact: Chromium Issue 35529. That’s not the only bug either, there are others that sound remarkably similar which are probably in fact duplicates of this bug or related ones.

Of course, as soon as I’ve figured out how to fix it in all the cases I have in my page, Google will patch Chrome to fix it. I guess this is the price we pay for playing with these new bleeding edge features.

[UPDATE]  One thing I forgot to mention. In Chrome 9, GPU Accelerated Composting does have an effect on this. The screen-shot above was taken with it ENABLED. If disabled it always anti-aliases the borders and never anti-aliases the images in my test cases. Sorry, I only just realised this was the case and I have no idea what the default is (probably disabled I’m guessing).

I’ve been playing with a new homepage/showcase for a few weeks now and in trying to expand my CSS3 and HTML5 skills have run into a few interesting bugs and...

I’m a web developer by trade, but in recent years I’ve been mostly moonlighting as a technical manager… or is that the other way around? Anyway, its meant that the tools that I use have fallen a little out of step with current web technology developments.

Whilst I’m platform agnostic, I’m generally a Windows user. My principle with people in my team is that they should use whichever tools they are comfortable and most efficient with. For me that’s Windows – I’m simply more used to it, and thus more fluid when using it.

My editor of choice used to be Homesite. That suited my place of work too, it was their standard tool, and it worked fine with their technology stack. The problem is that nowadays Homesite is a dead product – no longer supported or developed by Adobe pretty much since their acquisition of  Macromedia, but then Macromedia didn’t develop it a whole lot more after they did the same to Allaire. Its meant that its now quite behind the curve in terms of language support and long standing bugs are just not going to get fixed.

I find IDE’s too heavyweight for my liking, basically because I’m impatient and easily distracted, so that rules out Aptana/Eclipse, Visual Studio and to some degree DreamWeaver (a tool that IU’ve tried again and again to like, but never seem to warm to). I want a fast and simple editor. I’d like it to load quickly, do syntax colouring, have a good find/replace, a file explorer, tag/attribute prediction/competition and a live preview is definitely a bonus.

I’ve tried a few free code editors. Notepad++ and PSPad are great free tools but come up short for me. My main two bug bears are their lack of nested language code colouring (i.e. when you have blocks of CSS and JavaScript in a HTML document) and the lack of code completion. Microsoft’s Visual Web Developer 2010 Express is a mixed bag. It requires an extra add-on from the 2008 edition to support HTML5, and doesn’t seem to get CSS3 much. I’m not taken by the Visual Studio style interface and the install process was long winded for what is allegedly only a 3mb app (my system says its more like 300mb+). Komodo Edit isn’t bad but being based on an older version of Gecko makes it a little slow and cumbersome at times, and hoodwinks its browser preview functionality in terms of HTML5 and CSS3 development. I’d say Komodo Edit was my pick of the free ones so far – its not perfect, but there are add-ons that add/fix certain features.

I purchased Topstyle 4, and Topstyle 3 before that. Its the closest I’ve come to an ideal match. Not surprisingly in part because it was originally developed by the developer of Homesite, and now development continues under a new owner. Topstyle isn’t bad, but its still missing a few niceties such as code drag and drop support and unfortunately one of its awesome features – the in-app preview in Webkit and/or Gecko – is made less useful by integration issues with those browser engines which often cause it to become unstable (although not the developers fault exactly). That’s something you really don’t need from an editor. I know a v5 is in the works for next year so I’m praying the developer will resolve a lot of these issues and add some of my missing feature bugbears.

Before someone points me in the direction of Textmate (or E for Windows), no need. I can use it, sure, but its just not the type of editor I’m most comfortable with – too starkly simplistic an interface, too heavily a reliance on cryptic keyboard short cuts and doesn’t tick enough of the feature boxes for me.

Its my frustration in not being truly happy with my main coding tool that’s making me think about possibly switching to a Mac for development. On a Mac there is Coda and CSSEdit, both of which look interesting – although to be honest do not ideally suit my needs either, and then there’s the ‘blip’ to my productivity in re-learning being a Mac user with all of its interface differences/foibles vs. Windows. If those apps were available for Windows I’d give them a go in a heartbeat.

But I have to say that this conundrum in itself surprises me. Most of these coding tools have been around for many years, and some have been actively redeveloped in that time to match with the new web technology developments, whilst others have been just been updated a little. Given that there are so many web developers these days, and the web and its technologies have been gearing up and up of late, I’m surprised there aren’t more new or dramatically redeveloped tools of this kind… or maybe I’m just too hard to please? Now where that moon on a stick I ordered?

I’m a web developer by trade, but in recent years I’ve been mostly moonlighting as a technical manager… or is that the other way around? Anyway, its meant that the...

Earlier this week I was given, in writing, my redundancy letter from the BBC. December 10th 2010 is my last day as an employee of Auntie.

I’ve been at the BBC for about 10.5 years, and its been one hell of a ride. From the lofty heights of winning awards for work on BBC iPlayer and the BBC Homepage 2.0, to the crushing defeat of having to decommission projects like BBC Connector and BBC Glow. The worst thing about the latter is that they were actually great projects, with fantastic teams and are in themselves great feats of web engineering – but both lacked a champion in senior management the end. Its situations like those which make the BBC such a frustrating  place to work at times. Still, I’m not bitter, its all been part of my learning process. If every project succeeded there’d be much less of a challenge, and its that fight that often makes them succeed so spectacularly sometimes.

In many ways my days at Bush House (at Aldwych on The Strand)  are the ones I look back on the most fondly, but that’s largely because I was younger with less responsibility (read: I was not a husband, father, or home-owner at that point) and could cope with all the socialising that was being thrown at me back then. But since moving to White City I’ve also gathered some wonderful memories too.

I’m going to miss the many of the awesomely talented people I’ve come to call friends more so than colleagues, I’ll miss the liberal, passionate and perhaps slightly eccentric nature of the people (particularly the ‘old guard’) in the BBC as a whole. Those are the ones to watch – they have greatness within them.

Goodbye Auntie.

Earlier this week I was given, in writing, my redundancy letter from the BBC. December 10th 2010 is my last day as an employee of Auntie. I’ve been at the...

Being a Front End Developer (or however its currently flavoured) I want to write or rewrite everything that’s on web real-estate that I own or control. I had to summon a fair bit of courage to put someone else’s WordPress theme up so I could begin posting – because I know from experience that while I intend to create my own from the ground up, I’ll likely not do that very quickly (if at all) and I could really do with somewhere to post my findings as I discover them whilst I’m doing that.

It seems to be part of the developers mind set to own and improve their tools. Given the chance, most developers would go back and recode a lot of their own work to improve it, just for the sake of it. The improvements might be tangible to anyone viewing it, or sometimes these improvements might just be in how they are architected and not necessarily manifesting as anything any human will really see, but we know its better and that’s what makes us proud of what we make. But beware, its also a time sink and blocks progression. For example, do I *really* need to write my own WordPress theme? No, of course not. You can read this post in any half decent theme… But I want to as an example of my ability and so I will be comfortable with a site that I own.

So here it is. This theme might be in play for a few weeks, or several years… we’ll see.

Being a Front End Developer (or however its currently flavoured) I want to write or rewrite everything that’s on web real-estate that I own or control. I had to summon...