Finch Front‑End

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

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

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

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

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

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

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

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

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

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

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

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.

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.