³ÉÈËÂÛ̳

It's taken a lot of work, and there's plenty more to do, but ³ÉÈËÂÛ̳ iD is now starting to appear across ³ÉÈËÂÛ̳ Online.

There's an article over on the ³ÉÈËÂÛ̳ Internet Blog that explains what this means if you have an existing account, and outlines a few of the changes you can expect over the coming weeks. If you have any problems, you can find answers in the new .

As well as supporting existing services, ³ÉÈËÂÛ̳ iD will evolve to allow us to start building some new and previously impossible things. This, as they say, is just the beginning... and we'll explain some of the developments here as we go along.

Now we've got 1.7 out the door, our minds are turning towards planning for version 2, our next major release which will be out in the new year. We're planning a significant overhaul, and as the major version increment indicates this will include a fundamental rewrite of large portions of the library.

Now is also a great time for users and contributors to get involved. Please tell us what you've liked and disliked about version 1, and what features you'd most like to see in version 2.

We have produced a set of four themes that we'd like to explore in Glow 2. These might get you thinking about what your perfect desert island library would contain, or maybe you think we've missed something vital?

• Accessibility - provide a step-change in accessible and usable widgets
• Performance - reduce load and execution times to the bare minimum
• Design - build widgets that look fantastic alone or in combination
• Community - open up the project and help the community thrive

We really want to hear what you think. If you'd like to talk to us about your ideas then join us on our mailing list, chat with us on IRC or you can send a message on twitter or by adding the hastag #bbcglow2 - we'll do our best to respond to everyone who sends us a suggestion.

Hi, I'm Mat, and I work on bbc.co.uk's page layout system, Barlesque. You may have seen it, and its amusing name, discussed before over on the ³ÉÈËÂÛ̳ Internet blog, but here I'm going to give you a bit more of a technical insight into how it actually works. Before that though, a quick 140 characters on what it actually does:

Barlesque delivers the head and foot of every page on bbc.co.uk, as well as all the pan-site modules: registration, survey, advertising etc.

There's lots of things I want to talk about at some point: download efficiency for millions of page views per day, writing front end code to play nicely with other people's code, making Barlesque available on lots of different server environments, and so on. However I'm going to start with one of the very first client-side features we wrote: a CSS reset.

Resetting the scene

A CSS reset is a snippet that zeroes CSS values for all elements - zero padding and margins, no borders, 100% font sizing and so on. They've been around far longer than Barlesque, for example .

When investigating them for Barlesque, we pretty quickly decided a reset would be of overall benefit to developers on bbc.co.uk: we have a lot of browsers to support and zeroing everything would get rid of those inconsistent default values, like paragraph margins for example, that different browsers have. Also, with so many developers swapping code, moving around the business, debugging each others work and so on, it would be a big win to have everyone's stuff starting from the same known base.

Looking round, though, there were a few things used in some existing resets we weren't so keen on; for example:

• Setting a load of values on every element, particularly containing elements like <div>s, makes a right mess of Firebug's CSS inspector - it's a long statement, and if you nest some elements (e.g. an <a> in an <li> in a <ul> in a <div>) then Firebug puts it in the pane multiple times (as shown in the screenshot opposite).
• Some stronger resets were putting font-weight:normal on strong, taking the italics off, or other things which I felt would break developer expectations.
• Outline was sometimes removed, however it's .

So we made a key decision for our reset: We'd only change values that varied between browsers. For example since all browsers default to zero margins, padding and borders on a div, we left it alone in the reset.

We did this by making some sample content using all commonly used elements and trying it in lots of browsers. For the fine tuning we took a screenshot the content, then setting that picture as the background to the file so we could see if other browsers overlaid it perfectly.

In doing this we were also able to break the reset down into multiple declarations, thus ensuring it didn't interfere too much with Firebug.

Here's a css file containing the uncompressed reset code as it stands now.

regret.css

Of course, there were one or two 'issues' along the way. In the process of trying to get the test page to look consistent, we used list-style:none; on lists, which breaks expectations and causes support queries to this day, but which we can't change without breaking backward compatibility. (Sorry about that, bbc.co.uk devs.)

A more major thing we'd consider changing if we got to do it again is that we'd probably avoid zeroing typographical values, instead applying default padding, margins and header sizing. This wouldn't require any more CSS for those who didn't want the default, but would mean those who didn't mind it would need no code at all. You live and learn. Instead we've provided a default typography class to help those without a specified typography in their designs.

Classy

So that's the basic reset. However, as mentioned before, developers do share code quite a lot around the site. This sometimes means dropping one developer's front end code into a page amongst another's. We thought it would be handy if the reset was available as a CSS class as well, to act as the foundation for embedded snippets. This did mean making more declarations, because it has to override what the sites may have defined, rather than just what the browsers differ on. It's also made more verbose by having to prefix all the elements with the class name (in this case "blq-rst") so this one really does make a mess in Firebug... but at least it's optional.

Coincidentally, the first customer for this reset class was actually Barlesque itself: the masthead and the footer of the page were exactly the sort of snippets that could do with a bit of protection from page-wide declarations made by the sites. Add .blq-rst and they stay looking ok, as this test page shows.

Of course, Everyone has their own take on these things, so comments and suggestions are welcome as always.

Hi, I'm and I work on , the ³ÉÈËÂÛ̳'s JavaScript library, alongside Jake, Michael and Stephen. We're looking forward to keeping you up to date on what's going on with the project on this lovely new web developer blog.

The big news this week is that we've released Glow 1.7.0, which is now available to download. This release focuses on stability and overall usability; we've fixed a number of bugs, added handy new features to the DOM module, and improved accessibility for some of the widgets. Here's a quick overview...

The core glow.dom.NodeList class gets a range of new methods:

• ancestors() - get all the ancestors of a node
• data() & removeData() - associate arbitrary data with elements in a memory efficient way
• scrollLeft() & scrollTop() - get and set the scroll position of the document or elements
• wrap() & unwrap() - add and remove parent nodes to elements

The AutoSuggest widget also receives a bit of attention. We have made a few UI bug fixes, changed the behaviour of the left/right keys to be more consistent with similar interfaces (such as Firefox's search box). There are also some new events, the option to filter model data before it is displayed and an way to control the caching of data from URLs. You can also disable the text highlighting feature that is used by default when using the "complete" option.

Other changes include the addition of heading and list formatting options to the Editor widget, and an improvement to the glow.net module's handling of XML returned with the wrong mime type.

Last but not least, we have also improved some of our accessibility features. The Overlay widget now prevents focus from going to other elements when set to "modal", InfoPanel has better ARIA support and the Slider widget has more intuitive keyboard access for screenreader users.

Take a look at the 1.7 overview page for more details, including the full changelog.

If you're interested in knowing more about Glow, or even if you're already using it, we've got plenty of ways for you to with us:

• Google Group - join in at
• IRC - join us on irc.freenode.net in #glow
• Twitter - follow us at

The ³ÉÈËÂÛ̳'s central team of web developers has been talking about starting a blog for quite a while now. While our friends over in Radio Labs and Journalism Labs have been busily sharing the fruits of their hard work, it's all been a bit quiet over here. So, before we begin: a quick apology (sorry we're late), and a quick explanation.

var_dump($this->explanation);

One of the reasons for the delay is that, despite the mention of a 'central team' about two sentences ago, there is no main set of people that builds bbc.co.uk. Instead, there's a teeming colony of developers and designers of all kinds, spread over a huge range of different projects. It turns out that arranging for a representative group of these people to write articles is a near-impossible task, so a few of us are just going to start writing about what we do, and hope for the best. As with most things in web development, if something needs to change along the way, we'll change it.

glow.dom.get("#plan");

The Internet Blog already exists, of course, and designers and developers often appear there to explain what they've been up to. Normally, though, it's a place for major announcements and discussion of the big issues. This new blog will be from people who spend their days up to their eyeballs in the nitty-gritty of building bbc.co.uk. It'll be less about the grand scheme of things, and more about the details of how things work - and often don't work - down on the front line. If the Internet Blog is the view from General Melchett, this is Blackadder. And, inevitably, Baldrick.

If all goes to plan, over the coming weeks you'll hear from a good selection of people. The person who builds the main page template of bbc.co.uk (which means chunks of his code have been rendered about 5000 times since you started reading this sentence) will, for example, be going into depth about how it all works. The people who build ³ÉÈËÂÛ̳ iPlayer will, amongst other things, explain some of the advanced techniques they've been experimenting with. The Jedi from the Glow team will tell us about the thinking that's going into future releases of the ³ÉÈËÂÛ̳'s open source library. And other developers from teams with exciting and top-secret names will write about their plans to introduce some completely new things to ³ÉÈËÂÛ̳ Online.

As we go along, some posts will be about code, some will be about the code behind the code, and some will be trying to tie it all together into some kind of grand unifying theory of everything. If you're involved in the web, or are just curious about how things work behind the scenes on a website like this one, hopefully you'll find some good food for your feedreader.