Earlier this year, I launched a website that I had been working on for a number of months. This website was for the Falkirk Community Trust, a not-for-profit organisation created to manage community & leisure services in the Falkirk Council area.

I thought it would be interesting to write a little about how it all pins together to showcase the 100s of events and activities which happen in Falkirk on a monthly basis.

Events & venues management

If you're a regular visitor to the site, you'll see that it's largely events focused. So, we needed a custom built system which would allow us to easily manage the details of each of the Trust venues, and allow us to append events & activities to them. This was the first thing I got started on and we call it the EVM (ee-vee-em), aka the 'Events & Venues Manager'.

The EVM, showing all of the Trust venues in Bo'ness

Looking at a venue in detail, Bo'ness Library for instance, you'll see that the contact information and opening hours data is held against this venue, as well as the events and activities (known as programmes in the EVM, these are events which occur on a weekly basis).

A venue in the EVM

The venue is also geocoded for quick integration with Google Maps or other mapping services.

Against each event or activity we store description information, age-ranges, costs, affiliation and contact details. We can also append multiple dates against each of the events as well as internal and externally visible (to the public) categories. Categories allow us to group events together on the site based on a particular classification ('Summer holiday events for kids', for instance).

Multiple event dates

Categorisation of an event

Public facing EVM data

The information stored in the EVM is shown on the appropriate venue, events and activities pages on the website, usually via a series of custom controls.

Example of an 'activity'

Above you can see an activity showing you when it's occurring, how long it lasts, which venue it's at (with an option to see the venue on a map) as well as alternative times & venues for that particular activity.

The opening hours data in the EVM is pushed to the opening hours control, shown on each of the venues pages. This control is 'time-aware', so it highlights the current day and can tell you at a quick glance whether or not the venue is currently open or closed.

The 'time & situation aware' opening hours control

We can also flip any venue from a 'Normal' to 'Affected' state, allowing us to quickly close a venue or inform the public that services at this venue may not be available. This information is appended to the opening hours control (see above) and is shown on any event or activity pages for this venue.

Being 'time-aware' was something I wanted to thread throughout as much of the site as possible (Adrian Short has an interesting article on timelyness of websites). So, the various events and activities controls change depending on the time.

For instance, this is an activity control showing you a few of the activities at the time of 12:15:

The first 2 activities indicate that you have missed their time-slots, however they are still shown as these occur on a weekly basis (every Wednesday), so you'll know when to show up next week.

I chose red as a start time, because I liked that idea of the activity 'cooling-down' over a period of time and eventually becoming 'cold' as it nears the end of it's time slot. It's unlikely that users of the site notice this, it may not even be metaphorically appropriate... but that's where my mind was at the time.

Currently we have around 400 events and 450 activities on the site, all managed via the EVM, and it seems to be ticking over quite nicely as a system. Collating this information (from 50+ different venues) is a different and bafflingly more complex problem, but we're getting a handle on that too, I think.

All of the events are available via iCal feeds for venue or category based calendar subscription.

We also have another application like the EVM that allows us to manage news and blog posts in a similar fashion, as well as allowing us to cross-post articles into various 'channels' on the site.

Hindsight & conclusions

As the deadline was tight, and I was the only web developer working on it, there were a number of things which fell by the wayside that I wish hadn't. The main thing I wish I had time to include was to make it screen responsive. It may seem weird to say this now, but back in August 2011, making a site responsive to mobile, tablet and PC wasn't as straightforward as it is now (or at least it didn't seem that way to me). Had the site been commissioned 3 or 4 months later, it would've been a no-brainer... especially with the introduction of helpful libraries like Twitter's Bootstrap etc. However, I may be able to re-align it to be a more mobile friendly site in the future.

Also, I learned a ton about ASP.NET. I haven't gone into it here at all, but instead of building the site using an existing CMS, I built a custom .NET library which allows myself and the web team to quickly create and edit pages on the site.

In short, I'd probably do a lot of tiny things differently, and these lessons learned will hopefully feed into my next big project. But as it stands just now, I'm pretty pleased with how it's all working.

If you're web developer or use the Falkirk Community Trust website, I hope you found this interesting (as brief as it was).

Till next time. :-)

In case you haven't heard, Lea Verou has just released an awesome syntax highlighter called Prism.

While there are quite a few highlighters already on the web, this one is particularly nice because it seems easily extensible, supports web workers, uses the HTML5 language-xxxx class (as recommended by the W3C) and doesn't force you to use any Prism specific markup (not even a class name).

The only jibe I have with it is it doesn't have a theme similar to the one I use in my favourite text editor (Sublime Text 2)... so I've fixed that by making one.

It's loosely based on the Monokai theme (which was originally made for TextMate I think), which has since been ported to Sublime Text (sorry, I can't remember by whom). It's not exactly the same, but it's good enough for me, so here it is, I call it okaidia.

Here's what it looks like with HTML:

<!DOCTYPE html>
<html lang="en">
<head>

<script>
    // Just a lil’ script to show off that inline JS gets highlighted
    window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

Javascript:

if (Prism.languages.markup) {
    Prism.languages.insertBefore('markup', 'tag', {
        'script': {
            pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
            inside: {
                'tag': {
                    pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
                    inside: Prism.languages.markup.tag.inside
                },
                rest: Prism.languages.javascript
            }
        }
    });
}

And CSS:

body {
    font: 100%/1.5 Questrial, sans-serif;
    tab-size: 4;
    hyphens: auto;
}

Obviously it's on Github for forking/tweaking etc. Enjoy!

I've been tinkering around with the HTML5 canvas element recently and it's been pretty good fun. To further my understanding of both it and javascript, I've decided to start a little graphing library, which I couldn't resist called 'The Graphalo' (or just Graphalo, if you prefer).

At the moment it only has 2 graph types, the first of which is something called a sparkline. A sparkline is a very small line chart, like this: which is typically drawn without axes or coordinates and can sit inline with text content, to illustrate something like the stock market or some other trend.

This is all the markup needed to create a sparkline:

<span class="graphme" data-graph-values="75,23,12,..."></span>

Note that Graphalo will attempt to graph anything with a graphme class.

The second graph type I call a 'percentage pie'. It accepts 1 value (a percentage between 0 - 100) and looks like this:

Note the graphs accept custom graph colours and can be any size you like.

The markup for the graphs is nice and simple, it's basically the same as before, but with a data-graph-type attribute specifying that you want a 'percpie' and a few other optional attributes for size: data-graph-size (automatically 100px x 100px) & colour: data-graph-color (HEX values).

Like so:

<span class="graphme" data-graph-values="75" data-graph-type="percpie" data-graph-color="#3366CC"></span>

I know there are probably hundreds of similar libraries, but this has been a nice little learning experience so far. Obviously the library is far from finished (I only started it a couple of days ago), but the code is available on GitHub for those who are interested in playing around with it.

I've recently published a new version of my most popular little Chrome extension, Check My Links.

I've had a few people mention that the extension checks (and therefore clicks) links on their pages that they don't necessarily want to be clicked (such as advertisements or 'logout' buttons etc).

So, version 3.0 allows you to manually add any URLs to the extension's exception list. Any URL added to this list, will be skipped during the checking process. To add to the exception list, please see the options page for the extension.

If anyone has any other feedback or feature requests, please feel free to ping me on Twitter. The source code for the extension is also available on GitHub