Category Archives: Learning

Code Club, a talk at Refresh Cambridge

At this month’s Refresh Cambridge event a couple of weeks ago, I gave a short talk about Code Club; what it’s all about, how to get involved, and what it is like to try to teach kids how to code. This is a summary of that talk.

Code Club

Code Club logo and cartoon robots

Against a background of media scare stories about a lack of British talent in massive global industries such as game development, and a more general feeling that children today are not given the opportunity to learn how technology actually works, a nationwide network of volunteer-led after-school coding clubs was born. Set up by two women, Linda Sandvik and Clare Sutcliffe, in April 2012, its goals were ambitious — a club in 25% of UK primary schools by 2015 — and it has since become a player in the emerging conversation around re-introducing programming to the national curriculum. (From September 2014, coding will be back on the school timetable for every child aged 5-16, making the UK the first major G20 economy in the world to implement this on a national level.)

Code Club is entirely dependent on volunteers, who come from a range of science, technology and engineering backgrounds. You don’t need to be a professional programmer to volunteer, although obviously an understanding of the basic logical structures underlying computer programming helps. It’s also not just restricted to schools; other venues such as libraries, community centres or museums could also be the perfect venue for a club.

As a volunteer, your commitment extends to not much more than one hour per week (plus travel time and a little bit of preparation) during school term times. Many volunteers find that their employers are happy to allow them the time off to volunteer for a good cause.

Projects

The projects, enough for an entire term’s worth of sessions, are provided by Code Club as downloadable PDFs. Each project walks the children through a logical progression of concepts, introducing more advanced ideas as they master the early simple ones. Topics covered at the moment are Scratch (a basic game and animation construction kit, encompassing many common programming paradigms), HTML and CSS, and Python.

Due to its visual nature, Scratch is a great place to start with the children (Code Club is aimed at ages 9 to 11, or years 5-6). They are walked through the basics of creating and naming sprites, assigning movement and actions through the use of loops and collision detection, and considering gameplay questions such as keeping score and determining win conditions.

As well as the PDF student handouts, the Code Club website also provides teaching materials covering the best way to deliver key concepts, and reminding you to allow the children space to explore and diverge from the plan. You can also download and print out supporting material such as door signs and badges — important stuff if you’re 9 years old!

All the lesson material is also open-sourced on GitHub, so if you find a mistake or want to contribute an improvement it’s only a pull request away.

What is it like?

Despite having been a school governor for a few years in the past, it was still intimidating to enter a classroom in the role of what seems, at least to the children, to be  a teacher. Giving a talk in front of an audience of adults is very different than trying to explain relatively complicated ideas to 9 and 10 year-olds, particularly when they have no qualms about interrupting with questions that would never have occurred to you to expect. Luckily, the children at our local school have been well-drilled in the right way to ask questions (hand in the air and wait), and once we had got through the initial basic introduction to Scratch and I had dispensed the project sheets they were all extremely excited with the material and eager to learn.

The most surprising thing was how engaged they all were. With my own children, I have plenty of experience in how difficult it is to hold their attention, particularly with anything that you have any enthusiasm of your own for, but in the classroom all the children dived straight in and were soon experimenting with their own ideas, from renaming sprites or choosing different ones to trying out different values for animation commands.

They were also genuinely helpful with each other. As you might expect there were one or two in each class who quickly grasped the concepts and rushed ahead, finishing the basic exercises quickly, but they would always (after proudly demonstrating their finished game to their friends) offer to help out the other members of the club, explaining where they had gone wrong or offering helpful advice.

Challenges

Of course, nothing is perfect, and information technology in primary schools is rarely of the highest quality. Teachers can also be very busy, particularly in small primary schools were one person can be filling several roles; often in such small schools, the person responsible for the ICT curriculum is not exactly what we would consider an expert.

There is also the occasional moment where the children’s attention will wander, or they will decide en masse to test your authority. But one of the main principles of volunteering at a club is that you are not there as a teacher; there should always be a member of staff present during the lessons, and it is their job to manage behaviour or dole out punishment, not yours.

How to get involved

If you’re interested in getting involved with a Code Club near you, or think your local school would benefit from hosting one, it’s very easy to get started. Contact the head teacher or ICT leader and arrange a visit to explain about Code Club (there are helpful materials on the website to help you). If they’re interested, they might ask you to attend an assembly to explain it to the children.

You’ll also need a criminal background check (DBS, what used to be known as a CRB check), and then it’s simply a matter of agreeing the regular time slot with the school. Some clubs run at lunchtimes, but most seem to be after school, from 3-4pm.

There is lots more information on codeclub.org.uk.  If you’re not in the UK, the new codeclubworld.org site provides information and advice about setting up a Code Club in other countries.

HybridConf, 2014

I’m just back from attending HybridConf, a 2-day web design/development conference in Stockholm. It was my first time in the city, and I found it strangely underwhelming. I don’t know whether spending so much time in Amsterdam has spoiled me when it comes to stunning architecture, but Stockholm just felt like it could be any of a dozen anonymous British cities, albeit with a lot more umlauts and street corner beggars.

The conference itself, in its second year and transplanted from Bath by organisers Laura Sanders and Zach Inglis, was excellent. The relatively small attendee count gave it an intimate feel, and the venue – the historic Rigoletto cinema – made this probably the most comfortable conference I’ve ever attended. Perhaps half of the audience were Swedish, with the rest travelling from all around Europe. There were even a few Americans present, and they in particular must have felt at home, as almost three-quarters of the speakers were from the US.

I and co-worker Erin Weigel managed to catch just about every talk; I particularly enjoyed Dan Rubin‘s opening talk about team communication (and it closely matched how we run our teams at Booking.com), and Scott Hanselman managed to be both funny and informative despite having to fit in a second unplanned appearance on stage to stand in for the missing Sara Chipps. But the highlights of the two days were both delivered by people building actual real things. Tom Soderstrom, CTA of NASA’s Jet Propulsion Laboratory, gave us an insight into the sort of work going on there, and how they apply startup culture and thinking within one of the world’s most expensive projects.

Then on Friday, GitHub’s Andrew Nesbitt tempted the live demo gods by wiring together an Arduino-powered, joystick-controlled ball live on stage. I was only slightly disappointed that he didn’t attempt to feed his rabbit live over the internet.

We were of course there as sponsors in our ongoing quest to hire the entire world, and it’s good to hear during the many conversations I had with other attendees that A/B testing and experimentation is becoming a lot more of a mainstream aspect of modern web design and development. We’ve become something of a fixture at web conferences now, and people are much more aware of what we’re doing and how we work. We had sponsored Experience Design Stockholm‘s event the previous evening, where Erin had delivered a great talk on experimentation that was also well-received; I think it’s strange that more large companies aren’t using this route to directly mingle with our industry’s top talent and promote themselves as maybe being that potential next job.

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!

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.

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.

Sound and colour in Hollywood, another online course

Today I completed another online course, this time on the development of sound and colour in Hollywood cinema. It was half the duration of my last one, so it seems to have gone by rather fast, particularly as I didn’t exactly follow the prescribed two-films-and-four-lectures-per-week schedule; I started off well, then skipped a week and a half, so the last couple of weeks have had quite a lot of movie-watching crammed into them.

It also didn’t feel as “academic” as the last course (on fantasy and science fiction literature) that I completed. I think the lack of any meaningful coursework to complete didn’t help — last time there was an essay per week to write, but here we were only asked to complete easy, short quizzes — although I certainly subscribe to the notion that the real benefit of adult study is in an enhanced appreciation of the work (and the world) rather than a meaningless certificate. I didn’t really participate in the online community that formed around the course, either, at least not as much as I did last time, so I felt a little disconnected from the process of learning and struggled with motivation to continue at times.

Overall, though, the course was fascinating: from silent film through the dawn of sound; from black-and-white into the age of colour; and from the 1920s right up to almost the present day. The films were not your typical top ten either, but were chosen by the professor to illustrate the points he wanted to make on each topic. I particularly enjoyed Docks of New York (1928), Scarface (1932) and All That Heaven Allows (1955); the Marx Brothers’ Monkey Business (1931) wasn’t as good as I thought it would be; and it was good to gain a detailed insight into my favourite director’s most stylised film, PT Anderson’s Punch-Drunk Love (2002). The lectures were never longer than half-an-hour, but still managed to contain plenty of insight into how filmmakers tackled the challenges of working with new technology — first revelling in the novelty of sound or colour, before its use becomes normalised and they can learn, over time, how to use it to effectively augment storytelling.

As with the previous literature course, I’m now left with a slightly heightened awareness of what I’ve been studying. It’s hard to just watch a film now without noticing how the costumes have been harmonised with the sets, or how lines and colours are used to focus the audience’s attention where the filmmaker wants it. I don’t know how university professors, or film critics, manage to ‘switch off’ if they ever want to watch something purely in the name of entertainment.

The next course on my schedule is an examination of storytelling and narrative in the context of online multiplayer gaming in June.