Category Archives: Other

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

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.

Free HTML5 template

Official HTML5 logoAfter being asked for a bit of advice by a colleague, I decided to make a very simple starter template for creating an HTML5 page. You can download it here:

Download HTML5 template

Notes

The tricky part is making sure it works in older browsers, for which I used the following two steps:

1. Normalize.css
(Click on “normalize.css” -> “Raw” to get the main CSS file.)

This makes all browsers behave the same way, including making relevant HTML5 elements into block elements. I recommend minifying the CSS to save bandwidth and time.

2. HTML5 Shim

This makes HTML5 elements styleable in old versions of Internet Explorer. Put it after all styles in <head>.

I’ve also added a viewport meta tag as follows which, in most cases, should improve the readability of the page on small screen devices.

<meta name="viewport" content="width=device-width, user-scalable=yes">

Going further

You might want to include Modernizr in your page, to enable you to detect support for newer CSS3 and JavaScript features.

For a much more full-featured template, there’s the popular HTML5 Boilerplate with a host of built-in goodies.

I’d love to hear if this is useful for you or if you have ideas for improvement – let me know in the comments below.

Incandescent bulbs and lumens

An incandescent bulb switched onI’ve been buying LED bulbs but am surprised at their brightness, or rather lack of. Manufacturers often write the equivalent in watts of incandescent bulbs on the packet but it turns out they tend to, er, lie. Quite a lot. With the current boom in LED bulbs, a trustworthy comparison table is what’s needed.

After a bit of searching, I found this helpful article published by the European Union:
Energy-saving lightbulbs – how to read the packaging

They confirm that measuring brightness in watts is now pretty much meaningless so instead, here are the lumen values you should look for when replacing your incandescent bulbs:

Incandescent bulb Lumens
25W 220-250
40W 410-470
60W 700-810
75W 920-1060
100W 1300-1530

Photo by Teodoro S Gruhl

List of JavaScript charting libraries

Illustration of some chart styles.I’m looking to make some pretty JavaScript charts and was wondering which library to use. I’ve used Flotr in an Opera extension and played around with gRaphaël in the past, but I want to do a more thorough comparison. First step is to list all the charting libraries I can find, so here it is…

Open source

Minimal or no dependencies

Require general-purpose library (e.g. jQuery)

Not open source

A few links for reference

Some are a little out-of-date but they’re still useful.

How to create a DVD-compatible video in PiTiVi

Screenshot of PiTiVi settingsI wanted to edit one of my geeky songs in PiTiVi and burn it to DVD. After searching around and trying a few things it seemed to work, so for reference, here’s how I did it.

Important: Save the PiTiVi project before you start, as I’ve found it to be prone to crashing.

  1. Once the video and audio are ready, click “Render project”
  2. Click “Choose File” and enter a filename with the extension .mpg
  3. Click “Modify” and select either 576p PAL or 480p NTSC depending on your region
  4. Change the export container to “FFmpeg MPEG-2 PS format (DVD VOB)”
  5. Change the audio codec to “FFmpeg ATSC A/52A (AC-3)”
  6. In the audio settings, change the Bit Rate to 256000
  7. The video codec should be fixed at “FFmpeg MPEG-2″
  8. In the video settings, change the Bit Rate to 6548000
  9. Click “OK”, then “Render”

You can now use a program such as Bombono to burn straight to DVD, or DeVeDe (slightly better, in my opinion) to create an ISO which you can burn to DVD with Brasero or other tool.

Incidentally, before rendering I used “noise removal” and “normalize” in Audacity to create a clean soundtrack. I imported this into PiTiVi and removed the original audio. Result: success!

Web Guru

♫ “I wanna be a billionaire…” ♫ Yeah, it’s not a bad song (http://www.youtube.com/watch?v=8aRor905cCw), but a billionaire? Is that all? I wanna be something a bit more… special.

Video URL (with captions): http://www.youtube.com/watch?v=jdgXT0wEuFU

Downloads

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

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

Lyrics

I wanna be a web guru,
so frickin’ much.
Someone even Zeldman couldn’t touch.

I wanna be on the cover of
Wired magazine,
smiling next to Sir Tim Berners Lee.

Oh every time I’d go online,
I’d fix another site’s design.
Another day, another interview.
Oh what, what I wouldn’t do,
to be a web guru.
To be a web guru.

Yeah, I would have a show like Diggnation, be a web sensation.
All the geeky girls could not resist the temptation.
Every newspaper would have a photo with my face on,
but not on the front page – in the technology section.

And I’d tell everybody how to make a website.
Using open standards is the only way to get it right.
And people would smile as I do my thing.
I’d give them something special, yeah, I’d start to sing!

Oh, every time I’d go online,
I’d fix another broken site.
Another day, another interview.
Oh what, what I wouldn’t do,
to be a web guru.
To be a web guru.

I wanna be a web guru,
so frickin’ much.

How to format PDFs for the Kindle

A PDF shown on a Kindle screenLike many, I love my Kindle. What a wonderful piece of technology. OK, the browser’s a bit slow and not powered by Opera but even so, having a world-wide 3G connection is fantastic, as is the great reading experience. However, some PDFs don’t look so good on that small screen. Here are some (almost) ideal settings that I’ve found make PDFs more readable for the Kindle.

I’ve tried to find the optimal PDF settings using lots of trial and error with OpenOffice/LibreOffice. The result is not perfect, in particular on pages with very few lines of text, so if you have any suggestions for improvement please leave a comment below. Anyway, enough talk…

Best PDF settings for the Kindle

Page size:

  9.1cm x 12.3cm

Page margins:

  Left: 1cm
  Right: 1cm
  Top: 1cm
  Bottom: 2cm

Font size:

  9pt (I recommend Georgia or other serif font)

Line spacing:

  120% (or 12.5pt)

There you go – nice and simple but it makes a big difference. Don’t forget to add page breaks for each new section or chapter. Of course, you can also add headers but I’d avoid footers because of the Kindle’s progress bar at the bottom of the screen.

And finally, here’s a pre-made template you can download and use: