In an international competition for web development our Technical Director from inUse, Emil Björklund, came out on top. He won the Best Overall prize in 10 K Apart.
– It feels great! And slightly surreal, says Emil Björklund.
Next From Business to Buttons Conference – 27 April!
”Morse code, and the Telegraph, were simple in design, but changed the world. The same goes for the Web.”. That's how Emil Björklund starts to describe his winning contribution in the developer contest 10K Apart – where you should build a compelling web experience in just 10 kilobytes.
– It feels great! And slightly surreal, I really really didn’t expect to win. I knew for a while before the official announcement, but I still told almost no-one about it because I was afraid it was all a horrible misunderstanding and I didn’t actually win, says Emil Björklund.
The mission was to build a compelling web experience that could be delivered in 10 kilobytes and work without JavaScript. You were allowed to load more resources from that initial page, but if those resources fail to load, your page must still be usable and deliver the core experience. Björklund made the contribution a Dashingly Responsive Web Page.
– There were several categories with varying maximum points. I think it was judged on technical difficulty, design, use of progressive enhancement, performance and accessibility. There were several awards and an Audience Choice award, but I somehow managed to score the highest overall with the judges.
His idea had to do with old fashioned stuff.
Morse code, responsive down to 0 pixels… What’s that about?
– So my code submission, Dashingly Responsive is a straight up web page, but with a twist. To quote from my original submission description:
Like Morse code and Telegraphy in the 19th century, a simple technology changed the world when the Web came along. Going further down the stack, TCP/IP is said to be ”simple enough that you can run it over two cans and a piece of string”. Similarly, a web page is, at its simplest, just a piece of text sent down a wire. Riffing on that, this page converts itself to Morse code, both visually and using the Web Audio API. There's also a fair bit of CSS play going on.
– The idea of the page is to emphasize the different layers of what the web is, sort of an in-joke about Responsive Web Design and the competition itself. The page has a text about how it works, and the page is of course responsive. But if you should have an extraordinarily narrow screen, the page will convert itself to dots and dashes – Morse code – displayed vertically down the page. And even if you don’t have a screen at all, or a 0 pixels wide screen, it can convert that Morse code to audio.
– That way, it illustrates that a web site starts out with a simple document metaphor, but can be made into something more with the layers of code we put on top of that. It’s when we mistake the web for a graphical medium or an app platform that we go wrong, and end up with the average web page weighing in at 2.5MB – 384 times larger than my page, which clocks in at around 6.4KB, in total.
– I also had a lot of fun with CSS trickery, using a theme of dots and dashes in the visual design. One example is that the horizontal dividers in the text spell out ”www” in morse code.
It's the organizer of the popular conferences on several locations in the US, An Event Apart (together with Microsoft Edge), who is the organizer of the contest. Aside from the the honour and glory, and some money, the winner receives a ticket for the conference.
– I’ve been wanting to attend An Event Apart for a long time, I have heard so many good things about it. Generally, the quality of speakers is super high, and it seems like one of those events where you really get a chance to meet and talk with other interesting people. That’s the most important thing about going to a conference for me.
The jury was stunned. “Each time I looked I saw another small detail that impressed me, and the use of simple technology in a creative way seemed to sum up the competition for me”, was one comment. ”It demonstrated a mastery of front-end design and development we should all aspire to", was another.
So the idea is that Morse code can revolutionize web pages in the future, can it?
– Haha, no, I think that specific technique was a one-off. But I try to build sites using the same principles that this project used every day.
Have you had time to celebrate the win?
– Yes, I went out with some friends yesterday so today is a bit slow… Good thing it’s Friday.
Next From Business to Buttons Conference – 27 April!
Emil Björklund has also recently released the book CSS Mastery. A perfect guide for those who know a little of CSS but wants to become experts.