Finch Front‑End

Edinburgh. 23rd-25th September 2019

Supported by Mozilla


Welcome to Finch Front-End. We’ve got 12 renowned speakers with 12 cutting-edge talks over 3 focussed days including 2 in-depth workshops and 1 standout conference.

Use this online programme to keep track of who’s doing what, and when. And please join the discussion - if there is anything you would like to ask a speaker during their talk, ask a question and we will put it to them in their post-talk Q&A session.

We hope you have an enjoyable, informative time. If there is anything you want to tell us, or if you have any questions about anything at all, just talk to one of the friendly people in the grey Finch Front-End t-shirts.

Day One: Layout, Optimisation, and Organisation

08:45: Welcome to #finchconf!

A hello and a warm welcome to the first day of Finch Front-End, from organiser Patrick Griffiths and MC Chris Mills.

09:00: Jeremy Keith: Going Offline

Web design is complicated. Web development is complicated. Everything seems to be constantly changing—there’s so much to keep track of. But there’s one thing we can confidently say for sure: websites need an internet connection in order to work. Right? Well, even that is no longer true. Thanks to the powerful technology of service workers, you can now design and develop websites that work offline. This is a game-changer! And now you’ve got something new you need to learn. But don’t worry—Jeremy is here to talk you through a whole range of offline strategies. By the end of this presentation, you’ll have all the knowledge and code you’ll need to free your website from the tyranny of the network connection.

Followed by Q&A. Ask a question

10:00: Break

10:30: Rachel Andrew: Does it work? Using the New CSS Layout

Over the past two years, we have moved from a situation where we essentially lacked a layout system for the web, to one where a complex and flexible system is emerging. A system with Grid and Flexbox as the headline features, and backed by a range of concepts and CSS properties and values which help us make sense of what it is to do layout on the web.

In this talk, we will take a look at CSS layout in a holistic way. Rather than thinking Grid or Flexbox first, we will look at the patterns we need to build, and then discover which bits of CSS we might need to use to realise them. Along the way we'll encounter Grid, Flexbox, the BFC, Writing Modes, and some interesting things about scrolling. All part of the layout system that we now have in CSS.

Followed by Q&A. Ask a question

11:30: David Khourshid: Crafting Stateful Styles with State Machines

User interfaces are highly dynamic and complex, and structuring stylesheets for every possible state of every component can be a challenge. In this talk, we will explore innovative ways of organising our styles, adding complex interactivity and meaningful transitions, and comprehensively test UIs through a decades-old concept – finite state machines. With ARIA, data-attributes, and CSS variables, state machines can bring a new level of maintainability, testability, and interactivity to your styles.

Followed by Q&A. Ask a question

12:30: Lunch

13:30: Chen Hui Jing: Using DevTools to Understand Modern Layouts

Flexbox, Grid and Box Alignment are the cornerstones of modern CSS layouts. They introduce behaviours that might seem confusing if you don’t completely understand how the browser interprets the CSS values you assign, for example sizing with Flexbox, or the various options for sizing tracks in Grid. This talk will explain a variety of modern CSS layout techniques through live demonstrations via DevTools, and provide real-world use cases of how such techniques allow designs to better adapt across a broad range of viewports.

Followed by Q&A. Ask a question

14:30: Harry Roberts: More Than You Ever Wanted to Know About Resource Hints

Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is! Well, by the end of this talk, we’ll all be experts.

Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser).

Followed by Q&A. Ask a question

15:30: Break

16:00: Léonie Watson: Talking Technology

We’ve been talking with technology for longer than you might think, but despite increasing conversational sophistication, relatively few ways exist to help us make artificial speech sound human. Find out how to use Speech Synthesis Markup Language (SSML) with the Amazon Echo or Google Home, and the Web Speech API in the browser; how the CSS Speech module might be useful (if only it were more widely supported); and how we might be able to solve some problems by making things talk - because the front-end is no longer just a visual thing!

Followed by Q&A. Ask a question

17:00: End of Day One

19:00: #finchconf Party

@ Soul Nation, 32-34, Potterrow, EH8 9BT

Call it a party. Call it a social. Call it a networking event, if you must. It’s a great opportunity to relax and unwind with the #finchconf attendees and speakers.

An area of the bar will be reserved and we will be getting in a drink or three (Finest Scottish beer! Finest Scottish Irn Bru! Or Prosecco.)

Day Two: Aesthetics, Motion, and SVG

08:45: Welcome to #finchconf!

A hello and a warm welcome to the second day of Finch Front-End.

09:00: Hakim El Hattab: Building Better Interfaces

In this session you’ll pick up practical tips for building better and more enjoyable user interfaces on the web. Hakim will guide you through a few familiar UI patterns and break them down to highlight common pitfalls and present better alternatives. He’ll use real world examples to demonstrate specific front-end techniques and share general guidelines that help when building richly animated interfaces. Plus, he’ll talk about correlation between having fun at work and building interfaces that are fun to work with.

Followed by Q&A. Ask a question

10:00: Break

10:30: Cassie Evans: Interactive Web Animation with SVG

A whistle-stop tour of SVG animations, complete with audience participation, because interaction is what makes motion on the web so much fun!

By the end of the talk, attendees will feel enthused and inspired to make their own creative web animations with SVG. It will remind developers to have fun with new technology but also contain practical takeaway tips for animation in production. In addition to SVG animation, it will include interactive technologies such as Chrome’s new face detection API and webcam colour detection.

Followed by Q&A. Ask a question

11:30: Val Head: Making Motion Inclusive

Let’s clear the air about animation and inclusive design. It’s a common misconception that things like inclusive design and accessibility only come at the cost of design details like motion, but that’s just not the case. Whether it’s microinteractions, animated illustrations, or larger animated experiences, a little care and consideration can go a long way towards getting the best of both worlds. In this dynamic session, Val will show you how to build animated interactions with inclusivity in mind from the start. We’ll discuss how to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

Followed by Q&A. Ask a question

12:30: Lunch

13:30: Aga Naplocha: artistic.css

This talk will dive into art direction and trends to find a new way to express design ideas in CSS. During Aga’s talk, you will find out more about the intersection of CSS code with collage techniques, anti-design aesthetics and much more. Combined with practical CSS and examples you can use on your websites right away, Aga will also be presenting some of her CSS experiments to show you that art has a true impact on CSS properties and new features.

Followed by Q&A. Ask a question

14:30: Jason Pamental: Dynamic Typographic Systems, Modern CSS, and Variable Fonts

Variable fonts are a transformative evolution of type design that has huge performance and design implications for the web. When coupled with CSS custom properties and calculations, they make for a completely new way to think about typography and UX. This talk will show how these technologies and techniques can be combined in a unique way to enable dynamic, fluidly scaling typography that reacts to screen size and other aspects of user context (light/dark modes for example). It’s a perfect complement for better design systems and accessibility, too.

Followed by Q&A. Ask a question

15:30: Break

16:00: Sara Soueidan: SVG Filters: The Crash Course

When it comes to graphical effects, CSS has come a long way in the last few years, with the introduction of CSS filters and blend modes. However, when compared to effects available in graphics editors such as Photoshop and the likes, CSS is still a long way behind. SVG, on the other hand, comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using just a few lines of code.

In this detail-packed talk, Sara will give you a crash course on SVG filters: why they're awesome, how they work, and examples of powerful effects you can create with them. While the syntax and attributes of these filters may seem intimidating and not very friendly at first, once you get a grasp of how they work, you'll have a very powerful tool in your arsenal, that allows you to push the boundaries of what is possible on the web.

Followed by Q&A. Ask a question

17:00: End of Day Two


Full-day, deep-detail courses, at Edinburgh Training and Conference Venue, St Mary's St (EH1 1SU).

Harry Roberts: Front-End Performance: Building Faster Websites

Every case-study, every report, and every bit of feedback always tells us the same thing: speed matters. It’s good for users, it’s good for accessibility, and it’s good for business. But why are modern browsing experiences so slow? If technology is getting better, why are websites getting worse?

In this workshop, we’ll take an in-depth look at:

  • how the network really works, and how to design around it;
  • how to keep websites fast whilst keeping clients and stakeholders happy;
  • how to optimise our assets for faster delivery;
  • how to trick the browser into delivering assets with different priorities;
  • how to measure and profile performance wins and losses;
  • a whole host of tips, tricks, and techniques to help us deliver the same experiences in record times;
  • a bunch of fascinating little factoids and trivia which help shine a light on what’s really going on under the hood;
  • how to prepare for the web (and its users) of tomorrow;
  • lots of naughty little micro-optimisations, just for fun;
  • and a lot, lot more.

100% of previous attendees would recommend the workshop to colleagues!

This workshop is targeted at intermediate to advanced front-end developers, web designers, and software engineers, or anybody who writes code. There will be resources and case studies for you to take back to non-technical stakeholders to help convince them of the power of performance.

You will need a laptop, and something for making a lot of notes.

Sara Soueidan: Accessible UI Patterns

Accessibility doesn’t have to be hard or time-consuming. Once you learn how to think and code inclusively, writing accessible markup becomes second nature, and part of your everyday coding workflow. In this workshop you will learn how to build UI components with inclusivity baked right into them from the start.

You’ll learn some of the most important accessibility principles. We’ll also cover how to operate a screen reader and conduct an accessibility audit to spot and fix some of the most important accessibility issues.

Then, we’ll walk through some of the most common UI patterns and learn what it takes to make them accessible. (You’ll be pleasantly surprised at how little is sometimes needed to do so!)

You’ll learn about ARIA attributes and when and how to use them correctly to make UI elements screen reader-friendly. Through practice, you’ll get familiar with some of the most important and most used ARIA attributes.

Some of the components and patterns we’ll cover include:

  • SVG Icons and icon-based buttons,
  • Colour swatches (for design systems),
  • Navigation systems:
    • Mobile navigation,
    • Pagination,
    • Breadcrumbs.
  • Forms:
    • Custom checkboxes and radio buttons,
    • Toggle switches,
    • Tooltips and interactive hints,
    • Validation and error messages,
    • File inputs,
    • And a few more if time allows.
  • Content accordions.

You’ll learn by building most of the above patterns yourself, and testing some of them using your operating system’s screen reader. We’ll cover concepts such as managing focus and, if time allows, we might build our own accessible custom component.

For each pattern, we’ll cover basic CSS styling, and the minimal JavaScript functionality wherever needed, highlighting the importance of JavaScript in creating truly accessible interactive components where HTML and CSS don’t suffice. We’ll do all this in the context of progressive enhancement, ensuring that your content is fully accessible even in worst case scenario.

Ask a question

Put a question to the speakers. If there’s something you would like to know, send a question during a talk. We will put questions to the speakers during Q&A sessions at the end of each talk.

Code of conduct

We want Finch Front-End to be a friendly, inclusive, harassment-free event. All attendees, speakers, sponsors and volunteers are required to agree with our code of conduct. Organisers will enforce this code throughout the event. We ask for cooperation from all participants to help ensure a safe, welcoming environment for everyone.

Around Edinburgh

Food & Drink

There are, approximately, one billion options. Here are a few near to the conference venue:

Pizza? Try Civerinos Slice. Thai? Try Ting Thai Caravan. Vegetarian? Try The Lucky Pig.

For cafés, we recommend Thomas J Walls (The Opticians) or Brew Lab.

If pubs or bars are what you’re after, take a little (5-10 minute) detour from the immediate area and try Cloisters, Hanging Bat, or Dagda Bar.

Just take a stroll. Or peep this map of some nearby cafés, restaurants, and bars


The venue is a major tourist attraction. That’s a good starting point. And the architecture of the Old Town and New Town themelves are major tourist attractions.

You could stroll the Royal Mile, from Edinburgh Castle down to the Palace of Holyroodhouse. Then maybe hike around Holyrood Park and up to Arthur’s Seat. Or walk along the winding Water of Leith to the Royal Botanic Garden Edinburgh. Harry Potter was born here, too. There’s copious amounts of Harry Potter around. If boy wizards are your kind of thing.