Legends of the Sun Pig

March 4, 2010March 4, 2010

Moving forward

“The arrows. What they mean is, you control who you are by moving forward, never back; you move forward. That’s what I do. That’s what we’re going to do.”

When we moved to the Netherlands in 2007, I regularly had to explain to people that I wasn’t moving back. Our decision to emigrate to the Netherlands was influenced by my childhood in Limburg, but only in the sense that it had given us knowledge and experience of many desirable aspects of Dutch culture and lifestyle — not in the sense that I was trying to return to a “home” with which I had some kind of preternatural affinity.

We didn’t sell our house in Edinburgh immediately when we moved. We had intentions of renting it out, but nothing ever came of that; we ended up selling it just a few months later. But in those months, I stayed there whenever I went back to Scotland as part of my job at Skyscanner.

My first trip back was horrible. The house felt hollow and joyless: stripped of our presence, but haunted by our old furniture. When I visited the Mother Goose Nursery, that bright and happy place where Alex and Fiona had spent much of their early years, I found that most of the staff we had known and chatted with almost every day were gone. Some had moved to different nurseries, others had quit the profession altogether. It was like someone had cut out its heart, and, by association, also a piece of mine. When I went out for pizza with my friends, the city centre of Edinburgh itself felt oppressive and threatening. Everything had changed. And by everything, I mean me.

I have continued to work remotely for Skyscanner for the last two and a half years. I have been back to Scotland regularly, and fortunately none of the trips have been as bad as that first one. Most of them have been great, in fact. Despite not being a very sociable person, I do thrive on contact with my most excellent colleagues. Spending a couple of days in the office, swimming in the pond, always energizes me. But I miss Abi, Alex, and Fiona when I’m away, and the days leading up to a trip are distorted by anxiety about leaving them. (I’m not good with departures.) Also, although remote working can be peaceful and distraction-free, it can also be lonely and impersonal. Over time, the lack of day-to-day contact was building up and making me feel invisible and ineffective.

So this is my last trip back to Edinburgh for Skyscanner. I’m starting a new job with Sogeo Company on Monday.

But just as my first trip back to Edinburgh after moving away was bad, this last one is difficult, too. I think it’s because although I am still employed by Skyscanner, I have moved forward already, and being here is being back. It isn’t the energizing experience it used to be, because I’m not trying to carry that energy back with me. Conversations with friends and colleagues feel strained, because I’m ending my involvement with something they are still right in the middle of. I’m an outsider already. Everything had changed. And by everything, I mean me, again.

Going back is not what I do. Most of the time this manifests itself in little ways, such as the being more interested in hearing my favourite artists’ new albums than in listening to their back catalogues; or a lack of inclination to scour social networks for people I haven’t spoken to in years. Other times — like now — it emerges as the feeling of alienation I’ve described above.

The quote at the top of this entry is from The Watchman by Robert Crais, and is spoken by the taciturn Joe Pike. Pike defines himself by his forward motion, and has red arrows tattooed on his deltoids as a symbol of this commitment. I don’t like needles, but I’ve never felt a stronger urge to get some ink than I do right now.

February 25, 2010February 25, 2010

Back from Brooklyn

We are back from spending a wonderful long weekend with Patrick and Teresa. Abi and I had been to New York before, but (apart from travelling to and from the airport) we had never been out of Manhattan. This time we mostly hung out in Brooklyn, but on Monday we also zipped through Queens and the Bronx. On our way back South into Manhattan along the Henry Hudson Parkway, we were both struck by features that made us think of Lyon in France.

We ate burgers at the Shake Shack in Madison Square Park; cheesecake at Junior’s on Flatbush; clam chowder at Tony’s on City Island; and yet more burgers at the Old Town Bar on East 18th St. Patrick introduced me to Negra Modelo and tacos al pastor, and we got along famously. We visited the Tor offices in the Flatiron building; watched Avatar; hung out with Scraps and Velma Saturday evening, and the Making Light/Tor.com crowd Tuesday lunchtime.

Patrick and Teresa: thank you ever so much for having us. We had a blast.

I’ve just uploaded a bunch of photos to flickr: Mostly Manhattan, Saturday 20 Feb 2010, and Brooklyn, 21 Feb 2010. Here are some of my favourites:

February 10, 2010March 27, 2012

Marching ants in CSS

A couple of days ago I noticed that Goooogle uses a marching ants effect on their new mini-calendar event view. It highlights the target time frame for the event you’re editing, and it indicates a draggable and expandable area. (It’s probably been there for ages, but I’m slow like that.)

Being a colossal geek, the first thing I did was run up Firebug to see how they’re doing it, because there is no “border-style: marchingants” in CSS. It looks like Google is doing it with JavaScript. The area in question is bounded by four long but thin div elements (tall and narrow for the vertical borders, short and wide for the horizontal borders).

<div class="sc-ants sc-ants-top"></div>
<div class="sc-ants sc-ants-left"></div>
<div class="sc-ants sc-ants-right"></div>
...
<div class="sc-ants sc-ants-bottom"></div>

These divs sit inside a parent container with overflow:hidden, so you only see a small slice of their full extent. The border divs themselves have size, but no content. Their entire area is taken up by a 2px-wide dashed border:

.sc-ants-top  {
    border-top:2px dashed #6688EE;
    height:0;
    top:0;
    width:10000px;
}

Finally, there is a JavaScript timer that changes the position of these divs, moving them a pixel at a time to achieve the marching ants effect.

Even in native applications, marching ants are not all that common, and I think this is the first time I've seen them in a web application. Given that draggable/resizeable areas are also not all that common in web apps, I think it's a clever and elegant way of highlighting that there is something different an unusual about that area.

On the other hand, I'm not mad keen on keeping JavaScript timers running just to keep screen elements in their appropriate position, so I wondered if there was a way of doing this with just CSS instead. And of course there is: have a look at the demo page.

I started with a block of HTML in the standard module format, because it's a good basis for isolating areas of content. The div.bd holds the actual content to be highlighted, and the other parts of the module are used for creating the borders, as follows:

The outermost div is given a left-hand pseudo-border by using a background image with repeat-y only, positioned slightly to the left of the left edge, so that only the rightmost two pixels of the image are visible.
Likewise, the .inner container is given a top pseudo-border.
The .hd block makes the right-hand border. It is positioned absolutely on the right edge of the module, 2px wide and 100% tall, and has a background image with repeat-y.
The .ft block makes the bottom border. It is 2px tall and 100% wide, and also has a background image.

Here's how it looks inline:

Marching ants!

The actual animation is achieved with a couple of old-skool animated GIFs, ants-horizontal.gif and ants-vertical.gif. The horizontal GIF contains two checkerboard patterns, one moving to the left, and one moving to the right; the vertical GIF has the checkerboard patterns moving up and down. Each border only uses half of one of the GIFs, which is you only need two images rather than four.

If you are content with the border being a single pixel thick, and the ants flowing from one corner to the opposite, then you could get away with just one animated GIF — see the wikipedia article on marching ants for an illustration. Personally, I prefer the animation to flow round the border in a continuous pattern.

Of course, this is far from the only way you could implement the marching ants effect. You could use webkit's CSS animations instead. The demo page includes an example of how to do this as well. The basic principles are exactly the same: set up a standard module, and use GIF images to form the necessary borders. But instead of using animated GIFs, you can use just a single static checkerboard image, and use up/down/left/right animations to move around the background instead:

.marchingants {
	-webkit-animation-name: march-up;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes march-up {
	from {
		background-position-y: 8px;
	}
	to {
		background-position-y: 0;
	}
}

One neat thing about the CSS animation version is that you can vary the speed of the animation without having to edit the GIF file. The obvious drawback is that it (for now) only webkit browsers support CSS animations. But given how easy it is to implement this in a cross-browser compatible manner, right now I'd suggest sticking to the animated GIF version.

February 6, 2010

Second-hand 80s

Alex and Fiona were both singing Harold Faltermeyer’s Axel F in in their shower and bath this evening. The funny thing about this is that they had probably never heard the original. They picked it up from watching Monsters vs. Aliens on DVD, in which there is a scene where the President of the USA (Stephen Colbert) tries to make contact with the aliens by playing the five note message from Close Encounters of the Third Kind. He doesn’t quite manage it, so he breaks into a spontaneous rendition of Axel F instead.

Although I listen to a lot of music when I’m alone, we don’t listen to much in the family spaces around the house. The kids both have stereos on their rooms, but they don’t listen to the radio on their own. Yet they are constantly exposed to musical and cultural references in the films and TV they watch, and the games they play. I always find it fun to see how they react when I connect something they’ve just heard or seen to the “original” from twenty years ago (which itself generally has roots in a still earlier era).

In this case, their interest turned into dance. While they were still getting clean and ready for bed, I burned a selection of 80s hits onto CDs for them. The playlist opens with Axel F, of course, but there’s some Michael Jackson on there, a bit of ABC, a bit of Human League, a bit of Boomtown Rats. They eagerly stuck the discs into their players, and just minutes later Alex was breakdancing to Axel F, and Fiona had put together a short ballet to the sounds of “Girls Just Wanna Have Fun.” I was completely enchanted.

Music is so important to me that I’m always delighted whenever they take any kind of interest in it. I need to work on getting more of it into their lives.

January 25, 2010

Grandma

After a long, full, and happy life, my grandmother Florence McLean died peacefully this morning.

Grandma McLean with Alex, 29 April 2001

We miss her a lot.

January 23, 2010November 17, 2011

Leaving Facebook

I don’t make a secret of the fact that I don’t like Facebook. Where others find it playful, I find it intrusive and annoyingly attention-seeking. I don’t like its attitudes towards content ownership and privacy. I particularly don’t like its sense of self-importance, and the greedy way it tries to assume control of my social graph. It’s not that I don’t want to connect with my friends over social networks, but I want it to be on my terms, not theirs.

Additionally, whenever you’re dealing with a company that handles anything of value to you (with banks it’s money, with Facebook and Google it’s personal data), you have to weigh up the trust you have to place in them against the benefit you expect to receive. Google passes that test for me (for now), but I don’t trust Facebook not to try and screw me over.

What happens when you try to leave Facebook is emblematic of this. Here’s the page you get when you try to disable your account:

Facebook's disable account page

Asking me to confirm that I want to deactivate my account is appropriate. Using my social connections in a clear attempt to trigger an emotional response that will keep me on the service is absolutely not.

“Your 32 friends will no longer be able to keep in touch with you” is nonsense. I assume that since they know how to use a web browser, they’re reasonably familiar with a computer, and probably have an email account they can use to reach me.

Below that, they display a random selection of my Facebook contacts with above each one the text “XXX will miss you”. Not only are these statements factually incorrect — they won’t miss me because I never used Facebook to communicate with them in the first place — but Facebook is almost literally putting words in the mouths of these people. Facebook has not asked them if they will miss me; it is using them as sock puppets to push its own message, which is “don’t go.” By using the emotional “miss you” phrase, Facebook is using its knowledge of my social connections to make me feel bad about leaving.

They are abusing my social graph for their own ends. It’s manipulative, unethical, and downright slimy.

Furthermore, if they are using my contacts to try to make me stay, it follows that if my friends have tried to leave Facebook, then Facebook may have used me, or at least my photo, to try to make them stay — something that I myself would absolutely not do.

Goodbye, Facebook. Martin will not miss you.