Author Archives: Daniel

Song: On The Web ♪

The other day Joe Leech tweeted that he’s “thinking about writing a sit-com about web designers. Best friends Mark Down and Rich Snippets and their hilarious adventures.” Well a sitcom needs a cheesy theme tune so here’s my crack at writing a short song for it. Now all we need are a script, location, actors, production staff…

Go to the song’s SoundCloud page to download, leave a comment, etc.

Lyrics

Monday morning, climb the stairs and reach my desk.
Inbox going crazy with so many change requests.

Just another day at our web design agency
Without the clients this would surely be
The perfect industry

We spend hours in front of a screen
Fuelled by sandwiches and caffeine
But it's worth it 'cause across the globe, our work will soon be seen
On the web

There's a new frontier
On the web
Nice bunch of people here
On the web
You can join us too
On the web
Yeah, it must be true
It's on the web, on the web, on the web.
On the web.

Credits

The globe icon in the cover image is from the wonderful iconmonstr.com.

The Hackathon Song ♪

Coders and hackers, ready to change the world, and the hackathon is the perfect place. But things don’t always go as planned…

Downloads

Get high quality MP3 and iTunes versions of this song.
Also, free not-quite-so-high quality downloads here: MP3 (128 kbs) | OGG

Lyrics

It's so exciting watching my life unfurl,
At a time when geeks like me can change the world.
There's a hackathon tonight and if it works out alright
I can improve society, oh yes, improve society.

But a VC* will be there with money in his wallet.
If I pitch him like a boss I could get funding for my project.
A seven-figure sum and I'll be crushin' everyone
At the hackathon tonight. At the hackathon tonight.

There are prizes up for grabs if I can't get paid.
My phone is six months old, y'know I need to upgrade.
I can surely win some gadgets if I sweet-talk with judges
At the hackathon tonight. At the hackathon tonight.

Now the Red Bull's on the table and I'm ready to go.
I've got Sublime 5 open on my MacBook Pro.
I'll type at twenty words a minute, yeah, I'm really gonna kill it
At the hackathon tonight. At the hackathon tonight.

The buzzer's gone, we're underway. My chance to shine has come.
The cable mess around me shows I'm hacker number one.

The framework that I'm using's not in alpha yet.
I'm coding on the bleeding edge but starting to regret.

Just to set up the environment has taken so much time.
The clock is ticking down, I haven't written a single line.

Now the wifi's cutting out, I've got a dying battery,
I've got conflict after conflict in my Git repository.

The deadline is approaching and there's still a bug to mend
But my code is obfuscated. Will this nightmare never end?

My time ran out and I had to stop.
Instead of showing a demo I used Photoshop.
I tried to change society but it wasn't to be
At the hackathon tonight. At the hackathon tonight.
I know next time it'll be alright.

* VC: venture capitalist

Released under a Creative Commons (attribution, non-commercial) license and the video was made using Prezi.

Song: The Ballad of the Printer ♪

Ever been frustrated with a printer? Then this song’s for you…

Downloads

Get high quality MP3 and iTunes versions of this song.
Also, free not-quite-so-high quality downloads here: MP3 (128 kbs) | OGG

Lyrics

When we first met in the office
you were wearing bubble wrap, so full of promise.
Pages per minute, dots per inch.
A scanner as well and fax at a pinch.
We had such fun!

But it didn't last for ever, in fact not long at all.
Soon I was banging my head against the wall.
The good times were gone.

Now you've jammed again and I'll miss my deadline.
You've jammed again and this, this is the last time.
No more empty paper tray, I give up.
No more cheap ink on eBay, I give up.
The unnecessary blank page,
always such a waste and I give up.
I give up.
I've had enough.

We gave you a chance, the repairman came out.
He looked you all over and said there's no doubt,
this thing ain't broke.

But I won't change my mind, it's decided.
I'm so tired of trying to make you
print double-sided, it's a joke.

And now you've jammed again and I'll miss my deadline.
You've jammed again and this, this is the last time.
No more empty paper tray, I give up.
No more cheap ink on eBay, I give up.
The unnecessary blank page,
always such a waste and I give up.
I give up.

Maybe I'm crazy, you are just a machine.
Maybe I have been overreacting...

But now you've jammed again and I'll miss my deadline.
Yeah you've jammed again and this, this is the last time.
No more empty paper tray, I give up.
No more cheap ink on eBay, I give up.
The unnecessary blank page,
always such a waste and I give up.
I give up.

Oh and you've jammed again and I'll miss my deadline.
Can't believe that you've jammed again and this,
this is the very last time.
No more empty paper tray, I give up.
No more cheap ink on eBay, I give up.
The unnecessary blank page,
it's always such a waste and I give up.
I give up.
You're unplugged.

Released under a Creative Commons (attribution, non-commercial) license. The dot matrix printer audio sample is remixed from this video.

On Responsive Images — An interview with Dr. Stanley Dards

Wanting to serve different size images to different size screens is nothing new but at last the web has a practical solution for responsive images and art direction. Thanks to a lot of hard work by a lot of people, the Responsive Images Community Group has achieved the goal of seeing its API becoming a valuable building block of the web.

The <picture> element and its related srcset and other attributes are already being incorporated in Blink, Gecko and WebKit, have been included in the HTML5 validator and are part of the WHATWG HTML5 spec. A triumph of common sense and cooperation — hurrah!

To celebrate this, I was lucky enough to interview Dr. Stanley Dards, the wise old man of the web, to get his unique insight on the topic.

And here’s a good practical summary of responsive images and how you can use them today.

My two favourite (underused) HTML5 media features

Both of these are stable, simple and useful, yet they don’t seem to be used much in the wild (yet). Maybe it’s just lack of awareness so here are a couple of demos to hopefully generate a bit of interest.

Page Visibility API

Page Visibility API demo screenshot
In first place it has to be the Page Visibility API. Supported in all major desktop and mobile browsers, it’s a clever JavaScript API that knows when the user is a viewing a page or not. That sounds creepy and big brother-ish but fortunately it’s not. The API simply does two main things:

  1. Sets a document.hidden or document.visibilityState attribute saying whether the page is being viewed or not;
  2. Provides a visibilitychange event which fires when the page (i.e. its tab) is visible or hidden.

A use case that immediately springs to mind is silencing audio or video when switching to another tab, so here’s a example of it in action: Page Visibility API demo

playbackRate media attribute

Video playbackRate demo screenshot
A close second is the playbackRate attribute for HTML5 <audio> and <video> elements. The default value is 1 but you can change the rate on-the-fly, e.g. to 2 to double the playing speed. The cool thing is the audio pitch stays the same so human voices don’t go higher or lower and sound silly. Note that you can only set this with video.playbackRate — you can’t use video.setAttribute().

I’d love to see this added to the many HTML media players out there because it’s so useful to be able to slow down complex educational explanations or speech where the listener is a non-native speaker. Similarly, it’s helpful to speed up media when you’re in a rush or simply bored. Again, here’s an example of it in use: HTML5 playbackRate demo

So what d’ya say? Can we get a bit more love for these two simple but oh-so-useful features?

Paper wallet basics for bitcoin, dogecoin, etc.

Dogecoin paper wallet No matter how much you trust a digital currency online exchange or service, they are not subject to the same tough regulations as banks and won’t be bailed out by governments should something bad happen (at least not at the time of writing). If you hold an amount of bitcoin, dogecoin, whatever-coin and are planning on keeping it, you should store it safely and that means storing it offline in a paper wallet. It’s not hard but it can be confusing so here are a few basic facts to start you off.

What is a paper wallet?

A paper wallet is a piece of paper with two codes written on that can store digital currency offline. It’s like a postbox (mailbox) — anyone can put stuff in but only the person who has the key can get stuff out. Once you put your virtual coins in the wallet they are no longer accessible through the internet and thus are safe from hacking or online theft. The wallet can be physically stolen, however, so you should protect it as you would your cash or passport. Actually, the wallet doesn’t even have to be paper. It simply contains two codes which could alternatively be scribbled on the back of an envelope, painted on a plank of wood or artistically engraved into a block of stone.

How do I get a paper wallet?

For security, it’s recommended to make one yourself by printing it. The following two sites make it easy with a step-by-step guide and nice ready-to-print design:

For extra security, you should save the generator page and open it offline. Moolah also has a paper wallet generator for bitcoin, dogecoin and litecoin.

How to put coins in the wallet

The wallet will have a public address, which is the shorter of the two codes. Anyone can send coins to this address from an online service or a software wallet. You can check the balance at any time by searching for the address at dogechain.info.

How to get coins out of the wallet

The longer of the wallet’s two codes is your private key which you must keep secret. You enter this key into a software wallet to get (or import) your coins. If you’re using the default software wallet available from dogecoin.com then you go to “Help” -> “Debug window” -> “Console” and type in importprivkey [your-code] MyWallet and press Enter (you can replace “MyWallet” with any name you wish). Note that the first time you run this software wallet it will take several hours (and use up several gigabytes) to synchronise. A faster alternative, which will take just a few minutes, is available from WowDoge.org and is also free and open source. After you install and run it, go to File -> Import Paper Wallet and type in your private key.

FAQ

Can you only use a paper wallet once?
No, you can re-use it as often as you want.
Can you send coins more than once?
Yes, send coins to the public address as many times as you like.
Can you take part of the coins out?
No. Once you import the private key the whole amount is accessible.
Can you send the private key to an online wallet?
Not at the moment, and it’s not recommended anyway. Use a software wallet.
Can I have more than one copy of the wallet?
Yes. In fact, please do but remember to keep them all in safe and trustworthy locations.
Can I check how much is in the wallet?
Yes, go to dogechain.info and search for the public address (and wait a few minutes for it to be updated).
Do I have to import the private key each time I send coins to the paper wallet?
No, it’s updated automatically — once you import the private key there’s no need to do it again.
Can I re-use the private key in a different wallet once I’ve imported it?
Yes, so you can effectively have the same balance in two different wallets. However you can only send or transfer the coins once.
Can I use a single wallet for both bitcoin and dogecoin?
No, the codes (public address and private key) are different so you’ll need separate paper wallets.
Can I donate my wallet to someone else?
Sure. The coins are usable by whoever knows the private key written on the wallet so you could use it similar to a banknote or as a form of gift certificate.

Video howto

And finally, here’s a good video of how to create, fill and redeem your paper wallet.

Direct link: Dogecoin Paper Wallet Creation and Removal Tutorial

Blocking comment spam without captchas

Spam block imageImagine you want to leave a comment on a blog. Next, imagine you have to solve one of those captchas — a jumbled image of letters and numbers — to prove you’re human. Now imagine that you can’t see. You have to solve an audio captcha instead, such as the ones below. All you have to do is work out what the sequence of numbers is in each one:


MP3 | OGG


MP3 | OGG


MP3 | OGG

Rather tricky, huh? And these are genuine examples, not edited or downsampled.

Like most people, I needed a way to block spam on my WordPress blog but I refuse to use captchas. Spam is not my readers’ problem and as you can see, captchas are an extra hassle for everyone. Hard for people with good eyesight and even harder for people with poor or no eyesight (which includes all of us at some point in the future). Clearly we need to find a better alternative…

Question-and-answer captcha

These are of the form “what is two plus seven?” or “in which season do leaves fall?”. With text like this a blind person can hear it with software called a screen reader, which is good, but it has to be in a language they understand, which is not good. My blog is in English and Japanese so this a problem. There could be multiple answers, too; leaves can fall in the autumn or in the fall.

An extra form field hidden with CSS

This involves a field that should stay empty, possibly with a message saying “leave empty”. The idea is that spam bots will automatically fill in every field they come across but humans won’t. CSS can be used to hide the field from humans but it’s still “visible” to screen reader users or those with user styles applied (or none at all). Also, I tried this out for a while but in practice it wasn’t very effective — the spam bots are too smart.

Third-party spam-blocking service

Akismet is the most widely-used but there are others. They work by sending each comment to a remote server where it is analysed and classified as spam or genuine. This method seems to be effective but you have to register and possibly pay depending on your spam-blocking needs. It’s also not ideal in an environment where comments should be private.

IP address blacklists

Whether using your own list or somebody else’s, it’s easy to block comments from IP addresses that are known to send spam. I don’t like this for two reasons, though:

  • Several users can share a single IP address, for example through a VPN, or spammers could be sending comments from a machine they’ve secretly gained access to. I don’t want to penalise innocent users.
  • Looking through some of my spam comments I couldn’t see any from the same IP address so I doubt this approach would be very effective.

The answer?

Then I came across some spam bot research and a nice way to block them by Ned Batchelder (and probably others too). As most spam comments are sent rapidly from remote servers, we can add a unique token to our comment form and then check it’s still there when a comment is posted. I tried this and sure enough it blocked about two-thirds of spam — still room for improvement but it’s a good starting point. After much tweaking and experimenting I found that further analysis of a comment could catch most of the remaining spam, such as the delay between page load and posting, the ratio of text to links and the similarity of comment text to blog post text. Finally I’m satisfied. Out of the last 100 spam comments on this blog, 98 of them were detected and blocked by the filter. It’s not quite perfect and it may become less effective over time but I’m happy to make that compromise and keep my readers happy.

I’ve put this together into a spam-blocking plugin for WordPress and you can see the source code here. It’s designed to be invisible for users and maintenance-free for site owners. If you try it and like it, please give it a nice review in the WordPress directory so I can get that warm fuzzy feeling!

UPDATE

Since writing this I’ve seen spam increase again despite my plugin. I was going to try to update it but I’ve since discovered (thanks Otto) another WordPress plugin, Cookies for Comments, which is much better and works using a similar concept. This is my recommendation for all WordPress users.

The Internet, the Web and an old book

Cover of Running Linux bookNot long ago, I was explaining to a translator the difference between the Internet and the Web. Understandably they thought they were the same thing, as most people do.

Jump forward a few weeks and I’m packing boxes ready to move house, wondering what I can throw out. A dusty edition of Running Linux from 1996 — surely that can go, being so out-of-date? But flicking through it I noticed a chapter devoted to “The World Wide Web and Mail” and this little gem:

The WWW provides a single abstraction for the many kinds of information available from the Internet.

And there you have it. Much more succinct than my long-winded attempt at explaining the difference. But the part that made me smile was this:

The World Wide Web (WWW) is a relative newcomer to the Internet information hierarchy. The WWW project’s goal is to unite the many disparate services available on the Internet into a single, worldwide, multimedia, hypertext space. Although this may seem very abstract to you now, the WWW is best understood by using it.

A page from Running LinuxReading this 17 years after it was written, it almost seems quaint — it’s hard to imagine now that readers of a technical manual would not know what the Web is. And yet because the book assumes no previous knowledge it manages to teach a concept in a way that’s clear and stands the test of time.

Who says technical books lose their value as they get older?

How the Japanese communicate, part 1: Alphabet

This is the first of a few articles introducing the way Japanese people communicate with each other. They won’t teach you how to read, write or speak Japanese but they should hopefully be enlightening for people with no previous knowledge. Let’s kick off by looking at the alphabets (yes, plural) that Japanese people use.

Just a bunch of squiggles

Sumo flagsThe thing that attracted me to Japanese was not manga, anime or robots like many others. It was sumo wrestling and squiggles. On first sight, Japanese looked liked random squiggles but the thought of being able to glance at it and actually know what’s written seemed so cool. I’d be like a spy cracking a secret code! Even now, many years later, I still get a thrill from seeing a bunch of squiggles and understanding (most of) it.

Characters all the way down

It’s commonly said that Japanese has thousands of characters. Yep. But that’s only in one alphabet. There are two further alphabets with much fewer characters. Here’s how they break down:

Alphabet name No. of characters Style Example: kuruma (car)
Hiragana 48 curvy くるま
Katakana 48 angular クルマ
Kanji Up to 50,000 but 2,000-3,000 used daily fancy

Let’s look at these one by one.

Hiragana

Hiragana charactersJapan is still a pretty sexist country but 1,300 years ago it was much worse. Women were only allowed a lower level of education than men so consequently didn’t use the thousands of Chinese characters (kanji) that men did. Instead, they started using a cursive, simplified form of a handful of kanji to represent sounds and ignored their meaning. For instance, to write kumo (cloud), they could have used derivations of 久 (long time) and 毛 (hair, fur) which, over time, became the hiragana く (ku) and も (mo). This spread from ladies of the imperial court so that eventually men also used hiragana for unofficial writing. It’s now the foundation for reading and writing in modern Japan so if you only learn one Japanese alphabet, make it hiragana.

Katakana

Collectively known as kana, hiragana and katakana are phonetic alphabets and it’s no coincidence that they both have exactly the same number of characters (48) — they each have the same pronunciation and sometimes even look similar. For example the hiragana か (ka) is ヵ (ka) in katakana. This can be confusing but katakana are easy to spot because they look very angular whereas hiragana have curves. But why have two similar alphabets at all? Good question. Katakana developed at about the same time as hiragana but are now used when writing foreign words primarily from Western cultures, such as ロケット (roh-ke-tto) for rocket. They are also used for onomatopoeia and for adding emphasis or a “cool” factor. For example, the word for fashionable is オシャレ (o-sha-re) which, despite being an originally Japanese word, is often written in katakana to seem, well, fashionable.

Kanji

The two characters for the word kanji (漢字) mean “Chinese character” and that is indeed where they came from. Korean also uses various Chinese characters but because of a decree by Mao Zedong in the 1950s to simplify characters to improve literacy in China, modern Chinese characters (except in places such as Taiwan and Hong Kong) can be quite different to those found in Korean and Japanese.

Pronunciation is also a little complex. Some kanji retain their sound from Chinese, e.g. three (三) is pronounced san both in Mandarin Chinese and Japanese. Some have evolved slightly over the centuries, e.g. famous (有名) is you-ming in Mandarin Chinese and yuu-mei in Japanese. In other cases there seems to be no similarity. And as if that’s not enough, each kanji has at least two correct ways of pronouncing it in Japanese. More about that in a later article.

But despite these challenges and having thousands of them to learn, for me, kanji are the most beautiful aspect of the Japanese language both in their form and their logic. They range from very simple to very complex and can be works of art in themselves. Some are figurative, for example the character for tree (木) looks sort of like a tree, and some are clearly abstract. Characters can be combined to make a more complex character and can be chained together, most commonly in pairs, to make words. Let’s see a quick example of this.

  • The kanji for sun is 日 (pronounced hi, ka, nichi or ni).
  • We’ve already met the kanji for tree (木) but if we add a small line at the bottom to make 本 it now means root or origin (or book, incidentally).
  • If we chain these two kanji together we get 日本 (ni-hon) meaning origin of the sun, or land of the rising sun, i.e. Japan.
  • Adding the delightfully simple kanji for person (人) to the end gives us 日本人 (ni-hon-jin), meaning Japanese person.

Isn’t that beautiful?

FAQ

Is there an “alphabetical order” for hiragana and katakana?
Yes. The hiragana/katakana order sounds like this: a i u e o, ka ki ku ke ko, sa shi su se so, etc. Notice a pattern?
Is there an “alphabetical order” for kanji?
Not really. They can be ordered by their number of strokes (how many lines each one has) and there’s also a fixed order that children learn them in at school.
Speaking of which, at what age do children learn the alphabets?
Hiragana and katakana are learnt first at around age five or six. Children then spend several years learning the kanji — 1,006 in elementary school and another 1,130 in junior high and high school.
How do children learn them all? Are they geniuses?
Hah, they wish! They have to sit and memorise and test and moan just like kids all over the world.
Is there an ABC song equivalent?
Unfortunately not. Feel free to write one.

Resources

Photo of sumo flags by David Steadman: flickr.com/photos/90949166@N00/4274125768/
Photo of hiragana by Antonio González Tajuelo: flickr.com/photos/antoniotajuelo/4782563135

Joining the W3C!

W3C logoI’m delighted to announce that from today, I’m officially joining the W3C!

After four wonderful years at Opera it was difficult to think what could follow it but being able to contribute to the open web as part of the W3C and still remain in Japan is as close to a dream-come-true as it gets.

Keio University Shonan-Fujisawa campusI’m based at Keio University’s Shonan-Fujisawa campus (SFC) which is a haven of trees and ducks just outside Tokyo. The new colleagues I’ve met or spoken with both in Japan and scattered around the world have been super welcoming so I feel at home already.

The work I’ll concentrate on will be a mixture of communicating with developers, businesses and media about the W3C’s mission and progress, together with more focussed work coordinating with device-related groups such as web and TV, automotive, signage, etc.

There’s not much more to say other than a big thanks for the kind wishes and support I’ve received to get here. I hope I can do my bit to reinforce the web as The Platform For All.