Tags: bdf

Two weeks ago, I wrote:

I woke up today to a very annoying new bug in Firefox. The browser shits the bed in an unpredictable fashion when rounding up single pixel line widths in SVG. That’s quite a problem on The Session where all the sheet music is rendered in SVG. Those thin lines in sheet music are kind of important.

Paul Rosen, who makes abcjs, the JavaScript library that renders sheet music on The Session, managed to get a fix out pretty quickly. But I use an older version of the library and updating it would introduce some side-effects that would take me a while to work around. So that option wasn’t available to me.

In this situation, when the problem is caused by a browser bug, the correct course of action is to file a bug with the browser. That had already been done. Now all I could do was twiddle my thumbs and wait for the next release of the browser, which would hopefully ship with the fix.

But I figured I may as well try to find a temporary workaround in the meantime.

At first, I looked at diving into the internals of the JavaScript—that’s where the instructions are given for drawing the SVGs.

But then I stopped and thought, “If the problem is with the rendering of the SVG, maybe CSS can help.”

I started messing around with SVG-specific CSS properties like stroke, fill, and so on. With dev tools open, I started targeting the paths that acted as bar lines in the sheet music, playing around with widths, opacities, and fills.

It was the debugging equivalent of throwing spaghetti at the wall. Remarkably, it actually worked.

I found a solution with this nonsensical bit of CSS:

stroke: currentColor;
stroke-opacity: 0;

For some reason, rather than making all the barlines disappear, this ensured they were visible.

It’s the worst kind of hacky fix—the kind where you have no idea why it works, but it does.

So I shipped it.

And at pretty much exactly the same time, a new version of Firefox dropped …with the bug fixed.

I can’t deny that there was a certain satisfaction in being able to work around a browser bug. But there’s much more satisfaction in deleting the hacky workaround when it’s no longer needed.

Tools and processes are intertwined. A company or a department or an individual has a way of doing things—that’s the process. They also have software to carry out the process—those are the tools.

Ideally, they should be loosely coupled. You should be able to change your tools without necessarily changing your process. So swapping out, say, one framework or library for another shouldn’t involve fundamentally changing the way you work. Likewise, trying a new way of working shouldn’t require you to use unfamiliar tools.

When it comes to scaling design within organisations, the challenges are almost always around switching processes (well, really it’s about trying to change culture, but that starts with changing processes—any sufficiently advanced process is indistinguishable from culture). All too often, though, I see people getting hung up on the tools.

We need to get more efficient in how we deliver designs …so let’s switch over to this particular design tool.

We should have a design system …so let’s get everyone using this particular JavaScript framework.

I understand this desire to shortcut the work of figuring out processes and jump straight to production solutions. For one thing, it allows you to create an easy list of requirements when it comes to recruiting talent: “Join our company—you must demonstrate experience and proficiency in this tool or that library.”

But when tools and processes become tightly coupled like this, there’s a real danger of stagnation. If a process can be defined as “the way we do things around here”, that’s not something you want to tie to any particular tool or technology. Otherwise, before you know it, you’re in the frustrating situation of using outdated tools, but you can’t swap them out for newer or better-suited technologies without disrupting everyone’s work.

This is technical debt (although it applies just as much to design). You’re paying a penalty in the present because of a decision that somebody made in the past. The problem isn’t so much with the decision itself, but with the longevity of its effects.

I think it’s important to remember what a tool is: it’s a piece of technology that enables you to work faster or better. You should enjoy using your tools, but you shouldn’t be utterly dependent on any particular one. Otherwise, the tail starts wagging the dog—you are now in service to the tool, instead of the other way around.

Treat your tools like cattle, not pets. Don’t get too attached to any one technology to the detriment of missing out on others.

Mind you, if you constantly tried every single new tool or technology out there, you’d never settle on anything—I’m pretty sure that three new JavaScript frameworks have been released since you started reading this paragraph.

The tools you choose at any particular time should be suited to what you’re trying to accomplish at that time. In other words, you’ve got to figure out what you’re trying to accomplish first (the vision), then figure out how you’re going to accomplish it (the process), and only then figure out which tools are the best fit. If you jump straight to choosing tools, you could end up trying to tighten a screw with a hammer.

Alas, I’ve seen plenty of consultants who conflate strategy with tooling. They’re brought in to solve process problems and, surprise, surprise, the solution always seems to involve purchasing the software that their company sells. I’ve been guilty of this myself: I see an organisation struggling to systemise their design patterns, and I think “Oh, they should use Fractal!” …but that’s jumping the gun. They might be better served with something simpler, or something more complex (I mean, Fractal is very, very flexible but it’s still just one option—there are plenty of other pattern library tools out there).

Once you separate out the tools from the process, there’s an added benefit. Making the right technology choice is no longer a life-or-death decision. You can suck it and see. Try out the technology and see if it works. If it’s working, great! Carry on using it. If it’s not working, that’s okay too. Try something different.

I realise I’m oversimplifying things, but I honestly believe that the real challenge is not choosing the right tools, but figuring out the right process for your team.

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.  

I like CSS pseudo-classes. They come in handy for adding little enhancements to interfaces based on interaction.

Take the form-related pseudo-classes, for example: :valid, :invalid, :required, :in-range, and many more.

Let’s say I want to adjust the appearance of an element based on whether it has been filled in correctly. I might have an input element like this:

<input type="email" required>

Then I can write some CSS to put green border on it once it meets the minimum requirements for validity:

input:valid {
  border: 1px solid green;
}

That works, but somewhat annoyingly, the appearance will change while the user is still typing in the field (as soon as the user types an @ symbol, the border goes green). That can be distracting, or downright annoying.

I only want to display the green border when the input is valid and the field is not focused. Luckily for me, those last two words (“not focused”) map nicely to some more pseudo-classes: not and focus:

input:not(:focus):valid {
  border: 1px solid green;
}

If I want to get really fancy, I could display an icon next to form fields that have been filled in. But to do that, I’d need more than a pseudo-class; I’d need a pseudo-element, like :after

input:not(:focus):valid::after {
  content: '✓';
}

…except that won’t work. It turns out that you can’t add generated content to replaced elements like form fields. I’d have to add a regular element into my markup, like this:

<input type="email" required>
<span></span>

So I could style it with:

input:not(:focus):valid + span::after {
  content: '✓';
}

But that feels icky.

Update: See this clever flexbox technique by Kitty Giraudel for a potential solution.

I know I say this every year, but this month—and this week in particular—is a truly wonderful time to be in Brighton. I am, of course, talking about The Brighton Digital Festival.

It’s already underway. Reasons To Be Creative just wrapped up. I managed to make it over to a few talks—Stacey Mulcahey, Jon, Evan Roth. The activities for the Codebar Code and Chips scavenger hunt are also underway. Tuesday evening’s event was a lot of fun; at the end of the night, everyone wanted to keep on coding.

I popped along to the opening of Georgina’s Familiars exhibition. It’s really good. There’s an accompanying event on Saturday evening called Unfamiliar Matter which looks like it’ll be great. That’s the same night as the Miniclick party though.

I guess clashing events are unavoidable. Like tonight. As well as the Guardians Of The Galaxy screening hosted by Chris (that I’ll be going to), there’s an Async special dedicated to building a 3D Lunar Lander.

But of course the big event is dConstruct tomorrow. I’m really excited about it. Partly that’s because I’m not the one organising it—it’s all down to Andy and Kate—but also because the theme and the line-up is right up my alley.

Andy has asked me to compere the event. I feel a little weird about that seeing as it’s his baby, but I’m also honoured. And, you know, after talking to most of the speakers for the podcast—which I enjoyed immensely—I feel like I can give an informed introduction for each talk.

I’m looking forward to this near future event.

See you there.

Laser Light Synths unedited footage on Vimeo

You can catch a glimpse of my Daft Punk impression in this video of Seb’s frickin’ lasers.

Hundreds of bright sparks head to Brighton Dome for the Maker Faire - YouTube

This year’s Maker Faire in Brighton was excellent as always.

A digital festival is an odd thing. What kind of event qualifies for inclusion in a digital festival? What exactly does “digital” mean? As with the infamous supreme court ruling on obscenity, “digital” can best be described as “I know it when I see it.”

Even a few years ago, it would have been easier to demarcate the line that separates the digital from everything else; if it starts life in a computer, then it’s digital. These days, that’s not a very useful distinction. There’s very little around us that didn’t start life in a computer—even the solid, tangible objects that we think of as being “analogue”.

As with digital, so with the network. There was a time when the internet was a separate place. You went online. Now, the internet pervades all our activities. There is decreasing separation between online and offline. And, as with digital, there is very little in the world around us that hasn’t been touched by the network at some point.

If we were to have had a digital festival during the last decade, it would have been an overwhelmingly positive—perhaps even naive—affair. New tools, new creative opportunities, whole new publishing platforms with wonderfully low barriers to entry; what’s not to love? But the past few years have brought unwanted consolidation to the network—what Bruce Sterling refers to as “the stacks”—Facebook, Google, Apple, the giants of the digital world, wielding immense, unchecked power. The truth revealed by Edward Snowdon is that the same digital tools that can amplify creativity and personal expression are also being used as weapons of mass surveillance. It’s still our network, but now it feels a little less like a playground and a little more like a panopticon.

It’s this new digital world that will be explored by the digerati speaking at the dConstruct conference—always a highlight of the Brighton Digital Festival. Writers like Warren Ellis and Cory Doctorow will be tackling the theme of this year’s dConstruct, “Living With The Network.” It will be thought-provoking, perhaps even a little frightening. But it will also be entertaining.

There’s going to be plenty of entertainment on offer throughout the festival. Whether it’s urban games played though mobile phones, hands-on hacking at Maker Faire, art installations, dance performances, concerts, workshops, or slash fiction readings, there’s something for everyone this year.

Perhaps there really isn’t much point in trying to define what “digital” means. As William Gibson said, the thing our descendants will find most quaint and old-fashioned about us is the trouble we still take to make that distinction, between the digital and the “real.”

Even if we can’t define the damn thing, the Brighton Digital Festival is still a cause for celebration. For all the wonders and benefits that the network has brought us, we humans still crave the opportunity to gather together in the same physical space. When that physical space happens to be in the vibrant seaside town of Brighton …well then, all the better!

Whether it’s the historical surroundings of the Brighton Dome and the Old Market, co-working spaces like The Skiff, arts venues like Phoenix Brighton, or community spaces like Lighthouse and 68 Middle Street, Brighton has a wealth of wonderful venues for us to gather in this September. As much as I like living my life on the internet, I’m grateful that I also live in Brighton. It’s the perfect place for a digital festival …whatever that means.

Events « Brighton Digital Festival

There are 90 events happening in September during the Brighton Digital Festival (including dConstruct, of course). From Maker Faire to an evening of slash fiction, there’s something for everyone.

One of the great pleasures of putting on Brighton SF right before last year’s dConstruct was how it allowed me to mash up two of my favourite worlds: the web and science fiction (although I don’t believe they’re that far removed from one another). One day I’m interviewing Jeff Noon about his latest book; the next, I’m introducing Tom Armitage on stage at the Brighton Dome.

Those two have since been collaborating on a new project.

You may have seen Jeff’s microspores—a collection of tweet-sized texts, each one an individual seed for a sci-fi story. Here’s Spore #50:

After the Babel Towers attack, lo-fi operators worked the edges of the language, forging new phrases from the fragments of literature. They filled boxes with word shards in the hope of recreating lost stories.

Tom has taken that as the starting point for creating a machine called the literary operator

It’s quite beautiful. It fits inside a suitcase. It has an LED interface. It has a puck that nestles into the palm of your hand. It comes with a collection of books. You take the puck in your hand, pass it over the spine of one of the books, and wait for the LEDs to change. Then you will receive a snippet of reconstructed text, generated Markov-style from the book.

As Tom says:

It is an object that is both entirely fictional, and entirely real. Not “design fiction”; just fiction.

You can use/play with the literary operator—and hear from Tom and Jeff—this Thursday evening, September 26th at the Brighton Museum as part of Digital Late. Sarah and Chris are also on the bill so don’t miss it: tickets are a fiver if you book ahead of time.

BBC Click: 10 Sept 2013: Brighton Digital Festival on Huffduffer

A report from the BBC on this year’s Brighton Digital Festival including interviews with Honor, Timo, and Seb.

Immaterials, dConstruct and Culture Ships on Vimeo

Iain M.Banks and dConstruct, together at last.

dConstruct 2013 …wow! I could try to describe it but you kind of had to be there.

At the after-party—which was held right there in the Brighton Dome; a new twist which worked out great—I kept hearing people enthuse that it was the best dConstruct yet (although dConstruct 2012 was pretty bloody amazing). People congratulated and thanked me, which made me feel like a bit of a fraud because, frankly, I was very selfish in my curation: I got the speakers I wanted to see, talking about the topics that I wanted to hear.

I’ll admit that it was very gratifying to find out that trusting my gut worked. Let’s face it, it wasn’t exactly a safe or typical line-up for a tech conference. I’m feeling vindicated (and very relieved) that the risks paid off. And how!

Every single speaker was amazing. Seriously, I’m trying to think of how I can thank each of them, but I keep coming up short. Words alone can’t express how grateful I am to all of them. Each of them put in so, so much effort …I was truly gobsmacked.

The cumulative effect was astounding. There were emergent themes and strands that were woven throughout the day, resulting in the perfect balance. The two over-riding feelings were fear and fun. The audience were, by turns, terrified and entertained.

The topic of “Communicating With Machines” resonated wonderfully with other Brighton Digital Festival events too: dConstruct, Improving Reality, and Immaterials felt like they were all tackling the tricky task of making the invisible visible—networks, power structures, technologies—but the dConstruct speakers did it with bucketloads of entertainment value thrown in. I can’t remember the last time I laughed so much at an all-day event.

Mind you, it didn’t feel like a long day. The time just flew by! I thought it was just me but then lots of other people said the same thing at the after-party. That’s quite something when nine talks just whizz by without a single dip in quality.

Seriously, I am blown away by the generosity and talent of the speakers.

Amber, Luke, Nicole, Simone, Sarah, Keren, Maciej, Dan, and Adam: thank you so, so much!

Video and audio from dConstruct 2013 will be available soon …but you kind of had to be there. And if you were there …thank you!

Once again, @dconstruct was amazing.

— gregone (@gregone) September 6, 2013

Leaving Brighton with that familiar post-@dconstruct “I remember how to be excited about things now” feeling.

— Alex Muller (@alexmuller) September 6, 2013

.@dconstruct exceeded my expectations as a first-timer; fantastic speakers and topics!

— Adam Brewer (@adamcbrewer) September 7, 2013

Great day @dconstruct yesterday. I’d pick a highlight but the whole thing was brilliant.

— Laura McCartney (@laufofbread) September 7, 2013

Yesterday’s dConstruct was the best yet, and the most entertaining conference I’ve ever attended. Thanks @adactio and co

— Mark Kirby (@markirby) September 7, 2013

#dconstruct was once again very inspiring, best conference of the year. @adambuxton must be an alien or sutin

— Ciaran Park (@ciaranpark) September 6, 2013

So, dConstruct was superb. That is all.

— Paul Wilson (@paulanthonywils) September 6, 2013