Author Archives: Daniel

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:

UPnP cheatsheet (and brief overview)

Printed out UPnP cheatsheetIn playing with UPnP and JavaScript (now possible thanks to the Network Service Discovery API), I’ve been trying to grasp how UPnP works and what’s possible with it. The potential of the technology is exciting but there seems to be a lack of basic, easy-to-digest information. So here you go — a simple cheatsheet for the main services of UPnP, concentrating on the audio/video subset (UPnP A/V).

Download: UPnP A/V Cheatsheet [PDF]

And whilst I’m at it, here’s the overall structure of UPnP in a nutshell:

  • UPnP contains ten categories for devices
  • Each device offers one or more services
  • Each service implements various functions
  • Each function requires zero or more parameters

For example, a PC could have a media server installed which would expose a ContentDirectory service, containing functions such as Browse and Search. Similarly, a TV could expose an AVTransport service (to play media) and a RenderingControl service (to control the device itself).

Resources

Song: Social Network B


I want to introduce my child to online social networks but how best to explain some of the risks involved? Thought I’d start with a song…

This is a rewrite of the traditional folk song “Sloop John B”, famously covered by the Beach Boys (www.youtube.com/watch?v=nSAoEf1Ib58) although Cap’n Tom Jones deserves a mention for his singing attire: www.youtube.com/watch?v=fyQeHavCfPg

Video URL (with captions): Social Network B song

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

We joined a social network.
Me and my best friend, Bert.
Around that walled garden
we did roam.
Surfing all night.
Got into a fight.
I had so much fun,
I don’t wanna go home.

I got a message from Jen,
my girlfriend from way back when,
but now she just won’t
leave me alone.
What did I say?
Why does she haunt me this way?
She’s nice ‘n’ all but
I wish she’d go home.

Then there’s that guy named Ray.
He took me to a crazy partay
and he took lots of photos
with his cell phone.
Now everyone’s seen
me doing that… thing.
I’m tired of getting laughed at.
I wanna go home.

Then there’s those men in black.
They won’t get off my back,
ever since they gave me
that emergency loan.
How do they know
every place that I go?
I’m getting kinda scared now.
I gotta go home.

But now my whole family
has signed up, just like me.
It’s the only way
I keep in touch with my mom.
It’s part of our lives.
How did we ever survive?
Now we’re in the network,
we’re not going home.
Once you’re in the network,
you can never go home.

Static social media “share” buttons without JavaScript

Hand-shaped cursorSometimes you want a “share” link in your website or email newsletter but you don’t want the extra JavaScript and iframes that come with the standard social media buttons. Here’s how to do it, giving your users faster page loading times and a bit more privacy.

Twitter

Firstly Twitter, who like to make it easy for us. It’s possible to use twitter.com/home or twitter.com/share but the most useful sharing URL is this:

https://twitter.com/intent/tweet?
  • Parameters: url, text
  • Encode parameters? Yes

The difference is that the user will see a friendly “Share a link with your followers” heading rather than the usual “What’s happening?”. Not only that, but the text within the Tweet is highlighted to make it immediately editable. Nice touch.

Example

<a href="https://twitter.com/intent/tweet?text=Static%20social%20media%20%22share%22%20buttons&url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Twitter
</a>

Try it out here: Twitter buttonShare on Twitter

Documentation


Facebook

Despite having an official “Share” button in the past, Facebook have now deprecated it in favour of the ubiquitous “Like” button. For backwards compatibility, however, the “Share” URL still works:

https://www.facebook.com/sharer/sharer.php?
  • Parameters: u (URL)
  • Encode parameters? Yes

Example

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Facebook
</a>

Try it out here: Facebook buttonShare on Facebook

Documentation


LinkedIn

Apparently sharing links on LinkedIn is very good for SEO so this could be an important one to include. The base URL is:

http://www.linkedin.com/shareArticle?
  • Parameters: url, title, summary
  • Encode parameters? Yes

Example

<a href="http://www.linkedin.com/shareArticle?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&title=Static%20social%20media%20%22share%22%20buttons&summary=How%20to%20build%20social%20media%20sharing%20links%20without%20JavaScript%20and%20iframes.">
    Share on LinkedIn
</a>

Try it out here: LinkedIn buttonShare on LinkedIn

Documentation


Pinterest

The relatively new kid on the block is Pinterest. Note that for it to work properly, you should include the media parameter and point it to an image at least 750 pixels wide. The base URL is:

http://pinterest.com/pin/create/button/?
  • Parameters: url, description, media
  • Encode parameters? Yes

Example

<a href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&description=Static%20social%20media%20%22share%22%20buttons&media=http%3a%2f%2fdaniemon.com%2fblog%2fwp-content%2fuploads%2f2012%2f09%2fstatic-social-media-buttons.png">
    Share on Pinterest
</a>

Try it out here: Pinterest buttonShare on Pinterest

Documentation


Google+

Let’s not forget Google who have a bookmarking service, however this has now largely been usurped by Google+ which uses this URL:

https://plus.google.com/share?
  • Parameters: url, hl (human language, e.g. “en”, “ja”, etc. – optional)
  • Encode parameters? Yes

Example

<a href="https://plus.google.com/share?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Google+
</a>

Try it out here: Google+ buttonShare on Google+

Documentation


Hatena Bookmarks

Hatena Bookmarks is a popular bookmarking site in Japan, particularly among the tech crowd. It uses this URL:

http://b.hatena.ne.jp/entry/
  • Parameters: None – just append your target URL
  • Encode parameters? No

Example

<a href="http://b.hatena.ne.jp/entry/http://daniemon.com/blog/static-social-media-share-buttons/">
    Share on Hatena Bookmarks
</a>

Try it out here: Hatena Bookmarks buttonShare on Hatena Bookmarks

Documentation

Other similar resources

How to wipe a hard drive with Linux

An opened hard driveI have an old hard drive I want to throw away but I don’t want any remaining photos, financial documents or other personal data getting in the wrong hands. In other words, I want to completely and securely wipe the drive. With Linux there are several options and after a bit of research, here’s what I consider the best way.

Firstly, programs such as fdisk, cfdisk or GParted are not sufficient to fully erase data—they just edit a drive’s partition table. What we want is something more thorough. The standard way to do this is to overwrite data on a drive with randomly-generated data. There are several command-line programs to do this (see below for a comparison) but I’ve chosen shred. Its default is three passes (overwriting all data three times) which I’m comfortable with, but you can specify more if you like, e.g. -p 10 for 10 passes.

WARNING! You don’t need me to tell you that accidentally erasing the wrong data could cause you big problems. Please be careful and check, then double-check each command and especially drive name before pressing Enter.

Step 1.
Plug in the hard drive and find its name (sdb, sdc, etc.). Use

dmesg

and look for something like sdb: sdb1

Step 2.
Unmount each partition of the drive (sdb1, sdb2, etc.), e.g.

sudo umount /dev/sdb1

Step 3.
Type the following command for writing random data to the drive three times (default). DON’T PRESS ENTER.

sudo shred -f -v /dev/[your drive name]

Step 4.
Double-check that the drive you’ve specified is the correct one to wipe. OK, now you can press Enter.

Programs for deleting data

badblocks

Purpose: “Search a device for bad blocks”

sudo badblocks -w -t random -p 1 -s /dev/sdb

Summary: A single (-p 1) overwrite (-w) with random data (-t random), showing progress (-s).
Time for 6GB: 16 mins 20 secs

dd

Purpose: “Convert and copy a file”
Notes: You can’t see your progress or specify multiple passes.
Got stuck with faulty drive.

sudo dd if=/dev/urandom of=/dev/sdb

Summary: A single overwrite with random data.
Time for 6GB: 1 hr 5 mins

shred

Purpose: “Overwrite a file to hide its contents, and optionally delete it”

sudo shred -f -v -n 1 /dev/sdb

Summary: Force (-f) a single (-n 1) overwrite with random data, showing progress (-v).
Time for 6GB: 10 mins 6 secs

wipe

Purpose: “Securely erase files from magnetic media”
Notes: Not in default Ubuntu (sudo apt-get install wipe). After running this, I had a few errors running the other commands on the same drive.

sudo wipe -kD -i -q -Q 1 /dev/sdb

Summary: A single (-q -Q 1) overwrite with random data, showing progress (-i), keeping the device’s inode intact (-kD).
Time for 6GB: 9 mins 37 secs

Further information

Smashing a hard disk with a hammerWiping the drive as explained above is good enough for most purposes but forensic experts have amazing skills and tools at their disposal. It may theoretically still be possible to access some of your deleted data. The most secure way to prevent people accessing any data left on your drive is physically drilling, crushing and breaking up the drive, then disposing of the parts in various locations. And encrypting the drive in the first place with TrueCrypt, for example, is also a good idea.

Related links

Readability for Android

So you want Readability bookmarklets on your Android device, huh? Not so fast! At the time of writing, it’s not possible to access the official Readability bookmarklets on Android but there is a workaround. Here’s how to do it in three easy steps.

Step 1: Copy the Readability script

In Opera Mobile or Mini (I don’t think this works in other browsers), select and copy the code below:

javascript:((function()%7Bwindow.baseUrl%3D'http%3A//www.readability.com'%3Bwindow.readabilityToken%3D''%3Bvar%20s%3Ddocument.createElement('script')%3Bs.setAttribute('type'%2C'text/javascript')%3Bs.setAttribute('charset'%2C'UTF-8')%3Bs.setAttribute('src'%2CbaseUrl%2B'/bookmarklet/read.js')%3Bdocument.documentElement.appendChild(s)%3B%7D)())

Step 2: Create a bookmark

Open the Bookmarks menu and click on the Add button (don’t click Save yet).

Step 3: Edit the bookmark

Screenshot of Opera Mobile Readability bookmarklet

  1. Change the title to Readability (or something similar).
  2. Delete the address and paste in the code copied from above.
  3. Click Save.

Voila! You should now be able to go to any article or blog post, click the Readability bookmarklet and enjoy a better reading experience.