🎤 7:00pm - 7:45pm: Accessibility-flavored React components make your design system delicious! by Kathleen McMahon
🎤 7:50pm - 8:20pm: Mastering UIs with Finite State Machines by Rubén Sospedra
🍻 Drinks - TBC
_______________________
► Venue security 👮
All attendees need to provide their full names in advance. Also, you will need to bring some form of photo ID to show on the day - something like a passport, driving licence, or work ID would be grand.
► Recording 🎥
The event will be recorded. Let the organisers know, if you don't want to be included in the pictures or videos. Some of them will be used on our social media channels.
_______________________
► Sponsors
Lloyds Bank
https://www.lloydsbankinggroup.com/careers/
@LBGCareers
biggles at large
https://biggles.io/
_______________________
► The Talks 🎤
👉Talk 1: Accessibility-flavored React components make your design system delicious! by Kathleen McMahon
Design systems are a popular way for teams to flavour their design and development workflow. However, an often-missing ingredient in many design systems is a focus on accessibility best practices — especially when component libraries are involved.
In this talk, we’ll take a look at how you can mix some commonly-used components with the ingredients of accessibility. Pair this with best practices guidance in your documentation, and you’ll have the recipe for a delectably inclusive design system.
In this session you’ll learn how to combine semantic HTML with accessibility “seasonings" into some common React components including icons, buttons, and inputs.
You’ll also learn how to spice up your design system’s documentation with approachable, accessibility best-practices guidance including interactive examples, and component dos and don'ts.
Even if you’ve never seen React before, join me to learn how to make your design system delicious.
Presentation flow:
* Why accessible components?
* Design systems are a cookbook
* Design systems and React
* Icons
* Buttons
* Inputs
* Documentation
* Wrap-up
Kathleen works at O’Reilly Media as a Senior Frontend Engineer and Design System Tech Lead. Her deep industry experience as both a designer and developer fuels her passion for making apps beautifully accessible. In her spare time, she is the Creative Director for the CXsisters network, and the best lanterne rouge cyclocrosser you’ll ever meet.
Twitter: @resource11
IG: @resource11
👉Talk 2: Mastering UIs with Finite State Machines by Rubén Sospedra
Did you ever feel like monkey patching your UI component? Adding too many if/else, handling a lot of complexity or hacking several non-desired side effects.
Did you ever have a problem with double-clicking an async button? Fetching multiple times the same resource in a row? Did you have problems translating UX interfaces and mock-ups into your applications scenes?
All these kind of problems can be properly fixed by applying a different point of view. An architecture based upon Mealy state machines. Also known as finite state machines or automatas. These machines are deterministic, pure and idempotents. Opening a new set of possibilities from predictable components to autogenerated tests.
Let's take a look at this new paradigm for UI components.
You'll discover a better and cleaner world ;)
Bio
Javascript hacker. Rubén plays the ukelele and reads about political science. Gamer and movie producer. Rubén likes coffee and astronomy.
🎤 7:00pm - 7:45pm: Accessibility-flavored React components make your design system delicious! by Kathleen McMahon
🎤 7:50pm - 8:20pm: Mastering UIs with Finite State Machines by Rubén Sospedra
🍻 Drinks - TBC
_______________________
► Venue security 👮
All attendees need to provide their full names in advance. Also, you will need to bring some form of photo ID to show on the day - something like a passport, driving licence, or work ID would be grand.
► Recording 🎥
The event will be recorded. Let the organisers know, if you don't want to be included in the pictures or videos. Some of them will be used on our social media channels.
_______________________
► Sponsors
Lloyds Bank
https://www.lloydsbankinggroup.com/careers/
@LBGCareers
biggles at large
https://biggles.io/
_______________________
► The Talks 🎤
👉Talk 1: Accessibility-flavored React components make your design system delicious! by Kathleen McMahon
Design systems are a popular way for teams to flavour their design and development workflow. However, an often-missing ingredient in many design systems is a focus on accessibility best practices — especially when component libraries are involved.
In this talk, we’ll take a look at how you can mix some commonly-used components with the ingredients of accessibility. Pair this with best practices guidance in your documentation, and you’ll have the recipe for a delectably inclusive design system.
In this session you’ll learn how to combine semantic HTML with accessibility “seasonings" into some common React components including icons, buttons, and inputs.
You’ll also learn how to spice up your design system’s documentation with approachable, accessibility best-practices guidance including interactive examples, and component dos and don'ts.
Even if you’ve never seen React before, join me to learn how to make your design system delicious.
Kathleen works at O’Reilly Media as a Senior Frontend Engineer and Design System Tech Lead. Her deep industry experience as both a designer and developer fuels her passion for making apps beautifully accessible. In her spare time, she is the Creative Director for the CXsisters network, and the best lanterne rouge cyclocrosser you’ll ever meet.
Twitter: @resource11
IG: @resource11
👉Talk 2: Mastering UIs with Finite State Machines by Rubén Sospedra
Did you ever feel like monkey patching your UI component? Adding too many if/else, handling a lot of complexity or hacking several non-desired side effects.
Did you ever have a problem with double-clicking an async button? Fetching multiple times the same resource in a row? Did you have problems translating UX interfaces and mock-ups into your applications scenes?
All these kind of problems can be properly fixed by applying a different point of view. An architecture based upon Mealy state machines. Also known as finite state machines or automatas. These machines are deterministic, pure and idempotents. Opening a new set of possibilities from predictable components to autogenerated tests.
Let's take a look at this new paradigm for UI components.
You'll discover a better and cleaner world ;)
Bio
Javascript hacker. Rubén plays the ukelele and reads about political science. Gamer and movie producer. Rubén likes coffee and astronomy.
► Venue security 👮
All attendees need to provide their full names in advance. Also, you will need to bring some form of photo ID to show on the day - something like a passport, driving licence, or work ID would be grand.
► Recording 🎥
The event will be recorded. Let the organisers know, if you don't want to be included in the pictures or videos. Some of them will be used on our social media channels.
_______________________
► Sponsors
Lloyds Bank
https://www.lloydsbankinggroup.com/careers/
@LBGCareers
biggles at large
https://biggles.io/
_______________________
► The Talks 🎤
👉Talk 1: Accessibility-flavored React components make your design system delicious! by Kathleen McMahon
Design systems are a popular way for teams to flavour their design and development workflow. However, an often-missing ingredient in many design systems is a focus on accessibility best practices — especially when component libraries are involved.
In this talk, we’ll take a look at how you can mix some commonly-used components with the ingredients of accessibility. Pair this with best practices guidance in your documentation, and you’ll have the recipe for a delectably inclusive design system.
In this session you’ll learn how to combine semantic HTML with accessibility “seasonings" into some common React components including icons, buttons, and inputs.
You’ll also learn how to spice up your design system’s documentation with approachable, accessibility best-practices guidance including interactive examples, and component dos and don'ts.
Even if you’ve never seen React before, join me to learn how to make your design system delicious.
Kathleen works at O’Reilly Media as a Senior Frontend Engineer and Design System Tech Lead. Her deep industry experience as both a designer and developer fuels her passion for making apps beautifully accessible. In her spare time, she is the Creative Director for the CXsisters network, and the best lanterne rouge cyclocrosser you’ll ever meet.
Twitter: @resource11
IG: @resource11
👉Talk 2: Mastering UIs with Finite State Machines by Rubén Sospedra
Did you ever feel like monkey patching your UI component? Adding too many if/else, handling a lot of complexity or hacking several non-desired side effects.
Did you ever have a problem with double-clicking an async button? Fetching multiple times the same resource in a row? Did you have problems translating UX interfaces and mock-ups into your applications scenes?
All these kind of problems can be properly fixed by applying a different point of view. An architecture based upon Mealy state machines. Also known as finite state machines or automatas. These machines are deterministic, pure and idempotents. Opening a new set of possibilities from predictable components to autogenerated tests.
Let's take a look at this new paradigm for UI components.
You'll discover a better and cleaner world ;)
Bio
Javascript hacker. Rubén plays the ukelele and reads about political science. Gamer and movie producer. Rubén likes coffee and astronomy.
