Skip to content

Blog · Mar 17th, 2020 ·14 min read

Tom Walker avatarTom Walker avatar

Tom Walker

Illustrations for ReactConf AU 2020

A unique illustration for each presentation

ReactConf AU main illustration

Search and find illustration

About

ReactConf AU 2020 was recently held in Sydney, Australia. Presented by Thinkmill — ReactConf AU is a tech conference featuring domestic and international speakers. I helped organise the conference, provided gelato for attendees, and created the illustrations above.

The goal was to illustrate each of the 23 presentations at the conference and then combine them into one mega illustration.

Illustrations were based on talk titles and descriptions, and it’s worth mentioning that these presentations were very technical and abstract at times, so interpretation varied wildly.

It was completed a few days before the conference, printed onto stretch fabric, and displayed at the conference! Each illustration was also shown on stage immediately before each presentation, including the time lapses videos found below.

Dinesh Pandiyan and Dominik Wilkowski at ReactConf AU, 27th February 2020

Thanks

The illustrations would not have been possible without the help of Dominik Wilkowski — who brainstormed ideas with me for hours throughout the illustration process and provided lots of great feedback after each illustration was completed.

Daniel Cousens and Alex Walker were also a great help, especially with perspective — one of the hardest aspects to get right and something I’ll keep improving on.

Illustrations

Here’s a one-by-one overview of all 23 illustrations, which talk they were paired with, and the story I was telling in each one.

Themeability is the path to dark mode illustration

1. Themeability is the path to dark mode

Diana Mounter

When the design systems team at GitHub implemented their colour system in 2017 they were working with Sass, trying to wrangle thousands of disconnected colour values into… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/themeability-is-the-path-to-dark-mode?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Engineers take the existing light theme on the GitHub website and produce a dark theme from it. Processing power is focused on getting dark mode code output.

Printers print the code necessary to be input with hashes depicting hex colour codes. It’s a lot to keep track of, so why are they printing this on paper anyway?

Watch time-lapse

(Proto)typing innovation in BBC News illustration

2. (Proto)typing innovation in BBC News

James Dooley

BBC News Labs explore, prototype and incubate new ways to tell stories, reach audiences and create cutting edge journalism. James will demonstrate how his team… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/prototyping-innovation-in-bbc-news?from=talks">Read more<span class="sr-only"> about this talk</span></a>

A famous presenter with a British accent interviews a bear with the help of a real-time transcribing computer (with support for translation too), beaming the results real time to back to the broadcaster.

Due to its remote location, equipment — including a satellite — has to be brought in to beam the signal back. The bears are mischievous; they have taken off with the BBC sign.

Inspirations: BBC documentaries (TV)

Watch time-lapse

Modern forms in React illustration

3. Modern Forms in React

Erik Rasmussen

If the new React Context API and Suspense killed Redux (they didn’t), surely Hooks kill the need for a form library, right? Well, not exactly. Managing form state is more than just holding… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/modern-forms-in-react?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Developers are using fishing rods and hooks to collect form fields to use in their forms.

They’re looking for buttons, drop downs, toggles, radio buttons, check boxes, range sliders, and password fields.

It’s a lucrative business; the checked radio button is rare and sells for many credits.

Watch time-lapse

react-beautiful-dnd: Behind the magic illustration

4. react-beautiful-dnd: Behind the magic

Alex Reardon

react-beautiful-dnd (rbd) is a successful open source project that aims to provide performant, beautiful and accessible drag and drop. In this talk, Alex will break… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/react-beautiful-dnd-behind-the-magic?from=talks">Read more<span class="sr-only"> about this talk</span></a>

An architectural design reminiscent of drag and drop lists, each item being an occupied space.

Each block can move up, down, left, and right — even to an entirely different building by going straight down and detaching.

Occupants include: VR chamber, an industrial house, gelato factory, tropics, magician, gelato store, and a home with lots of plants — which is currently moving to another space.

Inspirations: Drag and drop lists (web)

Watch time-lapse

10 x your teamwork through pair programming illustration

5. 10 x your teamwork through pair programming

Michael Milewski & Selena Small

Selena and Michael take you on a roller coaster journey of getting into and getting the most out of pair programming. Live on stage trying to deliver a feature whilst coding in React… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/10-x-your-teamwork-through-pair-programming?from=talks">Read more<span class="sr-only"> about this talk</span></a>

A roller coaster just for pair programming! Two seats, one keyboard, and one screen in each carriage. Riders often reach peak productivity at the top of the coaster.

It has got some very tight turns, though. It’s no wonder that guy feels ill after riding.

Inspirations: Roller Coaster Tycoon (game)

Watch time-lapse

The first two seconds: Faster page loads with React illustration

6. The first two seconds: Faster page loads with React

Josh Duck

We’re often told it’s impossible to create React pages that load quickly. Are React developers really doomed to a life of embarrassing Lighthouse scores? Working with the ABC… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/the-first-two-seconds-faster-page-loads-with-react?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Website performance equipment is perched atop Lighthouse Beach. Today. the ABC News website is being tested. Once the tests are run, the lighthouse projects a score from 0 to 100, which indicates how well the website performs.

Inspirations: Lighthouse analysis tool (web)

Watch time-lapse

Engineering led design illustration

7. Engineering led design

Lauren Argenta

Designers and engineers: we have different experiences, different skills, different mindsets, and yet bridging these differences effectively, and making the most of this inherent diversity is the secret sauce in making good software… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/engineering-led-design?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Engineers guide designers up a mountain, sharing their experience and skills. It’s rough terrain, cold, and snowing, but everyone is doing their best to work together!

Watch time-lapse

Take a load off with React illustration

8. Take a load off with React

Jake Moxey

When designing asynchronous operations in a React application (such as data fetching), it’s easy to overlook the confusing and inconsistent user experience it can result… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/take-a-load-off-with-react?from=talks">Read more<span class="sr-only"> about this talk</span></a>

A React artifact has been discovered inside a cave — but it’s being crushed by the severe load above it! Things don’t look good; it’s starting to show signs of stress — but a crew of engineers are working together to rectify the problem.

Watch time-lapse

Senior to leader: Taking the next step illustration

9. Senior to leader: Taking the next step

Cathy Lill

The path to senior, cross disciplinary, technical leadership can be difficult to navigate as a front-end specialist. Will my skills be valued? Will I be considered… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/senior-to-leader-taking-the-next-step?from=talks">Read more<span class="sr-only"> about this talk</span></a>

When seniors become leaders, they must take a journey to prove themselves. It’s tough. There are 3 levels:

  1. Defeat a barrage of difficult and challenging bugs
  2. Fight your way through the wooden barricade, defended by small bears
  3. Prove that you have the experience necessary for the job.

Inspirations: Super Mario (game)

Watch time-lapse

Targeted extensibility: Lessons learned from building Atlaskit illustration

10. Targeted extensibility: Lessons learned from building Atlaskit

Charles Lee

Often when building a design system we face tension between consistent and resilient API’s that encapsulate valuable and reusable logic, and sufficient flexibility to ensure that… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/targeted-extensibility-lessons-learned-from-building-atlaskit?from=talks">Read more<span class="sr-only"> about this talk</span></a>

The React Swiss Army Knife Ship or the RSAK Ship can adapt to many different situations for extensibility! Screw laser, drone launcher, reamer satellite, and large knives are at hand to help any situation.

Inspirations: Swiss Army Knives

Watch time-lapse

What is an XSS attack — and why should you care illustration

11. What is an XSS attack — and why should you care?

Carmen Chung

XSS (Cross-Site Scripting) attacks are often referred to as the “most common vulnerability online”. With victims like eBay, McAfee, and Yahoo, these attacks involve injecting… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/what-is-an-xss-attack-and-why-should-you-care?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Dangerous drones are staging an XSS attack from multiple angles on a React ship. They’re exposing holes in the shield!

Engineers are closing the vulnerabilities as fast as possible using shield repair plasma guns.

Inspirations: Team Fortress 2 (game), Faster Than Light (game)

Watch time-lapse

Creating a custom form handler with hooks illustration

12. Creating a custom form handler with hooks

Hannah Thompson

What do you do when your new application is just a bunch of forms? Well, in the past you’d probably use a library, but now you can lean on react hooks and create a custom form… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/creating-a-custom-form-handler-with-hooks?from=talks">Read more<span class="sr-only"> about this talk</span></a>

This multi-load crane helps engineers implement validation into their forms, with each block configured for a different purpose.

Assassins are sabotaging the validation blocks by slashing the cables holding it all up, but security are throwing out hooks to catch them in the act.

Watch time-lapse

Reactronica: Music as a Function of State illustration

13. Reactronica: Music as a Function of State

Kaho Cheung

React treats UI as a function of state. What if React’s declarative programming model could be applied to music as well? Reactronica aims to treat music as a function of state…

It’s Reactronica! The best musical act in the React universe. Ukulele, piano, giant horn, and percussion combine to produce some sweet beats for its fans.

Watch time-lapse

Redux Connect vs Redux Hooks: A play illustration

14. Redux Connect vs Redux Hooks: A play

Terence Jeong

Redux Connect vs Redux Hooks is an enchanting tale about going from the Redux Higher Order Component to the new Redux Hooks. Our hero, a Class Component is connected to… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/redux-connect-vs-redux-hooks-a-play?from=talks">Read more<span class="sr-only"> about this talk</span></a>

Watch out! Redux Hooks has arrived in town, taking on the Redux Connect sheriff.

Redux Hooks swarms its hook-like tentacles. Onlookers heckle nearby. It’s going to be a bloody fight.

Inspirations: Western Movies (genre)

Watch time-lapse

Rethinking Design Practices illustration

15. Rethinking Design Practices

Mark Dalgleish

In a world of components, how should our design processes change? How should our tooling change? How should we, as front-end developers, better enable this change? In this talk… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/rethinking-design-practices?from=talks">Read more<span class="sr-only"> about this talk</span></a>

The small bears are enforcing status quo design practices on the engineers: get dumped out, learn the current state of design, and get sucked back in.

A small group of resistance fighters are trying to stop the drone-like people. “Wake up” they scream. “We can do better!”.

Peeling back the guide rail, they direct them into a waiting escape ship.

Inspirations: Lemmings (game)

Watch time-lapse

5 things you should know about WordPress illustration

16. 5 things you should know about WordPress… wait, what?

Isabel Brison

Did you know a large chunk of WordPress is now built in React? WordPress is a 16 year old open source project with hundreds of contributors, most of whom came from a PHP, HTML… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/5-things-you-should-know-about-wordpress-wait-what?from=talks">Read more<span class="sr-only"> about this talk</span></a>

After years of planning, WordPress has been split open to consume React itself!

It’s a messy operation — fires break out, radioactive material is exposed, electric surges and smoke is pouring out. It won’t be easy, but it’s for the best, taking the platform forward.

Watch time-lapse

Write fewer tests! Model-based testing in React illustration

17. Write fewer tests! Model-based testing in React

David Khourshid

What if you could automatically generate hundreds of integration and end-to-end tests, instead of manually coding them? Discover how model-based testing greatly improves… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/write-fewer-tests-model-based-testing-in-react?from=talks">Read more<span class="sr-only"> about this talk</span></a>

The Jest ship travels around and produces hundreds of tests on command to help engineers.

Many tests in a fraction of a second — with no manual work required. Just hit a button and they’re swarming, ready to expose the most hidden edge-cases.

Watch time-lapse

The tragedy of scale illustration

18. The tragedy of scale

Hannes Obweger & Nadia Makarevich

What do farmers 200 years ago and today’s software developers have in common? Why use the word “tragedy” to describe it when it’s not tragic at all? Join us for this tale… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/the-tragedy-of-scale?from=talks">Read more<span class="sr-only"> about this talk</span></a>

It’s 200 years ago and rapid growth has produced too many bugs - they’re infiltrating farms and crops the world over!

The only way to contain them is to catch and secure them, preventing reproduction. Latching onto your body is one of their favourite things to do.

Watch time-lapse

Building with Monorepos illustration

19. Building with Monorepos

Emma Hamilton

Monorepos are everywhere in the React community from design systems and apps to open source libraries. Being able to work on multiple packages together is powerful, but… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/building-with-monorepos?from=talks">Read more<span class="sr-only"> about this talk</span></a>

After a long journey through the jungle searching for a React artifact, our adventurer arrives at a mysterious door. What lies behind it?

In front of them is a puzzle. They’re going to have to move each piece to gain access to what lies within.

Inspirations: Jurassic Park

Watch time-lapse

How to teach an old dev new tech: Learning React as a senior developer illustration

20. How to teach an old dev new tech: Learning React as a senior developer

Trent Willis

Have you ever learned a new technology? Were you uncomfortable? Intimidated? That was Trent’s recent experience when he had to learn a new framework… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/how-to-teach-an-old-dev-new-tech-learning-react-as-a-senior-developer?from=talks">Read more<span class="sr-only"> about this talk</span></a>

A React entity intimidates and stares down on the battle-worn engineer. Its intense glare can see all the way into the engineer’s soul.

This is the final battle step to conquer React.

Inspirations: Eye of Sauron from LOTR (movie)

Watch time-lapse

A GraphQL Survival Kit illustration

21. A GraphQL Survival Kit

Petra Gulicher

GraphQL lets us model our business domain as a graph, but what does that mean? What are the tools we need to design a model that works for our business, products and users both… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/a-graphql-react-survival-kit-how-to-avoid-the-pitfalls-and-level-up-your-teams-creativity?from=talks">Read more<span class="sr-only"> about this talk</span></a>

After venturing from base camp in the jungle, an engineer comes across a very protective elder bear guarding their offspring.

Rushing back to their camp, the bridge collapses under the stress. Using knowledge and equipment from the GraphQL Survival Guide, they throw a rope device to avoid sudden death below from raging waters and poisonous snakes.

Inspirations: Indiana Jones (movie)

Watch time-lapse

Powerful REST in a GraphQL world illustration

22. Powerful REST in a GraphQL world

Tejas Kumar

As a startup that integrates with larger, often older enterprises, we have to integrate with a number of RESTful services (against our will). This technical talk will outline how we are… <a class="external-article" target="_blank" rel="noopener noreferrer" href="https://reactconfau.com/talks/powerful-rest-in-a-graphql-world?from=talks">Read more<span class="sr-only"> about this talk</span></a>

On top of an aging REST API facility, a large GraphQL satellite has been built to act as a reliable and easy-to-use single end-point.

In the depths below, maintenance staff battle creatures in the dark, fending off fast growing vines and repairing equipment that is constantly malfunctioning.

Watch time-lapse

Bonus Drawing illustration

Bonus Drawing

For a presentation that had to be cancelled at short notice.

Three civilizations from around the universe meet to declare peace and work with one another.

Watch time-lapse

Thinkmill Spaceship illustration

Thinkmill Spaceship

ReactConf AU was presented by Thinkmill. Take a look at my Thinkmill In Space 🛸 for a complete explanation of the back story for this illustration.

Process

Illustrations were created on an iPad Pro with an Apple Pencil using Adobe Draw. It took about 120 hours to complete.

Image of ipad mid illustration

My two favourite creations are: Rethinking Design Practices (Lemmings inspiration) and How to teach an old dev new tech (Eye of Sauron inspiration).

Thanks for reading!

Thanks to Dominik Wilkowski

Services discussed

Technology discussed

  • Monorepo
A photo of Jed Watson & Boris Bozic together

We’d love to work with you

Have a chat with one of our co-founders, Jed or Boris, about how Thinkmill can support your organisation’s software ambitions.

Contact us