Speakers & Sessions
The #finchconf speakers are passionate, industry-leading professionals and experienced, widely-regarded speakers. All are invited guests.
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 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 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 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 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 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 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 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 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 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 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 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!
