The JavaScript Jungle

As part of the Brighton Digital Festival, we organised two “hack nights” at our ‘Async’ JavaScript meetup group. Async is an open community of JavaScript enthusiasts, with sessions twice a month at The Skiff in Brighton.

The “JavaScript Jungle” was part art project, part educational, part community builder. We set up the jungle as an environment within a single web page, and devised a simple way for people to add a creature to the jungle, animate it and let it interact with the environment and with other creatures. And the results were fantastic:

• See the jungle!
• Read the write-up
• Grab the code

Sponsoring Full Frontal

We’re super proud to be sponsoring the Full Frontal JavaScript conference for the third year running.

Held at the historic Duke of York’s Cinema in Brighton, the conference brings together some of the sharpest minds in web development for a day (and night) of insightful sessions.

If you’ll be there at the conference, do come and say hi.

International JavaScript Show n’ Tell

On 10th November 2011, the night before the Full Frontal conference, Async will be hosting an “International JavaScript Show n’ Tell”. It’s something of a cultural exchange, for us Brightonians and all our international cousins.

You can mark yourself as attending on Lanyrd, or add a comment to the Async blog post if you’d like to take a 5-minute speaking slot.

AlphaGov

I’ve been working with the inspirational team at AlphaGov (that should probably be “BetaGov” by now, but the name seems to have stuck). It’s the single-domain, future website for the Government of the United Kingdom, and it intends to greatly improve the experience for anyone who needs to interact with government services.

You know how, any time that you want to find the answer to some citizen-based question – like, “Am I eligible for XYZ?” or “What is the tax requirement for ABC?”, or anything else of that nature – then it can be quite a fragmented, convoluted experience. We produced a small JavaScript application to prototype a more intuitive solution to the problem.

The beta should be out in the next few months.

New tools for BrightWorks

We’ve rolled out some new features on BrightWorks, the task management app for volunteers that is powered by our open source engine, “Tasket”.

We’ve added a slew of admin features, and spruced up the icons. You can read more about the changes on the BrightWorks blog.

JSConf

Hooray! JSConf.eu in Berlin was fantastic yet again. We were there, soaking up its JavaScript-fuelled brilliance, learning amongst the many.

Dharmafly ♥ Node.js

We’ve been up to our eyeballs in edgy tech, working on an elegant Node.js back-end for an even more elegant HTML5 application. It’s all about real-time collaboration, baby…

More soon.

URL: dharmafly.com/hpwebos-hackday/demo/

I went along with Andrea and Sym to The Guardian to join a hack day for HP’s new TouchPad tablet – an interesting alternative to the iPad that uses web standard technologies for creating native mobile applications.

We won the competition(!) with a prototype app for exploring live web content, such as news, reviews and photos, about any place on earth. (See all the projects from the event).

The app we produced is part magazine, part feed reader and lets you swipe and slide the magazine in any direction to shift the geographical location that the magazine’s content represents.

You can check it out by playing with the browser-based demo. (Note, this is utterly non-optimised at the moment and has only been tested in Chrome and Firefox).

What it does

Starting at the reader’s current location (imagine that you are travelling or visiting somewhere new), a magazine-style page of content is pulled in for that place (e.g. a one mile square centred on Kings Cross, London). The reader can then slide the page in any of eight compass directions (north, east, south, west, nw, ne, sw, se), to re-centre the magazine at that new location (e.g. a one mile square centred on Hillingdon, London). Content is then pulled in for the location represented by the new position.

We’ve divided the world into a grid of cells, and the user can slide between any of the cells to view the content that they each contain. Content is linked through to its original source on the web, e.g. a travel article from The Guardian, or a note on the history of a place from Wikipedia.

We think that the format is ideally suited to a tablet like the TouchPad: location-aware, tactile navigation, relevant material for reading and exploring while on the move. The magazine might be used to explore content around a particular part of the world, or to follow each step along a journey.

Working in the same familiar way as the “slippy map” of Google Maps, we provide an intuitive mechanism for browsing, though we’ve never seen something quite like our app before.

Building for the TouchPad

Although there were some rough edges, all in all, it was a refreshing experience to develop for a mobile device that uses native web technologies (HTML, JavaScript and CSS). The app was put together in a normal desktop browser and, with the TouchPad connected via a USB cable, it was simply pushed down to the device for testing.

So the application is portable – it can work in a desktop or mobile browser, and it could be wrapped up to be used on other, non-web platforms like the iPhone, iPad and Android.

Technicalities

We used Node.js and Django Python outside of the device to pull in the content, process it and compile it down into JSON data, to be consumed by the app. The TouchPad’s operating system, webOS, actually allows apps to include JavaScript-based, Node.js services, to run a tiny server on each device. We might want to use this, for example, to continually process and serve content to the front-end.

We rolled our own JavaScript, opting to remove the considerable benefits that webOS provides in the form of Enyo, an app components framework. Without Enyo, we are left with just a basic WebKit shell, hooked into the operating system. We used iScroll, a touch-based scrolling library, to assist with user interactions.

Ideas for taking the project forward

We would love to extend the app to use a full global grid of content, allowing zooming in and out from hyperlocal to country-wide scales, introduce clumping of content into cities and notable locations, allow layers of content types that can be switched on or off, and include user-curated and user-generated material. The concept, its focus, the look and feel, and the app’s behaviour will all need some love and care, but we think it has potential.

What do you think? Would you use it?

Well, we’ve been procrastinating and deliberating for around a year and a half over publishing regular “Weeknotes“. That is, little bite size updates of what on earth we’ve been up to, from week to week.

And so, here we go, with our very first week (or was it two?) of reminiscences…

We started off with Prem & Matt working on a funding bid with a startup partner. The plan is to build a live data visualisation dashboard to assist with public health, amongst other things. Fingers crossed.

We’re super excited that BrightWorks has now launched. It’s a web app that helps a community of volunteers complete tiny tasks for charities. It was created with and for Bright One, the volunteer-run communications agency. In tandem, we’ve released the open source task engine, Tasket, which is the oomph behind BrightWorks. Read more about here: dharmafly.com/tasket

We’ve started on a few little titbits of work: JavaScript programming for a smartphone game with Matchbox Mobile (watch this space), and we’ve been planning the second round of development for a web/mobile app for NetDev to augment real-time communications and group collaboration, something of an exposition of the virtues of HTML5 (erm, watch this space!).

Pete started working with Dharmafly, initially helping with all those important but not urgent things that end up just aching to be done. Job number one: fix a bug that popped up in our old BBC Bangladesh River Journey web app. We needed to re-implement our use of an undocumented Google Maps feature (oh ho, always a risk, but it seemed so clever at the time) – a little hack to let us shift the map balloons outside of the actual map. Fixed. Sorted. Next task…

We’ve been migrating the source code of our older client projects from Unfuddle to GitHub. (You can follow our public projects at github.com/dharmafly. Some of my code libraries at github.com/premasagar will also be moved there). Lashings and lashings of git-svn and copy-paste-copy-paste along the way.

I went along to The Guardian to join a hack day for HP’s new TouchPad tablet (an interesting alternative to the iPad that uses web standard technologies for creating native apps). Working in a team with Andrea and Sym, we won the competition with a prototype app for exploring live web content (such as news, reviews and photos) about any place on earth.

It is part magazine, part feed reader and lets the reader swipe and slide the magazine in any direction to shift the geographical location that the magazine’s content represents. You can read more about it here or play with the browser-based demo.

That’s it. How did we do? Remember, you can follow our future posts in your feed reader, or by email or on Twitter.

URLs: brightworks.me & tasket.dharmafly.com

People like to help out with a good cause, but it can be difficult to find the time. What if, through the Web, we could gather enough people and bring them together to achieve something great?

At Dharmafly, we’ve been hard at work creating an open source tool called “Tasket“, which we hope will do just that. It’s a visually immersive web app, riffing off some of our data visualisation work, that engages volunteers in performing tiny tasks for a cause.

Essentially, it’s a “micro-volunteering” task management tool that lets people create tasks that need doing. Anyone can claim those tasks and Tasket helps everyone track the progress of the community.

BrightWorks: mobilising the crowd

We’ve designed Tasket with the not-for-profit company Bright One, who enable volunteers to work on projects for charities and third sector organisations. Bright One are an ethical Public Relations agency who provide a specialist, low-cost service for social good organisations, by connecting student volunteers with expert mentors. They help their volunteers to train and gain skills, and to work together as a cohesive team.

Using Tasket, we’ve built a website for Bright One called “BrightWorks“. The first version has just launched. You can explore it, click around (and even complete a task or two) at: brightworks.me

Bright One have only been going for two years, but in that time they have grown to be impressively successful – so much so that they have too many volunteers and too many charities wanting to get involved. It’s what you call “a nice problem to have”.

They needed a way to activate their volunteers more quickly, increase their capacity to work on more campaigns, and help everyone to stay informed and engaged with each other’s projects. BrightWorks now helps them to maximise their output from a dispersed, but eager, crowd of individuals.

The leaders of each project add information to the website, posting the highest priority tasks to be done. Anyone can offer to take on a task. And when a task is complete, it can be verified by its creator. Each volunteer accumulates a record of completed tasks (which in future might be used as part of a CV or resumé, or plugged into the volunteer’s professional profile on LinkedIn).

Gaming

There is a light layer of game dynamics incorporated into the web app. Projects rise and fall, as the weight of their tasks is unburdened by people completing them. Tasks can only take a maximum of four hours each, so a heavy task will need to be broken down into smaller ones. A volunteer can only take a limited number of tasks at one time, and there is a time limit for them to complete each one. (Tasket lets all these variables be configured for the requirements of its target website).

In future, we would love to add analytics, to show the performance of the community. We’d also like to expose the networks that emerge when people become connected via the projects that they contribute to. The tasks are a kind of currency; it’s actually the connections created between people that matter within the community.

Oh, and I’d also add to the wishlist: task notifications, alerts, messaging… and an app-load of other features.

Early feedback

What people have said so far:

The BrightWorks concept is genius because it fits right into a mould that we are all already comfortable with – microblogging. BrightWorks has taken a social networking concept and adapted it to the needs of non-profit organizations and volunteers – giving them the ideal meeting ground to actually get something done.

- The Next Web

I love the idea of a more loose visual representation of a collection of tasks. It’s an area that’s been vexing us for a while… how to say “I’ll do this” for any given component of a larger project. All around, one of the most interesting/ smart/ exciting microvolunteering apps that I’ve seen to date.

- Sparked.com

Really lovely concept, like the dashboard-style interface – makes it feel like a tool rather than a site. The sign up form is very slick and quick. Also big bonus points for the photo upload being one-step: no resizing, no restrictions. Just works.

- Oxfam GB Digital Manager

Sometimes, people are more than willing to volunteer yet have very little time to look for charities. And that is really frustrating. Well, if this new application manages to take off then that should stop being a problem.

- Killer Startups

Tasket for Carers: a prototype

Early on, before we started building Tasket, we presented a prototype for the concept at the Government’s “DotGovLabs Developer Weekend“, organised with Rewired State. Our frame of reference was a bit different – instead of dealing with projects, the main focus was on carers – people who live with and care for others.

There are 6 million carers in the UK (that’s one in ten). Many suffer from being overburdened, isolated and stressed. Poor health and depression can often result. We believe that, if carers could get help with just the little things in their daily lives, the result could be a big improvement in their quality of life.

Our 24-hour prototype shows how Tasket could be used to let carers add tiny tasks, such as collecting groceries or putting out the rubbish, and allow friends, family or neighbours to complete those tasks for them.

The prototype was a success. We won the Government’s “Carers” category prize. You can take a look here: dharmafly.com/tasket-carers-prototype/

We’ve gone on to make it into the DotGovLabs top 3 innovative solutions for the extended project.

Play in the sandpit

You can have a play with the open source Tasket app (in glorious black n’ white), at tasket.dharmafly.com

Go ahead, sign up, create a project, add some tasks. You can claim tasks that others have created, click around, explore. And remember, because it’s all open source, you can re-use the code for your own task management applications (or contact Dharmafly to adapt it for you).

One data server, many apps

We’ve built the server as a kind of pure data engine. How the actual application looks and behaves can be wildly different, but still use the same underlying data.

As an example, the screenshot above shows a notepad style “to do” list manager, built on Tasket. It’s much more focussed on an individual and their own tasks, but could equally be used for sharing lists between a group of people. A very early version of the app can be seen here.

A little note on technology (for the geeks)

Tasket uses a collection of HTML5-related technologies. It is a “thick client”, built with the JavaScript library Backbone.js, and communicates with a JSON-based API (e.g. here are all the unfinished tasks on BrightWorks). The server is created with the Python-based framework, Django (this may be swapped with Node.js in future).

Projects and tasks are laid out with force-directed physics, to prevent them from overlapping each other and the walls of the website. The lines connecting tasks are in SVG (although the circles that represent each project instead use simple CSS3 border-radius).

You can download the code and run it on your own server (it has the permissive MIT license), or fork the project on GitHub. Improvements and pull requests are welcome.

Created by

Tasket and BrightWorks have been brought to you by:

• Matt Weston – social design
• Gavin O’ Carroll – visual design
• Sym Roe – server-side
• Aron Carroll – JavaScript, CSS
• Kyran Dale – force-directed physics
• Christian Thrower, Ollie Bettany and Andrea Fiore – front-end design & dev for the Notepad app
• Prem (that’s me) – concept, JavaScript, coordination
• …and the brilliant minds at Bright One. Big thanks especially to Ben, Katy and Dan.

You can follow the further developments of the BrightWorks project on its blog.

URL: rewiredstate.org/projects/what-makes-a-centre

We previously blogged about helping to create a prototype SMS text message service for the Government’s UK Online Centres. The centres help people get online for the first time, and are a key part of the government’s strategy for Digital Engagement.

We also worked on a handful of data visualisations to highlight the hidden aspects of the centres. These could assist in making decisions about outreach or marketing, or on the balance of facilities on offer to customers of the service. To create them, we prepared different slices of the UK Online dataset, and passed them through the wonderful Wordle web service:

Centres’ target audience:

The visualisation at the top of this article shows the words that individual centres use to describe their own target audience.

Centre locations:

This shows the relative proportions of centres in different parts of the country.

Centre names:

This shows trends in the names of the different centres. Clearly, most of them are in libraries and community centres.

Centre names (minus the six most popular words):

This final visualisation shows all but the most common six words in the names of the centres (i.e. without “library”, “centre”, “community”, “learning” and “training”).