Christian Heilmann

Posts Tagged ‘html5’

Data attributes rock – as both CSS and JavaScript know them

Wednesday, October 10th, 2012

Currently my better half Kasia is working on a JavaScript training course and wanted to explain the concepts of JavaScript with a game. So we sat down and did a simple game example whilst she was fretting over the structure of the course. As she wanted to explain how to interact with the DOM in JavaScript rather than using Canvas we had some fun using CSS animation in conjunction with simple keyboard controls. More on the game in due time, but here is a quick thing we found to be extremely useful and not really used enough in the wild – the interplay of data attributes, CSS and changing states.

Defining a player element

We wanted to make the game hackable, people playing with HTML could change it. That was more a request by me as Mozilla has the Webmaker project and there will be a lot of game hacking at Mozfest in November.

In order to define a player element the semantic fan in me would do something like this:

<div id="player">
	<ul>
		<li class="name">Joe</li>
		<li class="score">100</li>
	</ul>
</div>

This makes sense in terms of HTML, and is accessible, too. However, in terms of accessing this in JavaScript, it is quite annoying as you need three element matches. Also in terms of maintenance it means three elements. In JS you’d need to do something like:

var player = document.querySelector('#player'),
    name   = document.querySelector('#player .name'),
    score  = document.querySelector('#player .score');

In order to change the score value, you’d need to change the innerHTML of the score reference.

score.innerHTML = 10;

Aside: yes I know there are lots of HTML templating solutions and I am sure dozens of jQuery solutions for that, but let’s stick to vanilla JS as this was about teaching that.

A HTML5 player element

Instead of going through these pains, we found it to be much easier to go with data attributes:

<div id="dataplayer" data-name="Joe" data-score="100">
</div>

The clever thing here is that HTML5 already gives us an API to change this data:

var player = document.querySelector('#dataplayer');
 
// read
alert('Score:' + player.dataset.score);
alert('Name:' + player.dataset.name);
 
// write
player.dataset.score = 10;
 
// read again
alert('Score:' + player.dataset.score);

Re-using attribute values

Another benefit of using data attributes is that CSS gets them. Say for example you want to show the colour of the score value in red when it reaches 10. In the first HTML using a list you’d need to do the testing in JavaScript and add a class to have a different display. You could of course also change the colour directly with the style collection but that is awful in terms of maintenance. It can cause reflows in your rendering and also means another thing to explain to maintainers.

function changescore(newscore) {
	if (newscore === 10) {
		score.classList.add('low');
	} else {
		score.classList.remove('low');
	}
}

#player .low {
	color: #c00;
}

Aside: jQuery has contains(‘foo’) to match elements with the text in their node content in the selector engine, but it has been deprecated as a CSS standard, so that is not the way to go.

When using data attributes you don’t need that – all you need is an attribute selector in CSS:

#dataplayer[data-score='10'] {
	color: #c00;
}

To display the scores you can use generated content in CSS:

#dataplayer::after {
	content: attr(data-name);
	position: absolute; 
	left: -50px;
}
#dataplayer::before {
	opacity: 0;
	content: attr(data-score);
	position: absolute; 
	left: 100px;
}

Check out the following fiddle to see all in action: http://jsfiddle.net/codepo8/BMY6H/

The only downside I can think of is that only Firefox allows for transitions and animations on generated content. All in all we found data attributes incredibly useful though.

Comments? Here are the threads on Google+ or Facebook.

HTML5 and the future of the web – Dr. Seuss style

Friday, July 6th, 2012

Update: there are now videos (screencasts) and audio of the talk available on the Mozilla blog.

I am currently at the Webvisions Event in Barcelona, Spain and tomorrow I will give a talk about “HTML5 and the future of the web”. To spice things up a bit, as I enjoyed watching The Lorax on the plane and seeing that a lot of people at the conference are parents, I thought it would be a good plan to write my whole slide deck in Dr.Seuss rhymes. This may go down immensely well, or fail horribly, but you got to take chances.

The talk (with a few extra slides) is available on Slideshare, as a PDF on Dropbox and as a styled HTML version on GitHub. Also thanks to Eric Shepherd for some rhyming help.

Enough of this – here we go:

  1. There’s a big web out there, 
    it’s huge – I tell you, 
    it spans the whole world
    but it was boring and blue
  2. Then change came about, 
    in the shape of a fox
    it was cunning and open
    and it broke all the locks.
  3. Others showed up,
    and joined the good fight
    a singer, an adventurer
    and a shiny new knight.
  4. These all played together
    and spoke the same tongue
    which brought back old players,
    to join them in song. 
  5. A standard was set, 
    and it changed a few things,
    a richer web for apps
    was the promise it brings.
  6. Bah, standards! Who needs them?
    Some flashy ones said, 
    till a phone that was smart,
    kicked them out of its bed.
  7. We moved past one standard, 
    as web work is richer,
    so HTML5 and friends,
    paints a much better .
  8. Things that are fun
    should be shiny and cool,
    that’s why the new standards
    bring many a new tool.
  9. Watching and hearing,
    are what people like to do.
    Using and is simple,
    and you can do it, too.
  10. Both of them are web-native,
    which is a reason to clap.
    They can interact with other content,
    and Mozilla Popcorn makes that a snap.
  11. If beats and frequencies are
    what you need to play,
    check the Web Audio API -
    it gives you just that – even today.
  12. To play nice with batteries,
    use requestAnimationFrame(),
    don’t let it stop you
    that it has such a long name.
  13. 3D graphics are thrilling,
    as gamers will tell,
    we now have that on the web
    and it is called WebGL.
  14. Water goes everywhere you pour it,
    just ask Chris about his Macbook Air :(
    MediaQueries allow you be as fluid
    and respond instead of despair.
  15. Natural movements are smooth,
    just open your eyes.
    With CSS animation, transforms and transition,
    you can mimic this – nice!
  16. “The web means you need to be online”,
    I hear smartypants gloat,
    well, we have offline storage,
    so there – take your coat.
  17. Got a cam and some friends,
    and do you want to chat?
    WebRTC is what you need,
    even to show off your cat.
  18. Rhymes sometimes don’t come easy,
    as you just became aware.
    So let’s just move ahead quickly,
    this was just too much to bear.
  19. An artist needs a ,
    and HTML5 gave us that.
    Read, write and convert pixels,
    All in the client, it’s mad!
  20. “We don’t have rich elements!”
    many people complain,
    Use Web Components with X-Tag
    and create them – easy to maintain.
  21. Passwords are tough, 
    it is easy to see, 
    so allow login with emails,
    using BrowserID.
  22. The web is a mess,
    with third party buttons abound.
    Web Intents make them pointless,
    let’s not have them around.
  23. By design HTML5 is forgiving,
    its parser is great.
    It didn’t want to break the web,
    so let’s not break it in its stead.
  24. Course you can write weird things,
    and they will work – there’s no doubt.
    But will they be readable by others?
    This is what it’s about.
  25. You don’t create for yourself,
    or your friends who are the same.
    You develop for the next guy,
    so make sure you’re not to blame.
  26. You don’t jump in a river,
    if you don’t know its depth.
    On the web using Modernizr,
    should be your first step.
  27. Give new stuff to new players,
    and use it to enhance.
    Don’t support when it’s not needed
    IE6 walks – it can’t dance!
  28. With a vendor prefix browsers tell you
    “this is not ready”.
    So by all means, give them a go,
    but don’t expect to go steady
  29. And those prefixes vanish,
    you mustn’t forget!
    End with a prefixless version,
    It’s your very best bet.
  30. So we ask you to help us,
    build a web that will last.
    Be future friendly and look forward,
    and stop building for the past.
  31. The web is on phones,
    tablets, computers, TVs.
    We have to move it forward.
    or else our existence will cease.
  32. Hardware that is locked up,
    is not what we are about,
    so check out Firefox OS,
    if you like the web – you will like it – no doubt.
  33. Last but not least,
    if you find something’s wrong
    please file a bug and tell us,
    this is how things get done.
  34. So there you have a lot to play with,
    check out and share.
    We really want you to do that,
    come on, show us you care.
  35. Unless someone like you
    cares a whole awful lot,
    nothing is going to get better.
    It’s not.
  36. So well done for reading and listening,
    and going great lengths,
    that’s all we got time for today,
    so good-bye and thanks!

The web is the platform – presentation at MDN hackday in NYC

Sunday, March 25th, 2012

Yesterday we went to New Work City for the MDN hack day and I kicked off the day with a talk about HTML5, the opportunities it brings for developers and what people can play with during the day.

The slides are available and I recorded a screencast of me presenting them. The screencast is available on YouTube or in various HTML5 compatible formats at vid.ly (embedded below):

If you want an audio only version, you can find that one on archive.org or here:

Here are the things I am covering in the talk:

Time to board my plane, more details on the MDN work week and the hackday on the Mozilla blog soon.

A web in HTML5 canvas

Tuesday, February 21st, 2012

Whenever there is an open forum to discuss HTML5, you get very interesting questions. Sometimes you also get ones you just facepalm to. One of them was yesterday on Facebook where someone wanted a “simple web in HTML5”. As I was bored watching “revenge of the sith” I thought I give it a go. So here you go – a simple web in HTML5 canvas.

How is this done? Pretty simple actually, I just define one segment of the web in canvas:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
cx.moveTo( 0, 0 );
cx.lineTo( -30, -200 );
cx.quadraticCurveTo( 0, -170, 30, -200 )
cx.lineTo( 0, 0 );
cx.moveTo( -25, -160 );
cx.quadraticCurveTo( 0, -140, 25, -160 )
cx.moveTo( -18, -120 );
cx.quadraticCurveTo( 0, -100, 18, -120 )
cx.moveTo( -12, -80 );
cx.quadraticCurveTo( 0, -60, 12, -80 )
cx.moveTo( -6, -40 );
cx.quadraticCurveTo( 0, -30, 6, -40 )
cx.stroke();

I translate the context of the canvas to the centre of the 400×400 pixel canvas and start painting the lines. I paint one line from 200/200 (which now is 0/0 as the translation happened) to – 30/- 200 which is the top left. I then paint a quadratic curve to the top right of the segment (30,-200) with the curve point being in between the two. I then move the canvas “pencil” to the other points on the left and draw quadratic curves to their counterparts. All of these I set with trial and error – I am sure there is a clever algo to do this, but this works.

In order to achieve the web effect all I had to do was to rotate the canvas before painting each segment. I increased the angle by 18 degrees on each iteration and rotated the canvas in radians:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
for ( angle = 0; angle <= 360; angle += 18 ) {
  cx.save();
  cx.rotate( angle * Math.PI/180 );
  cx.moveTo( 0, 0 );
  cx.lineTo( -30, -200 );
  cx.quadraticCurveTo( 0, -170, 30, -200 )
  cx.lineTo( 0, 0 );
  cx.moveTo( -25, -160 );
  cx.quadraticCurveTo( 0, -140, 25, -160 )
  cx.moveTo( -18, -120 );
  cx.quadraticCurveTo( 0, -100, 18, -120 )
  cx.moveTo( -12, -80 );
  cx.quadraticCurveTo( 0, -60, 12, -80 )
  cx.moveTo( -6, -40 );
  cx.quadraticCurveTo( 0, -20, 6, -40 )
  cx.restore();
}
cx.stroke();

And that’s that – a web in HTML5 canvas.

Web enabled video at news:rewired

Thursday, February 2nd, 2012

Tomorrow I will be at Microsoft London to make IE10 support classList speak at news:rewired – media in motion on the topic of open web video and what you can do with it. For this, I got 10 minutes and then answer questions (or ask them) in a panel.

Update: The audio is now available on archive.org:

The slides – for what they are worth – are on Slideshare:

Web enabled video

And here are the notes used in the slides and the story I will tell to the audience with all the links for you to try out:

Web enabled video

Today I have a few minutes to talk to you about online video and why it is an amazing opportunity for journalists.

Video is engaging…

There is no doubt that video is an incredibly engaging format for information, news, entertainment – well, for anything really. A video can much easier explain a complex topic than text could as people can see and repeat what you do. You can show instead of just telling or hoping people read what you painstakingly wrote.

Video is also hard to edit and change

One of the issues with video is that it is much harder to maintain than a text. Editing a video requires more technical expert skill and takes longer than writing a text or changing something in an article. Say you got a number wrong – in a blog post that can be easily remedied. In a video it means a re-edit, in the worst case a re-shoot. In the case of the web it also means re-encoding the video in a format fit for consumption on the web and re-uploading it to the servers where it needs to go.

Video is also a black hole on the web

The other big thing is that whilst your videos are engaging and amazing – for search robots on the web they are actually nothing at all. Video content is not indexed and the information in it doesn’t allow people to find it.

So what can be done about that?

It seems pretty old-school that we still live in a time where videos have to be produced as a fixed package, with names, labels, map overlays, other videos and imagery and extras inside the video. This does not only mean that these things can not be updated, but it also means in a lot of cases when it comes to online video that their quality is impeded by the overall quality of the video.

Separation makes things easier to maintain

On the web we long understood that by separating concerns from each other, we can deliver much better results. How things look is defined and maintained somewhere else than what they are. A text is written without any design to it, the design is defined in the site template or in the overall look and feel of your product. This makes it easy to re-use the text in several places and formats – covering mobile and desktop needs or even as a news subscription in a feed.

Separation allows anyone to enhance

OK this is going into “data hippy territory” but if you separate your content and make your video available, then anyone can help improve the quality of it and provide for example translations of the captions. For this, there is a simple interface called universal subtitles available.

Separation increases accessibility and find-ability

Subtitles and captions are a great example to make video content more available to people. Not only the hard of hearing but anyone. You can for example follow a debate in the gym or in the pub without needing to hear it. The other big thing about it is that a transcript of a video makes it searchable by Google and Bing. And – if it is timed it allows people to to jump to a certain section of a video instantly.

HTML5 video allows for all of that!

HTML5 video is a step forward in interactive video on the web. Its openness allows us to innovate with it and weave video content into the web much like we did with text and images in the past. No need to have a plugin, no need to pay licenses for offering your video in a fast loading and high quality format on the web. By using open formats you can make your videos part of the massive interlinked thing we called the WWW in no time.

Just another page element

In HTML5, multimedia is just another page element I can add into my design. You can make it interactive in parts, you can show only parts of it, you can rotate and style it any way you want. For example I always hated the second sun in Star Wars to show us that Tatooine is not on earth. In this demo I can now drag the sun away.

The timestamp is the glue

The main trick is that I have full control over the video in HTML5 and I can react differently according to the time the video is playing right now. I have many other things I can monitor and react to, showcased here and using HTML5 canvas I can even change the video itself while it is playing.

Tapping into the real-time web

All this allows us to have a video and get information from the web to mix with it. Realtime updates from Twitter, other videos, photos and comments from other sources – all of these can be used easily as we are using video with the web rather than putting already done video on the web for consumption. The 18 days in egypt interactive demo shows for example how you can add all kind of – at that time – real-time web information to the the January 28th speech by Hosni Mubarak.

Lean back, relax, grab some popcorn

And the good news is that Mozilla – the non-for profit for the betterment of the web – is making it easy for you to do that with our Popcorn project. Popcorn is a JavaScript library and tool to add web content to videos and re-distribute the final product on the web.

Some quick demos

Some very cool things have been built with popcorn already:

  • One millionth tower is a unique multi-project documentary from the National Film Board of Canada exploring “vertical living” around the world.
  • History in these streets is a audio documentary about the history of the Black Panther party enhanced with Google Maps, images and other multimedia
  • Buffy slays Twilight is a mashup of “Buffy the vampire slayer” and “Twilight” with information in Pop Up Video style.

Popcorn and its maker

We now need you to help us on our quest to make it easier for people like you to embrace the interactivity of online video. For this, we created popcorn.js as explained earlier, but we also made a tool that allows you to create videos in an interface. It is called popcorn maker, and we want you to kick its tires and tell us what is missing and what could be done better.