It contains a style guide like the one on his site which lists all the different elements that could be used on a site (paragraphs, headings, links…) and explains when and where you could use them.

There's also a section which is forked from Jeremy's Pattern Primer. This lets you show modules, such as error messages, pagination and comment forms, alongside their snippets of code.

You should try out Barebones in your next project. I've added this and a few other links to my front-end style guide stash if you're looking for more inspiration.

Back then, I did a write-up of this technique. It's a little ropey and basic, but I've adapted the code since.

A while ago I bought a big screen to plug into my laptop, and it's been a real eye-opener. It makes some sites look like when you're using a tablet and a mobile version of the site is being displayed. So I've been updating my nth-of-type code, using it to change the number of blocks displayed in a row depending on the width of the screen.

Have a look at the demo in jsbin if you want to try it out.

This code isn't perfect and I'm still tweaking it, but I just want to document it in case someone else finds it useful.

The HTML is just an ordered list like so:

<ol class="teasers">
		    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
		    <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li>
		    …
		</ol>

I've given the list a class of "teasers" to distinguish it from any other ordered lists on the site. At the moment, I'm just going to build a linearised version with the blocks spanning the full width of the screen. This means sites that don't understand media queries will always just display the linearised version. I'll give them a bit of colour too so I can see what's happening.

.teasers {
		    margin:0;
		    padding:0;
		    }
			
		.teasers li {
		    background-color: #333;
		    color: #eee;
		    float: left;
		    clear: none;
		    margin-right: 2%;
		    margin-bottom: 1em;
		    border-radius: 0.2em;
		    padding: 1em 2%;
		    width:96%
		    }

Now I'm going to start adding some media queries, first for a width of more than 400px. (I'm using px for demonstration but you may want to consider using ems instead).

@media (min-width:400px) {  
			
		.teasers li {
		    width: 45%;
		    }
		
		.teasers li:nth-of-type(2n+2) {
		    margin-right: 0;
		    }
		
		.teasers li:nth-of-type(2n+3) {
		    clear: both;
		    }
		
		}

I've given all the list items a width of 45% which sits them in a 2 column grid, and on the second block of every row, I've removed the margin-right using nth-of-type(2n+2) so it's flush with the right hand edge. I've also forced the block that comes after that to go onto the next line using nth-of-type(2n+3). This only adds up to 90%, but I already gave a padding of 2% to each side, and the first block on each column has a margin-right of 2%, which adds up to 100%.

That looks good, but now I want to make a 3 column grid if the width gets bigger than 800px.

@media (min-width:800px) {
		
		.teasers li,
		.teasers li:nth-of-type(2n+2),
		.teasers li:nth-of-type(2n+3) {
		    width: 28%;
		    float: left;
		    clear: none;
		    margin-right: 2%;
		    }
		
		.teasers li:nth-of-type(3n+3) {
		    margin-right: 0;
		    }
		
		.teasers li:nth-of-type(3n+4) {
		    clear: both;
		    }	
		    
		}

Now all blocks have a width of 28%. I've also specified nth-of-type(2n+2) and nth-of-type(2n+3) to override the styles I gave them in the previous media query block. Pretty much the same deal going on here except now I'm targeting every 3rd block to remove the margin-right, and every block after the 3rd block to force it to clear.

@media (min-width:1200px) {
		
		.teasers li,
		.teasers li:nth-of-type(2n+2),
		.teasers li:nth-of-type(2n+3),
		.teasers li:nth-of-type(3n+3),
		.teasers li:nth-of-type(3n+4) {
		    width: 22%;
		    float: left;
		    clear: none;
		    margin-right: 1.29%;
		    padding: 1em 1%
		    }
		
		.teasers li:nth-of-type(4n+4) {
		    margin-right: 0;
		    }
		
		.teasers li:nth-of-type(4n+5) {
		    clear: both;
		    }	
		
		}

It goes on like this, but I've tweaked the margin-right and the padding to a lower number because it was looking a bit gappy. It doesn't add up exactly to 100% because browsers sometimes rounds numbers weirdly and that causes the grid to break, so I try and keep it just under.

Of course, the usual disclaimers about browser compatibility and the fact that this code is still my work in progress, but I can see this working great on a site that has product listings.

I'm not sure how widespread the problem is or if it just affects Chrome on Macs, but I imagine it'll be fixed quickly. I've never filed a browser bug before, so maybe this will be useful if you ever need to.

This morning I turned on my computer, opened Chrome and started working on a project I've been doing for a few weeks. I've got a couple of divs that have a notepaper texture background and are rotated slightly in the CSS, but today the edges looked really jaggedy. I'd taken a screenshot of the site the day before and hadn't changed any of the code since. Now it looked really bad.

It seemed fine in Safari and Firefox though, and I had other things on the site that were rotated that didn't have this problem which was weird.

I tweeted about it, and people gave me good suggestions, such as rotating it 360deg, restarting the computer in case there was a video card problem, using background-clip or applying -webkit-transform-style:preserve-3d

None of these seemed to do the trick though. Then Aegir and Peter suggested it might be related to a silent Chrome update the night before. The update made some improvements to Canvas2D and WebGL.

The demo

To test if it really was a bug in the browser rather than my code, I isolated the code and created a demo of the problem. I discovered I only get jagged edges on rotated elements if they have a repeating background image. Elements without a background image but a background colour didn't have jagged edges. Elements with both were fine too, as long as the colour was similar.

Before filing the bug with the Chromium team, I had to check it wasn't actually a webkit bug. (webkit bugs go to a different place). I downloaded the nightly build of webkit, and my demo looked fine in there, so it's definitely a Chrome thing.

The fix

The solution is to apply a background colour when you have a repeating background image. The colour needs to be close to that of the background image. This is good practice anyway and something I should have done, so that any text over the background is still readable if the image doesn't load. It might not be practical for every situation, such as if the background image is made up of different colours, but hopefully it'll be fixed soon.

Starbucks's Style Guide

Today, Jeremy forwarded me an email from Lincoln Mongillo which linked to a style guide he'd been using to standardise Starbucks's web design. I was blown away by the level of detail this style guide contains.

Each component is split onto its own page showing how it looks in different layouts, and some components have the corresponding code.

I like the debug.css page which lists common issues and how to resolve them. Each point not only explains how to fix it, but why it works that way.

They've also produced a document listing all the mockups to show how these components look in action.

Twitter's Bootstrap

This style guide is incredibly comprehensive and easy to read. The documentation that goes alongside the styles is also useful, and explains what classes need to be applied to show the style. It's nice when documentation is written to be educational as well as informative.

It also contains documentation on their grid system, javascript plugins, and a page on the .less variables they've set up that can be used.

It's released under Creative Commons and encourages others customise their own version.

Viget's design documentation

This is more of a story of the rebranding process Viget went through, but they show lots of their documentation, including their website style guide.

The thing I like most is the bit about the lighting set up for their avatar shots. I've been on lots of sites where the employee head shots look different because they've used a different photographer or lighting angle, so it's nice to see one documented.

It also contains photos of their sketches, wireframes and mind maps, it's always interesting to see how other people work and the ideas they threw away.

Fellowship Technology's Patterns

This example has screenshots of all the different patterns used on the site, what they do and when they're appropriate. It's cool, it's like a User Experience style guide. I hope to see more of this type of documentation being produced.

Some tools to help you make style guides

I've also been bookmarking sites that help you make a style guide. Here are a few of them:

• Styletil.es is a .psd template to help designers create something in between a mood board and a mockup
• Jeremy Keith has put his Pattern Primer template on Github.
• Style Bootstrap is a style guide that you can customise and download

We discussed a lot of things during the day and I'm missing out a huge amount in this post. We had differing opinions on things too, these are just my take-away thoughts on some of the things we talked about.

"Responsive design is a fad"

The web has always been fluid by default, text inherently fills the width of the viewport. We added the widths. Now we have a huge range of devices and an even wider set of unknowns that extend further than just the dimensions of a screen. Things aren't magically going to go back to how they were, screens aren't going to be consistent sizes again, internet speeds will continue to vary wildly, as will the way we interact with devices.

It's a big challenge and mindset change, but things move fast, and it's our job to be able to respond to that. Echoing Mark Boulton's thoughts at the end of the day, I guess this does feel a lot like how the Web Standards movement did at the time. It's the disruption the industry needs to do things better.

Changing processes

Responsive design isn't as simple as adding a few media queries to a page. The first topic of the day was workflow and changing skill sets. The way in which we have largely been working for years has been a hack, inherited off print design. The designer opens up Photoshop (the clue for what it was built for is in the name). The first step is to define the width of the canvas. The designer sends the client a static mockup, a painting of how a website will look on a desktop screen. The client signs this off. Design ends and exactly the same mockup is sent to the developer. The developer builds the website exactly as the mockup looks, pixel for pixel. Then the big reveal. Classic waterfall process.

Copying and pasting this process for responsive design projects is like trying to hammer a square peg into a round hole. Now the designer needs to produce mockups at different widths, or the developer has to make lots of design decisions, but in the same budget. How do we present many different designs of the same site to the client, how do we communicate that process effectively, and how do we transition between different roles?

We're trying to control something that's messy.

— Mark Boulton

Broader skillsets

The bleed between designer and developer skill sets and responsibilities needs to be bigger. Hire designers that can code. Hire developers that can design. Maybe even create a separate training budget for your designer that can only be used on development conferences, workshops and books, and vice versa to make sure they maintain T-shaped knowledge, which is useful for communicating ideas in a team.

Adapting roles

When I get sent a mockup to build, I have to fill in the gaps on things that the designer has missed. I don't always see this as a bad thing; designers can't account for every single possible situation, every possible error message, every screen width, nor should they. The design process shouldn't end at client sign off. Therefore, the design deliverables should communicate enough that the developer can make a good judgement. Design deliverables sent to a client often need to communicate different things as those sent to a developer, and that's something that should be considered.

That's what I love about front-end style guides, and being able to work alongside the designer as I'm building. A style guide is the design of a system, whereas mockups on their own only show how certain pages look in certain scenarios. Mockups may be useful for clients, not so much for developers.

Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.

Designing in the browser vs design software

The tools we use aren't important, it's what we can produce with them. Our tools have limitations, but a skilled designer can use any piece software to create deliverables that are appropriate to the medium they're designing for.

Responsive design as an up-sell

There was a split in the room over whether responsive design should be considered an extra service or become part of the process. The first few times you work this way, it does add time to the project, but eventually, it becomes part of the process. I consider it like accessibility, which I don't sell to my clients as an extra, but I'd devote extra time to it if they needed it. I consider it as part of my job, just like testing in different browsers is part of my job. The real debate should be about how far you go to make the site responsive.

I don't know anyone who sells CSS as an up-sell now.

— Dan Mall

How do I sell it to the client?

My approach is to just do it because it's part of my workflow rather than an add-on. I've never been told "I don't want this to work on other devices" and I'd be surprised if I were ever asked that. Where you do have to adjust the budget and mindsets for it, often the client is understanding when you explain that building a site in this way means savings in the long term, and quick entry to new markets as new devices come out.

Responsive design is sustainable design.

— Cennydd Bowles

Assumptions

It's tempting to make various assumptions when designing a responsive site, but assumptions are dangerous:

"Someone using a mobile device is on a slow connection." Not necessarily if they're connected to wifi.

"Desktop users are on a fast internet connection." What about the person using a 3G dongle?

"Mobile devices are small screens." Have you ever used a tablet to browse the web and been served up a squished mobile version of the website? Or used something like Airplay to switch what's on your tablet to your TV screen?

And maybe in the next few months:

"People on mobiles with slow connections should be served compressed images." If Apple come out with a retina display iPad, the user's expectation for image quality is going to be different. Don't just think about the devices we have now, think about the devices we will have in the future.

It can feel incredibly daunting. How can we cope with all these unknowns? I think we've got to accept the fact that we will never be able to control every experience exactly as we designed.

The responsive design movement is the catalyst this industry needed to change and improve the way we work. I'm excited about a future of more communication between designers and developers, agile rather than waterfall processes, and designing sustainably rather than for what works now.

Back in September, I gave a talk at Update titled The Digital Native, about what students are taught about IT at school. (Coincidently, Ian Livingstone gave a BBC interview today on the same subject)

It's a topic that has been close to my heart because I studied this curriculum. It's as bad as everyone says it is and it's turning people off the industry. I've been campaigning to retain the teaching of some form of computing in schools since learning of its demise two years ago.

In May last year, I won a competition to attend Google Zeitgeist conference after submitting a video to them about the state of IT in schools, and I was encouraged to talk to the people there about this. Eric Schmidt was there, and while I doubt he ever heard my message or saw that video, I was delighted when he brought the topic up at a conference in August.

"I was flabbergasted to learn that today computer science isn't even taught as standard in UK schools… Your IT curriculum focuses on teaching how to use software, but gives no insight into how it's made."

Eric Schmidt

David Cameron responded, saying Eric was right and that the country wasn't doing enough.

Now positive change is actually happening, and computing is finally being recognised as a vital subject. While a lot hangs on the implementation (there's an engaging curriculum to write and a lot of teachers to train), I think it's the best news we could have hoped for.

What next?

There's a consultation phase starting next week on the new curriculum, and I'm going to get in touch with Naace again to see if they're contributing to this and find out if there's anything our community can do. I'll keep you posted.

Textured backgrounds seem to be all the rage, possibly spurred on by Apple's "skeuomorphic" design phase. Subsequently, I'm being sent a lot more mockups to mark up which have textured interfaces.

Whenever I tried to recreate something like this in Fireworks, I'd get an image of some paper, tweak the curves, create a tile out of it that repeats nicely, and then paste the tile lots and lots of times all over the canvas. Very time consuming and also not very flexible.

A better way is to first save the tile as a separate image.

Now go back to your mockup and draw a shape. In my example I've drawn a black rectangle that covers the entire canvas, and I've got a white rectangle on top of it. I want the texture to be on the black rectangle only, so I've selected that.

Now in the properties toolbar, click on the dropdown box that currently says "Solid". Select "Pattern" and you'll be presented with a number of options. Scroll down to the very bottom and select "Other…"

Navigate to where you saved your tile and select it. This will now tile your image in the rectangle you've created.

If you want to later resize your rectangle, don't use the scale tool because this will stretch the tiles. Instead, either type the dimensions into the Properties box, or select the individual handles while holding down SHIFT, and move these left and right using the arrow keys. (If you keep SHIFT held down, it moves these points faster.)

The tile I created is a semi-transparent PNG, so if I then layer it on top of another shape with a background colour, it will be a slightly darker version of that. This is really handy for development if you have a site with different colour variations of the same texture. Changing the background colour in the CSS appears to change the colour of the texture as well, and as a result, it gives a good fallback if images fail to load.

I've been having a read through the specs for the Flexible Box Layout Module. The name describes the behaviour of the boxes which can stretch and expand to fill content, with unused space being distributed amongst the boxes. This is what we often try to achieve when floating elements.

The float method

A couple of years ago, I wrote a blog post on using nth-of-type to create grid blocks that clear. In it, I explain how you can use floats and nth-of-type to add margins to specific boxes, and get the correct ones to clear. This solution doesn't rely on using classnames as a hook, so it means you don't have to keep editing the markup if you decide to have 4 columns instead of 3. However, trying to explain this all to a group who have only been writing CSS for a few hours is heavy going.

The post doesn't do a great job of demonstrating how the code works and I've since optimised the code, so I've added a version of the floats examples you can play with in jsbin. It also uses media queries to linearise the content at a smaller viewport.

How Flexbox works

I'm still learning the ins and outs of Flexbox, but I've been testing it out making an interactive prototype for the re-development of the Hackasaurus website. Once I'd got to grips with it, developing the prototype took considerably less time than my usual method of floats and positioning.

If you want to have a play, here's a demo of a Flexbox prototype I put on jsbin.

Be aware that the syntax is in flux at the moment so you will need browser prefixes and these examples may be out of date depending on when you read this, so check the spec. It's not yet supported by Opera or IE, but there's a page on "can I use" that lists specific versions. It's not something I'd feel comfortable about implementing into live projects until it's stabilised a bit, but for quick prototypes it's fine.

To set up Flexbox, create an element with children. In the CSS, set display:box on the parent, and box-flex:1 on the children. All the children will adapt to fit the width of their content and their parent. Widths are calculated automatically so you don't have to worry about the box-model's pixel-width borders messing up your percentage-based dimensions.

This is the bit I find a bit odd: if you want the boxes to be distributed evenly, add a width to the children. I want to set a width of 100% to the children so that browsers that don't support Flexbox just linearise the content, but it won't accept percentage widths. Even setting a percentage for the margins doesn't seem to have any effect.

Oli Studholme does an excellent job of explaining limitations like this, and suggests using width:0 as a workaround to force it to have a width. I'm not sure about this since it feels a bit dodgy as a fallback for browsers that don't have Flexbox, but it's all still in development. For a prototype my goal is making something quickly for demonstration rather than proper use, so I'm not worrying about browser support.

Other fancy stuff you can do with it

As well as making columns with widths that spread out equally, you can have columns of different widths with a few more tweaks. Suppose you want 2 columns with one column bigger than the other. Set display:box on the parent, and on the child you want to be bigger, put box-flex: 1. On the child you want to be smaller, put box-flex: 2.

In my prototype, I set all my boxes to have box-flex: 1;, and I have a class called .mini which I give to boxes I want to be smaller, and this applies box-flex: 2. Not the most semantic classname, but it's just a demonstration.

You can also set boxes to stack vertically, and the most exciting of all (to me, anyway) is being able to reorder where they're displayed. Think of the potential with responsive designs…

Oli has some juicy examples of things you can do with Flexbox. His article was written in January so I think some of the things he's mentioned as not being implemented properly in Firefox are working now. It's a really interesting read, and full of examples.

There's also a Flexbox playground where you can test out all the possibilities.

Teaching Flexbox

Depending on how I get on with this, I'm planning on teaching Flexbox to my Prototyping in Code workshop students next week. It'll be useful as an introduction so they can get something working quickly. It would mean people could build a layout in CSS without having to learn all of these things first:

• Why mixing pixels and percentages sometimes breaks things.
• What "clear" does (and the difference between clear:left, clear:right and clear:both).
• How float:left and float:right work.
• Why having everything floated in a container can make its background colour disappear.
• How to stop content trying to wrap round floated elements where they shouldn't.
• How to get columns that are next to each other to be the same height.

All essential things for a developer to know, but not for people who are trying to mock something up quickly with code that won't be used in a live project.

I haven't done much programming before. I started out trying to learn Visual Basic and Actionscript when I was around 15, but didn't get very far with it. I've been intrigued by projects like Rawkets, and wanted to see what else is possible.

Seb began the day teaching us how to make particles in a canvas. We started by coding a tiny spec on the screen, then got the spec to move, then gave it properties like drag and gravity. Then things got really exciting and we made lots of specs that cascaded from one point, then ones that shimmered and bounced and followed the cursor (yeah, just like old times).

Next up, we learnt how to draw shapes on the canvas. The way we did this reminded me a lot of programming the Turtle in Logo.

Drawing a square in Logo:

		FORWARD 10
		LEFT 90
		FORWARD 10
		LEFT 90
		FORWARD 10
		LEFT 90
		FORWARD 10
		LEFT 90
		
		

Drawing a square in Canvas:

		c.beginPath();
		c.moveTo(0,0);
		c.lineTo(10, 0);
		c.lineTo(10, 10);
		c.lineTo(0,10); 
		
		

It was somewhere around this point that Seb mentioned the words "pi" and "trigonometry", and my brain started doing a Homer. He explained everything in a really easy to understand way though that made maths suddenly cool.

Using trigonometry, we went on to make asteroids and spaceships, and on the second day, Seb showed us how to make a 3D canvas. He used Father Ted's explanation of perspective as a guide. The 3D stuff was incredibly cool, but my brain was feeling a little full by this point.

My favourite part of the workshop was when we started programming trees that grew. We used loops to create the branches, and these branches would make baby branches, and after a certain point the browser would freak out and crash. I managed to make this happen a lot.

We got some time in the afternoon to work on our own projects. I had fun attempting to make a dandelion seed that floated around the screen. This didn't really work as well as I'd hoped, and this was as far as I managed:

It doesn't move, just twitches a bit, and I found it difficult to create more branches without my browser wimping out on me.

Although I can't think of any real practical application for what I've learned just yet, I'm sure if I keep practicing, it'll be more useful further down the line. The theory will be handy, and it was really nice having fun trying something new and feeling properly challenged.

The workshops I ran taught how to inspect HTML using a browser bookmarklet called the Web X-Ray Goggles. Students then start building their own webpages using snippets of HTML and CSS which I've put together in the Hackbook. I typically get 60 minutes to run the workshop, although this is realistically around 50 once all the introductions are done and students are sat at their desks and logged in.

The setup

Both schools I went to were specialist technology colleges, so had a better setup than most. Since the Goggles need a modern browser, I asked for this to be installed before the visit. This is usually quite difficult, with the most quoted excuse being that it's not compatible with firewall settings, but these schools were already using either Chrome or Safari.

The layout of the rooms meant students were sat with their backs to us, so it was difficult to get their attention once they'd started work. If you find yourself with this setup, try to structure the workshop so you don't have to keep stopping them from what they're doing.

School 1

This was a small secondary school (high school) with a class size of around 25. Each student had a wide-screen monitor with a Mac Mini strapped to the back. These were dual-boot OS (OSX and Windows). The technicians installed Chrome for the day so we could use the Goggles, and the bookmarklet was already installed.

All the students were there by choice and it was a very different atmosphere to what I'm used to when I go to a school. Students were eager to teach each other, and were mature and adept using computers. They had a firewall but it wasn't as in-your-face as a lot of places.

Using the Goggles, I started off teaching the students how they can change the text on their school's website by editing the HTML. The Goggles are a really nice introduction to HTML because they ease students into writing code with very little explanation. I like to get them actively building stuff 5 minutes into the lesson so they don't get bored, and so they have lots of time to try things out.

School 2

This was a very large secondary school with a class of around 25 with Windows setup. Chrome was already installed and in use.

We got 2 groups of students who were there for an IT lesson. I was a bit worried at the start because they all seemed quite boisterous. However, they were both really lovely groups and were very mature and fun to work with.

The network settings meant the Goggles didn't work in the end which came as a bit of a surprise, but the programming part of the workshop went down very well.

Things that surprised me

• Many students didn't know how to copy and paste using hotkeys. Next time, I'll teach this at the very start.
• I mentioned that I learned CSS customising profiles on Myspace. Then I realised I had to explain what Myspace was. I felt so uncool!
• Aral taught the students what a floppy disk was. Those were being phased out when I was their age.
• When asked how many used social networks, less than half the classes put up their hands. I expected them all to be on Facebook or Twitter, but only a handful were.

Since part of the workshop involves choosing images to put on a webpage, I need to add a bit about Creative Commons to the workshop, with a description and links on how to search for images. It's difficult though because so many image sites like Flickr are blocked.

Things that didn't go so well

• Right before the workshop, there was an unexpected fire drill, so we lost a chunk of time.
• The internet was painfully slow, and a lot of pages were blocked. The annoying thing is, students get a page of image results, but the network blocks the full-size image when they click on it. This combined with a slow internet made the activity really boring and frustrating. I ended up telling everyone to stop and we did something offline instead.

I have a few fallback plans if things go wrong. These are for scenarios like the Goggles not working, the internet not working, right down to a power failure where the computers aren't working. Having Aral there was really useful because all he needed was a laptop and a projector, and he gave an engaging demonstration on how to program an Angry Birds style game.

Things that made me very happy

• A couple of students said they played Minecraft, had their own servers, and were totally into Mozilla stuff! One of the girls had already been building webpages using HTML and CSS for years and was very good.
• Apparently there was one student texting his friends under the desk telling them to go to the Hackasaurus website.
• The students reacted very positively. There were comments like "Hackasaurus is so cool" and "I want to be a coder now"

The workshops encouraged a very collaborative learning experience. There was a ripple effect when someone learnt how to do something new. This made teaching a lot easier because people were teaching each other in the way that developers in the "real world" do.

Teach to code before teaching to code well.

When I started doing this stuff, all I wanted to do was teach people how to write clean, semantic code. In reality, you get so little time and they're all learning their own way that the code they produce tends to be messy and bloated. But I've learned through a lot of doing this to have a pragmatic approach at the start. My primary goal is to inspire people to write code, not to force them to write good code. That bit comes later. If they're not having fun writing code at the start because I'm telling them it's "wrong", they won't want to write code at all.

The bigger picture

While we were leaving our last workshop, Aral said "This isn't a solution, this is a sticking-plaster over a wider problem". I want this to be more popular, I want to see more people from the industry going into their local schools and running code workshops, but this we also need to keep our eyes on the wider goal. These skills need to be taught as a standard, not as an extra-curricular activity.

Help improve digital literacy

I do workshops like this because I think it's important that young people to understand how the technology they use works. I talk a lot about the lack of computer science in the curriculum, and IT teachers recognise the problem too but have a lot up against them at the moment. Going back to school to teach a bit of code feels like doing something positive rather than just complaining about it, which I feel I do all too much.

• Write to your old school and ask to come in for an hour to give a talk or a workshop. Schools love having people from the "real world" in to talk about what they do.
• Older people need help too. Become a digital champion and run a workshop for people who aren't online and could really benefit from learning to use technology.

This was quite a challenge since the office is still under construction. We had to compete with power drills, sanders and hammering, and we had a very limited space to work in. We also didn't have enough computers, and just a smattering of electricity and wifi, so we had to find interesting ways to engage the kids in what was essentially a building site.

After a quick game of Werewolf as an icebreaker, we started playing some board games which we asked the kids to change the rules of. The group I was with changed Monopoly into Hackopoly, and each piece had its own special powers, like the car could go double the number on the dice if the player rolled a double, and the wheelbarrow could move houses from lots with a cheaper rent to ones with a more expensive rent. I chose the boot which could kick players into jail if they landed on the same lot as me. There was some amusing debate over what the thimble was (was it a trash can or a bell?).

We then pitched the idea of an interactive comic using the X-Ray Goggles where you can edit the story and solve puzzles while learning how HTML and CSS work. This idea went down well, and some kids commented that they read comics on their Playstation. There was the request that any game we made would have to have lasers and explosions to be fun, so that should be an interesting challenge.

In the afternoon, some of the kids got into a group to make their own games using Scratch. I was impressed that within an hour and without any assistance, the group had collaborated on building a game that actually worked, and they were able to eloquently explain to us how they'd done it.

I also used the opportunity to test out the Hackbook. I've used it in a couple of workshops with 14-15 year olds, but not with younger kids. Surprisingly, this group got to grips with it much quicker than the older group, and were adding video to their pages.

I'm trying to keep an open mind since the software is still in development, and I'm grateful to Adobe for releasing a version with the opportunity for developers to give feedback before the product is generally released.

I built a quick demo animation to see if it could be used as part of the Hackasaurus X-ray goggles page. Flash is blocked in a lot of places where we run workshops, so having a demo video of how to use the Goggles might be handy.

Using Edge

My first impressions of the software were positive. It has a very clean layout and feels less cluttered that a lot of Adobe's products. The grey text on a grey background isn't very friendly on the eyes though.

I used Flash quite extensively before I got into the web, so the concepts of timelines and keyframes are familiar to me. However, the interface feels very alien, and getting things to work is fiddly. It doesn't work like Flash does, but I don't think it's trying to be like Flash.

Most of the language used is borrowed from CSS. For example, you can set the "overflow" of the canvas to be "hidden" or "visible". You can also set various tweens to animated elements which use the same names as in jQuery. The generated code uses the jQuery library.

After exporting the file, I added a script to make the animation loop because this isn't possible from within the editor yet.

Adding text

There's a limited choice of fonts which makes sense, but there's no way to change the font stack in the editor.

I can size text (and shapes) in pixels or ems which is handy.

The actual text in the generated animation is selectable, but each bit of text gets wrapped in a <div> tag rather than anything semantic like a paragraph or heading.

Shapes

There aren't many options for shapes yet, just the choice between a rectangle and a rounded rectangle. Either more shapes are coming, or Adobe expect people will import shapes from other software like Photoshop or Fireworks.

I would like the option to select percentages rather than fixed widths on elements, as I work with mostly flexible-width sites. In fact, I want this feature for Fireworks too!

The code

The animation relies heavily on CSS and Javascript so make sure content can degrade nicely with these turned off.

Overall, I'm unimpressed by the code that Edge generates. Everything is output as a <div>, including the text. It's a shame that there isn't the option to change the tags used. However, based on the interface I'm pretty sure this might be something a future version will allow

In the layer pane, each element has its tag labelled next to it. Since every element has the same <div> tag, why bother putting that label there at all unless an option was intended to be there to change it? So I'm hopeful.

The Edge team have also hinted towards support for more HTML elements in their forum in response to Rob Hawkes's question about this same issue.

Marketing

I'm disappointed that Edge is being marketed as an HTML5 tool, because I think this reference is misleading. The only thing I can see in the code that is HTML5 is the doctype.

Despite this, I'm encouraged by how the Edge team are engaging with developer feedback in their forums, and it feels like they're open to ideas and working on ways to make the software output more semantic code using things like canvas.

I'm left wondering what sort of things people will find Edge useful for. I hope not just as a selling point by web agencies as an alternative to Flash ads.

Possible use cases

You can't create hotspots or turn any of the content into links within the editor, so at the moment what I'm building feels like a fancy animated gif. That pretty much rules out using it for prototyping, games or presentations.

Depending on how much Adobe plan on charging, it might have a place in schools. Animation software always goes down well, and the output is more flexible. It's bloody fiddly to use though.

As with all new technology, we're producing lots of demos that look pretty but don't really do anything particularly useful. We're still at that teething stage with animation, and I'm looking forward to seeing more practical examples emerge.

It was a really popular topic; the room I had was completely full, to the extent that some people were sitting on the floor, and a group of others stayed the whole 45 minutes listening in at the door.

The workshop, How to Hack the Web, was an introduction to the Hackasaurus tools. We started off by installing the X-Ray Goggles and inspecting the HTML on the BBC News website (the education section). We then used the Goggles to change the text in the headlines, before tearing out the code and putting it in the WebPad. I then showed the participants how to edit the code collaboratively, and extract bits of code from the Hackbook.

The day before the workshop, I'd found out about an app called Portable Firefox. This let me launch a customised version of Firefox from a USB stick.

A lot of schools only have an old version of IE installed on their computers, and this makes it really difficult to run the workshop because the Hackasaurus tools only work on modern browsers. Some schools won't allow teachers to install new software in case it infects their network, and asking the participants to download the software during the workshop would have taken up a lot of time and I wasn't sure what the network speeds would be like. Being able to give out pre-installed browsers on sticks worked like a charm, so I'll definitely be doing this again.

Clearleft very kindly lent me an armful of USB sticks to use for the workshop. I set Hackasaurus as the homepage, the bookmark bar to always display, and installed the bookmarklet. When Portable Firefox is launched, the browser already has all the preferences I've set.

The only problem I can foresee is if I took the sticks into a school and they had different proxy settings, or firewalls that prevented students from using the software. I've also heard of some schools and libraries that physically block USB ports for data protection, so I'm still trying to think of ways round scenarios like this.

All the slides and links from the workshop are available on Lanyrd

So on Sunday I took the train to Watford to meet the other winners. I met the Livity team who had organised the competition with Google, and they were to be our mummies and daddies for the 3 days.

The young minds included Richard, 19, who is a founding member of the Spirit of London awards, Sadiq, 24, who runs Future Voices International and Grace, 20, from the RYPE initiative.

Another winner was Ludwick, a 20 year old from South Africa who developed a prototype for a dry bath gel which could help reduce the water requirements of millions of people, and wrote an 8,000 word business plan for it on his mobile phone.

I have no chemistry background. But having a resource like Google made it all available.

The Promise of Youth panel

We were treated to lunch, then to a buffet dinner at the conference venue and were given the opportunity to meet the attendees who all seemed to be either CEOs at large companies or Google employees.

It was by far the most opulent event I've ever attended. It was held at a luxury mansion house full of modern art, millionaires, and bathrooms with very soft hand towels.

Day One

On the first evening after dinner, we were given the mission of schmoozing with the other attendees. The venue had lots of themed rooms. I walked through a room full of cheese, entered a room full of bright rugs, sitars and a barman serving absinthe, then into a room with a candyfloss machine attached to a bicycle, followed by a room with popcorn and a barman standing by a slush puppy machine serving beetroot cocktails, then into a club with discoballs and weird gadgets, and then outside where there were marquees and barbecues.

I found it challenging to complete the task of introducing myself to new people because I somehow ended up with a glass of absinthe (which was disgusting and I couldn't get rid of it for ages), then tried to subtly eat a big cloud of candyfloss, and ended up with sticky hands and blue all over my face.

Day Two

For the second day, Livity organised a serious of workshops. One of the sessions was led by Jared Cohen who has the most impressive CV I've ever seen. When he was 24 he became an advisor to Condoleezza Rice, and he now works as the director of Google Ideas. Geoffrey Canada also ran a session about social activism and leadership, and Tom and Ross gave us an overview of what happens in the Google Creative Labs.

We were then invited to a dinner where we were entertained with music and dancing. I sat between an Italian businessman and the president of a political risk research firm. I cheekily attended a cocktail party afterwards when I should have been getting on a bus with the others. My punishment was missing my ride back to the hotel and gaining the "bad girl" reputation.

Day Three

On the last day, we attended the talks which tackled issues such as poverty and radicalism. There was a particularly interesting panel of "formers" including a former white supremacist and a former gang member. They received a standing ovation at the end of the session which was quite moving.

At the end of the morning, the Promise of Youth session was hosted by Sam Conniff, with panelists including Channel 4's Jon Snow and Martha Lane Fox and 3 of the young minds. During the session, Sam asked Martha a question about the work I'm doing.

Sam Conniff:

One of the other Young Minds, Anna, is campaigning actively in the U.K. to change the curriculum, transform the curriculum, add to the curriculum, something that's missing that we are completely missing the opportunity to educate young people correctly in I.T. So it's something that runs across all of the different Young Minds.

Martha, what of your experience as digital inclusion champion could you share with these guys facing the same challenges?

Martha Lane Fox:

I think it's really interesting to see what the boundary between what government could do and should do and what young, people, old people, people of all age should do around any kind of inclusion, whether it is digital, educational or any other kind of skill.

Listening to you talk, one thing I feel very strongly about here in the U.K. is it's the lowest cost way for the government to help itself is by making sure everybody is connected, and that's the link I feel frustrated.

I am not making the arguments clearly enough. It's beginning to happen in government that by making everybody able to use the Internet, helping everybody be able to use the Internet, certain things start to happen much more effectively. Government can communicate more easily. I believe businesses become created.

All of you set, you are a brilliant example of that. So I think that the pressure should be put on governments to make sure they are looking after their kind of final bits of all of these pieces to make sure that the final third, tenth, whatever it is are able to use technologies, even if it's just making sure the infrastructure is there. And then you guys can layer the things on top.

The Promise of Youth panel

Lego Mindstorms were doing an exhibit at the conference and I played a game with Oyin where we controlled robots using our heads.

After the panel, there was a Google product showcase. This was followed by a keynote from Steven Hawking on "Why are we here?", then a Q&A session with Eric Schmidt.

It's rumoured that Google employees gain a stone in weight after their first month working in the offices because of the free canteen. I was so well fed that I'm pretty sure I've gained that much in 3 days at their conference.

I'm really grateful to the Livity team for organising all of this, and also to Google for inviting us to the conference and giving us one those once-in-a-lifetime opportunities. I do feel though that it would have been just as awesome if it had been held somewhere really dull, because I got so much from meeting the other young minds. They're an inspiring group of people who I feel so lucky to have met.

These tools work in modern browsers, but not old versions of IE. This means most public venues aren't suitable because their network restricts them from using a different browser. A lot of networks also block certain sites, including Scrunchup, and some even block the "view source" feature.

Even more distressing was that we couldn't even show kids the power of View Source, because that feature was actually disabled on the library's computers.

http://www.toolness.com/wp/2011/03/three-lessons-learned-from-hack-jams/

I think this not an insignificant factor as to why kids are being turned off IT in schools. From my own experience I can remember dozens of times when lessons have been complete write-offs because of some restriction with the network, such as a video we were going to watch being blocked, or not being able to use some cool open source software on the off-chance it infected the network with viruses.

To bring these Hackasaurus workshops into schools, my options are bringing a suitcase full of netbooks and 3G dongles to each workshop, which would be prohibitively expensive, or hoping that I can run a browser from a USB stick (which in Atul's experience, didn't work).

The $25 USB computer

Last week, BBC news did a report on the Raspberry Pi. It's a very low-cost USB computer being developed by a British non-profit in an effort to promote computer science in schools.

The size of the computer means it's much more portable than a netbook, and the price makes it easily replaceable if it gets lost. Schools could make huge savings not having to renew their IT suites every few years, and at £15, the computers are the same price as a scientific calculator.

The device has had a mixed reception from IT teachers, but generally a positive response with a few questions about feasibility.

Here are the specs as of May 2011:

• 700MHz ARM11
• 128MB of SDRAM
• OpenGL ES 2.0
• 1080p30 H.264 high-profile decode
• Composite and HDMI video output
• USB 2.0
• SD/MMC/SDIO memory card slot
• General-purpose I/O
• Open software (Ubuntu, Iceweasel, KOffice, Python)

It's not going to be top-of-the-range with only 128MB of RAM, but no doubt later versions will be able to cram even more in if required. Or maybe they'll make it so you can connect 2 together. That'd be nice.

The small storage size would encourage schools to move as much as they can over to "the cloud" and make use of web apps (another cost saving).

This isn't the first of such device to come out. A games console called Rbox was developed last year, and is even cheaper than the Raspberry Pi. Then there's the One Laptop Per Child project which is going strong.

When it's out, I plan on buying a couple of dozen and pre-installing a browser to use in our workshops.

The Hackasaurus team have organised workshops with local kids which give them an introduction to "hacking" the web. I went to a couple of these hack jam sessions while I was visiting New York. During the jams, students as young as 11 are shown how to edit the code on a website and change the way it looks using the Hackasaurus tools.

All the tools that are being used, such as the Web X-ray Goggles, are being developed and iterated upon in direct response to how kids are using them.

I was given an insight into the work Mozilla are doing to teach young people about web development and the open web after attending their Drumbeat Festival last year. The events they've been doing in the US are proving really popular, and I can't wait to help run some of these to the UK.

I'm also working hard on Scrunchup to try and make it more useful as a resource and community for young developers. I've been working on an events feed which will pull in events that are accessible to young people, and a resource which lists courses in web design that have been approved by the our readers. I'm planning to push these live over the bank holiday weekend, maybe even while I'm watching the Royal Wedding coverage.

To get the most out of your day, I've prepared a little guide so you can practice being all British before the big day. Splendid.

A quick geography lesson

It's quite confusing to people who don't live here to understand what the difference is between the United Kingdom, Great Britain and the British Isles. Get it wrong and you will look quite the fool. But fear not! For I have prepared a geographically inaccurate Venn diagram.

Partaking in tea

In Great Britain, we drink a lot of tea; 165 million cups of the stuff a day to be exact. Tea is so important to us that we have a Tea Council. People who work in an office take it in turns to do a "tea round", and drinking tea is considered a social activity. People from the Tea Council perform regular checks in offices to make sure people are doing their rounds, brewing the tea for long enough, and not buying inferior biscuits.

Afternoon Tea

We have a special time of the day to drink tea, mid-afternoon between lunch and dinner. In Unix time, teatime is at 4pm. A pot of tea is brewed and we get together to drink tea with some scones, a slice of cake or biscuits, and talk about the weather, the price of petrol, the Royal Family, and what was on Coronation Street.

The great milk debate

There is a long and raging war in Great Britain over whether the milk should be added to the mug before or after the water. I put it in first because science says so.

The important thing is to use good quality milk. Not UHT. Yeuck. The tea shouldn't look too pale, or too dark. I like mine around #DDBB88.

Making a good cuppa

Make sure you get the appropriate tea for your water, such as Yorkshire Tea, which you can get for hard or soft water.

I also recommend warming up the pot/mug first, and using loose leaf tea and a strainer. Only the best china will do. The water must be boiling when it's poured in, and don't boil the water more than once or it won't be well oxygenated.

If you've never made a good British cup of tea before, you should watch this charming video by charlieissocoollike on how to make a cup of tea.

Britishisms

@Sazzy has been tweeting a few Britishisms recently under the hashtag #britishisms. Here are some more that you may find handy if you want to sound awfully posh:

If you want to sound exceptionally posh, try adding "what-what?" to the end of random sentences. It's meant to sound a bit like a duck, so practice saying it very quickly while pinching your nose.

Extra reading

If you follow the rap star 50 cent on Twitter, you should also follow the English translation service, @english50cent, and if you're planning on visiting for the big day, don't forget to learn how to walk like a true Brit.

Also, we pronounce "niche" as "neesh", mobile as "mo-biyal", and Birmingham is pronounced "Bur-ming-um". Any place names ending in bourough are pronounced "burrah" (not "burg"), and we like to add extraneous letters to words like "colour" and "through".

I hope you have a jolly good Royal Wedding celebration, and a spiffing time being awfully British.

The photos

I've uploaded the photos I took at SXSW on Flickr

The panels

I didn't go to as many panels as I'd planned. I got the most value out of talking to people between the sessions and at meet ups at the end of the day. There wasn't a huge amount on the programme that interested me, although the things I did go to were very good. I went to a technology in education meetup on the first day and met a lot of cool people who were involved in education. I found the panel on CSS implementation very interesting as it discussed how CSS specs are written, but I was also glad I attended sessions that aren't directly related to what I do, such as how science-fiction influences cities.

As I didn't plan ahead much before leaving, I found Lanyrd.com very helpful, particularly the grid view where I was able to see what people I follow were going to. There was a paradox of choice with so many talks going on at the same time, so being able to see what other people were interested in made things much easier.

The parties

There were a lot of parties which were really good fun, but it did get a bit too much towards the end of the week.

Not being a big drinker, I managed to embarrass my friends by ordering half-pints or ("girly pints") which is apparently even more of a faux pas in the States than it is in the UK. I also had a few problems with the date format on my ID which, to an American, says I'm born on the 2nd of the 12th and am still 20, rather than having just turned 21 on the 12th of the 2nd. I'm not sure how I managed to get away with that one.

The party that stood out the most for me was the Great British Boozeup. I had a really good time because all my friends and the people I wanted to meet seemed to be in one place.

The marketing

SXSW had some big sponsors like Pepsi and Chevy which I thought made the event feel too corporate. It was quite insane some of the lengths that companies were going to get their brand noticed. The companies that did it best included Freshbooks who sponsored shuttle buses from the airport to hotels in Austin. This worked really well because there was an actual need for this service. The ones that did it worst were the stalls in the trade fairs who had hired booth babes who didn't actually work for the company they were promoting, and weren't versed well at all in their product. It felt insulting.

The bats

Towards the end of the event, I went to see Austin's bats. There are thousands of them that nest under Congress Bridge, and every evening at certain times of the year, they come out at sunset. I found out the times that they'd be likely to show and tweeted where I'd be. Quite a few people turned up and we camped out by the bridge. I'd got there too early and it took about an hour for the bats to finally come out, but it was really nice and chilled out. We were at the wrong end of the bridge to see them properly, but it was still really cool.

After SXSW

I really enjoyed my experience at SXSW. The majority of the people who had gone before said it wasn't as good as the last time they went, but I guess this is because the first time you go, you meet all the people you've been wanting to meet but never got a chance to. Also, many complained it was getting more and more corporate and too big.

I don't think I'll be going next year because it's so expensive and I don't feel I'd get as much out of it as I did this year. Maybe I'll go again in a couple of years if I get the opportunity to speak.

After the event, I took the opportunity to visit Washington DC and New York. I've been to Washington before about 10 years ago and loved it. I'd never been to New York but really wanted to see what it was like. I've uploaded the photos I took in Washington and New York on Flickr.

I sent back a response with details of what I'd been working on, and attached a rather hideous photo of myself mid-ramble at a conference. I didn't expect to hear anything back, but a few days later I got a smart-looking magazine through my door and an email arranging a date with a photographer, writer and a stylist.

The magazine, named The Gentlewoman, had just published its second issue. It looked very stylish. The cover had a matte feel, almost like leather, the headings were in Futura against big photographs. There were interviews with women including Yoko Ono, and at the back of each issue, a feature on a "young gentlewoman".

"The Gentlewoman is a new biannual style magazine for a new decade. Featuring inspirational, international women, it pairs ambitious journalism with a sartorial and intelligent perspective on fashion that is focused on personal style — the way women actually look, think and dress."

Anyone who knows me well will appreciate that I'm a bit of a disaster area when it comes to fashion. There's not a lot that stresses me out more than shopping for clothes, especially shoes, and I apply makeup like a 4-year-old on a sugar high. Being a developer and working from home means I don't have to worry about looking nice. So someone asking to put me in a physical copy of a high-brow magazine felt very bizarre.

Yet here it is.

I was photographed by Clare Shilland, my stylist was Beth Fenton, Annabel Callum did my makeup and the text was written by Katrina Dodd.

We did 2 shoots altogether; one in a studio in London (in the snow), and one in my flat and on the streets of Brighton. I had my hair and makeup done, and Beth picked me out a gorgeous Dolce & Gabbana skirt suit, as well as a lovely pair of heels (which you can't see in the shot). We rearranged the furniture in my flat, pushing the sofa up against the white wall, taking advantage of the natural light from windows.

It was surprisingly hard work. I was pinned into my clothes so they'd fit properly, and holding positions without looking tense wasn't easy.

After doing a few rolls of film indoors (no digital here), we headed outside. It was freezing and I walk like C-3PO when I'm wearing heels, even when my skirt isn't pinned up. Clare took a few more photos, and the girls kindly wrapped me in my coat every time the sun went in.

Eventually I had to change back into my geek uniform and get back to my code.

I've been waiting for my copy of the magazine with nervous excitement. It will probably arrive on my doorstep while I'm visiting the States, but I've been sent a preview of the article while it's being posted. I still can't believe I'm in a magazine that's featured Yoko Ono and Adele Adkins, and that I can pick it up at a newsstand when I visit New York later this month.

Its definitely changed my attitude to fashion. I'm making a bit more of an effort with clothes, I even bought a pair of heels. And wore them. My makeup bag has makeup in it now, although I'm still pulling on my hoodie and slippers when I'm working from home. And no, I couldn't keep the suit, but the fact I'd worn it was enough. To a developer anyway.

There was such a wide range of people there from different backgrounds, which made the discussions very interesting and informed. There were primary and secondary school teachers, Open University tutors, and people from various councils, local authorities, and academies.

Slash and burn

I was saddened to learn that many of the people in the room were in the process of being made redundant. Schools are already axing ICT from their offerings, before the government has even announced anything. Their whole budgets cut, they see the subject as expensive and expendable. The process was described as "slash and burn".

Learning centres shut down

Most worrying of all was the discussion around City Learning Centres (CLCs). These were introduced in 2001 and they're purpose-built state of the art computer and multimedia suites. They're available for schools and businesses to use. The centres have equipment that many schools can't afford to buy, which makes it more cost effective because schools can collectively share the facilities available. Students can make use of Apple Macs, specialist software and equipment, industrial sized printers, video and radio equipment. This not only helps supplement the current IT curriculum, but is also available for extra-curricular, training and business use, which is much needed in disadvantaged areas.

The funding for these facilities has been cut, and as a result, a significant number are being forced to be shut down. Questions were raised about what will happen to all the equipment; the Macs and video equipment, the printers and radio kits. Perhaps they'll be distributed to schools in the local area. Most likely they'll all be packed into boxes and auctioned off.

IT in the curriculum

For most of the day, we discussed IT's role in the curriculum, whether it should be a compulsory subject, whether it's best taught on its own or embedded in other subject, and what topics should be included in it.

No real commitment

The main problem cited was that the perception of the subject is very poor outside of the IT community. MPs don't think it's worth talking about, and schools see it as a tick in a box. Often, there's no real commitment to the subject in schools unless someone in senior leadership has an IT background. Another problem that educators mentioned are the network restrictions that schools have in place. There were worrying comments such as "I couldn't teach A-Level ICT because the coursework needed students to build Macros, which the school network blocked", or "My students were banned from using Dropbox because senior management thought it would encourage illegal file sharing".

Too much emphasis on Office

This was something everyone in the room seemed to agree on. Teaching Microsoft Office is too often the default. Students rely too much on their teachers to produce step-by-step software walkthroughs. As a result, students aren't prepared when they're presented with something new. They're not given the opportunity to explore and learn through trying things out and making mistakes. "We've been reduced to teaching the skills rather than the purpose, skills that aren't transferrable." This doesn't help the students, and it's not fun for the teachers either.

Topics that were suggested for the curriculum included:

• Programming, even just basics using Scratch (teaches logic which is a skill that is useful for business.)
• Licensing, understanding who owns content and when it can be used, including creative commons
• Manipulation of data (mashing up and hacking data for different purposes)
• Impact of ICT on society, inviting students to bring in news topics (such as wikileaks, internet blackouts)
• Privacy (issues of privacy with social media sites such as Twitter and Facebook)
• Digital rights (freedom of information act)
• Legal issues (data protection act and disability discrimination act)

Discrete or cross-curricular?

One of the possible outcomes of the curriculum review is that IT will only appear as a cross-curricular subject. My gut feeling is that this will be the case. Many schools are already offering IT skills only as part of other subjects. The main concern the people in the room had about this was the lack of knowledge teachers have without dedicated IT training. If teachers aren't given training and support, they will try and shoehorn IT into lessons, often resulting in very low-level teaching, and a lot of repetition across subjects.

It also raised the question of facilities. If every subject has to integrate IT in their lesson, the school will need more IT facilities. There's no funding for this any more since it's all been cut.

Call to arms

Naace have asked everyone to respond to the government's call for evidence. They say the more people do this, the greater the message will be. We have until April to do this, so not long at all.

I was particularly interested in the way in which they're used to denote relationships between people. rel values can be put on links and are used to indicate the relationship of the target to the resource on which they appear. Since it's Valentine's Day, I want to use this opportunity to see how we can mark up human to human relationships.

Marking up relationships is documented as XHTML Friends Network, or XFN for short.

Why bother with XFN?

The idea of using XFN is that it decentralises data. Social networks that support it can build tools that make it easier to import, export and sync our contacts. For example, when you create an account with Huffduffer and add the URL to your website, the service searches for sites that are linking to yours with rel="me" and automatically adds the websites you have an account on. I haven't updated my profile on Huffduffer for months, but it has added links to services I've signed up to since then.

Other websites that use XFN include Flickr, Google Profiles, Quora, Lanyrd and Dribbble. Twitter uses rel="me" when you add your website, but doesn't appear to add it to your contacts.

The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy.

—Tim Berners-Lee, Weaving The Web

How to XFNify your site

You're probably already familiar with using the rel attribute to reference a stylesheet; you're basically defining the relationship between the stylesheet and the current document.

<link href="style.css" type="text/css" rel="stylesheet"/>

It's the same concept with XFN, but you're indicating that this is a human to human relationship rather than a document to document relationship.

Marking up a contact

<a href="http://www.maban.co.uk" rel="me">Anna Debenham</a>

In this example, I've used rel="me" to show that the page I'm linking to represents the same person as the one I'm linking from. You can use more than one rel value, as demonstrated here:

<a href="http://www.hicksdesign.co.uk/" rel="contact met">Jon Hicks</a>

This indicates that I've met Jon, and consider him a contact.

Representing affection

In this example, I'm giving a rel value of sweetheart. Sorry, Cennydd.

<a rel="sweetheart" href="http://cennydd.co.uk">Cennydd Bowles</a>

This is the meta data profile description of when to use rel="sweetheart"

sweetheart

Someone with whom you are intimate and at least somewhat committed, typically exclusively. Symmetric. Not transitive.

The XFN website has an amusing explanation for why they chose the endearing word "sweetheart" over something more formal:

This value was the best gender-neutral term we could find to represent the more common terms "girlfriend" and "boyfriend," which it is meant to represent, as well as informal terms like "snookums", "honey", "pumpkin", and "sweetie-pie".

—XFN background, Romance

You can also use rel="crush", rel="spouse", or even rel="date" for someone you're dating.

Someone you look up to

You can use the value muse to reference someone who inspires you, such as a role model.

Someone you work with

Use the value co-worker to refer to someone you work with, and colleague for someone in the same field as you. (A colleague might not work in the same company as you but you're in the same field of study.)

Just friends

The rel values friend and acquaintance can be used to mark up people you know well.

Family

kin can be used to reference someone in your extended family, and parent, sibling and child to signify a closer relationship.

Nearby contacts

If you've got a housemate, you can mark them up with co-resident, or if they live nearby, use neighbour.

Styling relationships

We can target the attribute in the CSS to style any links with a particular rel value. In this example, I'm adding a little heart icon to the left of all links that have the rel value of sweetheart.

The HTML:

<a rel="sweetheart" href="http://cennydd.co.uk">Cennydd Bowles</a>

The CSS:

a[rel~="sweetheart"] {
			background-image:url(heart.png);
			background-repeat: no-repeat;
			background-position: left 5px;
			padding-left: 15px;
		}

The Result: Cennydd Bowles

Awwww! :) This won't display in IE6 because it doesn't understand attribute selectors. That shouldn't stop you using it though.

Romantic code

Since the only way to see whether these values are being used is by viewing source, you could add them in without the person you've referenced even knowing. Imagine viewing source and finding rel="crush" in a reference to you. Then again, could be a bit creepy if you don't share those feelings!

…refers to a person to whom you are attracted, perhaps even strongly, but who might not express the same feeling in return, or even know that you exist. Crushes are also usually secret, which makes their inclusion in XFN (a public data set) somewhat interesting. We expect that the use of crush in XFN will be in a teasing manner, as between two friends who like to flirt but do not actually date.

—XFN background, Romance

It's also worth pointing out that all the values are gender neutral, positive and assume a monogamous relationship, so you won't find any rel="mistress". The reason isn't ideological, but purely practical:

There were a whole pile of love, romance, and sexually oriented terms we considered and discarded. Some were rejected on the grounds they were unnecessary—for example, polyamorous individuals can indicate their other partners using values already defined (having two links marked sweetheart or spouse, for example).

—XFN background, Romance

Relationships defined by timestamps

Another thing is that these values are all dependant on the time they are written. You could give someone a rel value of co-worker today, and a few months later they could be working for a different company. Would you then go back and change those values in older posts?

Blogs by their very nature are a time based format. It is possible to use XFN values to refer to people linked to within a blog post. It could then be presumed that those relationships were as defined as of the timestamp of that blog post. Later blog posts could mention the same people with different XFN values. By viewing a set or series of blog posts and watching the XFN values on the interpersonal links change, one could easily derive implied temporal information about the nature of the relationships.

—XFN background: out of time

Find out more

• Find sites that are connected to you using Google's Social Graph API
• Xhtml Friends Network
• A list of existing rel values on microformats.org

The audio at the beginning is a bit borked but it sorts itself out after the first minute. I hope you find it useful!

This talk is available to download in various formats on archive.org or you can listen to it on Hufduffer.

If we believe children should be taught to write as well as to read, they should learn to program as well as to use ICT

— NAACE's Response to the Royal Society's Call for Evidence on Computing in Schools

I've grown up in a society where computer literacy is just as important as knowing how to read and write. I can't think of many jobs where some form of IT knowledge isn't useful (or essential), and this is a time when the IT sector is crying out for more skilled workers.

I wouldn't be in this industry if it weren't for my ICT teachers. They were encouraging and inspiring, and the most hard-working people I know. They had everything stacked up against them; budget cuts, staff cuts and a massive workload, but they didn't let that show in lessons. I'm very worried for their futures.

ICT being axed?

A few weeks ago I found out that, rather than being improved, ICT may be dropped from the statutory curriculum altogether, and I've been gathering as much information as I can about this. I've loitered in ICT teacher forums, written to the Shadow Education Secretary and read dozens of articles and white papers.

The Education Secretary, Michael Gove, is formally reviewing the National Curriculum. He wants to slim it down to focus on the "core subjects".

Here is the list of subjects that he's confirmed will remain a statutory part of the National Curriculum.

• English
• Maths
• Science
• PE

He doesn't see ICT as a core subject so it is not on the list. Neither are the creative subjects such as art, music, design and technology. Provision will still be made to teach Religious Education, but there has been no mention of ICT.

Students giving up on ICT

The Royal Society wrote an article back in August called "Current ICT and Computer Science in schools - damaging to UK's future economic prospects?". In this, they they reported on the drop in the number of students taking ICT exams, and blamed the poor curriculum.

Numbers of students studying computing are plummeting across the UK, with a fall of 33% in just three years in ICT GCSE students, a fall of 33% in six years in A level ICT and 57% in eight years in A level Computing students in England and similar declines found elsewhere in the UK

— The Royal Society: Current ICT and Computer Science in schools - damaging to UK's future economic prospects?

Training budgets cut

This comes at the same time as ITT budgets for 2011-2012 have been slashed for people training to be ICT teachers to £0 (from £9000). The amount of the budget per subject is determined by predicted demand and supply. Is this a sign that ICT teachers are no longer needed?

There's a lot of confusion about the government's plans and it all feels a bit sinister. This is a comment by a teacher on the TES forum asking what's going on.

Is it my imagination or has the number of ICT jobs dried up all of a sudden? I counted 6 ICT jobs in today's TES - a record low for this time of year? This was combined with a meeting today in which our Head of Department announced that GCSE ICT will not after all appear in this year's options for year 9, although functional skills as an option is being offer - executive decision with which he doesn't agree. Wow. That came from nowhere. That's a lot of teacher-hours just gone splat.

TES ICT forum — ICT jobs: where have they gone?

The importance of ICT

I just can't comprehend why Gove doesn't consider ICT important enough to be a statutory part of the National Curriculum. Hasn't he read all the reports by educational advisors?

NAACE considers ICT a baseline entitlement for all children. Let me say that again. Baseline entitlement.

The National Curriculum has established ICT as a subject in its own right in schools and has helped to provide a baseline entitlement for all children.

Summary of NAACE submission to the Rose review — PDF 40.7k

The Department for Education wrote a National Strategy for ICT that stressed the importance of teaching ICT, and recommended that schools provide time for "discrete ICT lessons" (standalone lessons rather that as part of another subject):

To ensure rigour and progression in the development of pupils' ICT capability, schools need to provide time for discrete ICT lessons taught by specialist teachers of ICT.

Learning and Teaching in ICT — The National Strategies

Ofsted, the standards body that regulates schools, also wrote a report on the importance of ICT, and how teaching it is essential to the economy.

Schools must equip young people with the 21st century skills necessary to ensure their employability

Ofsted report on "The importance of ICT" based on a 4 year study of almost 200 secondary and primary schools in England on their performance in ICT

Why drop it?

This gives me the impression that Gove wants schools to drop ICT lessons in favour of integrating it into his core subjects. Perhaps this is because he knows that the current curriculum ICT is so poor that students are teaching the teachers, and the lessons are so boring that the number of students taking GCSE ICT has dropped year-on-year. Maybe it's because teaching it as a standalone subject is expensive, so axing it would bring in some short-term cash, but to the immeasurable cost of the IT skills of thousands of students.

If Gove did decide to integrate ICT into his core subjects, this would result in an inferior level of education for students. Here are a few of my problems with this method (from my own experience) as opposed to teaching it a standalone subject:

• Lessons are too often repeated. I had several teachers who repeatedly got us to make Powerpoint presentations on a particular topic because this software was all they were confident in using.
• Teachers will not be as trained in using and teaching ICT as someone who teaches it full-time. Therefore lessons will not be as in-depth
• Some teachers will try to shoehorn ICT into their lessons where it doesn't really fit, just to tick the "used a computer" box.
• Resources are limited. Computer rooms have to be booked days in advance. If all lessons have to use ICT, the school has to buy more computer suites and since the "Harnessing Technology Grant has been halved", schools simply do not have this money.

The industry and the economy will pay the price

This comes at a time when growth in the IT industry is already being stifled. The computer games industry predicts a 10% growth over the next 4 years, but has been denied future tax-breaks, leading to many games publishers threatening to leave the UK and relocate to countries that are nurturing their sector.

The tax break proposed by the previous Labour government could have created 3,000 new jobs and £457m to spend on development, according to KPMG Scotland. The industry is also estimated to contribute £1bn to the UK's GDP each year.

BBC News Budget news prompts game industry threat to leave UK

Europe is also facing massive shortages of skilled workers in the tech sector, so it makes sense to train students who can fill these deficits and contribute to the economy.

How you can help

Please don't let them do this. Here are a few things you can do to keep ICT in our schools:

• Sign my petition! (I tried to set up an official online petition on the number10 and directgov site, but the government have shut down this service until "later in 2011")
• Make some noise on Twitter, and don't forget to @mention your MP
• Respond to the Department of Education's Call for Evidence for the National Curriculum Review
• Write to your MP

I was giving a talk at Heart and Sole, an evening event at Portsmouth's Spinnaker Tower, about starting out in the industry. I travelled down with Josh Emerson, who works at Clearleft and was able to give me an informal tour of Portsmouth.

The attendees seemed to mostly be students, with a few people who worked at or ran agencies. It was a 2-track event which, considering the ticket price was under £20, was excellent value for money.

I knew a lot of people in the audience were starting out in the industry or considering going freelance, so I wanted to give them a head-start on some of the things that I would have wanted to know when I left school. A few of the things I talked about included writing contracts, sorting out finances and dealing with clients.

I used the video game "Fallout" as the theme to my talk, comparing survival in a post-nuclear wasteland to starting out during a recession.

I think it went ok, it's hard to tell what people are thinking, and a lot of the topics (tax, contracts, break-even points and ISAs) are quite boring, but I didn't hear any snoring so I deem that a success.

It was strange giving the talk 100 metres in the air, and even more disconcerting doing it right next to a glass floor. Still, despite it being a very odd experience, it was really good fun and once I'd got over how scary the whole thing was, I was able to get into character and even enjoy the view.

After I'd done my thing, Syd Lawrence gave an entertaining talk on "Making AJAX user friendly, Google friendly, friendly friendly using the History API". It was light-hearted and even though it went quite in-depth, he explained things in such a way that my eyes didn't glaze over the whole way through. Pretty slides too.

We then headed downstairs to see a couple of short sponsor talks. Unfortunately as the venue is quite small, a few of us had to stand, but considering the low priced tickets and the fact that the organisers were doing this for the first time, this wasn't an issue and I didn't hear anyone complain.

I was expecting something dry and corporate from the sponsors, but both talks were intelligent and useful to the audience. In fact, if they hadn't been labeled "sponsor talks" on the schedule, I wouldn't have twigged they were anything different from the other talks. I particularly enjoyed the one from the guy at Strawberry Soup who talked about lessons learnt from starting a web design agency (from a couple of people in a shed in the garden, to a company that sounds like is doing pretty well and hiring lots of people). I was worried a lot of content would overlap with mine, but it led on really nicely and it was good having someone else rebuff things I was saying about contracts and charging.

Next up was Christian Heilmann who captivated the whole audience with his talk on building a better web. He was able to reflect on some of the mistakes developers made in the late 90s, and how we may be making the same mistakes.

The rest of the evening went very quickly and was a bit of a blur. I did finally get to speak with Rob Hawkes after missing his talk on HTML5 Canvas (some idiot was speaking at the same time as him) and a bunch of other cool people. The organisers are planning something for the Summer so I'm looking forward to hearing more about that.

The whole event was filmed, so I'm hoping to be able to add a link to a video of my talk shortly.

In Christmas 2005, I wrote a song to the words of Silent Night. It’s a voice-only piece for Soprano, Alto, Tenor and Bass. Mr Jones really liked it and decided the school chamber choir would perform it for the Christmas concert at the school, and the school’s carol service which was held in St Albans Cathedral every year.

There were just a handful of us in that choir – I think 2 or 3 male teachers singing Bass and Tenor, 3 girls (including myself) singing Alto, and around 5 Sopranos. We rehearsed the piece every week leading up to its first performance in the Cathedral. The first time we sang it in the church was the most amazing feeling; the acoustics in the church are the best I’ve ever sang in, and it was so cool to hear people singing a piece I’d written. Later that day, everyone in the school filed into the Cathedral and we performed the piece for the first time to around 1,000 students and teachers. It was an unforgettable experience.

Later that week, we were due to sing the piece again and capture a recording of it at the Christmas concert at the school. Unfortunately, this coincided with the Buncefield oil disaster where a massive oil storage terminal a couple of miles away exploded in the middle of a very clear and starry night and burned for 3 days. Windows in the Cathedral we’d just sung at were blown in. Schools were closed as the surrounding area was covered in a thick, stinking smog so the concert was cancelled and my piece never got performed again.

I decided to publish the only recording I have of the song, which is just the computer playing the notes without any lyrics. It really doesn’t do the song justice, so you’ll have to imagine it being sung by a small choir in a big old stone Cathedral.

Here’s the video to the talk, and I’ll be publishing a write-up of it when I come back from speaking at Mozilla Drumbeat Festival next week.

Teach Every Child About Web Standards from London Web Standards on Vimeo.

Browsers like Firefox and Safari require the prefix -moz- and -webkit-. IE uses the prefix -ms-, but in a post they published in March, they stressed the following with regards to border-radius:

As CSS3 Backgrounds & Borders has reached Candidate Recommendation, the property name is not prefixed with -ms.

They also made this comment:

“While a number of web pages already make use of this feature, some do not render properly in IE9 or Opera 10.50 because they lack an unprefixed declaration of the border-radius property. As the specification nears Recommendation and browser vendors are working on their final implementations and testcases for submission to the W3C, we recommend that new content always include a border-radius declaration without vendor prefix.”

So make sure every time you use a vendor prefix, you include the non-vendor prefix version for best practice like so:

	
div {
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-o-border-radius: 1em;
	border-radius: 1em;
	}
	

Browsers still reliant on the vendor prefix will ignore the non-prefixed border-radius, but make sure you declare it at the bottom of the list so they listen to this style in the future

There’s a good post on quirksmode.org that makes this point and also delves into the vendor prefix debate.