Changing standards

I was just playing my Generic Dice Game to pass some time, and I noticed the high score board wasn’t updating properly anymore. The high score board is fetched from the server by an AJAX request, so that the board can be updated seamlessly after the user submits a new score. After looking into the code it turns out the AJAX request was:

xmlhttp_score_threshold.open('GET', 'http://www.aidansean.com/dice_game/scores.php?task=get_highscore_threshold&sid=' + Math.random(),true) ;

whereas it should have read:

xmlhttp_score_threshold.open('GET', 'scores.php?task=get_highscore_threshold&sid=' + Math.random(),true) ;

As a result it was being caught out by the same origin policy. This is a pernicious bug because technically it raises no alarms. The AJAX request is successfully sent and the reply is successfully received, however the client is not allowed to read the response text. The high scores table get successfully updated on the server, so from the point of view of both the client and the server everything works without any problems, and I’m left scratching my head as to what went wrong.

It was only when I tried to access the page directly and found a beautifully formatted HTML table that I realised something was amiss. A direct request works whereas an AJAX request doesn’t? It seems like a change in browser behaviour, as this used to work in Firefox, but looking for changelogs online has not brought up any useful information. After consulting Stack Overflow it turns out the standards were tightened slightly around two years ago, which would account for the change in behaviour.

So this is simply a cautionary tale. Even though the code you write may work at the time, the standards can change under your feet, leading to compatibility problems in the future! Right now about 5% of my projects are suffering from some form of standards change or another, and need some non-urgent fixes.

Tangles

I love to create games and I try to keep up with the latest web based technology to create open source games. When it became clear that all the modern browsers support the canvas I decided to create this game to see what I could make. It’s a clone of similar games such as Loops of Zen.

Links

Live page
GitHub repository

Overview

This is one of the first projects I made where the user interacts with a grid of squares on the canvas. The aim of the game is to link up the network of pieces by rotating the squares. Given that the game is so simple it did not take long to create.

Challenges

Challenge: The game needed a simple grid layout that was easy to control.
Solution: This was one of the first projects I made that had a gridlike interface on the canvas, and this model became used a lot elsewhere. One of the users asked for scroll bars for the larger levels, and this took a few iterations to get right. In the end I was satisfied with how they work, but I would feel better if they were also draggable. (Resolved)
Challenge: The game is very simple, so it should have elegant style.
Solution: I very much enjoyed creating the styles for this game, with the simple choice of colours, and simple arc paths. The code that makes the arcs is simple enough to edit quickly, but also complex enough that it took a while to assemble. (Resolved)
Challenge: One of the features is the “autosolve” function.
Solution: Once I made this game I became fascinated with finding the optimal solution, so I wrote a function that tries to solve the game. It works through the cells one by one and in each iteration it identifies squares that can only be oriented in one way, and fixes them in place. The algorithm gives up when it completes an iteration without making any changes. So far all tests have shown that it completes as much of the level as puzzle before coming to a degenerate case which has two or more valid solutions. At that point the user can intervene to resolve the degeneracy, and start the autosolver again. (Resolved)
Screenshot of Tangles.
Screenshot of Tangles.

MSSNG VWLS (Only Connect game)

Once I came across the cult gameshow Only Connect I became a big fan, and especially enjoyed the Missing Vowels game. I thought this could use a game that people could play online to complement the existing “Connecting Wall” game.

Links

Live page
GitHub repository

Overview

The user is given a series of consonants and has to type the complete phrase, with vowels, into the input. Event listeners handle all the user interaction and update the score when the enter key is pressed. The quiz is timed so that the user gets 10 seconds per clue. The categories are separate from the rest of the code to make it easier for contributors to add new categories (although in reality they still email me lists instead of sending me an updated file).

Challenges

Challenge: The user interface had to be very intuitive.
Solution: After a few iterations I made the interface as simple as possible. The interface matches the show quite well, making it easier. Even so, the uers has to type the answers instead of speaking them, and some users have complained that the string matching should be tolerant of simple mistakes. (Resolved, to be revisited)
Challenge: The style should match the show, as much as possible.
Solution: This project gave an excellent opportunity to work on CSS styling and it was a lot of fun to come up with the colour scheme to match the show. (Resolved)

Screenshot

Screenshot of MSSNG VWLS.
Screenshot of MSSNG VWLS.

2013 Geneva Marathon data

In 2013 I took part in the Geneva Relay Marathon with some friends. The results were presented, leg by leg, on a webpage. I took this as an opporrtunity to analyse some data and find a novel way to display the data.

Links

Live page
GitHub repository

Overview

The data are taken from the Geneva website and arranged by team and leg. The user can choose how to view the data and the results are written to canvas elements. When sorting by leg time, the bar charts are aligned to the start of that leg. There are also histograms showing the distribution of times per leg.

Challenges

Challenge: This project was mostly an opportunity to explore data visualisation.
Solution: Aligning the bar charts to match a given leg meant determining the width of the widest barchart and scaling the image appropriately. It was necessary to write a scipt to generate histograms. (Resolved)
Challenge: The data were somewhat inhomogenous and incomplete.
Solution: Due to technical problems on the day, some data were missing, including team members not passing though checkpoints, so legs were not properly recorded. In these cases the times had to be estimated assuming uniform performance across multiple legs of the race. (Resolved)

Screenhshot

Screenshot of the Geneva 2013 marathon data analysis.
Screenshot of the Geneva 2013 marathon data analysis.

Mathematical inverter

This project performs the mathetical inversion transformation. A curve on the plane is inverted such that points within the unit circle are mapped outsid the unit circle and vice versa.

Links

Live page
GitHub repository

Overview

This project was developed to satisfy my curiosity about the inversion transformation. The user can choose to use on three coordinate systems, which are Cartesian, polar and parametric. The equations are sent to a PHP script which generates an SVG file with Javascript embedded within in. The SVG image then changes dynamically to show the user how the curve transforms under inversion. The user can change the graphical settings to make a more aesthetically pleasing image.

The transformation of the point \( ec{r}=(r, heta)\) takes the form:

\begin{eqnarray}
r & \to r’ & = 1/r \\
\theta & \to \theta’ & = \pi+\theta \\
\end{eqnarray}

Challenges

Challenge: The project should allow the user to specify an arbitrary equation to use, without incurring a penalty associated with parsing the equation.
Solution: By passing the equations via PHP, it is possible to write the equations otu without relying on a CPU intensive function such as eval to interpret the equations. (Resolved)
Challenge: This project requires Javascript to interact with an SVG iamge.
Solution: The security restrictions imposed on SVG images are severe, so any Javascript must be completely embedded within the SVG image itself. This was not the first time I had embedded Javascript within an SVG image, but it was one of the first time I’d automated the writing of the SVG image to include Javascript. (Resolved)

Sample output

Sample output of the mathematical inverter.
Sample output of the mathematical inverter.

i, indico uri shortening service

At CERN we used a meeting orgnisation system called indico. Each meeting had a unique ID that was used to identify the resourcs associated with it. In many instances there were times when a person had to access a meeting page when they only knew the unique id, and not the full uri. I made this tool to obtain the full uri, given only the meeting id. Since this project shortens the uri for indico it is called “\(i\)”, which leads to all kinds of puns.

Links

Live page
GitHub repository

Overview

The user can interact with \(i\) in two different ways. They can enter the uri of a meeting page, a meeting category page, or a meeting resource, and it will return the shortened uri. They can also enter a shortened uri to be redirected to the full uri.

When the user enters a full uri it get parsed and strings are replaced to get a short uri. They then have the option to copy the short uri with the use of ZeroClipboard.

When they user enters a short uri the HTTP request is captured using rewrite rules in .htacces or web.config. They are then parsed and strings replaced to give the full uri.

The domain names are matched against known domain names to make the uris even shorter. This limits the versatility of the tool, but to include custom domain names would result in strings which were almost as long and difficult to remember as the original long uris. users can download and extend \(i\) to include any domains they want, and instructions to do with are given in the dev page.

Challenges

Challenge: The user should be able to copy the short uri with a single click.
Solution: This was the first project where I used ZeroClipboard to enable the user to copy with one click. It is not a solution I am completely happy with, as it takes the control away from Javascript, which is appropriately sandboxed. However the content that is handled with flash is harmless, so there are no security issues using ZeroClipboard. (Resolved)
Challenge: The tool must be usable by users who do not use flash or Javascript.
Solution: In order to use the tool, the user must interact using HTTP requests. This ensures that the user can always use the tool even if they disable flash and Javascrpt. (Resolved)
Challenge: This tool should be extendable to suit different hosts and domain names.
Solution: Users are encouraged to assist with the development of \(i\), and with the GitHub repository they can be download and develop their own copy. (Resolved)

Screenshot

Screenshot of i, the indico uri shortener.
Screenshot of i, the indico uri shortener.

Random insult generator

This is another simple and frivolous project. A student showed me a page illustrated a table with three columns that could be used to make an insult. It looked like it should be coded up, and I had 15 minutes to spare, so I did.

Links

Live page
GitHub repository

Overview

The insult is generated randomly using PHP. This ensures that the user has no way to know in advance how many possible insults there are, or how many combinations are available. This can, of course, be extended to anything, and may be used to give random compliments in the future.

Screenshot

Screenshot of the random insult generator.
Screenshot of the random insult generator.

Floorplan editor

This was a quickly written project to help me rearrange the furniture in my new apartment. This project has scope for a lot of further development in the future.

Links

Live page
GitHub repository

Overview

Furniture is modeled using rectangles (future versions may have more sophisticated shapes) and can be dragged around on an HTML canvas. Initially collision detection was implemented and items of furniture were not allowed to intersect. However this was removed as it impeded the movement of shapes. The user can drag around items of furniture, with event listeners keeping track of the actions of the user.

The challenges for this project had already been overcome in previous projects. These include collision detection of rectangles, allowing the user to interact with shapes on the canvas, and writing a custom markup language to keeping track of the shapes.

This project was made so quickly I did not even give the canvas drawing an offset of \((0.5,0.5)\) to make the lines crisp. If this gets updated in the future this will be one of the first changes made.

Screenshot

Screenshot of the floorplan editor.
Screenshot of the floorplan editor.

2010 UK General Election analysis

This project displays the results of the 2010 UK General Electrion, and it was to be the first of many that investigate different data sets. One of my planned meta projects is to make the acquisition, storage, and analysis of public domain data simpler and easier. This was an experimental project, and created in a hurry.

Links

Live page
GitHub repository

Overview

The source of data was identified (BBC News website) and custom functions written to extract the HTML sources via HTTP requests. The HTML sources were there parsed to determine the relevant information and written to file. These files were then used to create PHP files to create and populate MySQL tables. The remaining pages then allow the user to browse the data, sorting by various fields, with links back to the original sources.

This project should be revisited in the future to clean up the code and make the styles match those of the rest of the wider website. This should be done in time for the next election!

Challenges

Challenge: Data must be taken from a public domain resource.
Solution: This project’s first challenge was at the heart of the concept, which is how to obtain large amounts of publically available data in as few HTTP requests as possible, and in an ethical manner (ie avoiding overloading the servers which provide the data). The HTTP requests were automated and the data dumped to file for further processing. (Resolved)
Challenge: The data for each constituency varies in its content and structure.
Solution: The data contains various parties and candidates which vary from constituency to constituency. As a result the data processing must be able to add an arbitrary list of candidates and parties per constituency. This turned out to be trivial, using the database schema, but did add another layer of complexity to the project. (Resolved)
The 2010 UK General Election analysis.
The 2010 UK General Election analysis.

Room booking service

When I was living near Geneva I had a spare room and many people came to visit for work or leisure. To make it easier to keep track of who was visiting when I created a page where people could book my spare room.

Links

Live page
GitHub repository

Overview

This project makes extensive use of Javascript, PHP and a MySQL backend. The user interacts by selecting HTML elements, which change dynamically based on the interactions. Data is sent to the server via POST requests, which are then parsed via PHP and stored to a MySQL table. The status of the data can be updated via a custom made admin panel. Whenever a request is made, an email is sent to alert the admin. This project had its own standalone HTML wrapper, and enabled the admin to add several pages containing additional information. Bookings were requested using a custom made calendar interface.

Challenges

Challenge: Dynamic user interaction had to be monitored carefully.
Solution: The user interaction is monitired using Javascript and the HTML elements dynamically changed via the DOM. The status of a booking changes depending on the current state in the database and how the user interacts. Interaction required updating multiple elements (eg several succesive days.) (Resolved)
Challenge: The booking system required a functional and intuitive calendar interface.
Solution: This project was one of the first time I had to create a calendar interface from first principles. Given that the differences in time took place in a single timezone this was relatively straightforward, although string paring initially presented some difficulties. (Resolved)
Challenge: The booking system required an admin panel.
Solution: The admin panel is accessed via a simple login function, At the time the password was trivially checked against plain text stored in a PHP file. However if this project is to b used again it should be checked against at least a hashed password stored in a PHP file. As usual, the MySQL and password settings are not shared publically. (Resolved, to be revisited)

Challenges

Challenge: Dynamic user interaction had to be monitored carefully.
Solution: The user interaction is monitired using Javascript and the HTML elements dynamically changed via the DOM. The status of a booking changes depending on the current state in the database and how the user interacts. Interaction required updating multiple elements (eg several succesive days.) (Resolved)
Challenge: The booking system required a functional and intuitive calendar interface.
Solution: This project was one of the first time I had to create a calendar interface from first principles. Given that the differences in time took place in a single timezone this was relatively straightforward, although string paring initially presented some difficulties. (Resolved)
Challenge: The booking system required an admin panel.
Solution: The admin panel is accessed via a simple login function, At the time the password was trivially checked against plain text stored in a PHP file. However if this project is to b used again it should be checked against at least a hashed password stored in a PHP file. As usual, the MySQL and password settings are not shared publically. (Resolved, to be revisited)
The calendar function for the room booking service.
The calendar function for the room booking service.