Hello everyone. I'd like to start off by telling you a story about a guy named Dan. He's a mechanic and his job is fixing spaceships. Dan is a metaphor for all of us developers. Let's talk about monorepos as you've probably guessed from the title. I'll start off by talking about polyrepos, what they do well, but also where they fall short. Then I'll talk about monorepos and what issues they solve, as well as why you need good monorepo tooling, especially at scale. A Monorepo is a single repository containing multiple distinct projects with well-defined relationships. It allows teams to work together in a unified manner. Monorepos help with velocity, safety, and mobility. Monorepos can be adopted incrementally and good tooling can help with running tests. CI time is now coupled to the size of the change made, rather than the size of the monorepo. By generating a task graph from the project graph, we can optimize the build process by parallelizing and scheduling tasks. NX offers a solution by distributing tasks across multiple agents, allowing for time and cost optimization. Visit monorepo.tools or nx.dev to learn more and achieve focus and contentment like Dan.

Welcome to my talk at React Day Berlin. Today, we'll discuss vector search and embeddings for React developers. Traditional search is broken, resulting in poor user experiences. Converting data into embeddings unlocks more accurate search, content recommendations, and document comparisons. Vector search measures the closeness or similarity of vectors using distances. In vector search, the closest relevant documents are found based on similarities between vectors. There are multiple ways to calculate the distance between data in vector search. Generative AI applications often deal with both textual and image data, making vector search useful. By converting queries and data into vectors, semantic meaning is considered, allowing for more accurate results. React and Next.js developers have access to a range of toolings, including BlankChain and AI SDK from Vercel. Retrieval augmented generation enhances search results by converting data into vectors and generating more coherent text. The user query is converted into a vector and matched using vector search, and the response is generated using the AISDK from Vercel.

Hey, I'm Sid, and I work on the design systems team at GitHub. Let's talk about building accessible React components with a focus on screen readers. Use the correct HTML element for accessibility. For example, on GitHub, there are three tabs with options. These tabs are made using buttons. Let's see how a visually impaired person using a screen reader would access this website. What do they see? I'm going to enable the screen reader and walk you through what happens. When turning on the screen reader, it sets the context and tells you where you are. For example, on the React app, a button labeled 'Code' has focus and a menu popup. Inside the popup, there are several buttons with different labels. Something interesting happens. If I can't see the UI, I'm hearing buttons but no tabs. Screen readers cannot infer things like tabs from visual design. To provide this information, we can use the ARIA spec and its roles. By adding a role tab list to the div and role tab to each button, the semantics are conveyed. The role overrides HTML semantics. Screen reader identifies tabs, pronounces 'code spaces'. Default behavior of a tab is auto-focus. We can add aria-selected attribute to specify selection. Using React, I'm using an expression to set aria-selected based on the selected tab. The navigation into the tab panel is disorienting. There are separate groups for the tab list and tab panel, and there is a need for navigation between them. Use arrow keys to navigate within the widget. Remove tabs from the tab index, only the selected tab should be focusable. Implement arrow keys for navigation. Press tab to enter the tab panel. Press shift tab to go back up. Keyboard navigation is a common pattern extracted into a hook. Decide which keys to bind based on the widget type. Change selected tab on focus. Consider the ARIA authoring practices guide for keyboard interactions. Differentiate between instant and activated tabs. Follow the ARIA spec and use the APG as an informative resource. Screen readers may not always follow the ARIA authoring practices guide. Use correct HTML elements, add ARIA roles, properties, and states. Implement keyboard navigation. Use a GitHub example of notification settings with proper semantic elements. When selecting notification channels, the options are presented in a pop-up. The focus is on the first checkbox, indicating that it is the first option. The screen reader reads the status of each option. After selecting the desired option, the form can be submitted. The change is saved and the user is notified. The focus is recontextualized on the collapsed menu popup button. Not rendering the fourth option in certain conditions hides it from screen users. Removing the conditional and disabling the fourth checkbox until necessary eliminates this issue. Using IR disabled instead of disabled makes the element accessible for screen reader and keyboard users without affecting styling or click cancellation. You have to add your own class name and make sure it is disabled. It is accessible by keyboards. Voiceover on Mac uses 'dimmed' to signify IR disabled. Adding another span that requires at least one channel. Additional descriptions can be added using aria-describeby. SCREEN READER Only notify for failed workflows. Requires at least one channel to be selected. Dimmed unticked. Tick box. Now you know the label, why it is disabled, and that it's dimmed. And let's see if it's If I mean. Never. Menu popup collapsed. This flow seems more intuitive. You know all your options up ahead. One option was disabled, enabled something else, and it became enabled again. Much more clear. Feels like a better UI. We need to design with accessibility in mind. Accessibility isn't something that you can just sprinkle on in the end. We have to bring it way earlier in the stage. Be careful when disabling elements. Use RLDisabled. Short list of six things to consider. Links on my website. Follow me on Blue Sky.

I'm Adam Klein, the CTO and co-founder of Cover with Double V, a swag store platform. We use computer vision to create cool effects with SVG filters. In this talk, I'll share two magic tricks and teach you how to create a green screen filter using SVG markup. I can apply different filters on text, images, and videos using HTML or SVG. SVG filters allow easy debugging and parameter manipulation. The displacement map is a simple primitive that displaces pixels based on the red and green values. The frosted glass effect is achieved by using the displacement map filter. The green screen filter selectively reduces the opacity of green pixels while keeping other pixels opaque. After experimenting with different values, I discovered a formula that effectively applies the green screen filter using SVG filters. SVG filters are widely used in production and are supported in all major browsers. They are highly performant, running on the GPU. Working with SVG filters requires creativity and experimentation to achieve desired effects.

I want to talk about the importance of testing and how it can improve the developer experience. Lack of tests can lead to issues and breakdowns in productivity. The challenges of using TDD and testing last are discussed, along with the benefits of writing tests early. Effective tests provide valuable feedback and save time. Prioritizing user-focused testing and using tests as documentation are recommended. Tests should resemble user behavior, and enhancing testing capabilities with linters and custom matchers is suggested. Advanced testing techniques can improve developer productivity.

My name is Nicolas, and today, I'm going to talk about Fine-Grain Reactivity without the compiler this time. React is reactive, but it re-renders unnecessary components. Fine-grained reactivity is achieved by updating specific elements instead of whole components. Pigment encountered reactivity problems while building real-time financial data boards. They created their own reactive system on top of React to achieve fine-grained reactivity. They used custom hooks like useShell, useComputed, and useWatch to integrate React with their reactive system. They also considered using native JavaScript for optimization but chose to preserve React. They use external libraries like Zestand for flexibility, and maintaining reactivity during React updates has not been a problem.

Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

Hi everyone and welcome to my talk about the women in the history of computer science. I want to pay tribute to women who have done fantastic work in computer science. The history of computer science begins in 1840 with Ada Lovelace, who invented the concept behind the analytical engine and provided the first algorithms. Women played a significant role in early computing, such as the programmers of the ENIAC. Grace Hopper made significant contributions to the field, including the development of COBOL. Women have made significant contributions to artificial intelligence, such as Karen Spike Jones and her development of the TF-IDF method. It is important to highlight women in the tech field and provide role models for young girls. The talk aims to inspire and encourage.

I'm here to talk about Rust and Rescript, languages in the React community that offer interesting possibilities. Writing React in different languages can improve performance and code correctness. TypeScript can be messy and has challenges in Material.UI, while Rescript offers better code quality and type safety. Rescript supports advanced React features and using functions for JavaScript APIs. The power of Rescript and WebAssembly lies in writing better React code and optimizing performance. Integrating SVG into React with Rust provides fast rendering and keeps the structure intact. Learning new languages can improve code quality. Re-script debugging and SVG performance are important considerations. React Server Components and beginner Rescript projects are discussed in the Q&A session.