HTML5 challenge #2 – Web Socket

<figure>

<figcaption>

Creative Commons: https://www.w3.org/html/logo/

</figcaption>

</figure>

I have neglected you with the HTML5 challenge, but trust me, I had a lot to do with my job change. The second challenge will be all about Web Socket. The Web Socket API fascinates me as it gives us the opportunity to do two-way communication with a remote host.

So for the second challenge, you'll need to create the usual demo you see with Web Socket, a little chat Web application. Nothing complex, you can even give a random nickname to identify each user, and they will see what other users are typing in the chat window. You'll have one month to do the challenge, and you'll be able to share your code, and comment on my solution in the blog post I'll do to share it.

More information about the HTML5 challenges

What are the HTML5 challenges?

Once a month, I’ll publish a little challenge on Web technologies around HTML (HTML5, CSS3, and JavaScript). My goal is to help people who want to learn the new features, and elements of the latest version of HTML, by setting some deadlines, but also, by focusing on clear little tasks. Across everything I’m doing, there is a constant feedback: people want to learn new technology, but they don’t always have the time to work on big projects, don’t have the patience of reading a full book, or just fail as there is no motivation. I hope that these challenges will motivate developers, and even non-developers people to learn about those.

It will sound cheesy, but at the end, there is only the satisfaction of learning something new, and build some little project by yourself. There is no prize, or leader board, as for me, everybody is a winner! I also want those challenges to be easy to manage for me, so I'll keep this simple.

Can I participate?

Everybody can participate! Keep in mind that it’s not a step by step tutorial, but clearly a challenge with no more indication than the end result I want you to do. The goal here is to give you the latitude to create the solution by yourself, and learn where to find the right information. If you don’t feel comfortable with a specific challenge, of course, nothing force you to do it, and you can wait for the solution to see how it works. At the end, there are enough sites talking about HTML, CSS, and JavaScript on the Web, that you can do it (by yourself, avoid copy pasting…)! On the other side, if you already know these technologies, why not validate your skills by doing those challenges. At the end, we never use all the features of a technology, so you may come across something you don’t know…

Is the solution you’ll give us is the ultimate one?

Of course not! I’ll give you a working solution, and a solution that makes the most sense with my actual knowledge. My code will be tested with the HTML W3c validator, CSS W3C validator, and JSLint (note that for JSLint you’ll never have a perfect validation with my code as I ignore some of the errors it’s reporting). I will also test the code on the latest releases (no nightly builds) of Firefox, Chrome, Internet Explorer, Safari, and Opera if the features are available in all those browsers. Last, but not least, my code will be available on GitHub, and you'll have a live version to play with it.

I’m the kind of person who think that there is always space for improvement, so I’ll be happy to discuss my solution if you don’t agree with it, or if you think there is a more efficient way to do it.

I find those challenges amazing, can I help?

There are three ways you can help:

1. Participate! That sound weird, but if nobody is participating in the challenge, I won’t do them as the goal is to help people learn about the technology. By participating, you’ll show me that there is value in what I’m doing (other way, I’ll take this time to do something else);
2. Suggest challenges as it will help me to find interesting challenges to motivate people to learn about these technologies;
3. Promote the challenges by sharing them with your network. Whether it’s on Twitter, Facebook, LinkedIn, to a friend by emails, to the co-worker at work, in your user groups, sharing these challenges will help the first two points: participation, and more suggestions. At the end, it will help a bigger goal than these two one, it will help promote the standard, and good practice on the Internet, and that, is an amazing way to help the Web go forward.

Where can I find older challenges?

You can look on this blog for the tag “HTML5 challenges” and you’ll see all posts related to those: the introduction one, the challenges, and the solutions.

1. Canvas & File API (the solution)