The #finchconf speakers are passionate, industry-leading professionals and experienced, widely-regarded speakers. All are invited guests.
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.
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 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.
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.
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 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.
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 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.
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.
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.
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.
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.
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 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.
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 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.
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 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).
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 frontend is no longer just a visual thing!
Full-day, deep-detail courses from in-demand instructors.
Save 15% on workshops when bought with a conference ticket.
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:
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.
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:
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.
Tickets for workshops are very limited in number. Book now before it’s too late!Buy tickets
A two-day single-track conference followed by a day of workshops.
All days will run from 9am to 5pm. Lunch and refreshments will be provided.
Full detailed timings will be announced closer to the event.
Conference Day One: Layout, Optimisation, and Organisation.
Speakers will include Rachel Andrew, Hui Jing Chen, David Khourshid, Harry Roberts, and Léonie Watson.
Hour-long talks (which will include Q&A opportunities), with plenty of opportunity to mix with speakers and like-minded attendees.
And, in the evening, unwind and have some fun at the #finchconf party. Open to all conference and workshop attendees.
Conference Day Two: Aesthetics, Motion, and SVG.
Speakers will include Cassie Evans, Hakim El Hattab, Val Head, Jason Pamental, and Sara Soueidan.
Once again, hour-long sessions will be interspersed with refreshment and networking breaks.
Bring your laptop and prepare for full-on, practical, eye-opening training courses.
One, two, and three day tickets are available now!
Attendees will be well looked after by a handful of professionals from the web development community.
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 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.
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.
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.
The central nature of the venue means there are numerous choices nearby.
So many choices! Cafés, restaurants, pubs, bars… We will update with some specifics soon.
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.
Tickets to Finch Front-End are available now!
Discounts are available for those buying conference and workshop tickets together.Buy Now!
We want to encourage diversity and are holding back a number of free tickets for those from under-represented groups who might find it difficult to afford a standard ticket.
If you are from such a background, you will soon be able to apply for a diversity ticket. Keep an eye on Twitter for alerts.
If you would like to support this initiative, you can make a donation alongside your ticket purchase. The more money we raise, the more diversity tickets we can offer.
A limited number of heavily discounted tickets are reserved for card-carrying students.
If you’re not quite a web professional yet, but intend to be one soon, this is a great opportunity to jump in the deep end and learn from the best in the business.
The finch is an icon of evolution.
Charles Darwin used the example of finches from the Galápagos Islands to demonstrate successful adaptations to changing environments.
Survival of the fittest.
Those who adapt, thrive.
A finch front-end is a modern front-end; a progressive front-end; a front-end exploiting the tools and techniques available now and preparing for the challenges that lie ahead.