You will be going home not just filled with new energy and inspiration, but also with a lot of practical ideas and tips which you can use to make a difference.

All 12 talks will be 45 minutes long and will go into depth about various web related topics such as performance, accessibility, animation and its implications for web design and development. Below you can find the talks, keep posted for updates!

Rachel Andrew

Unlocking the Power of CSS Grid Layout

By Rachel Andrew

Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.

In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.

Phil Hawksworth profile picture

Promoting Performance from the Ground Up

By Phil Hawksworth

No matter how good you are at crafting the most ingenious, high-performance code, you need to deliver it to your users reliably. You probably also need to evolve it over time. To test it. To get it signed off. All this can be painful. But it needn’t be.

This talk will look at ways to design a developer experience which then enables a good user experience. We’ll talk about the benefits of keeping your stack simple, of using the expertise of others, at ways to avoid launch day being more stressful than it should be. And we’ll examine some performance and security benefits of using the JAMstack and microservices in your projects.

Jane Pong

Data Visualisation in News: The Creative Process

By Jane Pong

Pictures are easier than words, but how do serious news organisations translate difficult facts and stories into understandable graphics without over-simplifying?

In this talk, Jane explores ways in which newsrooms approach journalism in the digital age, by engaging the audience through data visualisation and interactive news technology. She describes some of the processes and tools behind producing data visualisations in a news context.

Diana Mounter

Interaction of Color Systems

By Diana Mounter

Color is the most relative medium in art. This fact makes working with color in design systems particularly challenging. Few people seem to want to claim to be an expert in color—perhaps because there’s an immensely deep amount to learn, or perhaps it’s because color is one of those things we hate to get wrong. Whatever the reason, color remains a contentious but often critical part of design.

She’ll be sharing her journey into color, from the technical challenges to how people respond to it. She’ll take a look at the efforts required in updating large scale web applications like Github, challenges in programmatically generating colors, creating color naming conventions, color accessibility, and testing the interaction of color with other parts of a design system.

Jake Archibald

The Event Loop

By Jake Archibald

Have you ever had a bug where things were happening in the wrong order, or particular style changes were being ignored? Ever fixed that bug by wrapping a section of code in a setTimeout? Ever found that fix to be unreliable, and played around with the timeout number until it kinda almost always worked?

This talk looks at the browser's event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We'll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events land.
Hopefully you'll never have to use setTimeout hacks again!

Oliver Reichenstein

Design Ethics

By Oliver Reichenstein

To a designer, “design” is how it works. To everybody else design is how it looks: nice or ugly. To a philosopher, “ethics” is how we act. To everybody else ethics is how it feels: good or bad.

With the recent call for more ethics in design it’s time to explore what philosophical ethics means within the practice of Human Computer Interaction design. Oliver's talk examines the reality of design ethics within an agency and a corporate in-house environment.

Val Head profile picture

Choose Your Animation Adventure

By Val Head

Animation has come a long way on the modern web and now we have a long list of choices for how to make something move on screen: CSS, JavaScript, SVG, the Web Animation API. With so many options, how can you be sure which is the best choice for your project? With an eye to both the strategy and tactics of animation needs, you’ll learn what which web animation options are the best fit for common UI design tasks.

Val will survey the full spectrum of animation options from CSS to React Motion and show which are best suited for things like state transitions, showing data, animating illustrations, or making animations responsive. You’ll also see how your choice of animation tools can impact performance, so you’ll leave knowing exactly which tools to choose for your animation needs.

Asim Hussain profile picture

How to Hack a Web App?

By Asim Hussain

Thought hacking was hard? It’s not, it’s easy and I’m going to show you how! In this episode of CSI Hong Kong, we’ll investigate a series of hacking stories and break them down step-by-step to see exactly how they did it.

By the end, you’ll walk away a little bit more scared and a lot more prepared with some great practices you can apply immediately to your own applications.

David Wieland

Navigating Choppy Waters

By David Wieland

What was the biggest thing you’ve ever taken on? I doubt it was a walk in the park. One day you’ll likely face a project which appears bigger than you can chew. With the right team and assets, nothing is insurmountable but it sure as shit can be scary at times.

The larger the assignment, the more people are involved and the more likely it is to collapse under its own weight. So how do you steer your project away from catastrophic disaster? 🤔

Mike Riethmuller

Strategy Guide for CSS Custom Properties

By Mike Riethmuller

Static variables are not always global, but global variables are almost always static, therefore dynamic variables should almost always be local. Did you follow that? If not, you might need to see my talk.

I will cover HOW to use CSS variables correctly for things like: theming, responsive design, prototyping, animation and much more. A practical guide that tells you more than how the syntax works.

Monica Dinculescu

Fontastic Web Performance

By Monica Dinculescu

Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage.

Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.

Tim Holman

Weird Wacky Wonderings

By Tim Holman

Ever started a project you didn't finish? Ever stared at your screen, knowing you wanted to make something, but unsure what? Ever felt like you're alone in making something?

Join Tim, though some weird and wacky wonderings through the web, and find how building, learning and having fun are all connected together… and gain a little more appreciation and love for code along the way!

Buy tickets