Journal tags: bdf

9

sparkline

Workaround

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.

Choosing tools for scaling design

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.

Pseudo and pseudon’t

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.

Brighton in September

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.

The literary operator

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.

Literary Operator Fahrenheit 451

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.

dConstruct 2013

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!

Brighton Arton

If you’re already in Brighton for dConstruct this week, there are two art shows you might want to check out:

Timo Arnall and friends are presenting their Immaterials exhibit at Lighthouse, 28 Kensington Street. Timo has written a few words about the exhibit. The exhibition is open from tomorrow, September 5th until October 13th, and the opening is tonight, Wednesday, at 6pm.

Just around the corner at the Ink-d gallery on North Road, the opening of Jon Burgerman’s exhibit is happening at exactly the same time: 6pm this evening. His Failure of Judgement exhibition runs from tomorrow, September 5th to October 6th.

Jon’s opening will also include the debut of the world’s first “Jon Burgerman Veggie Burger” courtesy of Burger Brothers next door.

And if you haven’t gorged yourself too much on art after this evening, don’t forget that there’s a whole programme of different art shows running this month at 68 Middle Street.

Counting down to dConstruct 2013

It’s dConstruct week—just a few more sleeps to go! The speakers are starting to arrive into town, the conference badges have been delivered, and the epic task of applying hundreds of stickers to hundreds of badges has begun.

Stickering

The Brighton Digital Festival is already in full swing. Reasons To Be Creative kicked off yesterday so the town is already full of geeks hanging out, drinking coffee, listening to talks and discussing them afterwards over a beer, and generally having a good time—exactly the kind of Brighton behaviour that curmudgeons like Andy and Colly love to hate.

The Immaterials exhibit headed up by Timo is opening at Lighthouse tomorrow. I’ve been walking past in the mornings coming into work and it’s looking fantastic. Although it did lead to a moment of cognitive synaesthesia:

Meanwhile over at 68 Middle Street—soon to be Clearleft’s new home—an exhibition of The New Sublime is already underway.

There’s so much going on this week: Reasons To Be Creative from Monday to Wednesday, Improving Reality on Thursday, Maker Faire and Indie Web Camp on the weekend, and, of course, dConstruct on Friday.

I’m so excited about this year’s event! It’s definitely not your typical web conference and it’s certainly not your typical conference line-up. It’s going to be a blast spending the day in the company of such splendid speakers.

If you’re coming to town for dConstruct—or for any of the other wonderful events going on—here are a few tips on some places to eat…

The Guardian recently published a list of the top 10 10 budget restaurants and cafes in Brighton. Seems like a pretty fair sampling. The Seven Bees cafe is recommended for its fry-up—a recommendation endorsed by Lomokev who has eaten and photographed just about every fry-up in Brighton and beyond.

Chris has put together a Foursquare list of places to try.

On the weekend, the Brighton and Hove Food Festival will be running its market on New Road and Jubilee Street, right by the locations of Maker Faire and Indie Web Camp, so there’ll be no shortage of tasty treats on offer.

On the day of dConstruct itself, we won’t be providing lunch, but we have arranged for some discounts at nearby cafés and restaurants. Also, it’s a Friday and that means Street Diner will be happening just up the road from the Brighton Dome.

Alas, the weather forecast is looking pretty damp for Friday—even though it’s going to be gloriously sunny until then—so be sure to bring your brolly.

Brighton in September

dConstruct is now exactly five weeks away. To say that I am excited would be quite an understatement.

I am insanely excited about this year’s dConstruct. I think the line-up is quite something—a non-stop parade of fantastic speakers. And the speakers themselves are equally excited, spurred on by the excellent company they’ll be keeping. Seriously, this is going to be an amazing day.

I’m also excited about all the other events happening around dConstruct as part of the Brighton Digital Festival.

The first week of September will kick off with the Reasons To Be Creative conference: three days of three tracks of all sorts of design and code.

Reasons finishes on Wednesday, September 4th, which is the same day that Seb will be running his fantastic CreativeJS workshop. I took this workshop myself a few months back and I can’t recommend it highly enough—you’ll come away feeling like you’re superpowered. Seb is a great teacher. And don’t be put off by the whiff of coding; this workshop is for everyone. In fact, I think designers with very little experience of code would be best served by it.

There are still some tickets available for Seb’s workshop and remember that booking onto the workshop also gets a complementary pass to the dConstruct conference day as well.

In between Seb’s workshop and the dConstruct conference proper, there’s Improving Reality, that wonderful conference on technology and culture curated by Lighthouse in Brighton. I’ve really, really enjoyed the last two years so I’m going to be there again this time ‘round on Thursday, September 5th.

Then right after dConstruct, there’s a weekend of good stuff happening over the Saturday and Sunday:

  • Brighton Mini Maker Faire — a day of interactive exhibitions on the Saturday followed by a workshops and panels on the Sunday. There’ll be talks and panels on the Saturday too, including a panel moderated by Maggie Philbin!
  • The Big Sussex Market will be running all weekend as part of the Brighton and Hove Food Festival. This will be on New Road, right by the Brighton Dome where Maker Faire will be happening.
  • Indie Web Camp will also be running all weekend, just round the corner at Lighthouse. This little gathering is something very dear to my heart. I was talking about just the other day on the Breaking Development podcast.

Phew! That’s quite a full dance card.

If you’ve got a ticket for dConstruct, remember that as per the terms and conditions, if you need to cancel or transfer the ticket you’ve only got one more week to do so.

If you haven’t got a ticket for dConstruct, what are you waiting for?

See you in Brighton in September.