All posts by Matthew Pennell

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.

How to fix your screen resolution in Windows on your 27″ iMac

When I installed Windows 7 on my new 27″ iMac, there was one glaring problem. The screen resolution — a glorious 2560 by 1440 on OSX — would only go up to a maximum of 1600 by 1200 on Windows, resulting in a stretched and pixelated interface.

Installing the Windows Boot Camp tools didn’t fix it, but after Googling for a little while I found the solution. Simply install the most up-to-date drivers for your iMac’s graphics card; mine is an NVIDIA GeForce GTX 675MX, so I downloaded the drivers from Nvidia’s website, installed and restarted. Voila, instant perfect resolution!

Getting ‘Getting Things Done’ things done

At the start of 2012, one of the things I stated I would do was get a handle on my personal time and project management through implementing a definitive GTD process. Twelve months later, I was still looking… or rather, I had decided the only solution was to roll my own. Back then it was running on Laravel. A few months later, reworked in CodeIgniter for greater development speed, I can honestly say it is up and running.

I’ve been using Ruck for the last couple of months to manage most of my work. I’m also re-reading David Allen’s book again, and the combination of discovering what works and what doesn’t in the alpha app, plus identifying the aspects of the GTD process that are missing or not quite implemented in the right way, is developing into quite a buglist.

Design-wise I was fairly happy with the layout I had worked up a couple of months ago, but as time has gone on I’m finding it more and more inflexible or just plain ugly to live with for much longer. I’ve sketched up some replacement ideas, but I hope this isn’t the first sign of the same endless redesign itch with which my blog was infected. It’s hard to avoid the standard Mac-style “menu on the left, large content area” layout, but I’m not convinced it’s the most efficient way to display different types of content together. Allen says that “hard edges” are important; keeping a clear delineation between your calendar items and other ‘next action’ tasks — to me, that suggests the UI should reflect that separation in a clearer way than just splitting a list with a header.

Once the UX is finalised I think I should be able to get through the various tasks I’ve set myself fairly quickly. The biggest annoyance right now is the delay-after-click that comes from using an online application. Pages have to load, database queries have to fire, and it’s enough to make you feel less than 100% efficient. I did briefly consider starting with a native application, and even got as far as spending an evening reading Objective-C documentation, but common sense prevailed — much better to have a working app that I can use and finesse, than spend six months struggling to make Xcode do what I want it to. When the HTML5 version is done and dusted I’ll move on to converting it for the desktop (and iPad, iPhone and whatever else looks like fun).

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.

Nietzsche on critique

I want to learn more and more to see as beautiful what is necessary in things; then I shall be one of those who make things beautiful. Amor fati: let that be my love henceforth! I do not want to wage war against what is ugly. I do not want to accuse; I do not even want to accuse those who accuse. Looking away shall be my only negation. And all in all and on the whole: some day I wish to be only a Yes-sayer.

Friedrich Nietzsche, The Gay Science (1882)

Quick Fix: Google Analytics event tracking not working? Check your types!

Google Analytics’s Event Tracking is a powerful way to gain a deeper understanding of what is happening on your website. With event tracking, you can record each click, keypress or mouse move; it becomes easy to find out which fields are being filled or skipped on a form, or which thumbnails are being hovered.

I came across one sneaky gotcha this morning, though. I wanted to track the number that was displayed in a field at the point the user clicked on an “Add” button:

_gaq.push([
  '_trackEvent', 
  'Page Updates', 
  'Plus button clicked', 
  parseInt($('#count').text())
]);

On reviewing the data in GA, however, none of the clicks were being captured.

It turns out that Google will not record the event if the fourth parameter is of type Number. The simple fix was to make it a String type:

_gaq.push([
  '_trackEvent', 
  'Page Updates', 
  'Plus button clicked', 
  parseInt($('#count').text()).toString()
]);

Normally this wouldn’t come up as JavaScript has a tendency to treat most variables as Strings unless you’re careful about how they are created. In this case, relying on parseInt() to find a number turned out to cause more problems than it solved.

Resolutions, 2013 edition

January 2012 seems impossibly far away now. Moving house will do that to you — a previous life feels distant and remote, despite the year flying by in a rush of travel, holidays and new projects.

The two biggest changes in my life are causally related. In June I handed back the keys to our life in Amsterdam and returned to a decidedly quieter life in our little Fenland village. Exchanging a bike ride through the Dutch parks for a packed commuter train (or an even more packed easyJet flight) has altered the rhythm of my days, as has moving from an open-plan office of 150 to an office of six. I have much greater freedom to focus now, whether that be on reading during my commute, or headphone-insulated work in my private corner of the office.

The other change is also work related. I’ve moved, albeit temporarily (allegedly) to work on improving usability and the tools we provide to our extranet users. After three years of working on the frontend website for Booking.com, having to think about an entirely different set of users and their very specific needs and issues has been great fun, and — as the only designer on the team — I’m enjoying the freedom to make use of more modern techniques and tools than was possible on the frontend.

 Resolutions, 2012: Let’s see what you could have done…

Exactly a year ago, I published my three New Year’s resolutions. It seems apposite to revisit them and assess my success or lack thereof.

Firstly, I planned to find a GTD solution that worked. I ended up using Nirvana for most of the year, but when they moved out of beta and started charging I renewed my search. I’m temporarily using Remember The Milk at the moment, but finding it very clunky. So much so, that I’m taking steps to fix the problem once and for all. More on that later.

Secondly, I wanted to create more stuff. Unfortunately this has been an unmitigated failure; I continued to take hardly any photos (Instagram doesn’t count), left several web app ideas barely started, and failed to do much more than start a couple of new blogs. Again, more on that later.

Lastly, I promised to stay fit. That, at least, I can apparently do; I ran two half-marathons in 2012, and intend to keep going in 2013. So, more on that later. Or, well, now.

Resolutions, 2013 edition

  1. More, but varied, fitness. Regular running is all well and good, but the scenery round here can get pretty repetitive. This year I’m going to try a change in tempo — cycling, weights and swimming are all relatively cheap and easy to take up for some variety in calorie burning.
  2. Finish what I started. Over the last year I started building a GTD app (with Django), then a lifestream app (with Kohana), and finally the GTD app again (this time with Laravel). This year I intend to actually get something into a releasable state.
  3. Read more, write more. I haven’t been reading as much as I could, and I could certainly stand to up the variety of my reading material. Equally, despite thirty posts on this blog and starting two new blogs in the latter half of the year (book/film reviews on This Reviewer’s Life and daily writing exercises on Ten Minutes of Prose), I’d like to maintain a regular output — including sharing more technical stuff. I’m still receiving emails asking for help with a tutorial I wrote in 2005, so at the very least that needs updating. And the technical blog at work could also do with some design input as well.

So, in summary, not a lot has changed. I’m feeling pretty ambivalent about 2013; there’s nothing big on the horizon, and things are fine. Here’s hoping they stay that way.

Reading List 2012

At the end of 2007 I published a list of all the books I had read that year. It was a fun exercise, so in 2008 and 2009 I did it again. And then, for some reason, I stopped. God knows what I was doing that was so fascinating in late December of 2010 and 2011, but apparently I couldn’t find an hour to sit down and bash out a shortish list and some poorly considered opinions on the year’s literature.

The upshot of Younger Me’s laziness is that I now have a list of three year’s worth of books but no clear way to figure out where 2012 started. Using a combination of Amazon receipt emails and trying to recollect whether I received a particular book as a birthday or Christmas gift, I think I’ve ended up with a fairly accurate list — not that anybody else really cares…

In previous years I split my reading list into fiction, non-fiction and fantasy. This year has skewed heavily towards fiction, but I may as well keep the same format for the sake of consistency.

Fiction

  • Infinite Jest (David Foster Wallace)
  • For The Win (Cory Doctorow)
  • Alice’s Adventures In Wonderland (Lewis Carroll)
  • Through The Looking Glass (Lewis Carroll)
  • Dracula (Bram Stoker)
  • Frankenstein (Mary Shelley)
  • A Princess Of Mars (Edgar Rice Burroughs)
  • Herland (Charlotte Perkins Gilman)
  • The Invisible Man (HG Wells)
  • The Martian Chronicles (Ray Bradbury)
  • The Left Hand Of Darkness (Ursula K LeGuin)
  • Little Brother (Cory Doctorow)
  • Anno Dracula (Kim Newman)
  • The Stars My Destination (Alfred Bester)
  • Ready Player One (Ernest Cline)
  • The Moon Is A Harsh Mistress (Robert A Heinlein)
  • Citizen Of The Galaxy (Robert A Heinlein)
  • Flow My Tears, The Policeman Said (Philip K Dick)

Between July and October I took an online course from Coursera on Fantasy and Science Fiction, which required me to read a book every week and write a short essay on a relevant topic. That syllabus accounts for the middle section of my fiction consumption this year (from Alice’s Adventures… through to Doctorow), but also inspired me to seek out further reading within the genre; classics such as The Stars My Destination and (for some reason) the first Philip K Dick novel I’ve ever picked up.

The literature appreciation aspect of the course also inspired me to start a new reviews blog, where I’ve been posting reviews since late September; I’ve linked to any reviews of books in these lists.

Non-fiction

Tuva or Bust! is the story of Richard Feynman’s attempts to reach the geographic centre of Asia; I first read it as a teenager, and the memory has stayed with me for almost twenty years. I finally bought it again, and it’s still a great (if old-fashioned) read. Wil Wheaton’s memoir is also fantastic, one of those books where the hackneyed phrase “raw honesty” genuinely applies.

30 Years of Adventure was a Christmas present from my lovely wife; for anyone with fond memories of adolescent roleplaying, it’s a fascinating look at the creative and business developments behind an almost forty-year-old brand.

Fantasy

  • The Heroes (Joe Abercrombie)
  • The Blade Itself (Joe Abercrombie)
  • The Summer Tree (Guy Gavriel Kay)
  • The Wandering Fire (Guy Gavriel Kay)
  • The Darkest Road (Guy Gavriel Kay)
  • A Song For Arbonne (Guy Gavriel Kay)
  • Red Country (Joe Abercrombie)

I didn’t realise until making this list what a limited range of fantasy authors I had been reading this year. Abercrombie remains my favourite new author, although his latest book Red Country hasn’t immediately jumped to the top of my list of his work. And, as ever, I re-read a fair amount of Kay, even re-buying several books that were lost during last year’s house move.

What is best in (shelf) life?

Of the 31 books I’ve made it through this year, my favourite — the one that had me sitting up until late at night and reading first thing in the morning — was undoubtedly Ernest Cline’s Ready Player One. Wil Wheaton’s book was also very good, and of course I’ll always recommend Joe Abercrombie or Guy Gavriel Kay to anyone with a taste for fantasy.

Sitting in the pile for next year, I have Douglas Coupland’s latest Player One, more LeGuin, Ed The Happy Clown and Peter Bagge comics, Alan Partridge and Stephen Fry autobiographies, several Hemingway novels, Don Quixote, Ulysses and, um, Plato.

I’m looking forward to it.