The future of HTML with Bruce Lawson

Paul Boag

This week on the Boagworld show we talk about the future of HTML with Bruce Lawson.

Skip to the interview or this week’s links.

The transcription for this week’s show has been kindly provided by the team at Mailchimp. Media Temple are definitely in no way associated with Marcus’ joke, but are still supporting the show anyway. Support the show

Paul: Hello and welcome to Boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. I’m Paul and joining me as always is Marcus. Hello Marcus!

Marcus: Good afternoon Paul.

Paul: Good afternoon. Going all formal are we?

Marcus: Yes. My wife’s not very well, I meant to mention that to you. She woke up in the middle of the night with basically flu. She’s like shivering, proper rattling shivering and then sweating.

Paul: Keep away from her then!

Marcus: Well yes, well I can’t really keep away from her, I live there.

Paul: Well you could do? I do when my wife is ill. I just like…. I make her sleep outside. I’ve got to isolate the infected.

[Laughs]

Marcus: You could put her in a room…

Paul: Yes, a separate room…

Marcus: …rather than outside, Paul?

Paul: And then just kind of push food through the door?

Marcus: Yes, she might not even eat anything.

Paul: Oh… bonus then – you don’t have to do that. Have I not got the right attitude?

Marcus: Obviously not. It’s real. I was going to go to the office this morning, it’s like, well no… I’ll stay home and look after you. Bless

Paul: Ahh, see you’re so loving. We better not let my wife and your wife spend any significant time together otherwise my wife will realise how deprived she is.

Marcus: Well even more important Paul, it’s my Birthday soon.

Paul: When’s your Birthday—I don’t care really—but when’s your Birthday?

Marcus: Saturday.

Paul: Saturday?

Marcus: Yes.

Paul: So… another five years to retirement now then?

Marcus: Oh I wish.

Paul: That would be good wouldn’t it. How decrepit does this make you?

Marcus: I will be forty-eight years old.

Paul: My word. Yes you are five years ahead of me.

Marcus: Or forty-eight years young Paul, as the cliché goes.

Paul: Yes, that’s not really true mind, is it?

Marcus: Are you saying I’ve lived a full life?

Paul: I mean, if this was the middle ages, you’d be dead!

Marcus: It’s not the middle ages is it?

Paul: I know, but you’re heading in the right direction.

Marcus: Yes, I am past the mid-point.

Paul: Well past the mid-point! There is no way you are going to make it to—what would that be, if this was the mid-point—

Marcus: Ninety-six.

Paul: Yes. That’s never going to happen.

Marcus: No. No chance.

Paul: You’d be lucky. I bet from an insurance point of view you’d be a nightmare! You drink, you smoke, you eat rich food. You’d be lucky to make it to seventy mate.

Marcus: I don’t know. I think it has a lot to do with a positive attitude Paul. I’ve got lots of that.

Paul: It’s genes isn’t it? How long lived is your family?

Marcus: Father’s side not too good, but Mother’s side they all lived to one hundred and fifty.

Paul: One hundred and fifty? That’s impressive.

Marcus: Not really, no.

Paul: I’m not sure I believe you. But it’s very impressive.

Marcus: Yes, they are sort of small Devon people who live ‘til they are very old.

Paul: Aha, yes that’s lifestyle you see. Living in the country, enjoying life. That’s the way it should be. Like me!

Marcus: So are you enjoying yourself a lot at the moment Paul, or are you very busy and not even getting out of the door?

Paul: To be honest, it’s an admin Monday. I’ve done nothing constructive. This is the first thing that I would consider constructive today, and we’re talking about the podcast. So I am setting a very low benchmark yes.

I’ve been doing emails and invoices and end-of-month. You know you become obsessed about ‘Oh I want to invoice that this month’. So it’s been all that kind of silliness and just fiddling around. I was up with a client on Thursday and Friday at the University of St. Andrews at the end of last week and so I had two days without checking email. So as a result today’s just been a right-off.

Marcus: You’ve joined the world of the grown-ups haven’t you Paul?

Paul: I have unfortunately.

Marcus: Worrying about invoices at the end of the month. That’s a new one isn’t it.

Paul: The trouble is, it’s completely self-inflicted. ‘Cause it really doesn’t make a jot of difference whether I invoice it this month or next month. The money’s still there and the work’s still be done. It’s just a matter of when you invoice it.

Marcus: I’ve been saying this for years but nobody listens to me.

Paul: Ahh well.

Marcus: You could argue that if you continually said ‘Oh it doesn’t matter because of next month’ it would greatly reduce your income.

Paul: Well that’s true. You can’t go on like that forever, but I’ve already made my target this month so it really doesn’t matter.

Marcus: Fine.

Paul: And then also something else which you’ve mentioned to me before is that you can actually annoy clients if you push for the invoicing point too hard, can’t you? Because it sounds like you are money-grabbing, you know?

Marcus: Exactly. Equally though we’ve had clients—we have one at the moment— who want the monthly invoice – ‘Where is it?’ And it’s like ‘OK fine’ and I’m thinking we haven’t reached the point that it says we’re supposed to meet but yes ok, whatever.

But yes, if you push too hard or something then it’s kind of what they’re thinking is ‘Well why, what’s the point’. As we were just saying, what difference does it make if something is February 28th (my Birthday) or March 1st. It doesn’t really matter does it? Bottom line.

Paul: I love the way you snuck that in again.

[Laughs]

Marcus: Maybe I might get a Birthday card from someone?

Paul: Don’t forget that this will go out after your Birthday.

Marcus: [Gasps] Maybe I’d get a belated Birthday card then? ‘I’m terribly sorry I missed it’.

Paul: You don’t send Birthday cards or presents anymore you just congratulate people on Facebook. The laziest way of wishing someone…

Marcus: But Facebook tells you doesn’t it. Facebook says ‘It’s so-and-so’s Birthday today and here’s a box to type Happy Birthday in’.

Paul: There are actually apps out there that prefill the box for you and all you’ve got to do is press the button. Eventually there will be the option you can tick somewhere that just says ‘Wish everybody a Happy Birthday on their Birthday’.

Marcus: Yes, and you won’t even have to tick the option you’ll just have to think it.

Paul: Yes.

Marcus: And that’s it.

Paul: It’ll be ticked by default.

Marcus: What sort of world do we live in, Paul?

Paul: It’s going to hell in a hand-basket.

Marcus: That sounds like a Dorset saying to me.

Paul: Have you never heard that?

Marcus: I’ve heard it yes, but it’s not one that I use regularly.

Paul: You haven’t lived Marcus.

Marcus: [Country accent] You haven’t lived.

Paul: [Even worse Country accent] You haven’t lived…

The main reason I am hanging on for the end of the month is because we go and collect out Motorhome next week. All that’s very exciting.

Marcus: What as in…

Paul: The new shiny one.

Marcus: …on March 2nd? Ohhh.

Paul: So that’s going to be good.

Marcus: How exciting. Do you have to go miles to collect it?

Paul: Yes, all down Taunton way.

Marcus: Taunton? That’s not far.

Paul: Yes, it’s a long way. No, it’s not far.

Marcus: Well the roads are very narrow down your way so yes it probably…

Paul: It does take a little while to get down there actually but we’ll just keep going into the West Country down to Cornwall. It’s going to be great.

Marcus: How lovely.

Paul: And then I’ll just waltz around for a bit.

Marcus: I hope the weather’s nice.

Paul: So do I.

Marcus: It often is this time of year weirdly.

Paul: It is, yes it seems to be the way things are going.

Hey, going back to invoicing…

Marcus: Yes?

Paul: …as we were talking about earlier. Clients that have paid their invoices up front for no apparent reason.

Marcus: Yes. That’s another interesting one.

Paul: Yes. That brings us onto MailChimp our sponsor for this week. They’re great! They’ve paid already.

Marcus: Superb, well done.

Paul: It’s lovely, I like them a lot. That was really slick the way I did that wasn’t it.

Marcus: Well that’s your middle name Paul.

Paul: What? Slick? Paul ‘Slick’ Boag?

Marcus: If you were from the Wild West that’s what your name would be.

Paul: That would be awesome. If I lived in the Wild West…

Marcus: Yes… you’d be dead.

Paul: I’d be dead. Yes. That was pretty much where I was going. No, I’d be one of those… I’d be the undertaker – the guy that goes and measures them up just before a gun fight. I wouldn’t be a cool gun fighter kind of thing.

Marcus: No, I don’t think I would either Paul.

Paul: You’d be a sheep farmer.

Marcus: Umm that’s quite nice actually.

Paul: Have you seen the film ‘A million ways to die in the West’?

Marcus: No, that’s a comedy isn’t it?

Paul: Yes, it’s ridiculous but quite funny at times.

Marcus: I wouldn’t find it funny though would I?

Paul: No, ‘cause you’re forty-eight.

Marcus: Yes. I’d think it was silly.

Paul: Anyway can we talk..

[Laughs]

I did try and start talking about our sponsor and then immediately stopped. So we are being sponsored this week by MailChimp which is great – I really appreciate it. They’ve been sponsoring us for the last couple of weeks and I’ve talked a lot about their services and what it is that they do. But they also give away a load of stuff for free. So that’s the kind of stuff we want to talk about ‘cause that’s cool.

They’ve got loads of great resources that anyone can use. For a start, you can use their product for free. As long as you have got under two thousand subscribers for your newsletter you can use everything they use absolutely free. Which to be honest for most people that is a really good starting point. That is a good number, two thousand. It took me quite a while to go over the two thousand mark.

Marcus: So what, do you have to pay them now? Loads of money?

Paul: No it’s not that much. The mailing list for the boagworld show is at something like five thousand-ish and I’ve got to pay about £41.00 per month. Which I think… their pricing is very reasonable and also it’s not based on the amount of emails you send out, it’s based on your subscriber list which is great. So you don’t have to worry about the amount that you choose to communicate with your users. Instead you’re dictated by the size of the list and obviously the bigger the list the more the potential value it’s got so you are happy to pay more which makes a lot of sense, so it’s cool.

But they also, beyond just getting the two thousand subscribers for free they’ve also got a load of nice eBooks that you might want to check out as well on various things relating to email marketing. So they’ve got one on ‘Email Marketing Field Guide’ which is great. I’ll put a link in the show notes to all of these because they are actually nothing to do with the sponsorship but they are great material. So there’s an ‘Email Marketing Field Guide’ which is an introduction to doing email marketing. There’s a really good one on ‘How to Avoid Spam Filters’ which again is a huge issue if you want to be doing email marketing. And there’s another one which is ‘MailChimp for Bloggers’ which I found really useful which has got some great advice about how to use email marketing as part of being a blogger.

So I’ll put a link to all of that in the show notes, but also make sure you check out MailChimp and sign up for their two thousand free subscriber service which you can do at Boagworld.com/MailChimp. Please do take a moment to check them out because it is really great for us—well great for me really actually as Marcus doesn’t get anything out of it—but great for me if you do that.

Marcus: I get nothing at all.

Paul: Not a penny.

Marcus: Zero.

Paul: Until you start contributing something of real value to this show Marcus, you don’t get money.

Marcus: [Gasps] What a thing to say!

Paul: I know, it’s harsh isn’t it.

Marcus: But true.

Paul: Right I’ll tell you who does provide good value to today’s show and that’s the person we’re interviewing. See? Again another slick segway.

Marcus: It’s so slick its almost too sugary now.

Paul: Has it got too much?

Marcus: Yes. I’ve got a bad taste in my mouth now.

Paul: Oh dear.

So yes, we’ve got Bruce Lawson on the show today, yay!

Marcus: Yay! Funny Bruce.

Paul: We like Bruce.

So Bruce is well… an all-round nice chap really. Bruce Lawson, what do we need to tell you about him? He works for Opera and is among other things a kind of evangelist of all kind of techy good things. I really should look up… when you know someone so well you don’t really bother looking up any important information on them do you because you kind of think you know it. And then it comes to introducing them and you realise actually you don’t know much about them at all and so you can’t really introduce them very well.

So here we go. Apparently according to Twitter he’s a web-standards love god. Ok Bruce that doesn’t help me very much. That wasn’t the kind of professional introduction I was hoping for. He co-wrote ‘Introducing HTML 5’ so that’s good. And yes, he’s an employee of Opera. But we’ve got him on today’s show to talk about HTML 5 because he writes about that regularly, he blogs about that over on his blog (and we’ll put a link in the show notes to that), and we’re getting into some great stuff. Because I have to say that I’m beginning to get a bit out of my depth with some of the new HTML 5 stuff that’s coming along. Things like web components and what’s happening with images and responsive websites and all that kind of stuff, so that’s what we cover in this interview today with Bruce.

Interview with Bruce Lawson

Bruce Lawson
Bruce Lawson is the author of ‘Introducing HTML5 and an active participant in the future of the language.’

Paul: Thank you for joining us Bruce, it’s good to have you on the show.

Bruce: Thanks for having me.

Paul: Have you been on before?

Bruce: Never.

Paul: Never?

Bruce: I’ve never been cool enough no, but I think my last…

Marcus: Too cool.

Bruce: Too cool for Boag and Marcus, its possible.

Paul: To be honest it doesn’t take a lot to be too cool for us.

I remember when I first met you at…

Marcus: Kindergarten?

Paul: No it wasn’t that long ago. I was actually a little bit scared of Bruce.

Bruce: Oh blimey.

Paul: I think you were a bit drunk and rowdy as I remember.

Bruce: Oh well that was a long time ago Paul.

Paul: But erm, yes.

Marcus: When was that Paul, ‘cause I can’t remember. I don’t think I was there.

Paul: It was… no I don’t think you were. I was at some conference by myself and didn’t really know anybody and Bruce was there. But I took some initiative and he was very welcoming and very nice and we had a good laugh. And so it all worked out right in the end.

Marcus: He has been on the show.

Paul: Has he?

Marcus: Yes, in the form of jokes. I’ve nicked so many of your jokes Bruce.

Bruce: Good man, well I nick them from other people. It’s got to be a [unintelligeable] mentality I apply to jokes to be honest.

Paul: And also you were on the Christmas special. Did you even know that?

Bruce: I didn’t even know I was but you had told me, had ordered me under pain of having loads of sprigs of holly jabbed up my bottom to record something.

Paul: Yes and it was very good to, so that’s something.

So today we’re going to be talking about HTML 5.

Bruce: Hurrah!

Paul: Because apparently I’m going to call you a Guru in it?

Bruce: Can I be a Ninja?

Paul: You can be a Ninja if you prefer.

Bruce: I prefer a Ninja.

Paul: I just bought… I bought a great Ninja book ends today, it’s very exciting. It makes it look like there’s a sword going through your book ends.

Marcus: Oh that’s kind of cool. Did you know its National Kiss-a-Ginger Day today?

Bruce: I’ve just kissed Christian Heilmann over Twitter actually.

Paul: Oh that’s quite disturbing. Even over Twitter.

[Laughs]

Marcus: Then you can be a Guru and a Ninja in one… you can be a Ginja.

Bruce: Thank you.

Paul: Can we do an interview?

Marcus: Oh go on then. I’ve got nothing to say you see, I might go and make a cup of tea.#

Paul: It’s going to be the most sad interview from your point of view Marcus, ever. But I need to know some of this stuff because it’s a long time since I’ve done… actually Marcus, you need to know this stuff too.

Marcus: I know.

Paul: Because we don’t actually know anything useful. We don’t build websites anymore and my knowledge of HTML and CSS is becoming gradually more and more out of date and Marcus’s is non-existent. So this puts us in an interesting position because we still got to stay on top of this stuff and be able to talk intelligently to our client. And so we thought let’s get Bruce on the show and he can explain it to us in single syllables and then we’ll know what we are doing.

So my first question – the first thing that’s confusing me somewhat is web components. Everybody seems to be going on about web components. I’ve kind of got a vague idea of what they are, that they bring more of what has traditionally been server-side functionality into the browser and being processed by the browser, but can you talk me through a little bit more about what they are and why I should care really?

Bruce: Deffo. I just want to check first because actually you invited me as a Podcast but I realised I’m actually being a Headscape Consultant so its Consultancy rates.

Paul: Ahh, you’ve worked that out! Yes. See that’s what it is.

Bruce: Two grand a minute.

Paul: That’s fine.

Bruce: So web components are…basically there’s four sort of related technologies that get umbrella-d under the term web components. There’s HTML imports which is basically like a server-side include. You can just drag in a lump of HTML from your site or a third party, a hosted Reebo or something. And there’s templates which is skeleton HTML that gets included in your page that is inert until it is activated with a java script. So for example if you’ve imported images etc they won’t be downloaded until its activated. There’s the shadow DOM which is jolly cool because the dirty secret of browsers is all the stuff like selects and the range sliders on input type=range, those are all actually implemented in HTML and CSS under the hood.

Paul: Ahh.

Bruce: But developers have never had access to them which is what has been very difficult to style the colour of a play button in a HTML 5 video for example. So the shadow DOM allows you to get down there right into the bowels and it also allows you to kind of hide markup that you’re using for presentational reasons behind a barrier.

And web components the whole thing is designed that you can make reusable and encapsulated widgets so you can have styles that will only effect that component. So if you’re dragging stuff in from other projects or other people and there might be a class name clash or something like that, it won’t matter because everything is encapsulated in theory. Encapsulation isn’t actually perfect. There’s a couple of times when encapsulation leaks but…

Paul: See that sounds like a medical condition doesn’t it. Encapsulation that leaks.

Bruce: Well you are a gentleman of a certain age, Paul. We’ll leave that hanging there.

[Laughs]

Paul: The web components… that idea of encapsulating a piece of code or a piece of functionality, I mean that sounds quite powerful, I mean that’s getting into the realms of object-orientated programming, is it not?

Bruce: I left programming when C++ came out because object-orientation hurt my head so I can’t actually say whether this is entirely analogous. But all the kind of things that people need these days to build industrial sites – that their using templates, languages like angular for example, this brings it into the standard. And the way that you do these things is with custom elements so that you can make up brand new HTML elements if you want to.

Paul: So that screams of XML, is this kind of… because obviously XHTML kind of went away which is a shame, I liked XHTML. Is that elements of that coming back in, are we seeing here?

Bruce: Well that’s interesting, an interesting thing. If you told the people who were driving web components ‘this sounds like XML’ they would certainly beat you up and call you rude names.

Paul: But it doesn’t make it less true.

Marcus: Even though its true.

Bruce: Well in my experience that the beatings are more severe and the names nastier when you’ve actually hit upon an uncomfortable truth. But one of the exciting things that everybody’s getting all fired up about is making your own elements. And I rather wish that some of the evangelists of this stuff would stop hyping this, because the trouble is of making up your own elements is that there are really great aspects to traditional HTML elements that we take for granted. Little things like if you’ve associated a label with a form field by using labelfor= and then the id input field, things happen like you click on the label that the curser goes into the form field.

Paul: Yes.

Bruce: Things like a button, you hit enter or you hit a space button and it activates. You don’t need to do anything as a developer to make that happen – it just happens, it’s built into the browser. But the trouble is, when you make your own elements you have to re-invent all of that. You have to listen in JavaScript for the space bar and you have to listen for the enter button and you have to add all the ARIA stuff. The coolest thing about web components which isn’t being talked about enough is the fact that you can extend existing elements.

Paul: Ahh.

Bruce: What you could do if you were super-groovy and cool and drinking the Kool-aid is you could abandon all buttons and make up a new element called my-wonderful-button—custom elements have to have a hyphen in them—

Paul: Ok.

Bruce: —and then you have to reinvent all keyboard accessibility etc by yourself. But what you can do which is better is you can say buttonis=my-wonderful-button. And then for browsers that don’t have JavaScript or browsers that don’t understand web components i.e. all of them at the moment, that will fall back to a traditional HTML button.

Paul: Which is far more sensible.

Bruce: Which is far more sensible but in browsers that support web components, your super button inherits all of the functionality of an HTML button and then you can build on it and add stuff, but you get all of the built in functionality for free. So what I’d like to say to all your listeners is web components are coming and they are great but wherever you can, think what HTML elements can I extend rather than ‘Hey let’s just invent a brand new HTML element because it’s cool’. Let’s not get year zero on this, you can still progressively enhance using a custom elements just like we always have on the web or we always should be doing on the web. It’s still possible, there’s a mechanism there, there are attributes – elementis=your-fancy-name and then you get loads of stuff for free. So always think ‘How can I progressively enhance’.

Paul: Mmm. Do you think we’re going to see standards emerging for new elements or new custom elements for example you know… could you imagine someone like Google or Opera or who else kind of saying, ‘Well here’s a bunch of custom elements that other people can use that we’re then going to build into our search engine or browser or what else’. Do you see what I am getting at there?

Bruce: Yes, they exist. There is something from Mozilla called Brick. Something from Google called Polymer. It’s all a bit confusing what Polymer is, but they have some custom… some web components available which look nice and fit in with their design, look and feel ethos. In my opinion they don’t have enough progressive enhancement. They are going the ‘Lets invent everything new’ route. In fact I wrote a blog post before Christmas about this from an accessibility perspective that built-in browser behaviour doesn’t surprise people, why reinvent it? And some of the Google people were a bit grumpy with me so…

Paul: And also I guess to some degree a lot of the things that people want to do to those built-in elements is style differently. But if we’ve got this shadow DOM we can do this kind of stuff?

Bruce: Yes, yes you can. And a lot of the web components, I mean this is very much the initial web experimentation stage for web developers, but a lot of them are just wrappers like ‘here’s a web component that’s basically is a bootstrap select’ – well what’s the point? And I worry that we’re going to go down the jQuery UI road of two hundred and forty billion functionally identical things and then you get the paradox of choice and you don’t know which one to go for. People choose the sexiest looking one even though it’s inaccessible and potentially insecure. So I am hoping that the people driving this and people like you and I will work together to try and get some corpus or cannon of best practice and let’s face it, we’ve done as a community a pretty good job of that so far so I don’t see any reason to be unduly pessimistic. It’s just another technology, there are new technologies every twenty-five seconds in the web world. Those people who don’t care about progressive enhancement will still no longer care about it. Those people who do care about it doing it properly will still continue to care about doing it properly.

Paul: Yes. I mean well, you always go through and anything new like this comes along, we always go through the messy stage as we try and find out what those best practices are. And talking of that… responsive web design?

Bruce: What’s that?

Paul: Yes, because we haven’t all been bored to death with that.

What’s happening with the image tag these days because I keep hearing various back-and-forths about, you know, picture tags and all the rest of it… What’s going on Bruce? Explain it to me will you?

Bruce: Ok, well… image is obviously a very, very old element. One of the first things added to original HTML but it’s not actually a very good element for lots of reasons. Like, it’s an empty element so you can’t have any content in there. Everything has to be in an alt attribute. One of the things about an image element is that there is one source for it. You can only point it to one thing. So if you know for example that a WebP image is thirty percent smaller than a .jpeg you would be a bit brave to point your image element to the WebP image because only Google, Chrome and Opera support those.

So coupled with the fact that we needed a mechanism by which you could send great big whacking super-gorgeous images to retina devices, you didn’t want to send those massive files sizes down to a three inch monochrome Nokia display. We needed a mechanism by which you could somehow give the browser a list of different images and the criteria by which it might wish to use one or the other and it would pick. We couldn’t extend or change the way that the image element works because of lots of things… obviously every webpage in the world has an image element on it. We couldn’t make an image – ‘image’ element because actually that is an alias to img—try it, it works— so back in November 2011 I looked at HTML video and saw that you can have multiple source elements which are children of the video and that was because some browsers support .mp4, some support WebM.

Paul: Right, yes.

Bruce: And you can have a kind of media query behind them and that functionality is actually going to quite die on the video element, but at the time it was quite interesting. So I said, ‘Well why don’t we have a picture element that allows you to put a media query’ so if the browser knows if it is high dpi, then it goes and grabs super high res .jpeg. If the browsers knows it support WebP, it can go and grab the WebP. And let’s have an image inside it as fall back.

We went round and round lots of different proposals and in the end it was a colleague of mine called Simon Peters in Opera Sweden who said ‘Well the picture element looks insanely complex but if we actually require an image element as a child, so there will always be fall back because it is required’. And basically what the picture element does, it’s like a magical spam that surrounds an image and under the hood it will change the src attributes of the image tag.

Paul: Ohh.

Bruce: So if you don’t have an image element inside your picture, nothing will show. In any browser. You must have an img element which means that every browser gets good fall back and of course nobody gets a worse experience. Browsers that understand picture may be able to do better art direction. They may give you a WebP if your browser supports WebP. You may get a super-duper high res image if it’s a better scree but nobody gets a worse experience than they do currently now, which to me is almost the dictionary definition of progressive enhancements.

And so what was lovely is that there is a guy called Yohann Vice [correct name?] in France and he’s one of those rare people who understands the web but is brilliant at C++ing. So he said ‘If I could take some time away from client work, I could code this in blink’. So we had a fundraiser to raise ten thousand USD. We raised fifty percent again and that paid him to take time off work so he actually wrote the code for that to go into Blink so it’s in Opera and Chrome, and because there was fifty percent extra time as well, he implemented it in WebKits. The Mozilla guys have implemented it. So it’s there and because you have to have an image element inside the picture tag nobody gets a worse experience, nobody gets a broken image. Even something like Safari which takes it’s time to adopt new techs, that will just use the img child element and still your pages will be lovely.

Paul: So I could be using the picture element now?

Bruce: Well frankly I’m appalled that you’re not Paul. What are you doing talking to an idiot like me instead of changing all your pages?

Paul: Because I don’t do code anymore… well that’s a lie. I put images in all the time. I will now, from now on.

Bruce: Get one of your minions to do it.

Paul: I know, I have many of those, it’s wonderful. Anyway, let’s move on from my minions.

The problem when you get anything else, it always goes back to what you were saying about web components earlier, that the more power you give people – the more flexibility them, the more likely they are to do something that’s dumbass – the bigger the need is to establish some kind of best practice.

A case in point that, in the kind of more immediate, is the way that we are using HTML tags like main article section and things like that, and there seems to be different people using it in different ways and have different opinions about what should be an article and what should be a section and all of this kind of stuff. I’m interested in your thoughts. How do you go about using this? In some degree there is no right or wrong answer here, but I am interested in how you kind of approach the use of those tags.

Bruce: It’s funny Paul, because I’m a daft person. I’m not very clever so it’s odd to me that people find article and section tricky to work out, because in my mind it’s really simple. If you don’t know which to use, or if you are unsure – forget section exists. Just forget it exists.

Paul: Ok.

[Coughs]

Bruce: If you have a discreet lump of content—and I don’t mean discrete in a discretion way, I mean self-contained—does it matter whether that’s one youtube video and a description or whether it’s an image and a product description and a link to something else or it might be one news article. But it’s a discrete piece of content. That’s an article. Don’t think article as in news article. Think of article as in article of clothing or…

Paul: Right.

Bruce: …item. The trouble is a lot of the good synonyms are already used for other things. It’s actually more confusing in English than it is in other languages as our brains think of newspaper article or blog article but equally a product, an amazon book, a youtube video, one of those nice gold sovereign rings in the Argos catalogue that you were looking at the other day, any one of these things can be an article. Whether it’s useful to mark that up is debatable but if you want to use it, then that’s where you use it.

Paul: See now, this is where I would have got confused if I’m honest. Because I’ve used sections then, when I should have been using articles. So perhaps its sections then that have confused things?

Bruce: Sections confuse things?

Marcus: Article is a thing Paul.

Bruce: Yes.

Paul: Yes. So what’s a section then?

Bruce: A part of a thing.

Paul: Yes, but it depends on what define as the… So for example, things are nested aren’t they, so if you take a car for example, you could call the car as a whole an article or you could call an individual wheel and article, but the wheel can also be a section as it exists as part of a car.

Bruce: Yes, but if you are running the Halfords website where you might be selling individual tyres then it’s useful and necessary to think of those as one discrete entity. But if you are a car showroom then nobody goes to a car showroom to buy an individual wheel, they go to buy a car. So the level granularity depends as always on what you want to do with it.

Paul: So it’s the context that matters?

Bruce: Yes. Yes.

Paul: Ok.

Bruce: Like everything else. But my initial seemingly flippant advice is pretty good I think – ignore section, but think about article.

But you also asked about main? And main has a very definite use. If you only use the main element you are magically without typing, giving an ARIA role=main and that means screen reader users can press a button on their screen reader and jump straight to a place. And the same with header and footer and nav. If you use those, like nav has a magical role=navigation built in that you don’t need to type and header has a magical extra thing that says role=banner but you don’t need to type but the browser knows about and then a user using assistive technologies can press one button and that button depends upon their operating system and the screen reader they use, but every screen reader has a way to jump straight to nav straight to the footer and straight to the main content. So just by using those elements without any ARIA roles because they are built in, you are absolutely giving a better experience to people using assistive technologies.

Article is a more theoretical use but nav, main, header and footer have demonstrable use today.

Paul: Talking of header and footer…

Bruce: Mhm…

Paul: Am I correct in my belief that you would have multiple headers and footers within the page? It’s not headers and footers as we would understand them from a visual point of view? Do you see what I am getting at?

Bruce: Yes I do, because you can have multiple headers and footers. For example on my blog, because I was experimenting around Christmas 2008/2009 trying to learn about the HTML 5 spec but I can’t learn theoretically I have to get my hands dirty, so that the spec says that if you have an article—and each of my blog posts is an article—each of those can have a header and a footer.

So I do that but I’m not entirely sure how real-world useful it is. But I would absolutely advocate having one header which is your logo and your link back to home and your strapline. I would absolutely advocate having one footer on your site which is where you’d have your VAT number and your postal address and your business blah, blah, blah, whatever it is. You don’t need to have multiple ones, but always have one of each because then people can jump straight to it with assistive technology.

Paul: Yes. Which is superb. Ok, moving on from that, I’m sorry, this is literally a list of stuff that I am clarifying in my head.

Bruce: That’s alright.

Paul: It’s very useful. The next question for me is about your offline options these days. Because this is an area—I have to be entirely honest—I have not looked at, at all. Right? I am totally unaware of browser capabilities in terms of having offline content. How useful that is, what kind of use cases there would be for that kind of stuff, is it worth something me paying attention to or is it quite a niche thing, do you think?

Bruce: Well I think it’s very worth paying attention to. A little while ago, actually most of last year I was hawking a talk around the conference circuit that I did first in Frontiers in 2013 called ‘What the Web Needs Next’ and I was personally becoming concerned because the statistics were showing that people were using apps five times as much as they were using the mobile web, in terms of minutes per day. And that gap is actually growing slightly. And one of the things that apps can do which the web can’t is work offline.

If you’re on the bus or picking your cabbages outside your market garden in Blandford you can fire up an app and play a game but if you try and fire the browser and you’ve got no connectivity you just get the boring ‘No network’ message, and that’s because apps are designed to run offline and the web is of course designed to be connected.

So we had AppCache, and does its one job moderately well but it’s a great example of brilliant people writing a spec but not actually understanding what web developers needed to do. So AppCache does its job well but the job it does isn’t what most people want of it.

So Opera, Mozilla, Google, the Financial Times, The Economist, the BBC got together in London and hashed out whats wrong with AppCache and what we should do better. And one of the things about AppCache is its quite magical – you have a manifest and you give it some resources to cache and it does it, but there is no granularity there if you want it to do something that’s not in its algorithm, bad luck. You get the magic algorithm or you get nothing. So, largely driven by Mozilla and Google and Samsung, we’ve specified something called Service Worker. And Service Worker isn’t magic at all, it’s just JavaScript at an intermediate level on the web and what it allows you to do is allow you to intercept things between the browser and the network. So for example, if you register a Service Worker in JavaScript, the next time your page makes a call for a resource, whether that’s a video or an image or a link to somewhere else, your Service Worker can intercept that, it can try it out and if it notices that there is no network—it gets a status code showing that there is no network—it can then drag things out of an indexdb or a special cache that you pre-populated and serve that back to the page instead. So it would depend upon what you are trying to do, but for example what you might do on your website is you might on the first run, register the Service Worker, when you know you are actually connected you might for example go and grab the top twenty articles from the site, stick them in an indexdb and then the next time somebody goes there and they don’t have any connectivity the Service Worker might come back and say ‘Hey, you don’t have any network, but here’s the top twenty or the last twenty articles, would you like to read one of those?’ And then the user can still interact with that content. So it is working offline.

Paul: Is there a danger of trying to make the web into something that’s not, mind? I mean it is by its nature an interconnected network that requires you to be online. So is not actually a native app a better solution in that kind of situation?

Bruce: You’ve got two questions there, the first one isn’t there a danger of trying to make the web into something it’s not? Yes, but there’s been that danger for the last twenty years. The web was a mechanism for linking physics papers. And having images was turning the web into something it’s not and then it was a method of linking documents with forms, basic forms and then HTML 5 turned up and gave app like functionality. And so that was making the web into something it’s not. So because the web is so fluid and everybody in the world, well everybody in our bit of the world connects to the web a lot with different requirements and different problems to solve I don’t know that it’s really possible to say what the web is anymore. That’s a philosophical question.

Isn’t a native solution better? Perhaps but lots of things are ‘better’. On the other hand if you can make a website that runs on every browser and runs on Mac and runs on Windows and Linux and Windows phone and Android and IOS without having to make a separate native app for each of those or making a few native apps and telling other customers to bugger off then isn’t that better? It depends upon your definition of better. The web’s rarely better than anything. But what it is, is it’s ubiquitous and comparatively easy to write stuff and easily deployed and all of those things make it better in a different way.

Paul: That is a very good answer. I like that very much.

Marcus: Indeed.

Bruce: Thank you very much.

Paul: That’s well done.

Bruce: Can I stop now?

Paul: No, no I’m not finished with you yet. I’ve got two more questions. Next one is about client-side form validation. This is another thing that we’re beginning to see – I’m seeing mentioned more and more and I’m interested in what’s going on there and what should I be paying attention to in that kind of area?

I really just am getting the most out of you Bruce.

Bruce: Well the form stuff is kind of quite dear to my stony heart because it was the very first bit of HTML 5 when it was called Web Forms and it was Ian Hickson who at the time was an Opera employee doing it just to prove that you could extend HTML 4 without breaking backwards compatibility and that sounds a bit obvious now, but at the time the realisation that if you typed in input type=paulboag it didn’t break, you just got a normal text field, was revelatory. Because it meant that you could have progressive enhancement. So that these things are dear to me. And input type=range is great with the slider. All this kind of stuff is great. And people say ‘Oh what happens if you want a slider with a minimum and a maximum or three pointers per run’, well you use JavaScript like you always have. These things are there for the eighty-twenty rule. Most people need one slider and they want it to be vertical or horizontal and that’s it. And so it covers a lot of the use cases, it never covers all of them. But we are using shed loads of JavaScript for the most numpty-use cases. Now you don’t need to. If you’ve got something elaborate to do, just use JavaScript. That’s what it’s there for. Input type=date all seems a bit odd in some places, but it’s getting there. But I would use them as you have to sanitise this stuff before it gets onto the server anyway unless you are mad. You never put user input directly into a database but it just saves a bit of time and on mobile devices of course if you can validate stuff on the device without having to go back to the server, that’s hugely more responsive and I mean that in the old fashioned way of it just feels faster because you’re not having that indeterminate length of time to turn the radio on to send the message back to the server and get a message back. So use them but like anything else with HTML it might not work everywhere so revalidate the stuff on the server just like anybody who’s not mad always does.

Paul: Yes. Absolutely. Ok last question then.

Bruce: Ok, before the last question…

Paul: Ok, go on then…

Bruce: Quick joke break.

Marcus: Yay!

Bruce: Did you see that they’ve just dug up this mummy who was encased in chocolate and nuts? They think it was Pharaoh Rocher.

[Laughs]

I get that from my daughter.

Paul: Well, well done to your daughter.

Bruce: Ok, fire away!

Marcus: Oh that’s super.

Paul: Good this means we don’t need to have a joke from Marcus on this show.

Marcus: Well we do if we’ve got a sponsor?

Paul: Well I don’t know whether we will have for this show.

Marcus: We have a sponsor for the jokes at the moment.

Bruce: Who’s sponsoring the jokes?

Marcus: Really sensible people.

Paul: Perch.

Bruce: Perch? You mean Drew McLellan the purveyor of the worst jokes on Twitter?

Paul: There you go, see?

Marcus: See it makes sense.

Bruce: So basically he’s bunging you a few quid in the hopes of getting some decent material?

[Laughs]

Paul: Ok last question before we wrap up. Is there anything else I need to be paying attention to? What is the next big thing in HTML that I need to be keeping my eye out for?

Bruce: Ohh that’s a good question. Service Worker, the Service Worker that we talked about.

Paul: Yes, see you mentioned that earlier and I must admit I let that kind of ride a little bit, but I didn’t fully understand what you meant by Service Worker.

Bruce: This is the mechanism by which you can make things work offline by having a background process intercept calls to the network and notice if you are offline and then do something remedial so the page doesn’t just crap out. And it also helps you do things like push notifications.

There’s a really good article by Jake Archibald the Chrome Development guy or better known as Jake Archer to many people. If you ever look on Jake’s website, there is a really good introduction to Service Worker which even a JavaScript newb like me could follow.

Paul: Ok.

Bruce: Then we’re getting the manifest format which will allow you to tell the browser that this is the icon to use if you have this many pixels per square inch and this is the website to go to and this is whether you should fire up full screen or with browser chrome. And that will basically allow you to save web pages to your home screen on your device because one of the things we noticed when we were analysing the gap between what people like so much about native apps and what they don’t like so much on the web. It sounds like a small thing, but it’s installing stuff. And a lot of installing stuff is actually saving an icon to the home screen which you can then tickle into life with your finger or your mouse and instead of having to open your browser and find the bookmarks and press a button, it’s there on the home screen. That is that step that people call installing is something that people like very much. So that’s coming very soon in Firefox OS, it’s there in Chrome for Android at the moment although it’s not quite as delightful a user experience as they are ultimately going to be, and we are looking at it in Opera right now.

Then further down the line paradoxically the next big thing with HTML will be little things. We kind of learnt a big lesson from AppCache because everybody wanted offline ability so they waited ages while AppCache was specified and then they waited ages while all the browsers implemented AppCache and they tried it out and went ‘Well this isn’t what we wanted’. So rather than this sort of monolithic specify and implement huge features the idea is open up a series of primitives—and Service Worker likes this, it hooks into something like the fetch api— it doesn’t do much but it gives developers the power to hook up all these primatives with JavaScript and do the stuff that they want to do.

So you have to be able to write the stuff in JavaScript, you have to do the work. But if we open up the right primatives and many of these actually exist in the browser already, it’s just developers don’t have access to them. It’s like shadow DOM used to be. Then it gives developers the power to write libraries in JavaScript and do the stuff they want to do. And it’s very powerful, that’s kind of the thing we’re doing with picture, it’s kind of the way Service Worker got implemented.

Opening up the small things that we can, and then letting developers hook them up with JavaScript is better than making everybody wait for monolithic features. And even if they were specified perfectly at the time, if it takes two years between specification and implementation then the needs might have changed.

And this is called, and if you are interested in this have a look at… stick ‘Extensible Web Manifesto’ into your search engine of choice. It’s an interesting document because it talks about this, it talks about putting developers back into the driving seat and the idea is that when a canon of best practice has been established then this stuff can be standardised and baked into the browser.

If that sounds like crazy voodoo magic think about what you call Document.querySelector or whatever it’s called. Basically that baked in jQuery thing of accessing elements by CSS selector and it baked it into the web platform through the W3C after this corpus of best practice has been developed. We all saw ‘yes it’s obviously great that JavaScript people can access elements by their CSS selectors’ and then we retrospectively standardised that and made it faster performance.

Paul: Makes a lot of sense doesn’t it.

Bruce: It makes so much sense, I keep wondering what the catch is.

Paul: ‘Cause there will be a catch. Some time it will come back and bite you.

Bruce: Yes, well it will bite us because we’re all going to have to be much better at JavaScript.

Paul: Yes, well on that positive note that everything is going to be doom and gloom at some point when we realise the folly of our ways we shall end this interview.

Bruce: Well you know what they say? In the long run we’re all dead.

Marcus: I thought I might leave Bruce with a little joke.

Paul: Oh no, do you have to start this? Go on…

Marcus: Well no, it’s just being… I’m returning the favour. I’m good friends with twenty-five letters of the alphabet. I don’t know why.

Bruce: [Groans] That’s good. Thank you. Thanks for sponsoring that.

Paul: I think all you need to do now is persuade Opera to sponsor our jokes. They’ve already sponsored the transcriptions, or will do, not sure which depending on whether this goes out. But next up – Opera sponsor’s Marcus’s humour!

Marcus: Hmm that’s not going to happen.

Paul: That’s not going to happen is it?

Bruce: Well the thing is that they pay me a lavish salary for making up jokes.

Paul: That’s true, so why would they also pay Marcus?

Marcus: There’s only so much to go round.

Bruce: What worries me is they might get Marcus cheaper and sack me.

[Laughs]

Paul: Well almost certainly get him cheaper.

Marcus: I am very cheap.

Bruce: But then I look better in a mankini, Marcus.

Paul: No you don’t! I stumbled across that photograph and I’m traumatised for life, Bruce. Go on, get off my show! You’re disgusting.

Bruce: Sigh. Thanks for listening everybody and thanks for having me Paul and Marcus.

Paul: It’s a pleasure.

Marcus: It’s a pleasure.

Bruce: Bye!

[Music]

Paul: So despite a terrible introduction, that was a really good interview.

Marcus: I thought your introduction was so brilliant, Paul. No one can remember it now.

Paul: No, it was a long time ago. I’ve got so much time for Bruce, he’s a very switched on guy. One of the reasons I’ve gotten huge respect for him is he live codes when he gives presentations. Have you ever had someone watch you write over your shoulder?

Marcus: Yes it’s impossible. You suddenly can’t type.

Paul: Exactly.

[Laughs]

And he live codes on stage and with that it’s not just a matter of a spelling mistake or stuff like that. If you code it wrong, it won’t run, it won’t work. He’s nuts.

Marcus: He also sings and plays the guitar. So he’s alright with me.

Paul: He does some really funny songs sometimes doesn’t he. He’s a really worthwhile guy to follow on twitter he’s very, very funny.

Marcus: Well I’ve used many of his jokes, well I’m pretty sure we’ve used jokes in the interview (he says that we did a month ago).

Paul: Yes, you can’t remember can you? So actually as we’ve already done jokes this week…

Marcus: Oh no…

Paul: So there you go, we’re done with this show. No, we’ll do your joke. I know you get upset if you don’t do your joke.

But we’ve got a new sponsor. Now this sponsor I haven’t actually cleared as being a sponsor for your joke so I am going to distance them…for their own safety.

Marcus: Right.

Paul: Cause I’m worried about them. It’s like ‘Do they really want their brand associated with your joke?’ If I haven’t approved that beforehand then I don’t think we should. So our new sponsor is MediaTemple.

Marcus: And they’re doing the joke are they?

Paul: Well not necessarily. They are just sponsoring us.

Marcus: Ok, alright.

Paul: Can we keep some distance between you and them.

Marcus: Fair enough.

Paul: Just ‘cause I don’t know whether they will be happy with that.

Marcus: No problem.

Paul: Well they are sponsoring the show, and that’s the main thing. In fact they seem to sponsor everything in the web community.

Marcus: They do.

Paul: If you go to a Conference, they sponsor it.

Marcus: They do the party at the end usually.

Paul: Yes. And they also do the speakers dinner. They are very clever actually from a marketing point of view. I’m really impressed by them. But they kind of put their money where their mouth is. There are some companies that just kind of throw huge amounts of money at marketing and don’t provide that good a service. But these guys are really, really good. Put it like this. We use MediaTemple don’t we.

Headscape is on MediaTemple. Boagworld is on MediaTemple. They’re just great from that point of view. So this is actually a sponsor that I can wholeheartedly…

Marcus: Recommend?

Marcus: …say I use… yes, recommend, that I use regularly. In fact both of them are today. MailChimp I use all the time and MediaTemple I use all the time. And the thing is with hosting companies is that they are not all created equal. You really have to be careful when it comes to hosting companies because you think that ‘Oh I’ll just go for the cheapest’ or ‘I’ll go for one that offers the best up-time guarantee’ which, by the way is absolute bollocks, never bother with that.

What makes MediaTemple really good and one of the reasons that I’ve been with them for flipping years now, is that they’ve got incredible support. So if you need help, they are there, and they are there quickly and they respond promptly and you’re not talking—like you know when you ring a technical support line—

Marcus: ‘You are thirty-nine in a queue of seventy-five’

Paul: Well yes, that. And you eventually get through to them and it’s like…

[Nerd voice] ‘Have you tried turning it off and on again?’

You know, they treat you like a moron and you have to go through all of these steps don’t you, before they actually realise ‘Oh you probably know more than I do’ and they put you through to second line support.

Well it’s not like that with MediaTemple. You get through to intelligent people who really know their stuff which is great.

Also the other thing I really like about MediaTemple is their scalability. I’ve been with MediaTemple for flipping ages. As Boagworld grew in popularity and the demands of my hosting environment grew alongside it, I could easily scale up with them without having lots of work and having to set everything up and all that rubbish. They dealt with all of that side of stuff, so that’s great.

And on top of which they are good value for money. You know, they are not the cheapest out there but they’re in terms of value for money, they are simply the best out there. So you can find out more about them at Boagworld.com/MediaTemple and I shall share more about their amazingness in future shows.

But Marcus I know you’ve done jokes in this show already, but because I love you…

Marcus: Well I was going to do a long joke…

Paul: Oh, you can do a long joke!

Marcus: Yes?

Paul: Yes, go for it.

Marcus: Ok. This one I think I might have told about eight years ago.

Paul: Oh here we go…

Marcus: It’s ringing a very, very faint bell with me, but anyway… this Joseph Marchioni sent it to me. So there you go.

It’s two ladies talking in heaven. The first one says,“Hi Wanda.”

And Wanda says, “Hi Sylvia, how did you die?”

And she says, “I froze to death”.

Wanda says “Oh, how horrible!”

And Sylvia says “It wasn’t so bad after a quick shaking from the cold I began to warm and sleepy and finally died a peaceful death. What about you?”

“Oh I died of a massive heart attack.” Wanda said. “I suspected that my husband was cheating, and so I came home early to catch him in the act, but instead I found him all by himself in the den, watching TV.”

“So what happened?” said the other woman.

“I was so sure there was another woman there somewhere that I started running all over the house looking. I ran up into the attic and searched and down into the basement and then I went into every closet and checked under all the beds. I kept this up until I had looked everywhere and finally I became so exhausted I just keeled over with a heart attack and died.”

And the other woman said “Too bad you didn’t look in the freezer, we’d both still be alive!”

[Laughs (and groans)]

Paul: See I think longer jokes are better.

Marcus: Well there you go.

Paul: There you go. I get caught up in the story more. Yes, the little short snappy ones… you’re better suited to longer jokes.

Marcus: Please send me more longer jokes people.

Paul: Exactly, so you can send Marcus a longer joke at Marcus@Boagworld.com. We really do like people’s jokes – they are really good and that was an excellent one. Who was that from again?

Marcus: Joseph Marchioni.

Paul: Joseph Marchioni – what a cool surname.

Marcus: If that’s how you pronounce it, I would have thought so.

Paul: Sounds good. Alright, well thank you for listening to this week’s show. Next week…. I’ve done it again. I’ve forgotten to work out who is on next week’s show!

Next week we are going to be talking to….

Marcus: I can’t remember either.

Paul: …we’re useless at this, it’s like we’re not professional. Oh, that’s the wrong season.

Oh Carl Smith next week!

Marcus: I didn’t do that one.

Paul: No it’s a really good one, it’s all about work life balance and running an agency and all that kind of cool goodness.

So it’s a really good one, I’m really excited about it, so join us again for that next week.

Marcus: Bye!

Boagworks

Boagworld