All the workshops take place live at Paasitorni. Note that full day workshops include a lunch and refreshments. If you participate into two half-day workshops, we'll organize lunch for you.

Design systems for beginners#

Principal Developer Advocate at ‹div›RIOTS - makers of Backlight, a Design Systems IDE built for Designers and Developers - m4dz is a curious animal. Former Frontend Dev, Devtools enthusiast, he has made the Developer eXperience (DX) his cherished topic. All the Web technologies are under his radar to get things ever simpler. His moto: "Developers are users just like you." As a life-long dreamer his favorite book will ever remains "Alice's Adventures in Wonderland".m4dz 🎙🥑 and Principal Developer Advocate at ‹div›RIOTS - makers of Backlight, a Design SDesign Systems crusader | Blockchain enthusiast | Design Lead @divriots | Making the IT world better one component at a timeThais Santos
2022-09-12, -

The design system workshop will provide you with all the basics and fundamentals of building a Design System, from scratch. It is mainly intended to Frontend / UI developers but can be valuable to other teammates. As long as you‘re working on any product interface, regardless of your position, this workshop will give you the keys to collaborate, from Design to System.

The workshop is dedicated to learning Design Systems fundamentals, from a Developers perspective with a bit of Designers’ incentive. During this session, you will understand the basic of the Design System terminology (what Design Tokens are, how a Design System architecture is designed…) and we’ll go through what differentiates a Design System from a collection of themable components.

After covering the building of few tokens-based components , with their relatives documentation, stories, and tests ; we’ll go to practicing in a real world use-case, where you’ll start a Design System for a project from scratch, architecture it, build its first components and documentation, publish it, and use it in a dedicated React host app.

Advanced React#

Nik is the founder of Serenity and is passionate about cryptography, CRDTs, GraphQL and React. He co-created several popular open source projects like DraftJS Plugins and Polished and participated in Stripe’s Open Source Retreat. In his spare-time he enjoys ski touring, cycling and organising the ReactJS Vienna meetup.Nik Graf
2022-09-13, -

Note that this workshop is held twice with the same content.

React 18 was a long-awaited release. New APIs were introduced and certain behavior changed. Some of these changes have quite an impact on your daily development, while others rarely affect you. Nevertheless, only by knowing your tools can you best decide when to use which of them.

In order to get a deep understanding of these new APIs and behavior changes we will explore the following topics:

  • new concurrent rendering APIs: useTransition, startTransition, useDeferredValue
  • new Hooks: useId, useSyncExternalStore, useInsertionEffect
  • strict effects in the new Strict Mode and revisiting useEffect
  • automatic batching and flushSync
  • sneak peek into what's coming after React 18 including a brief introduction into <Suspense> and <SuspenseList> for data fetching

The workshop is split into several modules. Each of them starts with a 20 min presentation, 30-50 min coding session and is followed by a 10 min retrospective. The final topic about what's coming after React 18 is only covered as a presentation.

By the end of the workshop you will be able to leverage the new features of React 18 and be able to use them in production ready applications.

Prerequisites: This workshop is targeted for intermediate and experienced React developers. You should be comfortable using Hooks (incl. useEffect, useRef) and basic understanding of Concurrent Mode is recommended but not required.

Preparation: Please have Node 16+ and Yarn installed on your machine.

Length: One full day.

Design system ROI (return of investment)#

Principal Developer Advocate at ‹div›RIOTS - makers of Backlight, a Design Systems IDE built for Designers and Developers - m4dz is a curious animal. Former Frontend Dev, Devtools enthusiast, he has made the Developer eXperience (DX) his cherished topic. All the Web technologies are under his radar to get things ever simpler. His moto: "Developers are users just like you." As a life-long dreamer his favorite book will ever remains "Alice's Adventures in Wonderland".m4dz 🎙🥑 and Varya Stepanova is a Design Systems Architect and Product Owner with extensive experience in management and development. During her tech career, Varya's primary focus was in component-focused UI design and development, creating helpful tooling for the subject and spreading the practices across organizations. Nowadays, she brings design systems to the next level of success through cooperative work in the company development community and bridging the gap for designers, developers, and business specialists.Varya Stepanova
2022-09-13, -

In this advanced half-day session, we discuss how to improve ROI of your design system implementations. Bring your own projecsts/topics.

Design systems governance models and transitions between them#

Principal Developer Advocate at ‹div›RIOTS - makers of Backlight, a Design Systems IDE built for Designers and Developers - m4dz is a curious animal. Former Frontend Dev, Devtools enthusiast, he has made the Developer eXperience (DX) his cherished topic. All the Web technologies are under his radar to get things ever simpler. His moto: "Developers are users just like you." As a life-long dreamer his favorite book will ever remains "Alice's Adventures in Wonderland".m4dz 🎙🥑 and Varya Stepanova is a Design Systems Architect and Product Owner with extensive experience in management and development. During her tech career, Varya's primary focus was in component-focused UI design and development, creating helpful tooling for the subject and spreading the practices across organizations. Nowadays, she brings design systems to the next level of success through cooperative work in the company development community and bridging the gap for designers, developers, and business specialists.Varya Stepanova
2022-09-13, -

In this advanced half-day session, you'll learn how to govern your design system work, what are the options, and how to move from one model to another. Bring your own problem(s)!

Web Components - Write once, run anywhere#

Matias is a passionate Web Components advocate. He's a active member of Web Component communities and a active open source contributor.Matias Huhta
2022-09-13, -

Note that this workshop is held twice with the same content.

In this half-day workshop we look into how Web Components work, how you can easily create them and how they can utilized by you and your team in larger projects, no matter the library/framework you're using.

Requirements: JavaScript skills, Preferably experience in writing UI elements with React, Vue or a similar library.

Diagram, Develop, Deploy: Build bulletproof apps collaboratively with statecharts#

David Khourshid is a Florida-based founder of Stately, a tech author, and speaker. Also a fervent open-source contributor, he is passionate about JavaScript, CSS, animation, innovative user interfaces, and cutting-edge front-end technologies. When not behind a computer keyboard, he’s behind a piano keyboard or traveling.David Khourshid and Aerospace engineer and Astrophysicist turned Software engineer. Lead engineer @Stately.ai, leading development of Stately editor, a visual editor for modeling application logic using StatechartsFarzad Yousefzadeh
2022-09-14, -

We've come a long way from pen and paper. In this workshop, you'll learn how to build apps with statecharts - a method of drawing diagrams that can be executed as production code. This opens up new opportunities for collaboration - helping you improve the handoffs between product, design, and dev. We'll be using XState - an open-source statechart tool for JavaScript - and Stately's visual tools to build an internet banking app, from diagram to deploy. You'll learn how to model any piece of code using states, events, actions and services.

Advanced React#

Nik is the founder of Serenity and is passionate about cryptography, CRDTs, GraphQL and React. He co-created several popular open source projects like DraftJS Plugins and Polished and participated in Stripe’s Open Source Retreat. In his spare-time he enjoys ski touring, cycling and organising the ReactJS Vienna meetup.Nik Graf
2022-09-14, -

Note that this workshop is held twice with the same content.

React 18 was a long-awaited release. New APIs were introduced and certain behavior changed. Some of these changes have quite an impact on your daily development, while others rarely affect you. Nevertheless, only by knowing your tools can you best decide when to use which of them.

In order to get a deep understanding of these new APIs and behavior changes we will explore the following topics:

  • introduction to <Suspense> and <SuspenseList>
  • new concurrent rendering APIs: startTransition, useDeferredValue
  • new Hooks: useId, useSyncExternalStore, useInsertionEffect
  • strict effects in the new Strict Mode
  • automatic batching and flushSync
  • sneak peek into what's coming after React 18

The workshop is split into several modules. Each of them starts with a 20 min presentation, 30-50 min coding session and is followed by a 10 min retrospective. The final topic about what's coming after React 18 is only covered as a presentation.

By the end of the workshop you will be able to leverage the new features of React 18 and be able to use them in production ready applications.

Prerequisites: This workshop is targeted for intermediate and experienced React developers. You should be comfortable using Hooks (incl. useEffect, useRef) and basic understanding of Concurrent Mode is recommended but not required.

Preparation: Please have Node 16+ and Yarn installed on your machine.

Length: One full day.

Accessibility testing for developers#

Eevis is a software developer and accessibility specialist based in Finland. She loves sharing information about topics like accessibility, React and GraphQL, and is active in different communities aiming to increase equality in the tech field in Finland. When not coding, she explores the world around her with a kayak. Eeva-Jonna 'Eevis' Panula
2022-09-14, -

You don’t want to exclude any users. I know it. But sometimes, it can happen that your user interface doesn’t work for users who don’t use a mouse for navigating. Or for those who can’t see the interface or can see it only after zooming in. Or those who are trying to use your app or site in direct sunlight. We don’t always even know how to test for these scenarios, especially if we are sighted mouse users with good color sight.

In this workshop, we will look into some tools and techniques which help with that. In the workshop, you will learn:

  • A set of tools and techniques that can help you to test for accessibility
  • Problems to look for when developing

Bring your own project to test to get the most out of the workshop. I will prepare an example project, but you will learn more if you can apply your learnings to a project you’re working with - be it a personal or work project.

Prerequisites: When attending the workshop, you should have a basic understanding of React development.

Preparation: Have the project (your own or cloned workshop example) up and running on your computer. If you want to use an example I've created, instead of your own project, you can find the A11y workshop project from Github.

Web Components - Write once, run anywhere#

Matias is a passionate Web Components advocate. He's a active member of Web Component communities and a active open source contributor.Matias Huhta
2022-09-14, -

Note that this workshop is held twice with the same content.

In this half-day workshop we look into how Web Components work, how you can easily create them and how they can utilized by you and your team in larger projects, no matter the library/framework you're using.

Requirements: JavaScript skills, Preferably experience in writing UI elements with React, Vue or a similar library.