The Twelescreen code

In my previous post I wrote about the inspiration for Twelescreen — wanting to create an overbearing, Big Brother-style screen for displaying Tweets by the government and security forces. As a result I’ve also made a self-hosted, easily customisable, themeable, one-Tweet-at-a-time, full-screen, web-based Twitter client.

Initially this whole thing was a hasty single-word joke. But I soon decided I wanted to make the code more re-usable, a decision that multiplied development time quite a bit. I started fiddling with it five months ago and it’s eaten up a lot of my free time since.

The result is the code on GitHub which is flexible enough to create a similar big-screen Twitter experience for much less scary or satirical uses. Assuming you can get a Node.js application up and running which I appreciate is, statistically, very unlikely.

But still, once over that hurdle, there is plenty that can be customised without altering any of the code. From the extensive README comes this list of features:

Many categories of Twitter accounts can be created. Each category has its own URL.

Each category can be included on the top-level menu, or omitted.

New themes can be made with CSS and, optionally, HTML templates.

Themes can be applied to all, some or individual categories, and the menu.

Google Web Fonts can be used.

A Google Analytics ID can be easily added.

Customisable introductory texts on the menu page.

Images attached to Tweets using Twitter are displayed in the slideshow.

A list of “greeting” messages can be set. These are displayed before newly-arrived Tweets.

A list of “slogan” messages can be set. These are displayed randomly between Tweets.

Options for each category include:

Show on the menu page, or hide it.

Number of Tweets rotated through.

Duration each Tweet is displayed.

Duration of the fade between each Tweet.

List of greeting messages.

List of slogan messages.

Chance of a slogan appearing.

Most of that can be changed by altering a single configuration file. When writing code for use by others I really enjoy trying to work out what kind of things they might want to customise, and how to make that possible in the simplest manner.

Twelescreen comes with two themes (CSS files) — the ‘Big Brother’ one you may now be familiar with (above) and the more practical default theme, seen on this example page (and below) showing public Tweets from my RIG colleagues, whose Dextr is an obvious precursor.

If you’re able, then give the code a whirl. Feel free to send me suggestions, whether for features or ways to improve what it currently does. It’s my first Node application so I’ve learned a lot by doing this.

Not least, I’ve been reminded how much longer it takes to make something with as few rough edges as possible and that has code suitable for other people to use. I estimate the whole project has taken me 15-20 days of work, even though I had something quite similar up and running very early on in that process. Designing by making, refining and polishing, refactoring nasty code, re-working the configuration, writing documentation… it all takes so long, even after the first rough attempt is basically working.

But here we are at last. It seems reasonably stable, but isn’t without problems, not least how best to load Google Web Fonts, which often seem to hold up page loading entirely. I’m sure there are other things that could be done to make it work better.

If you can get it running, and especially if you do anything particularly nice or interesting with it, do let me know!

Updated 5 July 2018: Changed links to point to twelescreen.gyford.com instead of twelescreen.com, which I let expire.