Category Archives: Other

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.

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.

jQueryなしのTwitter Bootstrap

Twitter Bootstrap web page私はTwitter Bootstrapを使えば使うほど好きになっています。ただ何かを表示したり隠したりするような単純な操作にもjQueryが必要なのは残念です。jQueryは素晴らしいライブラリですが、サイトにとって利点がなければ無駄になり、Webページに不要なバイト数を増やすことになります。対策として、Bootstrap専用の代替的な軽量スクリプトを作ってみました。

ダウンロードはこちら

このスクリプトを使うには、以下のように、jQueryやBootstrapプラグインスクリプトの代わりに、Webページ上に(できれば下のところに)ただ置いておくだけです。

    ...
    <script src="bootstrap-without-jquery.min.js"></script>
  </body>
</html>

ページを読み込む時間が速くなるからパフォーマンスが改善されるというメリットがあります。当然ながらjQueryやBootstrapプラグインでできることすべてが可能になるわけではありませんが、以下の機能であればこれで十分でしょう。

  • ドロップダウンメニューの動作
  • 閉じることができるアラートボックス
  • いわゆる「ハンバーガー」ボタンでトリガーされる、スライド式ナビゲーションメニュー

Internet Explorer 8など、様々なモバイル、デスクトップのブラウザで試しましたが、動作するかしないかに関するレポートをいただければありがたく存じます。JavaScriptを必要とするBootstrapの構成要素が別にあるかもしれませんので、需要があれば (あるいはプルリクエストを送っていただくこともできます)、サポートさせていただきます。ブラウザサポートに関する詳細などはGitHubのページにあります: github.com/tagawa/bootstrap-without-jquery

テスト用のデモページも用意しました。いつでも、フィードバック大歓迎です!

Twitter Bootstrap without jQuery

Twitter Bootstrap web pageThe more I use Twitter Bootstrap, the more I like it. The only thing that puts me off is needing jQuery for a few simple interactions such as hiding and displaying elements. jQuery’s an excellent library but if a site doesn’t make full use of it, it can be overkill, adding unnecessary bytes to your pages. As a replacement, I tried to make a lightweight alternative script specifically for Bootstrap.

Download it here

To use the script just put it in your pages, preferably at the bottom, instead of jQuery and the Bootstrap plugin scripts, like so:

    ...
    <script src="bootstrap-without-jquery.min.js"></script>
  </body>
</html>

The benefit is better performance thanks to faster page load times. It obviously doesn’t do everything that jQuery and the Bootstrap plugins do but it should be enough if you just want:

  • working dropdown menus;
  • dismissable alert boxes;
  • a collapsible navigation menu triggered by the “hamburger” button.

I tested it on several mobile and desktop browsers, including IE 8, but I’d appreciate further reports of where it does or doesn’t work. There may also be other Bootstrap components that require JavaScript so I can add support for those if there’s demand (or you can send a pull request). The GitHub page is here along with more details of browser support: github.com/tagawa/bootstrap-without-jquery

I’ve also prepared a simple Bootstrap demo page for testing. As always, feedback is welcome!

Update:

There’s also a good resource encouraging developers to use plain JavaScript where jQuery may not be necessary, with JavaScript code snippets that correspond to jQuery methods: YouMightNotNeedjQuery.com

Examples of digital signage (videos)

Digital signage is a form of electronic display that shows television programming, menus, information, advertising and other messages.

Digital signage is a growing industry around the world but there is particularly strong interest here in Japan and neighbouring South Korea. Most recently, local businesses are focussing more and more on digital signage built with web technologies. However there seems to be some concern that existing standards (HTML5, CSS3, SVG, etc.) don’t address all the issues for web-based signage to really take off. For this reason, the Web-based Signage Business Group was set up as part of the W3C community.

In order to fully understand what’s required before more specific action is taken, use-cases and real-world examples are necessary. It’s often underestimated just how varied digital signage can be so here I’d like to show a few interesting examples from the Far East.

Funky-sized 360-degree display

The resolution of this display in Hikarie, Tokyo, is about 4,000 x 100 pixels. It makes designing for mobile devices look like child’s play! The content is mostly informational consisting of a floor guide, event information, a horizontal clock, etc. shown repeatedly. The back-to-back displays are sometimes in sync and sometimes show differing content.

Side-by-side advertising and info displays

Also from Tokyo is this contrast of digital signage usage. The left-hand screen shows a selection of 15-second and 30-second adverts based on a pre-determined order and frequency. The right-hand screen shows information about the train which is shown in timed mini-loops e.g. Japanese first, English second, but these are interrupted by external triggers such as the train arriving at a station.

Transparent product display

I couldn’t resist this South Korean example — it’s so cool! It was spotted by Rich Tibbett in Seoul and although it seems to be presumably a simple timed loop, it has a few points of interest. Obviously the transparent screen is one, but also the use of a skewed video whose timing has to be perfectly synchronised with the accompanying animation.

Addition: Vending machine with signage

As suggested by Karl in the comments, here’s a digital vending machine with a discreet built-in camera just above the screen. Normally it operates as a sign showing video adverts but when it detects a person in front of it, the video overlays disappear and it operates as a regular, albeit animated, vending machine. I did hear an unnerving rumour that it has the ability to detect characteristics (a person’s rough age, gender, etc.) to customise how it displays content but I have no solid information.

If you know of other interesting examples, feel free to leave a link in the comments section.

Accessible child theme for WordPress Twenty Twelve

Quick summary: I made an accessible child theme for the default WordPress Twenty Twelve theme. Read on for details.

Accessibility in WordPress

I recently switched my blog over to WordPress — self-hosted to give me more control. So far I’m impressed, especially with the number of plugins and themes available, but I was a bit surprised at the lack of themes that claim to be accessible. At the time of writing there are 1,741 themes in the official repository, only 5 of which appear when searching for “accessible” or “accessibility”. Not good. But there are some positive signs:

It was the write-up by Rian that helped me make a similar child theme for Twenty Twelve, the current default WordPress theme. Out of the box, it seems pretty good already and a big improvement over previous versions, but I felt there were a few tweaks that could be made. Below is a summary of what I’ve changed or overwritten.

Child theme changes

style.css

  • Force underline on links but remove links on hover/focus (to clearly indicate a selected element).
  • Increase contrast in buttons, links and other text (for low-vision users and situations such as outdoors on a sunny day).
  • Remove automatic hyphenation (to avoid strange pronunciation with screen readers).

header.php

  • Remove link around the site’s title and banner image when front page is viewed.
  • Only show the description heading if the site description has been set.

content.php

  • Change headings in post lists from <h1> to <h2>.

footer.php

  • Add a “return to top of page” link in the footer.

Accessible OneTwo ThemeI’m not an accessibility expert but I think (hope!) these changes improve the browsing experience for all users. The theme itself is available for download from GitHub where I’d love to receive suggestions for improvements, or alternatively in the comments below. Incidentally it’s also been submitted to the WordPress theme repository as Accessible OneTwo so hopefully will be available to a wider audience in future.

How to convert videos to WebM with FFmpeg/AVConv

After lots of trial and error each time I convert a video to WebM, I finally got around to posting this so I don’t forget next time. In a nutshell, here’s the conversion command that works for me:

avconv -i myvideo.mp4 -acodec libvorbis -aq 5 -ac 2 -qmax 25 -threads 2 myvideo.webm

What is this doing? Let’s go through it bit by bit. Assuming we have a video called myvideo.mp4, the simplest way to convert to WebM is with this little line:

avconv -i myvideo.mp4 myvideo.webm

Easy, but the quality will likely be rubbish hence the use of a few flags. The flags can be divided into three sorts: audio, video and the transcoding itself.

Audio flags

FFmpeg/AVConv outputConcentrating on the audio first, we should specify the audio codec which for WebM is Ogg Vorbis: -acodec libvorbis

In later versions the audio codec is Ogg Vorbis by default but personally I specify it just in case.

The quality can be adjusted with the -aq flag from -1 to 10 with a higher number meaning better quality. I’ve found 4 or 5 to be more than adequate.

The number of channels, e.g. mono (1) and stereo (2), is controlled with the -ac flag.

Video flags

Moving on to the video quality and thankfully it’s nice and simple. Like the audio, we can specify a quality level. With the libvpx library used for WebM, this is actually a quantization level, set with the -qmin and -qmax flags ranging from 0 to 51. In my tests, setting qmin makes no difference so I ignore it. Setting qmax effectively controls the maximum compression that will be applied to each frame. In other words, a higher qmax means higher compression, which results in lower quality and smaller file size. Obviously you should adjust this to whatever’s best for your circumstances, but I’ve found 25 to be a good starting point.

Note that with both the audio and video, setting flags for bitrate (-ab for audio, -b for video) makes little or no difference. Instead, setting quality flags indicates the use of a variable bitrate.

Transcoding flags

Finally, I tend to also use the -threads flag. This simply sets how many CPU threads to use when transcoding. If your PC has multiple cores then a higher number means faster processing but with less spare capacity for running other programs. Incidentally it’s also possible to do 2-pass encoding with WebM using the -pass flag.

FFmpeg naming confusion

Note that due to what seem to be political reasons, using the ffmpeg command in Ubuntu results in a sad message.

Was:

*** THIS PROGRAM IS DEPRECATED ***
This program is only provided for compatibility and will be removed in a future release. Please use avconv instead.

Now:

ffmpeg: command not found

It turns out that FFmpeg is very much alive, as is Libav (avconv), both with similar goals but with slightly different ways of doing it. I don’t follow the details and arguments but for practical purposes, using either the ffmpeg or avconv command is fine for converting videos to WebM with the above flags (at the time of writing). Of course, this may change eventually but for the sake of regular users, I hope not.

Unfortunately whatever FFmpeg/Libav disagreement there was has resulted in ffmpeg being removed from Ubuntu and possibly other Linux distros. For the transcoding commands in this post at least, the parameters are the same so if you have problems using avconv try with ffmpeg and vice versa.

Web API Design – a definitive guide

Cover of Web API Design book“Web API” is a confusing term. It can refer to interfaces to be implemented by web software such as browsers, for example the W3C geolocation API, etc. It can also refer to how a web service exposes its data, and it’s in this context that Brian Mulloy has written what I hope will become the bible of REST-based API design. His ebook, entitled Web API Design, is available for free (well, in return for your email address).

As web developers, we want APIs that are easily-understandable and consistent, resulting in less time reading documentation and more time experimenting and being pleasantly surprised that something just works.

At around 30 pages long it’s a quick read but gets straight to the point with concrete advice. Right from the start he emphasises a pragmatic rather than theoretically ideal approach — developers should be able to experiment with and learn the API without the documentation — and highlights good and bad examples from popular APIs. Here’s a quick summary of some of his recommendations.

  • Use two base URLs per resource, e.g. /dogs and /dogs/1234
  • Keep verbs out of your base URLs, unless the data is the result of an action, e.g. “calculate” or “translate”.
  • Use HTTP verbs (GET, POST, PUT, DELETE) to operate on the data.
  • For clients that don’t support this, make the method an optional parameter, e.g. /dogs/1234?method=delete
  • Use plural rather than singular nouns.
  • Use concrete rather than abstract names.
  • Put complexities after a question mark, e.g. /dogs?color=red&state=running
  • Be verbose but simple in your error messages, ideally linking to online docs.
  • For specific fields, us a comma-delimted list, e.g. /dogs?fields=name,color,location
  • Use “limit” and “offset” for pagination, e.g. /dogs?limit=25&offset=50
  • To specify formats, use the familiar dot notation, e.g. /dogs/1234.json
  • Use JSON as the default format, following JavaScript conventions for attribute names.
  • Use OAuth 2.0 for authentication.

There seems to be a relative lack of guidance in this field so this book has a good shot at becoming the go-to reference. The result of that would be more consistency between APIs and an easier life for website and app creators. Of course, differences in existing APIs will linger on because of the difficulty in upgrading them once released, but that’s one more reason why it’s important to base an API design on solid guidelines such as these in the first place.

Download the ebook here: offers.apigee.com/web-api-design-ebook/ (no affiliation)

Also, here are a couple of other good resources about designing RESTful APIs: