I was going to write exclusively about modes, but given the impenetrable definitions on the web a more comprehensive post seems in order. (I'd title it Music Theory For Dummies but it doesn't cover rhythm, tempo, dynamics and all that goodness.)

In order to understand modes, you need know a few other things first, starting with...

Pitch

Like light, sound comes in a spectrum. If you start at one end and go towards the other, you'll see the frequency change gradually. What you hear at any given point (ignoring the loudness) is the pitch. With the light spectrum we like to divide it up into manageable chunks: this range of frequencies we'll call 'red', that bit 'blue', and so on. But how do you describe pitch? Say hello to the...

Note

Just as the light spectrum has 'colours', the sound spectrum has 'notes'. The thing is, people very rarely compose music with all the notes available to them. Dump all the notes into a piece and it'll sound more like noise than music. Think of it this way: do painters paint every picture with every colour imaginable? No, they limit themselves to a palette. Similarly, composers have the...

Scale

(Finally!) A scale is a collection of notes ordered by pitch. For reasons unknown, the distance between two adjacent notes is known as a 'semitone' and two semitones make up a 'tone'. The previously mentioned 'all the notes' scale for example, is called the 'chromatic scale' and consists of 12 consecutive notes (N = note, - = semitone):

N-N-N-N-N-N-N-N-N-N-N-N

But hardly anyone uses that scale in real life. The scale we are most familiar with is called the 'diatonic scale'. It goes like this:

N--N--N-N--N--N--N-N--N--N-N--N...

See that pattern? Two tones, then a semitone, then three tones, then a semitone, then two tones... Now if you were to sit at a piano, pick a random note and apply that pattern (counting both black and white keys as notes) up to 8 notes, what you get is a 'major scale'. If you start with a C, it just so happens that you can play a major scale without touching any black keys; the piano was designed with the diatonic scale in mind. Another cool thing about major scales is that the notes at each end sound very similar - so similar, in fact, that we gave them the same name! If a major scale starts on a C, it ends on a C and the cycle starts again:

C--D--E-F--G--A--B-C--D--E-F--G...

Key

When people say "that song is in the key of A major", what they really mean is that it uses a major scale whose first note is A, that is, the A major scale. The note intervals are exactly the same as those in the C major scale, which starts on C naturally. Same for every other major scale. As a result they all sound kind of similar to our ears - bright and happy. But what about minor keys? We'll get to those in a bit.

Mode

Musical modes may seem like an esoteric concept, but they're really just different ways of using the familiar diatonic scale. Variations on a scale, if you will. Take the 7-day week for example: I may think the week starts on Monday, but some people think it starts on Sunday, or even Saturday. That's not to say my view is more valid than someone else's, it just means that I'm used to Monday being the First Day of the Week.

Likewise, songs written using the C major scale put a lot of weight on the note C, because that's what we're used to hearing. Either the melody starts with a C, ends with a C, or the C chord figures prominently in the harmonies. It's the tonic - the most important note, the beginning and end - of the C major scale:

...A--B-[C--D--E-F--G--A--B-C]--D--E-F--G...

What if such a song were to emphasise, say, the second (II) note in the scale instead? It may sound odd to our ears, but it's a perfectly valid way to write music. Then the scale would run from D to D like this:

...A--B-C--[D--E-F--G--A--B-C--D]--E-F--G...

Note that the intervals (pattern of semitones and tones) haven't changed. We've simply decided to shift the 'tonic' - the most important note of the scale - to D. The new scale still has 8 notes, but sounds different. It's effectively a variation of the C major scale. How about if we shift the tonic to the third (III) note?

...A--B-C--D--[E-F--G--A--B-C--D--E]-F--G...

Sounds different yet again! We can do this all the way up to C, where it becomes the C major scale again. These 'variations' are what we call 'modes'. Modern western music theory has pretty names for all these modes:

(Using the C major scale as an example.)

Mode I, or the Ionian mode:

C to C in the C major scale

Mode II, or the Dorian mode:

D to D in the C major scale

Mode III, or the Phrygian mode:

E to E in the C major scale

Mode IV, or the Lydian mode:

F to F in the C major scale

Mode V, or the Mixolydian mode:

G to G in the C major scale

Mode VI, or the Aeolian mode:

A to A in the C major scale

Mode VII, or the Locrian mode:

B to B in the C major scale

A 'minor' scale is simply the sixth (or Aeolian) mode of a major scale. So the A minor scale goes from A to A in the C major scale. A song written in the key of A minor uses the same notes as a song written in C major, but its focus is on A instead of C. That's what makes it sound different.

But what about the other keys such as A major and G major and D&#9837; major? Do they have modes too? Of course. If we do the maths: 12 keys &times; 7 modes = 84 combinations!

Dorian? Phrygian? What mode is that song in?

Starting from the tonic of the major key, count upwards until you reach the tonic of the mystery song. That number denotes the mode.

I'll use the Irish folk song My Lagan Love as an example. First I'll play the tune starting from a random note (B&#9837;). Once I've got that down, I'll take note of the sharps and flats I've used: A&#9837;, B&#9837;, D&#9837;, E&#9837;. This pattern corresponds to the key of A&#9837; major. The tonic of My Lagan Love is E&#9837;, evident in the end of the first verse ("on her hair") and the end of the song ("lord of all"). E&#9837; is the fifth note of the A&#9837; major scale, so My Lagan Love is in A&#9837; Mixolydian mode! Yay.

For the fourth step you could also use the handy reference chart I've drawn up (see image).

The main hurdles in this method are steps 1 and 3. Most songs are easy, though the ambiguous ones can be really tough. Case in point: the Appalachian carol I Wonder As I Wander doesn't resolve to its tonic and has a missing note that could swing either way. Starting on an E, if the missing note is an F, then the song's in C Aeolian mode; if it's an F&#9839; - G Dorian mode. I'm more inclined to believe it's in Dorian because if you incorporate that missing note into a modified version of the phrase "out under the sky" (A-G-?-E-D), F&#9839; sounds much more 'natural' than plain F. But that's coming from someone who insisted on playing the Aeolian Greensleeves sheet music in Dorian...

Companion piece alert!

How to draw a Geneva drive using a compass and straightedgetag:mingyu.co.uk,2018:/blog/compass-and-straightedge-geneva-drive/2013-07-21T16:54:54+10:00

The Geneva drive is a gear mechanism that makes a wheel turn a specific angle at regular intervals. They're used in film projectors and mechanical watches and all sorts of doodads. Since drawing a simple four-slot Geneva drive doesn't involve squaring circles, doubling cubes or trisecting angles, the only tools we need are a compass, a straightedge (ruler), a pencil and a rubber (unless you are the God/Goddess of Draughting).

Draw a circle with a line running through its centre. Label the two points where they intersect A and B, and mark their midway points C and D: to do this, open your compass a bit further (doesn't matter how much) and mark the points where two circles centred on A and B would intersect. Draw an imaginary line through these two points and the places where it intersects the first circle are your midway points C and D.

Draw two circles centred on A and B with a radius of AC (the distance between A and C).

Using the technique from step 1, draw the midway line of the circle centred on B.

Draw a line through C and B and one through D and B. Label the places where they touch the circle as E and F.

Draw a circle that centres on B and is tangent to circle A. Note that it intersects the straight lines from step 4 at four points.

Using these four points as the centre, draw small circles with a radius of about 1/3 of the previous circle. Also do this for points A, B, C, D, E and F.

Join these circles up with parallel lines to form 4 'spokes' radiating out from point B.

Draw a circle centred on B with a radius of AB. Mark the points where it intersects the straight lines as G, H and I.

Draw a straight line through A and C and mark the length of AB with point J.

Draw a circle centred on A that is smaller than the existing large circle and doesn't touch the small circles centred on C and D. Using the same radius, draw circles (or just curves) centred on G, H and I.

Using the radius of the largest circle centred on A, draw a circle (or curve) centred on J.

Shade in and/or outline the Geneva drive.

Why the Geneva drive?

I saw the compass-and-straightedge construction puzzle by Nico Disseldorp and thought, huh, I should make a tutorial! The most recent thing I drew using a compass and straightedge turned out to be a score keeper with a four-slot Geneva drive. (Not written up that project yet - watch this space.)

Moarrr

Can you draw a Geneva drive with five slots? Six slots? Etc.

Can you draw an internal Geneva drive? A Geneva stop?

If you were to make a working model out of your drawing, what other parts would you need?

No, this is not about avoiding grey-on-grey colour schemes, inserting alt text, or making sure your site loads 'reasonably fast' (what does that even mean). This is much, much simpler. This is about the bare necessities of public-facing-sitehood: if you expect people to read/interact with whatever content you put on your website, then you need to make sure it meets all of these requirements.

Your website should have:

An 'about' section explaining why the website exists (unless it's self explanatory). On its own page, or in the header/sidebar/footer. Either way, users should be able to find it by doing a Ctrl+F search for 'about' or 'FAQ' or 'Q&amp;A' on the home page. If it's a one-liner, or if you insist on naming it something twee like 'regarding the purpose of this site', place it somewhere ultra prominent (e.g. next to the title). Surrounded by flashing lights if necessary. Just kidding.

A reason for the user to engage with your website. Why should they buy your product? Why should they use your app? Why should they browse beyond the landing page? Why should they bother staying for more than two seconds? You can do this however you like: taglines, diagrams, testimonials, reputation, compelling/useful content, an existing userbase...anything. Just be careful with videos - they take time to download, buffer and watch, and may not be available to everyone.

A 'contact' section so users can connect with the entity behind the website. Same rules as the 'about' section. The section should contain either an email address or a contact form. Businesses and organisations must also include the following:

address

telephone number

opening hours (if applicable)

pricing information (if applicable. And no, 'register to get a quote' doesn't count.)

That's it. Oh and if you're really conscientious, consider putting your site name in the &lt;title&gt; tag.

About this blog post

I've seen too many sites that don't know the first thing about being a website. Both my day job and hobbies involve searching for and validating information on the internet. As a result I eat websites for breakfast: if, say, your contact form is buried deep within five levels of nested links, I can and will find it if I want to. But if it has to be there first, no??

How to make your own 3D Minecraft font logo in GIMPtag:mingyu.co.uk,2018:/blog/minecraft-logo-in-gimp/2013-10-17T03:06:58+11:00

So I was doing this Minecraft-themed side project and wanted to make a custom Minecraft logo. I learnt the basics from Chris Voith's video, but it was a bit simplistic so I tweaked it until I was happy with the result. Since text-based tutorials on this topic are scarce, I've written one up for your convenience. (Beware: fiddly content ahead.)

Ready...

Get Set...

Create a new file in GIMP.

Change your foreground colour to light grey #a9a09d and your background colour to white #ffffff. Add dark grey #29282a to your colour palette (I grabbed these HEX codes from the official logo; you can make up your own if you like).

Go!

Press T to activate the 'text' tool, set your font to Minecraft z2font, your colour to light grey and write out your text in CAPITAL LETTERS (you won't get the cool cracked effect with lowercase).

Press Shift+P to activate the 'perspective' tool. Drag the two upper corners of the text inward. The official logo slants inward by about 30°.

Duplicate this layer and place the copy (FOOBAR #1) under the original (FOOBAR). (To do this, click on the 'duplicate' button, then the 'lower' button in the 'layers' sidebar.) Still on the new layer, press M for the 'move' tool, click on the text, and press ↓ (down arrow). This makes the copy 1 pixel lower than the original.

Duplicated this layer (FOOBAR #1) and place the copy (FOOBAR #2) underneath. Press M, click on text, press ↓ (down arrow) then → (right arrow). Press Shift+T to bring up the 'scale' tool. Make sure the little chain icon is linked, then click in the 'width' box and press ↓ (down arrow) twice. What this step does is make a centred layer that is exactly 1 pixel lower and 2 pixels narrower than the previous one.

Repeat step 4 20~25 times until the thickness of the text looks about right. Yeah, this is the fiddly part.

Go up the layer list and click on the 'eye' button to turn off the first layer (FOOBAR). Click on the second layer (FOOBAR #1), press Shift+O to activate the 'select by colour' tool, then click on the text to select all the grey parts. Press Ctrl+. to fill this layer with your background colour, white. This layer makes the finished logo look more 3D by adding highlights.

Turn off the first two layers (FOOBAR, FOOBAR #1) and the background layer, then press Ctrl+M to merge all visible layers. Change your foreground colour to dark grey. Press Shift+O, select text, then press Ctrl+, to fill the layer with dark grey.

Turn on the first three layers (FOOBAR, FOOBAR #1, FOOBAR #20) and press Ctrl+M to merge all visible layers. You should now have just one text layer and one background layer.

Press U to activate the 'fuzzy select' tool, click on an empty space right next to the text, then press Ctrl+I to invert selection. With the text selected, click on Edit > Stroke Selection, set line width to 2 pixels, and click 'Stroke'.

Click on Image > Autocrop Image to shave off the excess, press Shift+Ctrl+E to export to PNG, and Steve's your uncle!

I remember the first live website I ever built. It was the summer of 2001, and I was finally allowed to surf the Internet to my heart's content - before that bandwidth was too precious to be squandered on aimless browsing. One of the first things I did with my newfound freedom was open a Homestead.com account and start tinkering with web pages. I had some experience with MS FrontPage, but this was different and exciting: build the entire thing online! Get a free subdomain! Visit your site from any computer connected to the Internet! "Yes," I thought, "I'll make a website for that club I founded at school."

Shortly after I started, my host decided to limit the number of free pages one could create to a measly three - but that didn't deter me at all. I sketched out multiple layouts on paper until I'd found the perfect design, then put it all together in the drag-and-drop editor. The website was named 'Home 4 Animals', and the three sections were 'living room' (home/welcome page), 'hallway' (notices and announcements) and 'study' (membership list and club history). The tiled 'wallpaper' (background) was a pink and yellow wheat design painstakingly drawn using the airbrush tool in MS Paint. The site would have been almost decent, if it weren't for the hosts of flapping, hopping 3D animal GIFs from AnimationFactory.com that slowed the load time down to a crawl!

Eleven years on, Homestead.com and AnimationFactory.com are still alive and largely unchanged, but I'm sort of glad my abomination of a first effort no longer exists. If the interwebs have taught me anything, it's that it's perfectly OK to mess things up as long as you learn from it and move on. So move on I did.

Companion piece alert!

Little things to do for the depressed person in your lifetag:mingyu.co.uk,2018:/blog/fight-depression/2013-05-05T18:00:06+10:00

Depression is real, debilitating, and tricky to deal with. Chances are that you know someone with the condition, but are hesitant to 'open Pandora's box', as it were. You're right - it's probably not in your or their best interest to go there. But that doesn't mean you can't look out for them, and from what I've experienced, the kindness of friends and acquaintances goes a long way in the battle against depression.

Some things you can do

Get in touch with them every now and then. Even if it's just to say 'hey what's up' or 'haven't heard from you in a while, how's things?' Depression saps ones energy like nobody's business...when a person can't muster the energy to go downstairs and eat, socialising is going to be very low on their priority list! So initiate contact - and don't be offended if they don't reply.

If you are close friends with them, let them know you are there to talk to if they ever feel like it.

Counter their pessimistic views with optimistic facts. Solid, relevant facts, not vague, feel-good adages. So a response to 'I've ruined everything' could be 'you have messed up X, but you still have Y and Z!' 'I could have done X' - 'yes, but on the bright side, you've done Y.' 'I'm a terrible person' - 'you feel that way, but I think you're a great X. So does A.' The key is to acknowledge their feelings as valid, then show them an alternative viewpoint.

Let them know you care about them. Even if it's a 'you look a bit poorly, would you like me to make a doctor's appointment for you?' Even it's a small, kind gesture like getting their post for them. Or saving them a seat. Or offering to eat lunch together.

Offer to hug them. I don't know why this works but it gets me EVERY DAMN TIME. Word.

So I was lying in bed, thinking about how lucky I was to have all these loyal, awesome people in my life...the very least I can do is try to pass it on. As you-know-who correctly say, 'every little helps' - for someone grasping at straws, every straw matters.

How to fix FinalSense blogger templatestag:mingyu.co.uk,2018:/blog/fix-finalsense-blogger-templates/2013-07-14T18:10:52+10:00

Back in my blog-fever days when the leap from idea to blog took a matter of minutes, FinalSense was my go-to resource for XML blogger templates. Their designs were simple, classy and abstract enough to blend seamlessly with whatever content I had in mind.

Then somewhere along the line their photo host - Picasa Web Albums - decided to change their default image size, effectively messing up a third of my blog layouts. After a bit of tinkering I figured out the solution was to add s900/ to the image URLs, thereby restoring them to their correct sizes. Step-by-step tutorial:

Open Blogger and click on the blog you want to fix. Go to 'Template' in the left menu and click on the 'Edit HTML' button.

A warning will come up - click on 'Proceed'.

Do a search (press Ctrl+F) for .jpg.

Find the first forward slash (/) to the left of .jpg and add s900/ directly after it. E.g. ...6R64mI/back-to-the-nature-2.jpg becomes ...6R64mI/s900/back-to-the-nature-2.jpg

Do the same for all remaining instances of .jpg. Preview, save, and you're done!

Songs From District 12tag:mingyu.co.uk,2018:/music/songs-from-district-12/2013-12-19T03:59:26+11:00A couple of songs inspired by the Hunger Games trilogy. My first foray into songwriting.

The Hunger Games isn't the most well-written piece of fiction, but the sense of history it evokes is immense. There are two sets of lyrics in the books - one is a lullaby Katniss sings to comfort a dying Rue, the other is a forbidden song that becomes a motif signifying frustration and despair. Although I wasn't too taken with the lyrics, I was curious about how people would interpret them. The official version of the lullaby, Deep In The Meadow, was disappointing: it's a nice song, sure, but somehow it didn't fit in with my image of Panem. The various fan made versions of The Hanging Tree didn't cut it either, so I decided to write my own.

I wrote the music for Deep In The Meadow first. It was fairly straightforward: a soothing rhythm, a predictable crescendo, a gentle ending, and you have a lullaby. The Hanging Tree was a different matter. I got the main melody down early on, and although the book describes this song as being the same melody sung four times, I couldn't help but feel underwhelmed by what would have been the background music to Katniss' fear. I fiddled around with the accompaniment and chords, and finally in May I added the bridge to provide a bit of contrast and highlight the sense of longing. The new notes strained the lower end of my voice so at the last minute I shifted it up a couple of semitones, changing the key from E minor/A minor to F# minor/B minor.

This is probably the hardest project I've ever done. When I started out I knew very little about music theory and nothing at all about music production. My voice was weak from being out of practise. The melodies came easily, but the rest took another year or so to achieve. In the end I was running out of 'studio time' and so thoroughly sick of the tunes that I took the recordings with the least flaws and said "right, I don't care if the vocals are wobbly, this will have to do!"

Materials used

Everything apart from the tin itself comes from my tinkering stash (interesting bits of packaging accumulated over the years).

John West Grilled Sardines tin - about half an hour in the canned goods aisle and many funny looks later, I decided that this was the perfect size, shape and colour for the Pi.

Green Stuff - an epoxy putty

thin card - for sealing the Green Stuff

clear PVC packaging - originally held a table top mirror

tracing paper - for the Raspberry Pi logo

craft glue - for sticking down the logo

Blu-Tack - for securing the clips that hold down the lid

double wire twist ties - from bags of brioche rolls

Tools used

I borrowed the first two off a housemate; everything else is mine.

pliers - for bending and flattening flaps

a wire cutter - for cutting off extra bits

an awl - for drilling holes in the tin

tweezers - for delicate manoeuvres

a lolly stick - a rudimentary measuring stick

pencils and pens - for marking off the lolly stick and nudging flaps etc.

a clothespin with a curly bit on the end - for lifting the Pi out of the Green Stuff

How to make one

Prepare the Green Stuff, form it into balls and press them into the corners of the tin.

Blu-Tack paper onto the underside corners of the Pi and squish them into the Green Stuff. You can peel the paper off once the Green Stuff has dried. I left out the paper bit first time round and accidentally gave my Pi knobbly corners!

Draw openings on the outside of the tin. For squarish holes, join the corners to form a X. For long narrow ones (such as the SD card slot), join them up with two tail-to-tail Ys, like this: &gt;--&lt;

Lift the Pi out of the tin and mould the Green Stuff with your fingers so that it slightly overhangs the impressions left by the Pi. This will help secure the Pi. (Make sure you don't obstruct the power jack and Ethernet port!)

While the Green Stuff is drying, make the lid: trace the lip of the tin onto a plastic sheet, shrink the shape by about 3mm on each side and cut it out. If your plastic is flimsy like mine, make a second one by tracing the lid onto another sheet.

To make the fake etching, trace the Raspberry Pi logo onto tracing paper and cut it out. I used the Raspberry Pi Twitter icon because it was just the right size. Gently dab at the cutting with a blob of Blu-Tack (or an art eraser) to get rid of pencil marks.

Mix 1 part craft (PVA) glue with 2 parts water and soak the cutting in the solution for a couple of minutes. Blot off the excess, then position it in the middle of the lid. Leave to dry.

Back to the tin: remember those Xs and Ys? Drill holes along them and join up the holes to form little flaps. Keep a firm grip on the tin while you're doing this, and ease the awl in by turning and wiggling instead of stabbing.

Poke a pen through the openings and lever the flaps into place. Use pliers and wire cutters to tame particularly unruly ones. Tip: whenever the pliers are straddling a wall of the tin, pad them with thin card so they don't scratch the paint.

If you have any Green Stuff left over, use a couple of blobs to secure the lid. Otherwise make clips out of wire ties and stick them in place with Blu-Tack or glue. Shave off a couple of millimetres from each end of the lid to make it fit correctly, pop the lid back in, and voilà - a FishyPi!

You know that sinking feeling when you pull something out of the washing machine and the words 'shrink ray' pop into your head? That's how this project started. I'd accidentally put a lambswool cardigan in the 'standard' laundry pile instead of the 'delicates' one, and the result was a much-too-small but nicely felted garment - just right for my Sony Reader!

The zip and bias tape trim I got from a local fabric shop. I cut out pieces from the front and back of the cardigan (taking care to preserve one of the pockets) and joined them together to make the cover, then added cardboard to stiffen it up. I wanted a case that could be folded back on itself into a 'reading platform', so I went for a chunky reversible zip instead of a normal one. Unfortunately the elastic I used was too weak to hold the (heavy) reader in place so I've never actually used the case for reading, only for storage.

In October 2010 I went on a geography field trip to Athens, Greece with 24 others from my year. On the last day our lecturers surprised us with an award ceremony for random achievements - I got a cap labelled 'ΕΛΛΑΣ' as a 'Best Greek Award'! We in turn got our lecturers presents, and these tongue-in-cheek trophies were my offering.

Each trophy is about 7 inches tall. Inscribed on the base in fancy lettering is the name of the award, the name of the recipient, and a short description of what they did to merit the award. The trophy stands are plastic 'Tesco syrup sponge pudding' pots kindly donated by a housemate. The vegetables themselves are origami models folded with double-layered craft paper and attached to the stands with lolly sticks. I had diagrams for 'Green Pepper' but the model didn't resemble the real thing very much, so I made my own design:

3D Floorplantag:mingyu.co.uk,2018:/crafts/3d-floorplan/2013-04-28T04:03:06+10:00A 3-dimensional floorplan of my house, made from one cut and folded sheet of paper.

I was organising a games night at my house which potentially included games like 'sardines', when it suddenly struck me how odd the layout of our house was. I could draw a map to help people get around, but why not go the whole hog and make a model?

I did a few freehand drawings and cut them out to get a rough idea of proportions. Once that was down I drew a fresh design with a ruler and started to assemble the model - surprisingly it only took me one go to get it right! The paper was the thickest I had on hand but still it succumbed to warping after a couple of hours.

Needless to say the game of 'sardines' was a hit.

Cardboard Broomsticktag:mingyu.co.uk,2018:/crafts/cardboard-broomstick/2013-05-06T03:52:40+10:00A prop made for the Wicked Witch of the West during the 2009 24 Hour Charity Musical.

The 24 Hour Charity Musical, which took place on the 16th and 17th of March in 2009, is a biennial event hosted by the Sheffield University Theatre Company (SuTCo) that aims to stage a musical within literally a day: once the title is announced, the crew only have 24 hours to assemble their cast, set up the stage, lighting and sound, prepare scenery, costumes and props, rehearse, and put it all together into a musical.

I was on the props team. We were given a list and orders to make, buy, borrow or purloin all the required props before showtime. Most items on that list we found in shops or borrowed off people: tights, a hairbrush, a basket, a toy dog etc. Oddly enough, the one thing we couldn't find was a broom! It was late; the 24 hours started at 7pm, and by the time we'd admitted defeat it was past midnight. Our team leader went on a raid of the 'Bar One secret cellar' that reputedly housed all the broken doodads you could ever dream of, and sure enough, returned with a sturdy mop handle. "We'll have to make our own," she sighed.

Challenge accepted! I volunteered since I was still alert and intrigued by the task. Stepping over snoring sleeping bags, I crept through the halls of the Octagon gathering corrugated cardboard. As always I did a prototype first - it didn't work. I'd sliced the cardboard along the grain and the strips turned out too stiff to bind to the pole. Thus I decided to do it the 'French seam' way: I cut/tore longer strips across the grain, lined them up around the pole, bound one end with duct tape, bound it again further up the pole, then bended the strips down and secured them with a final ring of duct tape.

The finished product looked distinctly broom-shaped and suitably gnarled. I trimmed the 'twigs' to give it some character and handed it in. From what I was told afterwards, the Wicked Witch of the West was very pleased with her broom and even took it home after the show!

I'm a die-hard minimalist, always striving to keep my (coded-from-scratch) stylesheets within 5 kB - in fact my other personal website has just 1.07 kB worth of styling! If I do go over, it's usually due to hefty CSS resets or workarounds and not a result of excessive embellishment on my part. So when I stumbled upon the super-lightweight Stacey CMS I simply had to build something with it.

Stacey is rather unusual in that it generates webpages without using databases. This makes it highly portable: duplicate your public_html directory and you have a complete, working copy of your site. Another thing I like about Stacey is that it doesn't have an admin interface - see, if the admin and developer are the same person, that means less switching accounts and more coding! Short of a custom CMS, Stacey is probably the most minimalistic a dynamic website can be.

I wanted my home page to be slightly messy but nonetheless accessible, so I went for alternating images and text boxes. The Masonry plugin looked neat, but I wanted my boxes to be the same size and people tend to scan horizontally anyway. Like most of my designs, the layout for this site is a fluid/elastic hybrid with resizeable text and wrapper but fixed width blocks. (Because I hate horizontal scroll bars.)

Some older browsers don't support text shadows and fixed position lists, but these elements degrade nicely in most cases unless you're a rare specimen who uses Dillo or something!

Companion piece alert!

SUCV website 2012tag:mingyu.co.uk,2018:/web/SUCV-2012/2013-04-28T02:27:29+10:00A brand new design and CMS for the Sheffield University Conservation Volunteers website.

In September 2011 I joined the Sheffield University Conservation Volunteers (SUCV) 2011/2012 committee as Webmaster and Publicity Officer. I was intrigued by the history of SUCV and aspired to make as much of it public as possible, and the website was the perfect medium.

The potential amount of material to be managed was beyond the capabilities of the old website, so I set about upgrading the CMS (Content Management System). I decided on Drupal due to its versatility - should future webmasters want to expand the role of the website, here was a solid foundation on which to build.

In order to save time I used Drupal Gardens' ThemeBuilder to generate the base theme, which I then modified with custom CSS. In addition to migrating old content, I made a Billhooks Magazine 2010 web version, wrote a web manual, and updated the Residentials and Past Committees pages with information unearthed from SUCV's archives.

As we no longer had a high-resolution version of the old SUCV logo, I redesigned it and made a vector image version in Aviary Raven. The new design makes use of negative space between the leaves - the subtle 'S' stands for 'SUCV' of course!

Some features of the website (such as the automated newsletter subscription widget) were deemed unnecessarily complicated by the committee so I removed them. We later decided to focus on email and Facebook as our main methods of communication, but the corresponding features on the website were left intact as future committees might want to use them.

SUCV website 2011tag:mingyu.co.uk,2018:/web/SUCV-2011/2013-04-28T02:26:25+10:00An updated version of the old Sheffield University Conservation Volunteers website.

The 2005~2010 version of the website was buggy and had content hard-coded into the template, meaning that committee members couldn't edit parts of the site that were outdated. I volunteered to fix it, and once I'd delved into the back end it became clear that a makeover was long overdue!

The philosophy behind the design was to complement legacy content (such as the distinctive title banner) while establishing an idiosyncratic yet approachable persona for SUCV (carefully thought out front page blurb, 'Biscuits!' page etc). The result is a website that runs on a modified version of the old custom CMS, but is thoroughly new in outlook.

The Daily Geographertag:mingyu.co.uk,2018:/web/daily-geographer/2013-04-30T17:21:05+10:00A blog about day-to-day geography and undergraduate life.

To an intellectual omnivore and visual-spatial learner like me, geography is the cream of all subjects. It is a broad, constantly evolving discipline that has somehow managed to stay alive despite its habit of mingling with other disciplines to the point that boundaries are more imagined than real. Human geography (one of the two main sub-fields) is even harder to define: The Dictionary of Human Geography devotes 5 pages to the matter, while 'history of geography' gets only 3 (there is no entry for 'geography', oddly enough). My personal definitions would be:

Geography: the study of spatial interactions...

Physical geography: ...between naturally occurring phenomena

Human geography: ...between everything else

Given geography's relevance to everyday life, it's a wonder that the blogosphere isn't teeming with geographers! In a fit of inspiration I set up the blog and made a promise to update it every weekday, managing to do so for one semester. Unfortunately the long summer break destroyed the momentum so I let it go afterwards.

The blog was an invaluable exercise in self-discipline and writing for a general audience, and made me appreciate how much time and effort goes into maintaining a well-informed, regularly-updated blog.

Lyrics from the Song Dynastytag:mingyu.co.uk,2018:/poetry/lyrics-from-the-song-dynasty/2013-04-28T02:21:03+10:00Accentual-syllabic English translations of Classic Chinese poetry.

The Song Dynasty of ancient China (AD 960 ~ AD 1279) saw the height of ci poetry, which started life as lyrics set to popular tunes of the day. (That the name of the dynasty matches the form is a happy coincidence!) Though not as popular as its more rigid and formal cousin jintishi (regulated verse), its irregular line lengths and musicality eventually helped establish ci as a poetic form in its own right. While jintishi was the language of scholarly and political aspirations, ci became the voice of the personal sphere: longings, fears, delights, sorrows, and everything in between.

There have been many attempts to convey the exact meaning of ci poems, but I have yet to come across an anthology that focuses on their prosody - the metre, rhyme and flow of sounds that make reading ci so enjoyable. In an attempt to right this, I have developed a way of translating ci as accentual-syllabic verse: I scan the original for natural stress patterns, transcribe them into a metre suitable for English, then translate the piece using this new metre. As Chinese characters carry much more meaning per syllable than English words, I prefer reconstructing imagery to translating literally word-for-word. The resulting poems read very much like their Chinese counterparts in terms of rhythm and images evoked.

The cipai for each poem – the name of the tune/metre to which the lyrics were set – have been preserved in square brackets for easy cross-reference.

Light Paintingtag:mingyu.co.uk,2018:/other/light-painting/2013-05-02T15:50:36+10:00Pictures painted by waving a light source in the air and capturing its path with long exposures. Collaborator: Sally Zhen

My friend Sally and I experimented with various light painting techniques.

The setup

all external light sources were switched off to ensure total darkness

the camera was set to fireworks mode, the longest exposure available (about 4 seconds)

one person manned the camera and tripod while the other painted

the painter faced the camera and waved the light source in front of her to paint

The light alphabet

The alphabet was painted with the Light Paint app colour set to 'rainbow' and brush set to 'line'. I chose this configuration because the rainbow effect was neat and the 'line' brush was similar to the broad-nib calligraphy pens I'm familiar with. I painted the whole thing in mirror writing, so what you see is exactly what the camera captured - the letters have not been flipped horizontally. The typeface itself is a weird hybrid of traditional cursive and Monotype Corsiva.

Tools used

a Nikon Coolpix S210 camera

a pocket tripod

an iTouch

fairy lights

a light pen

Lost in Sheffieldtag:mingyu.co.uk,2018:/other/lost-in-sheffield/2013-04-20T02:56:26+10:00Portraits of objects found abandoned in Sheffield, collected over the course of three years.