Category Archives: Conferences

Mashed browsers and the IE-lephant — A Web Directions adventure

A few weeks ago I gave a talk at Web Directions Summit 2019 in Sydney. The talk was about the ECMA-402 Internationalisation APIs built in to browsers, because I don’t think enough people know about them. A fully written version of the talk is available on this site in the unsurprisingly-named Talks section: Intl we meet again.

There was a helluva lot of stress and preparation involved in trying to make a rather dry topic sound interesting for 20 minutes. In the end, the results were worth it, but I was reminded why it had been several years since I’d previously given a conference talk. It will likely be several years before I do another one entirely from scratch.

I got some good feedback about the talk, but there were two parts I was particularly pleased with. Even if the presentation had tanked, I’d still have been satisfied with the completion of two slides. Mainly because they gave me the excuse to muck around in design tools and pretend I’m a real designer.

These items were the mashed-up browser logos, and the “IE-lephant in the room”. I had enough people talk to me about the images after the talk that I’ve decided to pop them online for all to see. Both images are linked from this post in SVG form, under a Creative Commons Attribution 4.0 International license. That means you’re free to copy them, modify them, do whatever… but with an attribution credit too.

Some-in-one browser logo

Mashed up and combined logos of Chrome, Edge, Firefox, and Safari.

The idea of smooshing many web browser vendor logos into a single image was one I had years ago. This talk was finally the excuse I’d been looking for to actually do something about it. I’m perhaps far more pleased with the result than I should be.

I’ll refrain from calling it an all-in-one logo, as there are many more browsers available than just Chrome, Edge, Firefox and Safari. Important note: This isn’t intended to favour any one browser over the others. My intent was for this image to equally (but light-heartedly) offend the designers of each of the featured logos. 😉

It would also be hypocritical of me to request attribution without also giving some in return. So for completeness, here are the links to the original vector images that went into this (before a lot of cleaning, nudging, and mangling of the files in Illustrator):

Of course, as soon as I’d finished the mashup image and put it my presentation, 2 of the 4 logos became outdated. Firefox has just got an updated and simplified logo, while Edge’s logo has had a complete revamp for its move to a Chromium base. Oh well, I guess I’ll have to make a Version 2 at some point.


Internet Explorer logo merged onto the body of an elephant.

In contrast to the well-planned logo mashup, this image was pretty much a spur-of-the-moment joke. Its only purpose was to be a punchline — “I’ve only talked about support for modern browsers; but what about the elephant in the room?”

I’m not really sure it has any reusable purpose beyond that joke, but I’m still rather pleased with the result, so I’m sharing it anyway.

The two source images that went into this are:


Accessible presentations

Recent events have had me thinking a lot about accessible presentations at conferences and user groups. Myriad factors have kicked me into considering the topic seriously. Accessibility comes in many forms, and doesn’t just apply to people with disabilities. The core consideration is: Are you excluding anyone with the way you present your content?

To start with, I work with Sean Curtis, who is Atlassian’s resident accessibility expert. Sean has, among other things, been trying to educate everyone about better colour contrast in presentation slides, for both internal and external presentations.

Then Sean and I attended A11y Camp — a one-day event in Sydney dedicated to accessibility on the web. This event guaranteed there would be people with vision impairments attending (and presenting). Therefore all presenters had been asked to audibly describe any slides they were relying on for visual impact. The key point was to not ever rely on the visuals alone. I remember one presenter really forcing himself to read out quotes and describe images, which he said was so different from his normal presentation style, but it greatly helped the audience.

Recently I had the pleasure of presenting at JSConf EU, which uses live transcription services during all the presentations. As preparation for this I was asked to send through as much material for my talk as possible ahead of time. This would assist with building transcription dictionaries for the specific technical terms used at a developer-focused conference. This got me thinking about the accessibility of my talk for more reasons than just vision impairment.

I’ve also been reading a lot lately about vestibular disorders, which can result in certain types of visual motion making people physically ill. All of these factors combined to make me think hard about how I was going to present my talk. Some of the following tips are things I’ve always done, but others I had to put more conscious effort into.

Things I try to do for a presentation

1. Ensure text and images are readable

Large text, large images, high contrast between text and background colours. This is good practise anyway, regardless of accessibility considerations. Make sure someone sitting at the back of the room can still see what’s on your slides — we’re not all young programmers with perfect eyesight. This also applies to picking colours that don’t look the same for someone with colour blindness.

2. Describe any purely visual elements

How to get this wrong: show something on your slides, then point at it and say “and this is the result” with no further explanation. While it may seem funny or obvious to a majority of your audience, you still shouldn’t assume that everyone has understood the message. Thus, if the crux of your talk or the punchline of a joke involves pointing at an animated GIF with no description, that’s excluding anyone in the audience who can’t see it or who takes longer to process visual information (due to cognitive disabilities).

I like to think of it in the same was as putting an alt attribute on an image. On a web page, if the image is purely decorative and adds nothing to the content, it’s ok to have an empty attribute (alt=""), but in all other cases the image should have a description. It’s the same with a presentation. If the image is purely decorative and adds nothing to the content, it’s ok to not mention it, but in all other cases the image should be audibly described. This doesn’t have to be a clunkily-worded halting of your verbal flow in order to say “and on screen right now is an image of a squirrel”. If done right, the description of what’s on screen can be woven into the flow and narrative of your speech without ever feeling unnatural.

3. Only share slides online if they make sense on their own

Something I’ve quoted before, but is worth repeating here:

The gist is: our slides are not the talks, our slides aid the talks we are giving. They are a visual catalyst for the things we talk about. When you see something and you hear about it at the same time it is more likely to stick. It is as simple as that.

[…] If I look at the PDF of a talk a few weeks later and only see pretty images without remembering what they meant at that time I get confused and frustrated.

— Christian Heilmann, On controversial slides, talk distribution and lack of context

Your talk is about you talking. A talk should start from the words you say, with slides being a progressive enhancement. And because they are an enhancement, they don’t always make sense on their own, devoid of context. I only put slides online if I think there’s enough information in the slides alone to get a point across. For me, this only works for in-depth technical topics such as easing or gradients (in fact, I still added an initial explanation slide to the gradients presentation specifically for people reading the slides online later).

One technique I’ve seen that I really like is putting the slides online in the form of an article with slides and text side-by-side. Each slide is presented next to the words that were spoken for that section. It’s a great adaptation of a talk from an in-person presentation to an on-screen essay, changing the format to best suit the medium in which it’s published. The two people I’ve seen consistently do this well are Maciej Cegłowski and Bret Victor.

4. Limit animations

There are many people who don’t like lots of animations whizzing around on a screen. Slides with lots of fancy animation effects can make people with vestibular disorders feel sick. Personally, I don’t want to make my audience feel ill just because of how I’ve chosen to present something. And regardless of vestibular disorders, I often find the super-amazing 3D transform effects of slide transitions quite distracting. They’re cool/cute the first couple of times, but over the course of a whole talk they just get in the way and take attention away from what the presenter is saying.

5. Don’t just take my word for it

There is also a good list of tips for accessible presentations published by the W3C.

How did I do?

For my JSConf EU talk, my slides had almost no animations. I made sure to be conscious of describing what was on screen (although I know I failed at a couple of points). But I know I won’t always get these tips 100% right. I’m not perfect and I know I’ll make mistakes, but I’ll keep trying to improve.

Also, these tips aren’t necessarily going to work for every presentation. For example, a talk about colour blending is inherently visual and would be very hard to describe to someone who doesn’t see colours. But it’s worth trying to be as inclusive as possible.

Web Directions South 2014 in 4 words

An experiment in brevity.

What happens when you combine a conference report with Four Word Film Reviews? An attempt to review the conference – and each of the presentations I saw – in just four words.

WDS14: “Don’t forget we’re human”

  • Matt Webb – Interconnected: “Extend yourself. Start small.”
  • Scott Thomas – Doing Simple. Honest. Work: “Understand first; design later.”
  • Emily Nakashima – The Operable Front End: “Log -> monitor -> fix -> repeat.”
  • Erin Moore – Convenient Fictions: Real time not ‘realtime’”
  • Mark Dalgleish – A State of Change: “Immutability beats observing mutations.”
  • Julio Cesar Ody – The Loaded Javascript: “Defer, async or other?”
  • Sarah Maddox – Bit Rot in the Docs: “Test docs like code.”
  • Dan Hon – An Internet for Humans, Too: “Reduce the empathy gap.”
  • Genevieve Bell – Being Human in a Digital World: “Behavioural fundamentals don’t change.”
  • Johnny Mack – Building Trust: “Form. Storm. Norm. Perform.”
  • Jonathon Colman – Build Better Content: “Seek clarity, speak human.”
  • Douglas Bowman – A Voice for Everyone: “Positivity of random connections.”
  • Tobias Revell – Haunted Machines: “Technological magicians: Think responsibly.”

Some background context

Two weeks ago I attended Web Directions South 2014. I wanted to take notes so I could write a recap to share internally at work, but I didn’t want to write a wall of text like last year’s recap.

This year I took the approach that I would write some minimal notes after each presentation. This meant that I wasn’t so distracted by writing notes that I stopped absorbing the presentation content. It also gave me time to reflect on the presentation in “down time” and distill the key points. (The only exception to the rule was when I wanted to capture a link or an exact quote.)

When trying to summarise the presentations for the write-up, I forced myself to give a synopsis of each talk using only one sentence. While doing this, I suddenly remembered one of my old favourite sites that I hadn’t looked at in a long time: Four Word Film Reviews.

Inspiration struck, and this post is the result. (Though unfortunately it probably doesn’t make sense to anyone who wasn’t at the conference to begin with.)

Auto-detecting time zones at JSConfAU

Last week I was lucky enough to present at JSConfAU. My talk was titled “Auto-detecting time zones in JS” (with a sub-title of “Are you a masochist?”).

Part I – Technical details

Taking a tour of terrible temporal twists and turns

A lot of the talk delved into the history of time and time zones, pointing out various oddities and things that can trip you up if you try to deal with them. I won’t repeat all of them here – partly because I doubt anyone would read the whole lot, partly because I just want to focus on the two main points I made: Continue reading

Web Directions South 2013 recap

Last week I went the Web Directions South 2013 conference, my first experience of WDS. Now, within Atlassian, we’d normally rely on WDS old-timer Ben Buchanan to do a great big write-up of the conference each year.

Unfortunately Ben left Atlassian earlier this year, so I took some notes of my own during the presentations, in order to post a recap blog within Atlassian. Then I remembered I have this blog as well, and in the sprit of “The Road to Hell…” I figured it would be worth re-posting the content.

For reference, Ben’s traditional “big stonking post” summary of WDS is at

Other than the keynotes, the conference was split into two tracks: Development and Design. Obviously no-one can see all the presentations, so I just wrote up what I saw.

Any quotes I’ve listed are based on my memory, and therefore might not be exactly right, but the message is the same. I apologise to anyone I may have misrepresented.

Day 1

The opening credits this year were done by Small Multiples. A glowing blob traveled across a dynamically generated landscape littered with the speakers’ names, using WebGL. The credits are detailed (and can be played) at; during the breaks between talks people could play with an interactive version where you could control a heap of landscape/lighting settings.

Opening keynote – Rachel Binx: People, Not Users

I didn’t take many notes from this one, mostly because I forgot to.

  • Described the differences between the “prescribed self” (single identity; Facebook, Google+) and the “flexible self” (multiple personas; Twitter, Blogger)
  • Highlighted some quotes from Zuckerberg and Brin talking about the death of privacy, and pointed out that only incredibly sheltered and privileged people could make those statements

Twitter: @rachelbinx

Good quotes:

“Facebook is a game of whack-a-mole with privacy settings”

Andrew Betts: Conquering the Uncanny Valley

Andrew is from FT Labs, the division of the Financial Times responsible for playing with new web tech that has put out several interesting and useful JS libraries (like FastClick, currently used in Confluence Mobile and JIRA Mobile).

I took a lot of notes for this one, but won’t dump them all here (but if anyone’s interested I can put them somewhere else).

  • The 3 key things for mobile web apps:
    • Keep all transitions to 16ms or less for smooth frame rate
    • No pauses more than 100ms – anything under 100ms feels instantaneous
    • Matching expectations of native apps – don’t venture into Uncanny Valley territory
  • Network performance – other than the already-known cost of making multiple network requests on a mobile device, he also pointed out that the speed of a network request is dependent on what the CPU is doing at the time, and whether the radio antenna is in an active or dormant state.
  • They wrote all their REST APIs to handle being called in a batch, then on the client their API wrapper transparently auto-batched any API requests within a certain time period and only sent off one network request.
  • Typically 70-95% of web page data is image, so optimising them is especially important. Their testing indicated that only loading one high-resolution, highly compressed image and scaling it down was better than loading different images for different resolutions. “Image decoding is probably the most expensive thing you ask the browser to do when your page loads.”
  • Rendering – various techniques to improve rendering performance, including disabling any hover effects when scrolling a page. Perf hits can also come from unlikely sources (like animation of one element being slowed by box-shadow on an unrelated element).
  • They wrote FastDOM to do async DOM reads/writes and batch them up, using requestAnimationFrame
  • Storing data – There are too many options, each with pros/cons. He came up with a brilliant “dysfunctional family” metaphor to describe the difference between cookies, localStorage, IndexedDB, AppCache and the Files API
    • Mobile devices have limited storage space, so they halved the storage requirements of their strings by doing a clever trick that relies on JS strings being UTF-16 (well, UCS-2, technically)
  • Perception – When you can’t make it any faster… make it seem faster

Twitter: @triblondon / @ftlabs


Good quotes:

“Financial Times released our first mobile app in 1888 – back then we called it a newspaper”

“We need to care about supporting existing features as much as creating new ones”

“The iPad FT app is a compromise between the ideal vision and the technical constraints given to us, while trying to avoid more constraints”

John Allsopp: Animating web content with CSS transitions, animations and transforms

A great start-to-finish walk-through of how animations work in CSS, building up to a re-creation of iOS 7 Safari’s 3D tab browser.

Once again John proved what a great explainer and educator he is for web content, which is to be expected from one of the conference organisers.

Twitter: @johnallsopp

Pasquale d’Silva: Stiff and Static Sucks

Excellent breakdown of the principles of animation and how they should be used in interfaces. Pasquale is a designer and animator who was trained in classic animation (the hand-drawn type).

He wrote a brilliant article a little while ago on “Transitional Interfaces” which got him invited to speak at this conference, and he didn’t disappoint. A remarkably comfortable and humorous speaker for someone who had never done a public presentation before.

His key points to remember about animation in interfaces:

  • Static interfaces suck
  • Animation is a clue
  • Great animation feels invisible
  • Learn from the classics

A lot of the talk was showing examples of sites/apps that do animation well, those that don’t do it well at all, and how they can be improved.

Twitter: @pasql


Good quotes:

“Use animations between states to avoid merge conflicts in our brains”

Twitter’s loading of new tweets is “a slap to the eyeballs”

Quartz Composer is “like trying to draw with a microwave”

“I wanted to start a site like Dribble but for animators; only instead of circle jerking over 400×300 flat images, it would actually be useful”

Ryan Seddon: Flexbox

This started a round of 3 shorter talks in the development track, so I didn’t have many notes.

Good overview of the basics of flexbox, the different specs and decent real-world use cases. Rather than hyping up something just because it’s new, he advocated use in moderation. Use it for small modules, but don’t overdo it (“use it where it makes sense”) – still use floats or inline-block as needed.

Fiona Chan: Oh No! Spaghetti Code!

A CSS-focused talk about splitting up old, bloated, messy codebases into neat, modular components. Fiona has had to do this at several different jobs and has gained a fair bit of insight into how to Get It Done.

Key points:

  • Build the simple components first – find commonalities and abstract from the start
  • Good naming for components / classes is important – make them generic as possible, but not so generic that they’re unusable like “box1” (try “box-feature” instead)
  • Make components “just work” – don’t make developers resort to clearfixes
  • Namespacing using SASS/LESS nesting can be good, but it’s better to just include the namespace in the class name itself
  • The most important thing is communication. Have a code standard within a team and write a living style guide.

Jared Wyles: CSS – (Finally) Making the Web a Less Blocky Place

Jared hates CSS, but he likes that there are now tools available that can help us avoid writing hacks. He showed off two CSS features that have been created by Adobe: Regions and Shapes.

Regions allow you to write content in one element, but have it flow into multiple defined regions made up of other elements. This makes it possible to do true magazine-style layouts where text content flows into multiple columns. It’s supported in the latest versions of Safari because Adobe have been putting a lot of work into submitting patches to Webkit. There’s also a JS API so that you can query named regions.

Shapes allow you to define non-rectangular content areas using basic polygons, which is something that CSS has needed for a long time. It’s early days so far, but looking promising.

Twitter: @rioter


Good quotes:

“While we’ve been struggling with these basic layout concepts, the print industry has been laughing at us.”

Closing keynote – Maciej Cegłowski: Barely Succeed – It’s Easier!

Words can not do justice to the humour of this talk. Maciej is the creator and maintainer of and spent a large part of the presentation bagging out the bullshit of startup culture, using bizarre slides about animal parasite lifecycles.

Key points:

  • Startups are constantly trying to disrupt the publishing industry and the film industry and the record industry, but they’re using the same broken business models and not realising it. They’re not disrupting the business of running a business.
  • There’s a different model to follow: Barely Succeed. A lone operator charging a reasonable fee for a high quality but narrow-scope service. Keep control and be free to change things to maintain the vision.

Twitter: @baconmeteor

Good quotes:

“Startup culture is rotting from the inside”

“You too can find success within your mildest dreams”

“I’m a Slav. Slavs believe the world is misery and pain. This worldview makes it difficult to be a motivational speaker.”

Day 2

Opening keynote – Scott Jenson: Beyond Mobile, Beyond Web

A wonderfully inspiring talk about how to think for the future and stop using “default thinking” when trying to come up with future devices. Scott created the first Human Interface Guidelines at Apple and this talk is worth watching when the video gets posted online.

Key points:

  • Stop thinking everything has to be/have an app.
  • When making things “just work,” beware of false positives.
  • Don’t forget that “smart devices” don’t have to mean putting a touch screen on your toaster. Things can be “barely smart” – e.g. broadcast a simple URL via bluetooth that points you to a support page for that specific model.
  • When coming up with something new, closed and proprietary will win… at first. Then open and shared will come roaring past and take over. It’s happened before, it will happen again.
  • Products and features should be evaluated by the golden rule of Value > Pain
    • If value goes up, but pain doesn’t, it’s a win
    • If value stays the same, but pain reduces, it’s a win
  • Forget responsive design – imagine if you built a website designed to work on 2 or 3 different screens at the same time

Twitter: @scottjenson


Good quotes:

“I’m not going to play World of Warcraft on my toaster”

“You know what QR codes are called, don’t you? Robot barf.”

“There is no ‘Cloud’; there are [proprietary] Clouds and they don’t like each other”

“We evaluate tomorrow’s tech by how well it handles yesterday’s tasks”

“Everyone wants innovation, but no one wants risk.”

Troy Hunt: Hack Yourself First

Decent overview of using security tools to try to break your own sites/apps before letting the public do it. He used various techniques to highlight just how easy it is to get free airport lounge wifi, get a free credit card number, and do man-in-the-middle attacks (see the link to the right).

Aarron Walter: Connected UX

An overview of how the people at MailChimp collated all their disconnected fragments of user feedback, stats and research into one giant repository of information using Evernote. By careful use of notebooks and tags (they tagged by feature as well as personas) they were able to gain new insights that they hadn’t seen before because the data wasn’t in one place.

They got every department of the company to start sending data to a shared Evernote account, automating it as much as possible. They even took screenshots of Survey Monkey charts and relied on Evernote’s OCR to convert them into searchable text fragments.

The other problem they had was at the other end of the process. So instead of writing 40-page research documents that would be read by no-one, Aarron teamed up with a video specialist to create 2-minute videos detailing the research. Suddenly everyone in the company was watching them.

Chris Liener: Validating Forms with the HTML5 Pattern Attribute

Another batch of short talks in the dev track

A basic overview of the different options available in the HTML5 forms spec, and validating fields with regular expressions in the pattern attribute.

Twitter: @cliener


Good quotes

“I’ve just noticed that the required attribute doesn’t work any more in Safari 7, because Apple hates people”

Mark Dalgleish: Web Components

The key message here was that if you’ve built for the web, you’re already an expert in Web Components.

Simon Elvery: Responsive Images

A quick look at options for loading different images for different screen sizes. The end result was that there are no good implementations, and a lot of arguments over the “best way”

He has also created a “choose your own adventure” site to choose which image loading technique will work best for your situation.

Adam Ahmed: I Yield To Generators

An overview of generator functions that are coming to JS in ES6. IMO much more clear and understandable than the 3 (yes, really) separate lightning talks on the subject at SydJS only two days earlier.

Patrick Catanzariti: JavaScript Beyond the Web Page

Some quick demos of using Ninja Blocks to control hardware via REST APIs. Won the unofficial prize for Best Prop for the use of a bubble generator that blew bubbles whenever he spoke.

Glen Maddern: The Z Dimension

This started off with a quick discussion on how browsers render page elements, and in what order. But rather than focus on the complicated rules (“I don’t expect anyone to remember that spec”), he focused on how to use Chrome dev tools to debug layout/stacking problems.

Some of the experimental features of Chrome dev tools are fantastic. The bit that astounded everyone was being able to analyse page layouts and paints frame-by-frame, with a replay tool that also gives you an interactive 3D view of the paint area at that point in time.

Twitter: @glenmaddern


Good quotes:

“There are no Layers, just Order”

Closing keynote – Heather Gold: Nerd, Know Thyself

Part presentation, part audience interviews. Key points:

  • She reminded us that we are all humans with emotions, and it’s ridiculous to expect people to switch off their emotions from 9 to 5 while at work.
  • You can’t expect users of your product to care about it if you don’t care yourself.
  • Reading a room in stand-up comedy is the same skillset as reading the mood of your users – there may not be direct signals, just intuition.

Twitter: @heathr

Good quotes:

“We could be just as anti-social without the web…the problem isn’t the Internet, it’s us.”

“Everyone wants to talk about communities, platforms, but no one wants to talk about why anyone would care.”