26 | Wey Wey Web 27 |
28 |29 | 17-18 November 2025 | Málaga - ES 30 |
31 |├── .gitignore ├── css-day ├── assets │ ├── .DS_Store │ ├── img │ │ ├── adam.jpg │ │ ├── amit.jpg │ │ ├── ana.jpg │ │ ├── brad.jpg │ │ ├── cyd.jpg │ │ ├── ian.jpg │ │ ├── john.jpg │ │ ├── tim.jpg │ │ ├── .DS_Store │ │ ├── ahmad.jpg │ │ ├── bramus.jpg │ │ ├── brecht.jpg │ │ ├── bruce.jpg │ │ ├── chris.jpg │ │ ├── hidde.jpg │ │ ├── miriam.jpg │ │ ├── rachel.jpg │ │ └── stephen.jpg │ ├── script.js │ ├── hover-animation.js │ ├── view-transitions.js │ └── gesture.js └── speakers │ ├── template.html │ ├── bramus-van-damme.html │ ├── bruce-lawson.html │ ├── rachel-andrew.html │ ├── chris-coyier.html │ ├── tim-nguyen.html │ ├── ian-frost.html │ ├── ahmad-shadeed.html │ ├── brad-frost.html │ ├── ana-rodrigues.html │ ├── amit-sheen.html │ ├── john-allsopp.html │ ├── cyd-stumpel.html │ ├── stephen-hay.html │ ├── miriam-suzanne.html │ ├── hidde-de-vries.html │ ├── brecht-de-ruyte.html │ └── adam-argyle.html ├── wey-wey-web ├── assets │ ├── .DS_Store │ ├── img │ │ ├── .DS_Store │ │ └── logo.png │ ├── fonts │ │ ├── Chillax-Variable.woff │ │ ├── Chillax-Variable.woff2 │ │ ├── Tabular-Variable.woff │ │ └── Tabular-Variable.woff2 │ ├── typography.css │ ├── script.js │ ├── speaker-overview.css │ ├── speaker-detail.css │ ├── view-transitions.css │ └── style.css ├── speakers │ ├── template.html │ ├── raff-di-meo │ │ └── index.html │ ├── orcdev │ │ └── index.html │ ├── xenia-melikhova │ │ └── index.html │ ├── kinga-magyar │ │ └── index.html │ ├── ignacio-chicharro │ │ └── index.html │ ├── alessandra-canella │ │ └── index.html │ ├── andreas-moller │ │ └── index.html │ ├── dima-malyshenko │ │ └── index.html │ ├── steve-upton │ │ └── index.html │ ├── guillaume-vaslin │ │ └── index.html │ ├── candi-williams │ │ └── index.html │ ├── luke-hay │ │ └── index.html │ ├── jenil-gogari │ │ └── index.html │ ├── shelley-vohr │ │ └── index.html │ ├── soumaya-erradi │ │ └── index.html │ ├── salma-alam-naylor │ │ └── index.html │ ├── advait-sarkar │ │ └── index.html │ ├── piccia-neri │ │ └── index.html │ ├── cyd-stumpel │ │ └── index.html │ └── tamas-kokeny │ │ └── index.html └── template.html ├── beyond-tellerrand ├── assets │ ├── .DS_Store │ ├── img │ │ ├── .DS_Store │ │ ├── bieb.jpeg │ │ ├── crowd.jpg │ │ ├── robot.jpg │ │ ├── capitol-theater.jpg │ │ └── wilhelmmarxhaus.jpg │ ├── script.js │ ├── view-transitions.js │ └── view-transition.css ├── speakers │ ├── template.html │ ├── vitaly-friedman.html │ ├── sharon-steed.html │ ├── cyd-stumpel.html │ ├── jason-pamental.html │ ├── brendan-dawes.html │ ├── paula-zuccotti.html │ └── amber-case.html └── locations │ └── index.html ├── .prettierrc ├── .editorconfig ├── .eslintrc.json ├── README.md ├── index.js ├── package.json ├── style.css ├── about └── index.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | DS_Store -------------------------------------------------------------------------------- /css-day/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/.DS_Store -------------------------------------------------------------------------------- /css-day/assets/img/adam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/adam.jpg -------------------------------------------------------------------------------- /css-day/assets/img/amit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/amit.jpg -------------------------------------------------------------------------------- /css-day/assets/img/ana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ana.jpg -------------------------------------------------------------------------------- /css-day/assets/img/brad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/brad.jpg -------------------------------------------------------------------------------- /css-day/assets/img/cyd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/cyd.jpg -------------------------------------------------------------------------------- /css-day/assets/img/ian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ian.jpg -------------------------------------------------------------------------------- /css-day/assets/img/john.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/john.jpg -------------------------------------------------------------------------------- /css-day/assets/img/tim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/tim.jpg -------------------------------------------------------------------------------- /css-day/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/.DS_Store -------------------------------------------------------------------------------- /css-day/assets/img/ahmad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ahmad.jpg -------------------------------------------------------------------------------- /css-day/assets/img/bramus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/bramus.jpg -------------------------------------------------------------------------------- /css-day/assets/img/brecht.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/brecht.jpg -------------------------------------------------------------------------------- /css-day/assets/img/bruce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/bruce.jpg -------------------------------------------------------------------------------- /css-day/assets/img/chris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/chris.jpg -------------------------------------------------------------------------------- /css-day/assets/img/hidde.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/hidde.jpg -------------------------------------------------------------------------------- /css-day/assets/img/miriam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/miriam.jpg -------------------------------------------------------------------------------- /css-day/assets/img/rachel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/rachel.jpg -------------------------------------------------------------------------------- /css-day/assets/img/stephen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/stephen.jpg -------------------------------------------------------------------------------- /wey-wey-web/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/.DS_Store -------------------------------------------------------------------------------- /wey-wey-web/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/img/.DS_Store -------------------------------------------------------------------------------- /wey-wey-web/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/img/logo.png -------------------------------------------------------------------------------- /beyond-tellerrand/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/.DS_Store -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/.DS_Store -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/bieb.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/bieb.jpeg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/crowd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/crowd.jpg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/robot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/robot.jpg -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Chillax-Variable.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Chillax-Variable.woff -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Chillax-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Chillax-Variable.woff2 -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Tabular-Variable.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Tabular-Variable.woff -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Tabular-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Tabular-Variable.woff2 -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/capitol-theater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/capitol-theater.jpg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/wilhelmmarxhaus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/wilhelmmarxhaus.jpg -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 2, 4 | "printWidth": 80, 5 | "singleQuote": true, 6 | "trailingComma": "es5", 7 | "semi": true, 8 | "endOfLine": "lf" 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.{js,jsx,ts,tsx}] 12 | indent_size = 2 13 | 14 | [*.{html,css,scss}] 15 | indent_size = 2 -------------------------------------------------------------------------------- /wey-wey-web/assets/typography.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Chillax; 3 | src: url('./fonts/Chillax-Variable.woff2') format(woff2); 4 | font-weight: 200 900; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | 10 | @font-face { 11 | font-family: Tabular; 12 | src: url('./fonts/Tabular-Variable.woff2') format(woff2); 13 | font-weight: 200 900; 14 | font-style: normal; 15 | font-display: swap; 16 | } 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaVersion": "latest", 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | "indent": ["error", 2], 13 | "linebreak-style": ["error", "unix"], 14 | "quotes": ["warn", "single"], 15 | "semi": ["warn", "never"], 16 | "no-unused-vars": ["warn"] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Repo for my view transition live coding at conferences 2 | 3 | ## Beyond Tellerrand 4 | [https://cydstumpel.github.io/view-transitions/beyond-tellerrand/](https://cydstumpel.github.io/view-transitions/beyond-tellerrand/) 5 | ## CSS Day 6 | [https://cydstumpel.github.io/view-transitions/css-day/](https://cydstumpel.github.io/view-transitions/css-day/) 7 | ## Wey Wey Web 8 | [https://cydstumpel.github.io/view-transitions/wey-wey-web/](https://cydstumpel.github.io/view-transitions/wey-wey-web/) 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const cooler = document.getElementById('switch'); 2 | const coolerChecked = localStorage.getItem('cooler'); 3 | console.log(coolerChecked); 4 | 5 | if (coolerChecked == 'true') { 6 | console.log('coolerChecked'); 7 | cooler.checked = true; 8 | document.body.classList.add('cooler'); 9 | } 10 | 11 | cooler.addEventListener('change', () => { 12 | localStorage.setItem('cooler', cooler.checked); 13 | console.log(localStorage.getItem('cooler')); 14 | 15 | document.body.classList.toggle('cooler', cooler.checked); 16 | }); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "view-transitions", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "format": "prettier --write .", 9 | "lint": "eslint .", 10 | "lint:fix": "eslint . --fix", 11 | "generate": "node generate-speaker-pages-www.js" 12 | }, 13 | "devDependencies": { 14 | "eslint": "^8.56.0", 15 | "prettier": "^3.2.5" 16 | }, 17 | "keywords": [], 18 | "author": "", 19 | "license": "ISC", 20 | "dependencies": {} 21 | } 22 | -------------------------------------------------------------------------------- /beyond-tellerrand/assets/script.js: -------------------------------------------------------------------------------- 1 | const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | speakers.forEach((speaker) => { 4 | speaker.addEventListener('click', () => { 5 | const card = speaker.closest('.speaker-card') 6 | const cardImage = card.querySelector('img') 7 | cardImage.style.viewTransitionClass = 'active-speaker' 8 | }) 9 | }) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // Not related to view transitions, just making a navigation trigger: 18 | const navMenu = document.querySelector('.navigation') 19 | const navigationTrigger = document.querySelector('.navigation button') 20 | 21 | if (navigationTrigger) { 22 | navigationTrigger.addEventListener('click', () => { 23 | navMenu.classList.toggle('is-active') 24 | }) 25 | } 26 | -------------------------------------------------------------------------------- /css-day/assets/script.js: -------------------------------------------------------------------------------- 1 | // const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | // speakers.forEach((speaker) => { 4 | // speaker.addEventListener('click', () => { 5 | // const card = speaker.closest('.speaker-card') 6 | // const cardImage = card.querySelector('img') 7 | // cardImage.style.viewTransitionClass = 'active-speaker' 8 | // }) 9 | // }) 10 | 11 | // Not related to view transitions, just making a navigation trigger: 12 | // const navMenu = document.querySelector('.navigation') 13 | // const navigationTrigger = document.querySelector('.navigation button') 14 | 15 | // if (navigationTrigger) { 16 | // navigationTrigger.addEventListener('click', () => { 17 | // navMenu.classList.toggle('is-active') 18 | // }) 19 | // } 20 | -------------------------------------------------------------------------------- /wey-wey-web/assets/script.js: -------------------------------------------------------------------------------- 1 | // const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | // speakers.forEach((speaker) => { 4 | // speaker.addEventListener('click', () => { 5 | // const card = speaker.closest('.speaker-card') 6 | // const cardImage = card.querySelector('img') 7 | // cardImage.style.viewTransitionClass = 'active-speaker' 8 | // }) 9 | // }) 10 | 11 | // Not related to view transitions, just making a navigation trigger: 12 | // const navMenu = document.querySelector('.navigation') 13 | // const navigationTrigger = document.querySelector('.navigation button') 14 | 15 | // if (navigationTrigger) { 16 | // navigationTrigger.addEventListener('click', () => { 17 | // navMenu.classList.toggle('is-active') 18 | // }) 19 | // } 20 | -------------------------------------------------------------------------------- /css-day/assets/hover-animation.js: -------------------------------------------------------------------------------- 1 | const speakerCards = document.querySelectorAll('.speaker-card') 2 | 3 | if (speakerCards) { 4 | const title = document.querySelector('.speakers .title') 5 | const talkTitle = document.querySelector('.speakers .talk-title') 6 | 7 | speakerCards.forEach((speaker) => { 8 | speaker.addEventListener('mouseenter', () => { 9 | const name = speaker.dataset.name 10 | const talkTitleText = speaker.dataset.talkTitle 11 | 12 | if (title.textContent.includes(name)) { 13 | return 14 | } 15 | if (document.startViewTransition) { 16 | document.startViewTransition({ 17 | update: () => { 18 | title.textContent = name 19 | talkTitle.textContent = talkTitleText 20 | }, 21 | types: ['title-animation'] 22 | }) 23 | } else { 24 | title.textContent = name 25 | talkTitle.textContent = talkTitleText 26 | } 27 | }) 28 | }) 29 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* view transitions */ 2 | @view-transition { 3 | navigation: auto; 4 | } 5 | 6 | nav, 7 | section { 8 | padding: 1rem; 9 | } 10 | 11 | .home { 12 | background-color: hotpink; 13 | } 14 | 15 | .about { 16 | background-color: lightblue; 17 | } 18 | 19 | .switch-to-view-timeline { 20 | padding: 1rem; 21 | } 22 | 23 | html:has(.cooler) { 24 | /* Apply the custom animation to the old and new page states */ 25 | &::view-transition-old(root) { 26 | animation: 0.4s ease-in both move-out; 27 | } 28 | 29 | &::view-transition-new(root) { 30 | animation: 0.4s ease-in both move-in; 31 | } 32 | } 33 | 34 | /* Create a custom animation */ 35 | @keyframes move-out { 36 | from { 37 | transform: translateY(0%); 38 | } 39 | 40 | to { 41 | transform: translateY(-100%); 42 | } 43 | } 44 | 45 | @keyframes move-in { 46 | from { 47 | transform: translateY(100%); 48 | } 49 | 50 | to { 51 | transform: translateY(0%); 52 | } 53 | } 54 | 55 | -------------------------------------------------------------------------------- /about/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. 27 |
28 |26 | Here's a super simple example of view transitions, try clicking the 27 | about link. 28 |
29 |
15 | { speaker title }
27 |28 | { speaker bio } 29 |
30 |
21 | 29 | 17-18 November 2025 | Málaga - ES 30 |
31 |
15 |
21 | Senior Principal UX Designer at Blue Yonder
27 |28 | 29 |
30 |39 | workshop 40 | Everyone 41 |
42 |45 | A11Y Room, 46 | Tuesday 18 November 47 | 11:40 - 13:05 48 |
49 |As AI takes over manual tasks, our value will shift towards insight, creativity, and strategy. This session helps you cultivate a product mindset and contribute earlier in product development via hands-on activities: analyse a brief, create personas, map journeys, and generate solutions.
51 |
15 |
21 | Software Engineer
27 |28 | 15 years in the code mines. I build, I break, I conquer - all in orcish style. 🛠️🔥 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 11:40 - 12:20 48 |
49 |What happens when nostalgia for 8-bit aesthetics meets modern component libraries? In this talk, I'll share the story of how I created 8bitcn, an open-source library inspired by retro design but built with today's best practices. From the first idea to becoming part of the Vercel Open Source Program, you'll see how design, code, and community came together in one project.
51 |
15 |
21 | Frontend developer at TradingView
27 |28 | Xenia is a frontend developer at TradingView, focused on complex user interfaces: editors, charts, and UI architecture. Interested in performance, scalability, and making complex things feel simple. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 15:00 - 15:35 48 |
49 |Designing a browser-based system that renders tens of thousands of live elements responsively, and safely turning user-written code into part of the UI.
51 |
15 |
21 | Product Builder & Coach at Productkind
27 |28 | Kinga is a curious product leader and founder of the education company productkind. She is currently building LittleParrot.app, a science-based microlearning platform for busy product people. Through her newsletter, she shares practical, hands-on advice to help product people grow their skills and mindset. 29 |
30 |39 | workshop 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 14:30 - 16:20 48 |
49 |Co-facilitated with Tamas Kokeny; build a customised AI product coach and learn techniques to apply AI collaboration to broader product workflows.
51 |
15 |
21 | Development Technical Lead at Medida
27 |28 | Ignacio is a Development Technical Lead with over 8 years of industry experience. He is dedicated to creating full-stack software systems with a special focus on performance and optimization. Outside work he is a passionate Sim Racing and gaming enthusiast. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 14:30 - 14:50 48 |
49 |A developer-focused introduction to AI Engineering: prompt techniques for requirements and robust code, handling LLM hallucinations, and structuring SDDs for LLMs; plus when and how to integrate AI as a core layer alongside frontend and backend.
51 |
15 |
21 | Design Leader & Mentor
27 |28 | Alessandra is a design leader with 10+ years shaping product and service design across startups, scale-ups, and the public sector. Formerly Head of Design at Cazoo, MyTutor, and TPXImpact, she's known for translating business goals into clear direction for Tech and Design teams to drive growth, retention, and efficiency. Founder of Mega Mentor and Service Design-in', she brings a collaborative, pragmatic, and user-centred approach to every challenge. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 18:00 - 18:35 48 |
49 |Successfully embedding service design thinking in-house goes beyond hiring service designers. We will explore how different companies are doing it, and what are the risks, failures and successes to learn from.
51 |24 | .css-day.{ speaker name replace spaces with dash } { 25 | title: { talk title }; 26 | date: { talk date }; 27 | time: { talk time }; 28 | } 29 |30 |
39 | { talk description } 40 |
41 |45 | { speaker bio } 46 |
47 |53 | { talk title } 54 |
55 |
59 |
15 |
21 | CEO and Co-Founder of Nordcraft
27 |28 | Andreas spent 20 years building websites and apps before he finally started Nordcraft and built the design tool he always wanted. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 14:30 - 15:30 48 |
49 |For too long, product teams have accepted the handoff between design and development as a necessary step. But every handoff introduces translation, and with it comes compromise, delay, and diluted intent. What if designers could fully own the path from idea to implementation? This talk explores what a future without design-to-development handoffs could look like. By empowering designers to directly implement their own work, teams can aspire to faster iteration cycles, stronger creative ownership, and products that more faithfully reflect their original vision. This is not just a workflow improvement, it's a call to rethink how great digital products get made.
51 |
15 |
21 | Tech Entrepreneur, CTO, and Software Engineer
27 |28 | Ukrainian entrepreneur, product strategist, and software engineer with 20+ years of experience. Now based in Berlin after stints in Kyiv and Moscow. Co-founder and former CTO of countX, a B2B fintech that went from first commit to exit in under four years; led product and engineering and built a high-velocity, autonomous team. Influenced by Marty Cagan and Teresa Torres, they champion outcome-driven, cross-functional teams and continuous deployment to deliver measurable impact. Currently pursuing an Executive MBA at London Business School focused on fintech and venture strategy. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 16:30 - 17:05 48 |
49 |A real case study of a B2B fintech that went from first commit to a successful exit in under four years by pairing continuous deployment with continuous discovery and an operating rhythm that enabled shipping multiple times per day.
51 |
15 |
21 | Principal Consultant at Thoughtworks
27 |28 | Steve is a Principal Quality Analyst at Thoughtworks who works to build empowered teams, capable of delivering and taking ownership of quality. He has worked on a wide variety of products, from mainframes to microservices and has a particular interest in complex socio-technical systems and how we work with them. He is passionate about complexity theory, building quality into culture and testing as part of continuous delivery in modern, distributed architectures. Outside of work, Steve enjoys travel and mountains. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 09:00 - 09:40 48 |
49 |What can we learn from User Interfaces in Sci-Fi? What happens when we try to build some of them? This talk will look at examples of User Interfaces from science fiction and what we learn when we actually try to build them. We'll also take a deep dive into a novel method for visualising data using faces and how learning from it can help us design useful, insightful interfaces of our own.
51 |24 | .css-day.bramus-van-damme { 25 | title: MC; 26 | date: June 6, 2025; 27 | time: all day; 28 | } 29 |30 |
39 | Bramus will be MC for day 2 of CSS Day 2025. 40 |
41 |45 | Bramus is a web developer from Belgium. He's part of the Chrome Developer Relations team at Google, focusing on CSS, Web UI, and DevTools. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since. 46 |
47 |53 | MC 54 |
55 |
59 | 24 | .css-day.bruce-lawson { 25 | title: The goose and the common; 26 | date: June 6, 2025; 27 | time: 17:10; 28 | } 29 |30 |
39 | The web is at an inflection point. Big Tech owns the major platforms, the major browsers, the biggest websites, and carves the Web up between themselves. 40 |
41 |45 | A veteran of the browser wars, many a standards skirmish and an accessibility apocalypse or two, Bruce now leverages synergies for Vivaldi browser. 46 |
47 |53 | The goose and the common 54 |
55 |
59 |
15 |
21 | Founder & Head of Design at ENNOstudio
27 |28 | Guillaume is a French designer based in Berlin. Early in his career, he founded Eelusion, a game studio behind some of Europe's first augmented reality games. He later served as Managing Director at The European Magazine, where he led the creative direction until its acquisition by Weimar Media Group. He also participated in STARTUP Chile, launching two social ventures while working with prêt-à-porter brands across Latin America. Today, as the founder of ENNOstudio, Guillaume sees design as the bridge between technology and human needs. He focuses on making digital products more inclusive and accessible, collaborating with startups, enterprises, and universities across Europe. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 12:30 - 13:05 48 |
49 |Findings from cross-cultural research across Japan and Western Europe that challenge “universal” UI assumptions, and practices for building interfaces that work across cultures and generations.
51 |24 | .css-day.rachel-andrew { 25 | title: Multicol and fragmentation; 26 | date: June 5, 2025; 27 | time: 16:15; 28 | } 29 |30 |
39 | Rachel will be discussing multicolumn layout and fragmentation in CSS. 40 |
41 |45 | Rachel works for Google as content lead for Chrome Developer Relations, publishing to web.dev and developer.chrome.com. She is a front and back-end web developer, speaker, and author or co-author of 22 books including The New CSS Layout. 46 |
47 |53 | Multicol and fragmentation 54 |
55 |
59 | 24 | .css-day.chris-coyier { 25 | title: Scope in CSS; 26 | date: June 6, 2025; 27 | time: 09:30; 28 | } 29 |30 |
39 | I hate to be the one to tell you but writing CSS is half thinking about scope. You don't always need them, but there are plenty of tools out there that help with scoping one way or another. 40 |
41 |45 | Chris is a web designer and developer that tries to help other people get better at those things. He's the co-founder of CodePen, a social development environment for web designers and developers. 46 |
47 |53 | Scope in CSS 54 |
55 |
59 | 24 | .css-day.tim-nguyen { 25 | title: Form control styling; 26 | date: June 6, 2025; 27 | time: 11:50; 28 | } 29 |30 |
39 | Text inputs, checkboxes, radio buttons, sliders… Form controls have been part of the web since the beginning, but styling them can still feel like a battle. 40 |
41 |45 | Tim is a WebKit engineer at Apple. His interest in web technology developed through years of web design and many contributions to Firefox's user interface. Those contributions led him eventually to hack on browser engines. 46 |
47 |53 | Form control styling 54 |
55 |
59 | 24 | .css-day.ian-frost { 25 | title: Design Token Architecture; 26 | date: June 5, 2025; 27 | time: 17:10; 28 | } 29 |30 |
39 | Brad and Ian will give an Advanced Design Tokens workshop on Wednesday 4th of June, the day before the conference. 40 |
41 |45 | Ian Frost is a front-end architect, technical lead, and consultant passionate about helping developers level up their skills. Over the last decade, Ian has developed many design systems in a variety of technologies, including Web Components, React, Angular, and Vue. 46 |
47 |53 | Design Token Architecture 54 |
55 |
59 | 24 | .css-day.ahmad-shadeed { 25 | title: Smart layouts; 26 | date: June 6, 2025; 27 | time: 10:55; 28 | } 29 |30 |
39 | Today is the best time to start learning how to use modern CSS features to build truly responsive components. Responsive design doesn't mean designing for the viewport anymore. 40 |
41 |45 | Ahmad Shadeed is a UX designer and front-end developer from Tulkarm, Palestine, who enjoys tackling interesting design and development challenges. He has written extensively about CSS, accessibility, and RTL (right-to-left) styling. 46 |
47 |53 | Smart layouts 54 |
55 |
59 | 24 | .css-day.brad-frost { 25 | title: Design Token Architecture; 26 | date: June 5, 2025; 27 | time: 17:10; 28 | } 29 |30 |
39 | Brad and Ian will give an Advanced Design Tokens workshop on Wednesday 4th of June, the day before the conference. 40 |
41 |45 | Brad Frost is a design system consultant, web designer & developer, speaker, writer, teacher, musician, and artist located in beautiful Pittsburgh, PA. He helps people establish & evolve design systems, establish more collaborative workflows, and design & build software together. 46 |
47 |53 | Design Token Architecture 54 |
55 |
59 | 24 | .css-day.ana-rodrigues { 25 | title: Refactoring CSS; 26 | date: June 6, 2025; 27 | time: 14:50; 28 | } 29 |30 |
39 | In recent years, updates in CSS have given us many exciting possibilities for creating modern, dynamic web experiences. Yet, for many developers, the day-to-day reality often involves working within the constraints of legacy codebases. 40 |
41 |45 | Ana works as a front-end developer at tech-for-good agency Hactar. She started coding as a teenager building fan sites, and has been working as a front-end developer for the last 12 years. 46 |
47 |53 | Refactoring CSS 54 |
55 |
59 | 24 | .css-day.amit-sheen { 25 | title: Building a Computer with CSS; 26 | date: June 6, 2025; 27 | time: 13:55; 28 | } 29 |30 |
39 | Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you. 40 |
41 |45 | Amit is an experienced web developer, specializing in CSS, design systems, animations, and creative coding. He has a pathological curiosity and a constant desire to learn new things, and loves sharing his experience and explorations with the community. 46 |
47 |53 | Building a Computer with CSS 54 |
55 |
59 |
15 |
21 | UX Content Design Director
27 |28 | By day, Candi's a UX content director who loves helping her team thrive, solving complex user experience challenges, and championing inclusive design. With over a decade in experience design - spanning products from banking to dating - she knows a thing or two about IA, AI, and everything in between. By night, she's a published author of four books, a tarot reader, and trained sommelier (who tends not to combine them all at once). A self-confessed "word nerd" with a first-class degree in Linguistics, she's super passionate about the power of language and the impact it has on what people think, feel, and do (on and offline). 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 16:30 - 17:05 48 |
49 |Good, helpful, useful, readable content is at the heart of good design. So, why is it so often seen as an afterthought? This talk hones in on how we can change that, delving into linguistics and examples to highlight why real content is crucial and how UX design and content people can work together to create the most meaningful designs—even when your content designers are stretched thin (or are non-existent at your org!).
51 |
15 |
21 | Senior User Researcher at Clearleft
27 |28 | Luke is the senior user researcher at Clearleft. He has 20+ years of experience working with clients to run user research. From kids to pensioners, dress-makers to body-builders, Luke has run research with participants from very different backgrounds. Over the past ten years, Luke has trained hundreds of people in getting reliable insight from their user research. 29 |
30 |39 | workshop 40 | Everyone 41 |
42 |45 | A11Y Room, 46 | Tuesday 18 November 47 | 09:00 - 11:30 48 |
49 |Learn how to select and apply the most effective user research methods for your design challenges. In this interactive two-hour workshop, you'll learn how to choose user research methods that inform design decisions and improve usability. Whether you're looking to run research yourself or want to be more informed so that you can input into research planning, this workshop will help you understand the available options and how they can help you overcome design and development challenges. Through live demonstrations and collaborative exercises, we'll demystify how research insights can guide interface design, prevent costly rework, and enhance the user experience.
51 |24 | .css-day.john-allsopp { 25 | title: A Dao of CSS; 26 | date: June 5, 2025; 27 | time: 10:55; 28 | } 29 |30 |
39 | What if we stopped trying to control the web—and started working with it? In this talk, I return to A Dao of Web Design, an essay I wrote 25 years ago, to look again—this time through the lens of CSS. 40 |
41 |45 | John Allsopp has been working on the Web for nearly 30 years. He's been responsible for innovative developer tools such as Style Master and X-Ray, and his ideas formed the foundation for Typekit, now Adobe Fonts, and the entire concept of Responsive Web Design. 46 |
47 |53 | A Dao of CSS 54 |
55 |
59 | 24 | .css-day.cyd-stumpel { 25 | title: CSS tried to come for my job; 26 | date: June 5, 2025; 27 | time: 13:55; 28 | } 29 |30 |
39 | CSS has gotten more powerful in terms of layout for the last couple of years, but lately, it's also been creeping into places that have traditionally relied heavily on Javascript. 40 |
41 |45 | Cyd is a freelance creative developer and part time teacher at the Amsterdam University of Applied Sciences. She creates accessible, award winning websites for everyone; from large organisations like WeTransfer and Amnesty International to creative agencies and freelancers. 46 |
47 |53 | CSS tried to come for my job 54 |
55 |
59 | 24 | .css-day.stephen-hay { 25 | title: MC; 26 | date: June 5, 2025; 27 | time: all day; 28 | } 29 |30 |
39 | Stephen Hay is a creative director, designer, author, and speaker with a passion for code, design processes, and systems thinking. With a background in graphic design and fine art, he became an early advocate for responsive design, design systems, and using CSS as a design tool. 40 |
41 |45 | Stephen is the author of Responsive Design Workflow, co-author of Smashing Book #3, writer of countless articles on design topics, and has spoken at industry conferences worldwide. Stephen is always exploring smarter ways to work and create. 46 |
47 |53 | MC 54 |
55 |
59 | 24 | .css-day.miriam-suzanne { 25 | title: Is Sass Dead Yet? CSS Mixins & Functions &c.; 26 | date: June 5, 2025; 27 | time: 11:50; 28 | } 29 |30 |
39 | Sass has inspired new developments in CSS for over a decade – from variables to nesting, and now author-defined CSS mixins and functions. As these features make the jump from Sass to CSS, they tend to change in significant ways. 40 |
41 |45 | Miriam is an author, artist, developer, and open web advocate. She's a co-founder of OddBird, Invited Expert with the W3C CSS Working Group, and member of the Sass core team. 46 |
47 |53 | Is Sass Dead Yet? CSS Mixins & Functions &c. 54 |
55 |
59 | 24 | .css-day.hidde-de-vries { 25 | title: `display: green`; applying the web sustainability guidelines; 26 | date: June 6, 2025; 27 | time: 16:15; 28 | } 29 |30 |
39 | The tech sector has an elephant in the room: we use too much energy. In 2024, the World Bank estimated the internet to account for 1-4% of global greenhouse emissions, similar to aviation. 40 |
41 |45 | Hidde is a freelance front-end, design systems and accessibility specialist (CPWA). He is also involved in the W3C's Open UI Community Group and Accessibility Guidelines Working Group. 46 |
47 |53 | `display: green`; applying the web sustainability guidelines 54 |
55 |
59 | 24 | .css-day.brecht-de-ruyte { 25 | title: Select it! Styling new HTML UI capabilities; 26 | date: June 5, 2025; 27 | time: 14:50; 28 | } 29 |30 |
39 | We are getting spoiled with increased UI capabilities, partially thanks to the efforts from the W3C community group Open UI. One of those features is the customizable select. 40 |
41 |45 | Brecht De Ruyte is a self-taught front-end developer located in Belgium with a passion for UX and Design. During the day you can find him working at iO, a full service agency. Besides that, he is also a Google Developer Expert, Smashing Magazine writer and blog owner of utilitybend.com. 46 |
47 |53 | Select it! Styling new HTML UI capabilities 54 |
55 |
59 |
15 |
21 | Senior Product Designer at Datadog
27 |28 | Jenil Gogari is a Senior Product Designer at Datadog where he leads design tooling and works on the design system DRUIDS by Datadog. Previously, Jenil worked as a UX designer at BookMyShow, India's largest entertainment ticketing platform. In the past, he made free website themes, a CSS framework, an icon delivery service and a Chrome extension. Jenil spends his time building tools and products that empower designers and developers to enhance the user experience. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 15:45 - 16:20 48 |
49 |Our design system, DRUIDS, serves as the foundational layer for Datadog's 20+ products. While highly adopted, this popularity leads to the misconception that every shared UI component belongs to DRUIDS. The reality is a multi-layered approach: product teams build higher-level "kits" that enrich DRUIDS components in product-specific ways. This talk will explore how this technical setup operates in both design tools and codebase, its benefits, and the challenges of guiding designers and engineers in this nuanced ecosystem. We will demonstrate how a multi-layered design system enables organic platform scaling while maintaining a consistent user experience.
51 |
15 |
21 | Principal Engineer at Microsoft
27 |28 | Shelley Vohr (she/her) is a software engineer based in Berlin, Germany. She's Principal Engineer at Microsoft, where she has worked as an Electron maintainer for over 6 years, as well as on Node.js as a TSC member and collaborator. Outside of work, Shelley loves to uncover hidden treasures at the flea market, eat the saltiest licorice humans can handle, and never misses the daily NYT crossword. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 10:50 - 11:30 48 |
49 |When we think about JavaScript and Node.js, it's not often most of us are required to consider memory management and allocation. In this talk, we'll jump right into the landfill and get a little dirty as we try to understand how Node.js manages memory with Google's V8 runtime engine. What types of garbage collection are there, and how and when are they used? We'll also explore some of the issues that mismanaged memory can cause, and how they were eventually solved using examples from Node.js and its consumers and embedders like Electron. Memory management is closer to the surface than you might think, so we'll also discuss how to see and create memory issues right from JavaScript. You'll leave with a deeper understanding of the mechanics underlying the web's most ubiquitous language, as well as tips to avoid pitfalls you might not even realize exist!
51 |24 | .css-day.adam-argyle { 25 | title: Level up your scroll UX; 26 | date: June 5, 2025; 27 | time: 09:30; 28 | } 29 |30 |
39 | Slide by slide, CSS feature by feature, we'll incrementally enhance and craft a rad scroll experience. Normally a pain in the box; styling and managing scroll across touch, keyboard, mouse and more PLUS juggling each operating system's slightly different affordances, can be daunting. 40 |
41 |45 | Adam is a bright, passionate, punk engineer with an adoration for the web who prefers using his skills for best in class UI/UX and empowering those around him. He's worked at small and large companies, and built an app for pretty much every screen (or voice). He is capable of over-engineering, but spends lots of brain power not to. Loves CSS, loves JS, loves great UX. 46 |
47 |53 | Level up your scroll UX 54 |
55 |
59 |
15 |
21 | Senior Software Developer @ Atlantis
27 |28 | 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 10:00 - 10:40 48 |
49 |Angular’s Resource API is a powerful tool for building RESTful APIs in Angular. In this talk, we'll explore how to use the Resource API to build a RESTful API in Angular. We'll look at how to use the Resource API to create, read, update, and delete resources. We'll also look at how to use the Resource API to handle errors and pagination.
51 |57 | workshop 58 | Advanced 59 |
60 |63 | A11Y Room, 64 | Monday 17 November 65 | 15:45 - 18:35 66 |
67 |Modern TypeScript turns runtime surprises into compile-time feedback using strict mode, discriminated unions, template literal types, satisfies, and more. Encode domain rules directly in types to make APIs harder to misuse and refactors safer, with a practical toolkit you can apply immediately.
69 |
15 |
21 | Head of Developer Education at Nordcraft
27 |28 | Salma writes code for your entertainment. She helps developers build cool stuff by writing blog posts, making videos, coding live on the internet, and publishing open source projects. After a career as a music teacher and comedian, Salma transitioned to technology in 2014, working as a front end developer and tech lead for startups, agencies and global e-commerce, moving to Developer Experience and Developer Education in 2021. She currently works for Nordcraft as Head of Developer Education. Active in the developer community, Salma is a GitHub Star, a former Microsoft MVP for Developer Technologies (2021-2025), winner of the Jamstack Conf Community Creator Award 2021, and a partnered Twitch streamer. She also makes videos on YouTube about tech and the history of The Internet. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 14:30 - 15:30 48 |
49 |For too long, product teams have accepted the handoff between design and development as a necessary step. But every handoff introduces translation, and with it comes compromise, delay, and diluted intent. What if designers could fully own the path from idea to implementation? This talk explores what a future without design-to-development handoffs could look like. By empowering designers to directly implement their own work, teams can aspire to faster iteration cycles, stronger creative ownership, and products that more faithfully reflect their original vision. This is not just a workflow improvement, it's a call to rethink how great digital products get made.
51 |
15 |
21 | Affiliated Lecturer at University of Cambridge
27 |28 | Advait is an affiliated lecturer at the University of Cambridge, honorary lecturer at University College London, and researcher at Microsoft. He studies how to design human interfaces for artificial intelligence, and how to help people program and interact with data. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 17:15 - 18:15 48 |
49 |The web is entering a transformative era shaped by artificial intelligence, redefining both how we build and how we experience it. AI is altering the cognitive landscape of knowledge work, affecting users' critical thinking, memory, creativity, and metacognition. In programming, we now have “vibe coding,” where the boundaries between prototyping and production blur, as do traditional roles such as designer, engineer, and product manager. This fluidity may enable teams to collaborate across expertise like never before. At the same time, we are designing not only for humans but for AI agents: autonomous intermediaries that can bypass many traditional UX constraints. This raises a serious question: If agents can dynamically adapt interfaces and solve interaction problems on the fly, why would anyone visit a website or use an app directly? The answer lies in vision. Future web services must deliver experiences that cannot be intermediated; core experiential primitives that take inspiration from games, music, or film. In this keynote, I argue that the defining skill for the next generation of web creators is not technical execution but artistic foresight: the ability to imagine what users cannot yet conceive.
51 |
15 |
21 | Accessible Design Trainer & Consultant
27 |28 | Piccia Neri is on a mission to prove that inclusive design doesn't kill creativity: it fuels it. As a UX and accessible design consultant, she leads global projects for companies of all sizes and trains designers, marketers and developers to put accessibility at the heart of their work. Piccia speaks at conferences worldwide, and her current main focus is on balancing creativity and accessibility, without sacrificing either. 29 |
30 |39 | talk 40 | Everyone 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 18:45 - 19:30 48 |
49 |Accessibility is the best creative brief you'll ever get: constraints fuel innovation. This talk shows why accessibility isn’t restrictive—it’s a catalyst for more innovative, inclusive, and impactful design.
51 |57 | workshop 58 | Everyone 59 |
60 |63 | A11Y Room, 64 | Monday 17 November 65 | 09:00 - 13:00 66 |
67 |Fix the number one accessibility issue on the web, and make your UI look better doing it. Low contrast and sloppy color choices quietly tank readability, conversions, and trust. This workshop cuts the jargon and shows you how to design and ship accessible color and contrast with confidence. You'll learn to build beautiful, compliant palettes that scale across components and states; use typography and layout to boost contrast beyond color alone; and turn standards into practical checks your team can actually follow—plus the tools and workflow to test, iterate, and ship fast.
69 |
15 |
21 | Freelance Creative Developer
27 |28 | Cyd is a freelance creative developer and part time teacher at the Amsterdam University of Applied Sciences. She creates accessible, award winning websites for everyone; from large organisations like WeTransfer and Amnesty International to creative agencies and freelancers. She's got an eye for details and loves to turn flat designs into rich experiences. Cyd has mostly focused on JavaScript animation over the last couple of years but has rediscovered her passion for CSS this year, rebuilding her portfolio with View Transitions and Scroll Driven Animation. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Tuesday 18 November 47 | 15:45 - 16:20 48 |
49 |Motion on the web has come full circle: from simple CSS animations and transitions, to JavaScript libraries, and now back to CSS again. With the View Transitions API and Scroll-Driven Animations we'll explore how modern CSS is reshaping creative development today and where you can replace JS with CSS solutions.
51 |57 | workshop 58 | Everyone 59 |
60 |63 | Pixel Room, 64 | Monday 17 November 65 | 09:00 - 13:00 66 |
67 |Animation can delight your users, give attention to important information and help users to better understand tasks. Finding the balance between too little and too much animation and making your animations suitable to your project is a difficult task. Creating a motion language can help with this. In this workshop I'll teach you techniques to create, and implement a cohesive motion language for your projects with code. We'll look at shapes, direction, durations and ease. Focussing on loading-, interaction-, scroll- and page animations.
69 |87 | beyond tellerrand is the affordable single-track event where 88 | creativity and technology meet. Taking place in Düsseldorf and 89 | Berlin these days with 500+ attendees each in a renowned, familiar 90 | and friendly atmosphere. 91 |
92 |SPEAKER_BIO
103 |
15 |
21 | Educator at Productkind
27 |28 | Tamas is an enthusiastic software engineer with a background in product development, technical leadership, and education. He is an Educator at productkind, where he's currently building LittleParrot.app, a science-based microlearning platform for busy product people. He also teaches and creates educational content. As a serial entrepreneur, Tamas co-founded multiple ventures, including Bobcats Coding, a digital product studio. His career journey includes technical roles at companies such as Datadog, Cazoo, and Cloudera, where he spearheaded initiatives in software architecture design and led development teams. Beyond his technical contributions, Tamas is deeply committed to fostering talent and sharing knowledge. He served as the Head of Education and Co-Founder at Green Fox Academy, a programming bootcamp in Central Europe, where he managed international mentor teams, created educational content, and designed curricula. 29 |
30 |39 | talk 40 | Intermediate 41 |
42 |45 | Main Hall, 46 | Monday 17 November 47 | 17:15 - 17:50 48 |
49 |While AI tools revolutionize rapid prototyping in product development, they haven't yet solved the fundamental infrastructure challenges of production systems. This talk examines two critical areas where traditional engineering investment remains essential: sophisticated user behavior analytics and complex feature management systems. We'll explore why measuring user behavior beyond basic metrics requires custom infrastructure to answer nuanced business questions, and how feature flipper systems must handle intricate combinations of internal and external factors. Through practical examples, we'll demonstrate how to build these essential infrastructures cost-effectively at both early-stage and scale, enabling teams to maintain agility while growing their analytical capabilities. Product teams will learn why these infrastructure investments remain necessary despite AI advances, and how to balance AI-driven innovation with lean, scalable system architecture.
51 |57 | workshop 58 | Everyone 59 |
60 |63 | Main Hall, 64 | Tuesday 18 November 65 | 14:30 - 16:20 66 |
67 |Hands-on workshop to build an AI product coach that challenges assumptions, surfaces edge cases, and helps you slice user stories; a framework you can reuse beyond stories.
69 |
84 |
93 |
102 | 109 | What could be a better start to an event than a start at which you 110 | already know a handful of people attending the event? Exactly that 111 | is the reason to join us for the Warm-Up. 112 |
113 |114 | Mix and mingle with people who will be at beyond tellerrand on the 115 | following two days, but also with people who join, but can not make 116 | it to the show. They are invited to also mix with you, to exchange 117 | and hang out. 118 |
119 |
79 | 91 | Vitaly will share insights from his extensive research on web design and user experience. He'll explore 92 | practical techniques for creating more effective and engaging digital products that stand out in today's 93 | competitive landscape. 94 |
95 |Vitaly Friedman
98 |Inclusive Design Patterns
99 |110 | Vitaly Friedman is the co-founder and editor-in-chief of Smashing 111 | Magazine, a leading online magazine for web designers and 112 | developers. He is a passionate advocate for web standards and 113 | accessibility, and he regularly speaks at conferences worldwide 114 | about web design, UX, and front-end development. 115 |
116 |
80 | 92 | Sharon will explore how empathy and storytelling can transform our approach to design and communication. 93 | She'll share practical strategies for creating more inclusive and effective user experiences through better 94 | understanding of human emotions. 95 |
96 |Sharon Steed
99 |Empathy in Automation
100 |111 | Sharon Steed is a communication consultant and founder of 112 | Communilogue, where she helps companies improve their 113 | communication and collaboration. She is a sought-after speaker on 114 | empathy, communication, and emotional intelligence in the 115 | workplace, and she has worked with companies like Google, Amazon, 116 | and Microsoft. 117 |
118 |
79 | 91 | Cyd will showcase the latest CSS features and techniques that are revolutionizing web design. She'll 92 | demonstrate how modern CSS can be used to create stunning visual effects and animations while maintaining 93 | performance and accessibility. 94 |
95 |Cyd Stumpel
98 |Modern CSS for Creative Developers
99 |110 | Cyd Stumpel is a motion designer and creative director based in 111 | Amsterdam. She specializes in creating engaging motion graphics 112 | and animations for brands and digital products. Cyd has worked 113 | with clients like Nike, Adidas, and Google, and she is passionate 114 | about using motion to enhance user experiences and tell compelling 115 | stories. 116 |
117 |
80 | 92 | Jason will explore how typography shapes our digital experiences, from readability to emotional impact. He'll 93 | share practical techniques for creating more effective and engaging typographic systems across different 94 | devices and platforms. 95 |
96 |Jason Pamental
99 |Curious Findings
100 |111 | Jason Pamental is a designer, developer, and typography expert 112 | specializing in web typography and variable fonts. He is the 113 | author of "Responsive Typography" and "Web Typography: The 114 | Definitive Guide." Jason has worked with clients like Google, 115 | Adobe, and Microsoft, and he regularly speaks at conferences 116 | about typography and web design. 117 |
118 |
79 | 91 | Brendan will take us on a journey through his creative process, exploring how embracing imperfections and 92 | unexpected outcomes can lead to more interesting and meaningful work. He'll share stories from his career that 93 | demonstrate the power of happy accidents. 94 |
95 |Brendan Dawes
98 |Certain irregularities
99 |110 | Brendan Dawes is a designer, artist, and creative technologist 111 | based in Manchester, UK. He creates interactive installations and 112 | digital experiences that explore the intersection of art and 113 | technology. Brendan has worked with clients like Google, Adobe, 114 | and the BBC, and he is passionate about using code as a creative 115 | medium. 116 |
117 |
80 | 92 | Paula will take us on a journey through the objects that shape our daily lives, exploring how design 93 | influences our behavior and emotions. She'll share insights on how to create more meaningful connections 94 | through physical and digital products. 95 |
96 |Paula Zuccotti
99 |Every Thing we Touch
100 |111 | Paula Zuccotti is a trend forecaster and ethnographer who 112 | specializes in understanding how people interact with objects and 113 | technology. She is the author of "The Future of Everything" and 114 | has worked with companies like Google, Samsung, and IKEA. Paula 115 | helps organizations understand emerging trends and design for the 116 | future. 117 |
118 |
79 | 91 | Amber will explore how we can create technology that doesn't demand our attention but instead works quietly in 92 | the background. She'll share principles and examples of calm technology that enhances our lives without 93 | overwhelming us. 94 |
95 |Amber Case
98 |Designing Calm Technology
99 |110 | Amber Case studies the interactions between humans and technology, 111 | and how technology affects culture. She is an internationally 112 | recognized design advocate and speaker, and the author of four 113 | books, including Calm Technology and A Kids Book About Technology. 114 | She spent two years as a fellow at MIT's Center for Civic Media 115 | and Harvard's Berkman Klein Center for Internet & Society and was 116 | a 2021 Mozilla Fellow. 117 |
118 |