Jag Reehal: Responsive Workflow with Grunt, at Refresh Cambridge

Grunt logo

At last night’s Refresh Cambridge meetup, the first of 2014, we were lucky enough to have Jag Reehal come to speak about his experiences with using Grunt — the JavaScript Task Runner — to facilitate easier development of responsive websites.

After some introductory slides to define responsive design (fluid grids, flexible images, media queries) Jag jumped straight into some live coding demos. Here’s a summary of what he demonstrated, with links to the relevant Grunt plugins in the NPM archive where I could find them:

  • A basic Gruntfile is a series of tasks that you want to run, written in fairly basic JavaScript. You can output text, warnings, and cause a task to fail.
  • The time-grunt plugin lets you see how long tasks took to run.
  • The grunt-concurrent plugin allows you to run two or more tasks in parallel instead of in series.
  • It’s easy to create your own Grunt plugin; use the grunt-init-gruntplugin as a template. It includes tests, which is a important part of any plugin.
  • Since we want to build a responsive page, we’ll need to access it on a variety of devices while developing. The grunt-contrib-connect plugin starts a basic server on a local address, so you can load your work-in-progress on your phone or tablet as you work. It also includes a livereload feature, so you don’t have to refresh each device after making changes to the source files.
  • We’ll be using media queries for responsiveness; in order to avoid repetition of values or breakpoints in our CSS, we should use a preprocessor like LESS or SASS.
  • The autoprefixer plugin is especially clever; just tell it what browsers you want to support (or even how far back it should go to support) and it will automatically fill-in browser prefixes for any CSS properties that need it. And the best thing is that you don’t have to worry about going back to change support when new browsers come out!
  • By using CSS compilers, we can easily split out the various parts of our code into logical areas, and import them into one single stylesheet.
  • The grunt-browser-sync plugin is almost like magic; it synchronises form values (and presumably UI state as well) across browsers/devices — update something on your desktop and the same change will appear instantly on your mobile! It also cleverly doesn’t force a full page reload if you update a source file; it simply injects only the updated file into the page, preserving any changes you have made. And it even lets you scroll in sync across devices too!
  • Images are the biggest web performance killer. Responsive images is a confusing topic; you must consider compression, spriting, and retina images. Spriting images in particular has always been a lot of work.
  • The grunt-spritesmith plugin lets you simply maintain a source file full of images; when run, the plugin converts all the images into a single sprite, together with the accompanying CSS. Adding a new sprite is now just a case of dropping the new image into a folder; no more re-calculating background positions!
  • Alternatively, you might want to use base64 encoded images. The grunt-image-embed plugin handles this for you (although obviously you need to balance the multiple files vs CSS size performance issues).
  • The ultimate icon solution is provided by the grunt-grunticon plugin, which takes SVG icons as its default type, while also creating a sprited PNG fallback and individual images, and uses JavaScript to decide which is the best format to use.
  • When it comes to larger images, no standard solution has been decided upon yet, but in the meantime the grunt-responsive-images plugin does most of the work for you. Simply provide it the large image and it will automatically create resized versions that are interpreted by the <figure> markup to serve different images depending on screen size. Only the images needed are downloaded.
  • An alternative is the BBC’s Imager.js library, which allows you to specify the breakpoints in a simpler JSON format rather than writing out a full set of srcsets.
  • For creating production-ready resources — concatenated and minified — there are plenty of plugins such a cssmin (for CSS), uglify (for JavaScript), smushit (for images), etc.

Unfortunately I had to leave before the end of Jag’s talk, but I’ll add any additional notes I receive from other attendees. It was a great demonstration of the power of Grunt’s plugin architecture (and I’m sure that a lot of these plugins work exactly the same within new-kid-on-the-block, gulp.js too), and reminded me of the recent blog post complaining that too often programmers don’t bother to automate repetitive tasks. Armed with the power of the relatively easy-to-install Node and Grunt, designers finally have a way to automate away the most time-consuming parts of their job, and concentrate on building great user experiences.

If you’ve never given Grunt a try, I highly recommend it; it’s not as scary as it looks, and you’ll be amazed at how much easier it can make your life!

Resolutions, 2014

For the last two years, my New Year’s resolutions have been pretty similar. Make more stuff. Write more stuff. Something about fitness. It’s tempting to come up with something completely off the wall for 2014, and declare that I will learn to speak Russian or take up water-skiing. I think the fact that I will be turning forty towards the end of the year is another pressing factor; these arbitrary lines in the sand have such psychological meaning to us, despite the knowledge that there really is no significance to this age or that.

My 2013

Looking back at 2013, I think I did reasonably well with my resolutions for the year. I wanted to finish building my own GTD application, and I think I’m 80% of the way there. Ruck is a PHP-based system built on CodeIgniter; it’s missing a few pieces of functionality and needs a bit of polish, but it’s working well for what I want from a project/task management system. I haven’t done much work on it recently, as I think tackling the latency by converting it into a JavaScript-powered app is the next logical step, and that’s a little outside of my comfort zone at the moment.

Despite reading fewer actual books than I did in 2012, I still feel I did alright in terms of trying to “read more”. And “write more” was definitely a success, to the tune of 75,000 words plus over the course of the year in various places, including a couple of experimental articles on my new favourite place on the web, Medium.com.

My final resolution, “more varied fitness”, unfortunately didn’t really go anywhere. I went on a couple of bike rides and took the kids swimming most weekends, but I still mostly confined myself to running. I even had a couple of half-marathons planned until foot issues laid me up for the last couple of months of the year.

For 2014

  1. Take more photos. To start with I’m going to resurrect a resolution from 2012 which I never made much progress with. I’d like to take more photos, but carrying around a heavy SLR all the time is not really an option. However, this year I have a new favourite toy — my shiny new iPhone 5s — and with that high-quality camera constantly in my pocket, I have hopes that I can manage to take more photos than the odd Instagram of my dinner.
  2. Be a good role model. There are a bunch of different things I could put here — keeping myself fit and healthy, making the CodeClub I’m starting next week successful, being a better manager and leader at work — but I think this covers all of those plus a bit more besides.
  3. Do something different. Aside from the photos, all I ever seem to do is web-based. This year I should really try something else occasionally. I have no idea what that might be, though.

So, more conscious self-improvement? Or just another arbitrary list against which to judge myself in another year’s time? Time will tell.

Oh, and I think I might get a tattoo; it seems a more sensible way to act out a mid-life crisis than buying a motorbike.

Reading List 2013

After skipping a couple of years, in 2012 I once again started to record a summary of the books I had read over the previous twelve months, using my handy Goodreads account (not that I ever use the site for anything else).

Looking back, this year seems a paltry amount compared to last, although I suppose the fact that I undertook a literature history course in 2012 skewed the results somewhat. I’m not going to bother splitting the fiction list up into fiction/fantasy this time due to the shortness of the list; any links are to my reviews blog.

Fiction

  • Ed the Happy Clown (Chester Brown)
  • The Old Man and the Sea (Ernest Hemingway)
  • Apocalypse Nerd (Peter Bagge)
  • Player One (Douglas Coupland)
  • The Dispossessed (Ursula Le Guin)
  • Tigana (Guy Gavriel Kay)
  • The Great Gatsby (F Scott Fitzgerald)
  • Ender’s Game (Orson Scott Card)
  • Speaker for the Dead (Orson Scott Card)
  • The Shambling Guide to New York City (Mur Lafferty)
  • A Farewell to Arms (Ernest Hemingway)
  • The Fellowship of the Ring (JRR Tolkien)
  • Sweet Tooth (Ian McEwan)
  • The Bloody Red Baron (Kim Newman)
  • Mentor (Tom Grimes)
  • Wolf Hall (Hilary Mantel)
  • Stoner (John Williams)
  • Redshirts (John Scalzi)
  • Bring Up The Bodies (Hilary Mantel)

As per usual the start of the year was dominated by Christmas presents, including a set of three Hemingway novels; I greatly enjoyed A Farewell To Arms, and still have For Whom The Bell Tolls to read next year. I also finally read Ender’s Game, just in time to not bother going to see the movie, and finished the year with Hilary Mantel’s pair of Booker prize-winning novels about Thomas Cromwell.

Non-fiction

  • Don’t Forget To Write (Pam Hobbs)
  • Getting Things Done (David Allen)
  • The Stranger’s Long Neck (Gerry McGovern)
  • The Naked Jape (Jimmy Carr, Lucy Greeves)

This list is a bit of a fib to be honest, since I finally finished the first two books which had been in a partially-read state for years. The one book I read for work, The Stranger’s Long Neck, was thought-provoking for anyone involved in UX.

Highlights

Out of the 23 books I managed to read, I think I’d have to put the pair of Mantel novels near the top of the pile. Despite their provocatively misleading style, they are beautifully written. Stoner is the other book I would recommend anyone pick up if they haven’t read it (and it seems to be one of those “best book you’ve never read” kind of hidden gems).

What I Listened To In 2013

I’ve been writing this yearly overview of what I’ve been listening to for several years. And yet, despite feeling that I am discovering new music every year, the top few bands somehow remain the same. This year seems particularly bland and uninspired, with hardly anything new in the list. Maybe Spotify has made me complacent about listening to new music; despite feeling that I’m experiencing more different music than ever before, it’s all an illusion.

Top 10 Artists listened to in 2013

  1. Metric
  2. Ginger Wildheart
  3. The Wildhearts
  4. Hey! Hello!
  5. Pearl Jam
  6. Young The Giant
  7. The Joy Formidable
  8. Guns N’ Roses
  9. The New Pornographers
  10. David Bowie

Comparing this year’s top ten artists to last year’s list, the top three remain the same, albeit in a different order, and two more entries from 2012 are still in my top ten. I don’t even remember listening to that much GN’R or New Pornos over the last twelve months, yet somehow they still manage to wind up near the top of the list year after year.

Top 10 Albums listened to in 2013

  1.  Synthetica – Metric
  2. Young The Giant – Young The Giant
  3. Hey! Hello! - Hey! Hello!
  4. The Big Roar – The Joy Formidable
  5. The Very Best of Ella Fitzgerald
  6. Tricks for Dawn – Mary Lorson
  7. 555% – Ginger Wildheart
  8. Copper Blue – Sugar
  9. Black Pudding – Mark Lanegan & Duke Garwood
  10. Fantasies – Metric / Spilling Blood – Oceanographer

Now this list of the top albums I listened to is at least a little more interesting and varied than the artists list.

I discovered Metric towards the end of last year, and I’ve spent a lot of time listening to their back catalogue, particularly 2012′s Synthetica. This year I also finally listened to Sugar’s excellent debut, Copper Blue, 20 years after everyone else in my generation. A single album that was actually released in 2013 sneaks in, in the form of ex-Screaming Tree Mark Lanegan’s collaboration with Duke Garwood. And I spent quite a while listening to the various excellent projects produced by ex-Madder Rose singer, Mary Lorson.

Track of the Year

According to Last.fm the track I listened to the most over the last year was actually Massive Attack’s Teardrop. But a close second was this standout track from my #1 album – Breathing Underwater by Metric:

Getting ThinkUp installed on MediaTemple (gs)

Via Meri Williams on Twitter I heard about Gina Trapani and Anil Dash’s new app, ThinkUp, a couple of days ago. It calls itself “a social data insights engine” which, as far as I can tell, translates as: “Klout, but useful.” They are currently soliciting donations in the form of yearly subscriptions to the service, in an App.net, users-should-pay-for-stuff-they-find-useful kind of a way.

However, the system itself is actually open source and available to fork on GitHub so you can host your own install. That’s what I did on my MediaTemple (gs) shared server; here are some of the issues I ran into and how I fixed them.

Install this and this and this

Forking the GitHub repo and then cloning it on my server was easy enough, but the installation process immediately complained about a couple of missing components. Firstly the session.save_path wasn’t set; this MediaTemple Knowledge Base article explains how to fix the problem (and this one tells you how to edit your php.ini file if you haven’t done so before).

The second issue was a little trickier. ThinkUp requires that PHP has the ZipArchive class installed; okay, no problem, this Knowledge Base article explains how to install PECL modules on (gs), and this blog post includes some more pointers. The ZipArchive class is actually named “zip“, by the way. However, when I downloaded and tried to install the module, it threw a bunch of parsing errors during the make step. Bugger. Eventually I figured out that 1.12.1 is a beta version of the module, so all I had to do was delete what I’d downloaded and try again with the stable version number (1.10.2 as of this writing):

wget http://pecl.php.net/get/zip-1.10.2

With that it compiled correctly, the ThinkUp install process was happy, and I was able to get it all up and running.

Cronplaining

One more issue cropped up when I tried manually running the data import tool from the command line:

Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in <redacted>/ThinkUp/webapp/plugins/expandurls/model/class.URLExpander.php on line 113

That cURL option tells the cURL request to follow any ‘Location:’ headers returned by the request. I’m not sure whether it has any effect on the quality of the data it gathers, since I don’t know whether any API calls would return a redirect (and it seems unlikely), but maybe someone will come along who knows more about this sort of thing than I do and can explain.

So, ThinkUp

Once I got it all going and the “insight generation” script had done it’s thing, you’re left with a ton of imported data from the various services it supports out of the box (and they plan to add more), plus some interesting ‘insights’ into what you’ve been doing on social media.

Screen shot of ThinkUp insights

I kind of suspect that it will be of most use to people who 1. have a lot more followers than I do, and 2. are a lot more active on social media than me; but it’s still an interesting alternative view of the loosely joined pieces of yourself online.

Coursera – Online Games: Literature, New Media and Narrative

Continuing my ongoing adventures in free online education, this month I embarked on my fifth Coursera course. Online Games: Literature, New Media and Narrative is a six week course run by Nashville’s Vanderbilt University that aims to explore “remediation” — the transplanting of one form of media into another — via the book-to-film-to-game transition of the ‘world’s greatest work of literature’, JRR Tolkien’s The Lord Of The Rings.

Students (more than 40,000 of them according to this Penny Arcade piece) are assigned both reading and in-game assignments in addition to the pre-recorded video lectures delivered by enthusiastic nerd-in-chief, Jay Clayton. It is fascinating watching experienced gamers and those totally new to any kind of computer game, let alone the complexity of an MMORPG, working and learning alongside each other in the course forums and online. Many established LOTRO players are incredibly generous with their time and resources, supplying new classmates with enhanced items and organising special sessions to achieve in-game rewards.

So far we’re only on Week 1. I’ve re-read The Fellowship Of The Ring, and re-watched Peter Jackson’s film of the same name (and bored my wife by pointing out all the discrepancies between the two); Discelas the Elf has reached level 16 and met Tom Bombadil, and I’m all set for another five weeks of relaxed study.

Lapsed Gamer

After such a long break from my semi-serious Warcraft days, it’s strange to be back playing an MMO again. The seductively easy gameplay and progression in LOTRO is not quite as seamless as WoW, but the addition of the background mythos and characters from Lord Of The Rings provides an added depth and impetus to carry on playing through the main questline, a key aspect of the game that WoW conspicuously lacks.

It has reminded me of the reasons I gave up playing WoW, though (and subsequently EVE Online, Warhammer, Defiance, and one or two others). The constant “live”-ness of the game world, and lack of a Pause button, elevates the action in the game to the importance of real life; you can’t turn away from the game for a second to speak to a child or kiss a partner, and the further you progress in the game, the more this anti-social monkey on your back demands attention, and for longer and longer periods of time.

Add to that the lack of any real-world output after countless hours of effort, and you have a recipe for a wasted life. I gave it up to concentrate on making something tangible, and I think I’m happier for it.

dConstruct 2013

Don't worry we're from the internet

Summer is over, the rain has returned, and the kids have gone back to school … which means it must be time for another dConstruct conference, in the UK’s alternately sunny and rain-drenched south coast hipster mecca: Brighton.

dConstruct’s relevance to the web seems to become more oblique with each passing year. This year’s theme, “Communicating with machines,” promised a day of “exploration and entertainment.” My employer Booking.com was sponsoring the conference for the first time, but those of us attending for the purposes of recruitment were also lucky enough to be able to watch many of the sessions. Here are some of my highlights.

Of Cyborgs, Toast & Gay Vulcans

Amber Case, also occasionally known as: “Hey, look, someone’s actually wearing Google Glass!”, started the day with a look back at the work that she has done with her startup Geoloqi in the field of ambiently location-aware applications. She and her team have done much in the real-world equivalent of Minority Report’s imagined individual-aware notifications, although hers were mostly confined to pushing interesting wiki information at users rather than advertising. Her look at the history of wearable computing was interesting, though, taking in the work done by Steve Mann and the MIT Borg Squad and the designers who, many years later, would go on to ship Google Glass.

Simone Rebaudengo’s talk was a fascinating exploration that asked what our digitally connected devices might actually want from their owners. His socially-aware toaster experiment — wherein networked toasters bugged their owners to make more toast both through online activity and actual knob-jiggling physical prompts — was brilliantly conceived, and even if the result has little obvious practical application, it prompts interesting thought about how more socially beneficial activities can be encouraged through a subtle combination of positive and negative reinforcement.

Musician Sarah Angliss discussed uncanny sound by way of the Uncanny Valley. Her talk took in music over the last several hundred years, digital versus analogue performance, and ended with a haunting theremin-and-talking-dolls-head performance of her music.

Maciej Ceglowski, the man behind Pinboard, delivered a deliciously funny insight into the world of fan- and slash-fiction. From his admitted initial mockery of the largely female community and their homo-erotic copyright-busting short stories, he explained how he came to appreciate their boundless enthusiasm and love for their community, and his examples of the lengths to which they would go to improve and maintain the tools they love provides an optimistic counterpoint to the usual mindless trollery of many online communities such as YouTube commenters.

Speaking of YouTube comment trolls, the day was closed out by comedian Adam Buxton taking a rambling look at things he did with his laptop. His question was allegedly: “Is my laptop ruining my life,” but from that starting point Buxton managed to encompass kittens with breasts, Garage Band, motivational quote websites, and of course his now-familiar descent into the strange world of YouTube commenting. With the audience in hysterics, he concluded that perhaps his laptop was not ruining his life after all… and with that, we all shut our laptops and went to the bar.

A word from our sponsors

dConstruct’s unique approach to ‘web’ conferences draws a much more diverse crowd than you might normally encounter, and the affordable price contributes to that diversity. Despite that, we still managed to talk to many designers and developers about the roles we’re looking to fill at our Amsterdam head office, and I’m happy to hear that our presence at these kinds of conferences is starting to become familiar and welcomed by delegates. We’re not a recruitment agency, as one confused delegate seemed to think; we are the designers you could be working alongside, and it’s great to have the opportunity to get out and share our enthusiasm with potential future colleagues. If you didn’t get the chance to come and chat to us during the conference, we’re always happy to talk — seek us out on Twitter or visit booking.com/jobs for all the details.

How to get the most out of Scrivener Composition Mode

It has so many features that it’s hard for anyone to pick their favourite part of Scrivener, the writing software that has been adopted by everyone from amateurs to professional authors. But one popular feature is its “Composition Mode” — a full-screen, distraction-free view that aims to allow the user to concentrate solely on getting their words on the page.

Yesterday, Twitter user @Alvesang posted a photo of his Composition Mode, and it was lovely. Since it took me a little while to figure out how to tweak the default options to achieve the same thing, I thought I’d write up how to do it.

Step 1: Choose a background

The first step is to choose your background image. If you’re artistic you could make your own, but Google Images is an easy source of suitable photographs. Search for something like “white landscape” for some appropriate backdrops.

Changing Google Images size search

The only restriction here is that Scrivener will not change the proportions of the image to suit your screen dimensions, so it’s a good idea to use Google’s Search Tools to limit your search to images that are the same size as your screen. (You have a problem if you regularly switch between an external monitor and a laptop screen, as their dimensions are rarely the same. In that case, you’ll need two images.)

Once you’ve chosen or created a suitable image, open Scrivener and go to View > Composition Backdrop > Choose… to select the image .

Select Composition Backdrop

Step 2: Adjust your Composition Mode settings

Enter Composition Mode, either by clicking the icon or hitting the appropriate key combination (Cmd+Alt+F on a Mac). You will enter the full-screen view, with a blank page in the centre of the screen, and display options on a bar hidden at the bottom of the screen. (Move your mouse to the bottom of the page if the options are not visible.)

Composition mode right side

To achieve a nice effect against the background, we want to get rid of the paper. Move the slider on the far-right all the way to the left (or click on the icon) to make the paper invisible so that the text appears to sit directly on the background.

Composition mode left side

You can also adjust the size of the text (Text Scale), whether the text is centred or against the edge of the screen (Paper Position), and the width of the ‘page’ (Paper Width). In general I’d recommend a combination of page width and font size that gives you the same number of words per line as a standard book.

The last thing is to get rid of the ugly default scrollbar. Open up Scrivener’s Preferences (Scrivener > Preferences, or Cmd+, on a Mac) and go to the Compose panel. Change the Scroller type dropdown to “No scroller” to get rid of the scrollbar altogether:

Scrivener Preferences pane

If you prefer a dark background, you can also flip the text colour via that panel — under Customizable Colors, select Text Color, then tick the ‘Override text color with color:’ box and use the colour picker widget to change the text to white.

Final result

Scrivener composition mode full screen

And that’s it, you’re done! Enjoy your distraction-free, immersive writing experience, thanks to the awesome flexibility of Scrivener.

How I made a website behave more like a book

I’ve been idly sketching ideas vague ideas for a redesign of my blog this week, and found myself heading down a well-worn route. A blog (I said to myself) is really nothing more than a collection of titles and text — maybe a few images thrown in here and there, probably a datestamp, but that’s basically it. Focus on the content.

But when I started sketching how that sort of content-focused site might look, I found that it all started to look a little familiar. Andybudd.com. Zeldman.com. Medium.com. Any of a dozen Squarespace templates. There was obviously a limit to what one could do with nothing but a title and a handful of paragraphs.

Nature Paint screenshot

Then, in an interview with Cole Henley in .NET magazine, I spotted a screenshot of the Nature Paint website. Although Cole has actually used a variety of different templates to build that site, it was the two-column layout that caught my eye. Perhaps that could be the difference, the tweak I was looking for to turn a blatant rip-off into something a little bit special.

Multiple columns with CSS3

Turning plain paragraphs into multi-columnar layouts is pretty simple with CSS3 now. The column-count, column-width and column-gap properties let you create equally spaced, equal height columns within an element, and you can break up the flow through judicious use of the column-span or column-break-before properties. You can even add nice newspaper-style dividing lines with the column-rule property.

However, there is one enormous problem with trying to display multiple columns of text on the web: viewport size. In a magazine or newspaper, you can hold the entire page in front of you, and your eye can easily move from the bottom of one column to the top of the next. But on the web, it is entirely possible that your reader has scrolled so far down to read a longer piece of writing that the top of the next column is off the visible page. Breaking off mid-sentence to scroll back up to find the next column is not an optimal reading experience. Overflowing columns

I started to draw up a list of requirements for a solution.

Recipe for a pleasant multi-column read

When you read a book, you are effectively reading a double-spread page with two columns of text. You read the left-hand side, then you read the right-hand side, and then you turn to the next page. Magazines might have four or more columns; newspapers up to seven or eight. But the principle is always the same — your eye is guided from column to column across the page, until you need to move onto the next. So, if on the web you are reading a lengthy piece of writing consisting of many many paragraphs, what we need to do is break it up into chunks that fit nicely into the viewport window. The viewport becomes your double-spread book page, and readers can comfortably read each collection of blocks of text before scrolling down to the next ‘page’ of content. I experimented with a few different methods of achieving this, and eventually arrived at a relatively simple JavaScript solution: View Demo page

We declare a single class to handle the column settings:

This class is applied to the container element, so that even if the script doesn’t run we still get something approximating what we intended.

The script then loops through all of the child elements of the container, moving them in batches into new containers, which each get the same .columns class applied to them — these represent the ‘page’ we discussed above. The size of each ‘page’ is determined through a combination of the viewport size, the font size, and the line height of the site. By supplying a list of those elements that should ‘break out’ of the multi-column ordering, we can make sure that the intended flow of the article is preserved. It’s not perfect, but it prevents columns overflowing the viewport and (I think) makes for a more pleasant, book-like, reading experience.

In browsers that don’t support CSS3’s column properties, the script has no effect, since both ‘before’ and ‘after’ states use the same declarations. (If I was using Modernizr I would probably check for support of those properties first, and not run the script at all if they were not present.)

Improvements and feedback

The script makes a reasonable job of breaking up the content into roughly the right-sized blocks for the viewport, but I’m sure it could be made a lot more accurate than I managed with my rusty maths. It also need to be made a little more flexible in terms of coping with different types of the same content (e.g. inline images and larger full-width pictures), and I can imagine that adding some basic keyboard navigation would make for an even more relaxed read.

I appreciate that this isn’t an implementation that is going to be useful for very many other people, but it was fun to figure out, and if you do happen to use it or have any suggestions for improvements, let me know.

Learning to write more proper

This weekend I completed my third online course provided via the Massive Open Online Course (MOOC) provider, Coursera. After the lengthier Fantasy/Sci-Fi and Film Theory classes I took in the last twelve months, this time I opted for a shorter, more straightforward course on writing, entitled: “Crafting an Effective Writer: Tools of the Trade.”

The course was an introduction to writing in English, and covered everything from the basic building blocks — nouns, verbs, adjectives, prepositions, and so on — through to types of sentence and how to approach a writing assignment.

The first couple of lectures, delivered in a rather basic fashion, initially led me to think I might have made a mistake signing up for the course. I’m a native English speaker who has been writing for decades; surely I don’t need to learn what a noun is! However, it turns out that while I may have internalised many of the rules relating to subject-verb agreement and past/present/future tenses, my actual ability to identify pronouns, or explain what a preposition was, was sorely lacking. And, while I might know how to spell ‘gerund’ and be familiar with phrases like “irregular verbs” or “past participle”, that didn’t mean that I completely understood what they were.

It seems that in all online courses the rate of attrition is high. The tutors reported that 43,000 started the course, but five weeks later only around 3-4,000 completed the final assignment. Considering that we only had to write a single paragraph, it was surprising that so many would drop out of the course.

As with the literature course I took last year, peer review played a large part in the grading process; and, like last year, the forums were full of students complaining that their peers didn’t have a clue how to mark correctly. I spent one evening trying to make the case that the peer review process is as much (if not more) about the benefit it provides to the reviewer than the score of the reviewee, but unfortunately there are still many who believe that an online course attended by tens of thousands should be subject to the same rigorous grading as an intimate study group in meatspace.

Anyway, I feel I benefitted from taking the course, not least because it blew away the last few cobwebs of doubt I had when helping my children with grammar-related homework. I’m still not entirely sure what “conjugate the verb” means, but at least I can tell my infinitives from my appositives.

The next course on my schedule, and the final one I have registered for so far, starts next month. “Online Games: Literature, New Media, and Narrative” promises to be an interesting combination of study and gaming … two of my favourite ways to spend time.