Fred Brewin's Blog

So, as my term comes to an end, the focus inevitably shifts to revision. It’s something I struggled to knuckle down to last year, and so I decided to spend yesterday building a web-app to help me track my progress, along with my classmates.

Welcome revisionstatus.com

The easiest way to explain what this does, and why it should prove useful, will be through demonstrating it.

Users log into a primitive user authentication system.

Once authenticated, they are taken to a list of all the lecture courses in their chosen year and subject. These are manually added, and currently only available for University of Cambridge, Computer Science Tripos Part 1B (Second Year).

The orange bars behind some of the lectures show the progress in that subject. This is calculated as an average of the progress of the ‘Course Topics’ that are defined below. As you can see, I have a way to go.

There is also a view which show the topics aligned next to the questions in the exam, on which they will be examined.

You can access Course Topics by clicking on any Lecture Course.

These are not as strictly defined by the University, and so I choose which topics I want to split the course into. Additional topics can be added using the box at the bottom of the screen.

If I click on a topic, I can change my progress or delete the topic.

You can also see the progress of any ‘Supervision Partners’. I am paired with two people for example here, and so I can see if they are ahead or behind me. Rather than creating a competitive aspect, the idea is to find out who you should ask for help from. If one partner is ‘Feeling Confident’ about a subject that you don’t understand then it may be a good idea to have a chat with them.

The system is obviously very limited in its scope at the moment, and I only expect three users during this exam period. However it is designed in a way that other degree courses, years etc. could be easily added with little work. Maybe if it works well for me this year then I’ll invest some time in making it more available to others.

Now, if you’ll excuse me, I think I should do some revision. After all, most of this tracking could have been done in minutes on a sheet of paper…

I’ve been playing with some rotating cubes the last few days. First a quick introduction:

CSS3

With the launch of modern web browsers like Firefox 3.5, Google Chrome and Safari 4, a whole new range of effects have become available to web developers through CSS3.

One of the more exciting additions is transforms and animations. Skipping over the philosophical argument of whether or not CSS should be concerned with these action based functions, we can get some really impressive functionality.

Sadly, a lot of this work seems to be tainted by the lack of standards. Everyone is building in support for these fun new properties (it’s even promised in IE9) but we’re going back to proprietary CSS. Things are finally getting to the point were you can stop worrying about IE6 hacks but (for now) a transform property will have to look like this:

-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);

It’s a conscious move on the part of Mozilla and Webkit to not support the standards until they become…standard (see W3C Draft Transform Standards). But for now it’s just introducing a whole load of effects which will only work in one browser or other…

Which brings me on nicely to what I’ve been playing with and which only works on Safari 4.

Stripy Box

When I was about 14, some of my friends formed a band. The Russian Wind Up Penguins (website still archived here) and obviously it needed a record company to release its version of teenage punk. Gave me the perfect excuse to play around and create Stripy Box.

It’s actually one of my favourite logos that I’ve created. At the time I spent a while trying to make a rotating cube using Flash which ended up horribly glitchy and slow.

Click on the image to see the old Flash site. When playing around with CSS3 I found a great demo of a spinning cube with text on all faces, so I shamelessly borrowed the code and stuck my Stripy Box images on the side. Twenty minutes later and I have a wonderful keyboard controllable, glitch free rotating cube.

Again, click the image to see for yourself (only works on Safari, remember). Mainly done using CSS3, in fact if I had a bit more time I could remove the keyboard control and have it rotate by itself with even less (maybe even no?) JavaScript.

Amazing what progress has been made. I look forward to seeing what else CSS3 has to bring. If you’re on Safari 4 (I really hope you are) then try out this demo of a flickr browser. Really awesome and so, so smooth.

Let’s just hope the standards get sorted before the community diverges too much.