Finch Front-End

Edinburgh, Scotland

23rd–25th September 2019

Supported by Mozilla

A conference for professional web developers who want to push their front-end code to its fullest potential.

Industry-leading experts from around the world will deliver talks and workshops, delving into practical hows and presenting compelling whys.

Explore trends, be aware of pitfalls, and learn how to optimise your websites for speed, reliability, accessibility, and maintainability.

A hearty, healthy special of CSS, HTML, SVG, and JavaScript, Finch Front-End is an educational, high-value, dev-focussed, fluff-free event.

Tickets

All done. All gone. All over. Thanks to everyone who came along!

Buy Now!

Speakers & Sessions

The #finchconf speakers are passionate, industry-leading professionals and experienced, widely-regarded speakers. All are invited guests.

Rachel Andrew

Rachel Andrew

Rachel is a front- and back-end web developer and author and co-author of 22 books including The New CSS Layout, as well as a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch and Notist, Editor in Chief of Smashing Magazine, a Google Developer Expert and a Member of the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk.

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.

Chen Hui Jing

Chen Hui Jing

Chen Hui Jing is a self-taught designer and developer living in Singapore, with an inordinate love for CSS, as evidenced by her blog, that is mostly about CSS, and her tweets, which are largely about typography and the web. She used to play basketball full-time and launched her web career during downtime between training sessions. Hui Jing is currently a Developer Advocate for Nexmo, focusing on growing developer engagement around the APAC region.

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.

Hakim El Hattab

Hakim El Hattab

Hakim is a Swedish front-end developer and interface designer who loves to work on visual JavaScript experiments and user interface concepts. He co-founded and is currently working on Slides.com, a fully featured presentation platform built on top of his open source presentation framework, reveal.js.

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.

Cassie Evans

Cassie Evans

Cassie has a lot of love for animation, especially animation on the web. She can usually be found tinkering on Codepen and nerding out about colour palettes.

She is a core organiser of codebar Brighton, a non-profit initiative that runs free programming workshops and currently works as a Front-end Developer at Clearleft in Brighton.

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.

Val Head

Val Head

Val is a Senior Design Advocate at Adobe, author, and web animation expert. She is the author of Designing Interface Animation on Rosenfeld Media, teaches CSS Animation on lynda.com, and curates the weekly UI Animation Newsletter. Val has been published by Fast Company, A List Apart, and Smashing Magazine, and has spoken at dozens of events all over the world including Pixel Up, Web Directions, UX Week and An Event Apart.

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.

Jeremy Keith

Jeremy Keith

Jeremy lives in Brighton, England, where he makes websites with design agency Clearleft. You may know him from such books as DOM Scripting, Bulletproof Ajax, HTML5 For Web Designers, Resilient Web Design, and, most recently, Going Offline.

He spends most of his time goofing off on the internet, documenting his time-wasting on adactio.com, where he has been writing for over fifteen years.

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.

David Khourshid

David Khourshid

David Khourshid is a software engineer for Microsoft, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about statecharts and software modelling, reactive animations, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.

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.

Aga Naplocha

Aga Naplocha

Aga is a coding designer with a strong focus on UX-related issues. She is the co-founder of The Awwwesomes, an initiative teaching how to create awwwesome things on the web, organizing coding workshops for beginners, co-organizing conferences (Front Trends 2018 and Element UX Talks) and meetups in Poland. Aga also teaches coding and design at Skillshare. She loves pink and Wes Anderson movies.

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.

Jason Pamental

Jason Pamental

Jason spends much of his time working with clients to establish their typographic systems and digital strategy, helping design and development teams works smarter and faster, and running workshops about all of the above. He is a seasoned design and user experience strategy leader with over 20 years’ experience on the web in both creative and technical roles, and an Invited Expert to the W3C Web Fonts Working Group. Clients range from type industry giants, Ivy League and High Tech, to the NFL and America’s Cup. He also researches and writes on typography for the web: he’s author of Responsive Typography from O’Reilly, articles for .Net Magazine, PRINT Magazine, HOW, Monotype.com, and frequent podcast guest. Author of online courses for Aquent’s Gymnasium platform and Frontend Masters.

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.

Harry Roberts

Harry Roberts

Harry is an award-winning Consultant Performance Engineer from the UK. With a client list ranging from the United Nations to Google, the BBC to the Financial Times, he has helped some of the world’s largest organisations make their websites faster.

He also holds positions as a Google Developer Expert, where he shares web performance research and findings, and as Performance Ambassador for SHIFT Commerce, where he aims to make e-commerce faster from the inside out.

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).

Sara Soueidan

Sara Soueidan

Sara is an award-winning freelance front-end UI/UX developer from Lebanon. She runs workshops and helps companies and agencies build clean front-end foundations for websites and applications, with strong focus on progressive enhancement, performance and accessibility.

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.

Léonie Watson

Léonie Watson

Léonie is Director of TetraLogical; a member of the W3C Advisory Board; co-Chair of the W3C Web Applications Working Group; and a member of the Accelerated Mobile Pages (AMP) Advisory Committee.

Amongst other things, Léonie is co-organiser of the Inclusive Design 24 (#id24) conference; co-author of the Inclusive Design Principles; and mentor to young people interested in the fields of accessibility and inclusive design. She is also a Microsoft Most Valued Professional (MVP).

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!

Workshops

Full-day, deep-detail courses from in-demand instructors.

Save 15% on workshops when bought with a conference ticket.

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 — from writing proper, semantic HTML, to writing CSS that doesn't break the accessibility of your UI, and adding accessible interactivity with JavaScript.

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,
    • Error messages,
    • 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 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.

Tickets for workshops are very limited in number. Book now before it’s too late!

Buy tickets

Schedule

A two-day single-track conference followed by a day of workshops.

Monday 23rd September

Conference Day One: Layout, Optimisation, and Organisation.

Hour-long talks (which will include Q&A opportunities), with plenty of opportunity to mix with speakers and like-minded attendees.

Time Session / Activity
Registration
Hello! Welcome to #finchconf
Jeremy Keith: Going Offline
Tea, coffee, and chit-chat
Rachel Andrew: The New CSS Layout
David Khourshid: Stateful Styles
Yum lunch and friendly mingling
Chen Hui Jing: Devtools and Modern Layouts
Harry Roberts: Resource Hints
Coffee, tea, and bants
Léonie Watson: Talking Technology
End of Part One!
Drinks, fun, and frolicks at the #finchconf party

Tuesday 24th September

Conference Day Two: Aesthetics, Motion, and SVG.

Once again, hour-long sessions will be interspersed with refreshment and networking breaks.

Time Session / Activity
Registration
Well, hello again!
Hakim El Hattab: Better Interfaces
Coffee, etc, and social networking IRL
Cassie Evans: Animation with SVG
Val Head: Making Motion Inclusive
Nom-nom foods and conversation
Aga Naplocha: artistic.css
Jason Pamental: Variable Fonts
Hot beverages and warm discourse
Sara Soueidan: SVG Filters
That’s All, Folks!

Wednesday 25th September

Intensive full-day workshops: Front-end Performance with Harry Roberts and Accessible UI Patterns with Sara Soueidan.

Bring your laptop and prepare for full-on, practical, eye-opening training courses.

Lunch will be provided, as will refreshments throughout the day.

One, two, and three day tickets are available now!

Buy Tickets

Hosts

Attendees will be well looked after by a handful of professionals from the web development community.

Patrick Griffiths

Patrick Griffiths

Patrick is the main organiser of Finch Front-End. The buck stops with him.

He has been designing and developing websites for all sorts of organisations, large and small, for over twenty years. He is behind the much-neglected web dev resource HTML Dog and organised the @media conferences in London, dishing up tasty goodness to thousands of hungry web professionals long before web conferences were on-trend.

Chris Mills

Chris Mills

Chris will MC Day One of #finchconf.

He is content lead and team manager for the web developer’s go-to reference MDN Web Docs at Mozilla. He has enjoyed tinkering with web technologies since 1999, moaning about accessibility, and writing great documentation. He has come full circle, from raging heavy metal drummer to grumpy old man and spreadsheet admin.

A safe pair of hands to guide attendees through the day, Chris’s broad knowledge and raging enthusiasm of everything front-end will ensure a smooth, informative and interactive experience for all.

Location

The main conference will take place at the National Museum of Scotland in Edinburgh, the Scottish capital, and one of the world’s most culturally vibrant, picturesque cities.

Workshops will be held at a nearby venue to be confirmed.

Getting there

Edinburgh Waverley, the city’s main railway station, is a scenic 10-minute walk from the venue.

Edinburgh Airport, a short tram ride from the city centre, connects the city with over 130 locations throughout the UK, Europe, and beyond.

Hotels

The central nature of the venue means there are numerous choices nearby.

Eat & Drink

Cafés, restaurants, pubs, bars… So many choices!

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.