Making responsive SVG graphs

One of the (many) nice things about Twitter’s Bootstrap is its responsive layout. I’m using it for a new project alongside some D3, and I’d really like the graphs to resize with the grid. Unfortunately SVG elements don’t seem particularly amenable to this, and all the D3 demos I’ve seen have had a fixed width and height.

Building a responsive graph

A responsive SVG graph should behave like any other styled element

  • Expand to fill the containing element (if required)
  • Keep line widths and text the same size and prevent distortion, no matter how big the graph becomes

Keep reading >

Using D3 for realtime webserver stats

I wanted to learn a bit of D3, so I made a small web app that shows (nearly) realtime webserver statistics as pretty graphs. Here’s a demo for my server and a setup guide.

Source on Github Source on Github
(You need both, but the first will get the second via NPM.)

Client code

MediaTemple were nice enough to introduce an API that provides a load of stats about what your server is doing some time ago. This is the same info that you can see in the server status bit of the account centre. Unfortunately the interface there is a bit clunky and it also logs you out (sensibly) after a few minutes’ inactivity.

Inspired by some of the really cool stuff Mike Bostock has done with D3, (mt) Stats gives you the same info with a (hopefully) nicer interface, and maybe even doing quite well with Tufte’s data-ink ratio. You can add as many graphs as you like (if your CPU can take it at least), move them around by dragging and adjust the interval over which stats are shown with the range slider. Keep reading >

Sending a regex via JSON in JavaScript

I recently wrote some code to change post titles into slugs (permalinks). Blogs like WordPress clamp down quite hard on the symbols allowed in a post slug, e.g. swapping spaces for dashes and stripping most ASCII non-alphanumeric characters. Most of these transformations can be tackled with some simple regular expressions (and one toLowerCase), but removing diacritics from letters requires a bit more work.

Luckily I found a nice function to help me (updated here). The function contains a big array of basic glyphs (and digraphs, trigraphs, etc.) and regexes of the letter with diacritical marks / Unicode di- or trigraph, e.g.

{ "base": "b", "letters": /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g },

I needed this array on the server (for storing stuff in the database) and on the client (to give snappy performance), but, as it’s quite large, I wanted to wait until the page had loaded before I requested it, which meant using JSON. Keep reading >

MixCloud RSS Converter in Node.js

Continuing my love affair with Node.js, I made a MixCloud to RSS converter last weekend. Just paste in the MixCloud account URL or name you want and it’ll give you an RSS URL in return.

MixCloud RSS Converter

The source is also on GitHub if you want it.

The bit with some reminiscing you can probably skip

While at York, I was involved with (and ran) Breakz for quite a few years. Breakz is a music society that stages drum & bass, dubstep and electronic music events, and has brought some pretty major acts to York, including Chase & Status, Benga, Skream, Brookes Brothers and Ed Rush. Keep reading >

Node.js Video Gallery

A few months ago, I wrote a Metro-style video gallery with Ajax, infinite scrolling and other fun stuff. I’ve now rewritten it in Node.js, which was surprisingly cathartic after coding the PHP original.

There’s a load of bumf about the original PHP version here (mostly relevant) and some supplementary info about this version here, though probably the best thing to do is to try the demo site. Yay!

Source on GitHub Keep reading >

VidStreamer.js – a simple Node.js video streamer

I’ve been really keen to learn Node.js for a while now, so I decided to translate the video gallery I wrote a while ago into Node (nearly done!). At the back end, the video gallery uses xmoovStream Server (site currently dead) to stream the videos to the popular JW Player (I used Flash videos as I wanted to support bitrate switching).

As using a LAMP stack to support a Node app seemed wrong, I wrote a simple JavaScript video streamer. Most of the requirements came from looking at how xmoovStream Server works.

  • Supports http pseudostreaming
  • Streams Flash video and can resume streams
  • Streams other video and file formats and can resume these streams too
  • Works with JW Player’s bitrate switching

Source on GitHub Keep reading >

Serving up random-but-consistent sample videos

Need to serve up some sample images or videos that are apparently random, but remain consistent each time you show them?

Download source

Update: this is also part of the Node.js Video Streamer I made. Though not in PHP, obviously.

I recently uploaded a Video Gallery web app I’d made (demo, code download). Unfortunately I don’t have the real videos and pictures that it was supposed to use, so I thought I’d cut some clips from the silent-but-gorgeous They Call Us Animals music video footage. But the Video Gallery has about 300 different videos in the database, and I really didn’t want to make 900 sample clips (each one in 720p, 480p and 360p). So I made about 10, which seems enough to give a little variety.

But I couldn’t just serve up any video. Using the HTTP pseudostreaming support in JW Player, the site lets users change video sizes while they’re watching, and the player will switch to a different resolution source file if one is available to improve the viewing experience. It looks good, but the effect was rather spoiled when the video selector returned a higher resolution version of a completely different clip.

So I wrote a little PHP script that would serve up an apparently random sample video consistently. Keep reading >