November 13 - 15, 2023
New York & Online
React Summit US 2023
The biggest React conference in the US
The biggest React conference in the US
This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website. Follow for more React Conferences.
This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website. Follow for more React Conferences.
Gateway to React: The React.dev StoryWatch video: Gateway to React: The React.dev Story
32 min
Gateway to React: The React.dev Story
The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.
The Rise of the AI EngineerWatch video: The Rise of the AI Engineer
30 min
The Rise of the AI Engineer
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
R3ACT: A Frightening Look At Performance FiguresWatch video: R3ACT: A Frightening Look At Performance Figures
27 min
R3ACT: A Frightening Look At Performance Figures
This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.
The Whimsical Potential of JavaScript FrameworksWatch video: The Whimsical Potential of JavaScript Frameworks
28 min
The Whimsical Potential of JavaScript Frameworks
Top ContentThe speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI UniverseWatch video: Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.
React Server Components from ScratchWatch video: React Server Components from Scratch
29 min
React Server Components from Scratch
This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.
Rendering: To Sync or Not to Sync?Watch video: Rendering: To Sync or Not to Sync?
28 min
Rendering: To Sync or Not to Sync?
This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.
Javascript Optional: Modern React Applications That Work Without JSWatch video: Javascript Optional: Modern React Applications That Work Without JS
28 min
Javascript Optional: Modern React Applications That Work Without JS
In this Talk, the speaker discusses the concept of building JavaScript optional applications, focusing on the use of tools like React server components, Next.js, remix, React Router, Astro, SolidStarts, and Weld. They explore various aspects such as building eCommerce apps, pagination, adding items to cart without JavaScript, and implementing features like card previews using HTML and CSS. The speaker also highlights the trade-offs and considerations when disabling JavaScript, maintaining cart items, and combining old and new ways of building applications.
React Concurrency × Core Web VitalsWatch video: React Concurrency × Core Web Vitals
26 min
React Concurrency × Core Web Vitals
The Talk discusses the InteractionToNextPaint metric, which measures the speed of clicks or keyboard inputs on a page. It explores the impact of slow interactions and slow React renders on user experience. The Talk also covers optimization techniques for React rendering, including the use of concurrent features and the StartTransition function. React 18 introduces changes to the rendering process that improve interaction speed. Concurrent rendering and suspense boundaries are highlighted as features that can enhance the performance of React apps.
Why Redwood Adopted React Server ComponentsWatch video: Why Redwood Adopted React Server Components
33 min
Why Redwood Adopted React Server Components
Redwood is a full stack web app framework built with React, GraphQL, and Prisma. It prioritizes conventions and maintainability, and collaborates closely with the React team. Redwood offers full-stack features, including real-time functionality without WebSockets. The Bighorn Epoch is a new phase in Redwood's roadmap. Redwood is excited about the possibilities of React Server Components and wants to collaborate with the community.
Transforming Images Using AI Without Leaving Your React AppWatch video: Transforming Images Using AI Without Leaving Your React App
5 min
Transforming Images Using AI Without Leaving Your React App
Today's Talk discusses the importance of transforming images with AI in React apps and the benefits of using image CDNs. The speaker emphasizes the significance of images as a crucial component of websites and the time-consuming nature of adopting image best practices. They propose image transformation on the edge as a faster and easier alternative. The Talk also highlights the use of AI in image transformation, including removing backgrounds, cropping images, and upscaling pixelated images in a Contentful Next JS app. The combination of image CDNs and AI parameters ensures that images always look their best without leaving the React app.
Building Friendly User Experiences in Web3Watch video: Building Friendly User Experiences in Web3
32 min
Building Friendly User Experiences in Web3
Web 3 is about decentralization, using blockchain, cryptography, and consensus algorithms. It allows users to have more control over their data and assets. The current state of Web 3 is complex and frustrating, but efforts are being made to improve usability. Layer 2 chains and account abstraction are improving scalability and user experience. Web 3 provides financial solutions for all and enables transactions in restrictive environments.
Modern Redux With Redux ToolkitWatch video: Modern Redux With Redux Toolkit
7 min
Modern Redux With Redux Toolkit
Mark Erickson discusses the changes and challenges in Redux Toolkit 2.0, including addressing ES Module Common JS Compatibility and shipping new features. The release includes modernized build output, smaller bundle sizes, and new features like combined Slices API and dev mode checks in Reselect. The current test version is beta4, with plans to ship by the first week of December. RTK 3.0, focusing on RTK query updates, is expected to be released next year.
Canva’s App UI Kit: Empowering Developers With Modern Web TechnologiesWatch video: Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
8 min
Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.
Beyond JavaScript: Maximizing React With Web APIsWatch video: Beyond JavaScript: Maximizing React With Web APIs
10 min
Beyond JavaScript: Maximizing React With Web APIs
This Talk explores how to use browser and web APIs to enhance React applications, covering categories such as Fetch API, Device APIs, Storage APIs, Audio and Video APIs, and Shape API. It explains how web APIs are implemented in React applications and suggests using native JavaScript functions or NPM modules like React Speech Recognition. The Talk demonstrates the use of Battery and Face Detection APIs in a React application, including features like getting battery percentage, live coordinates, and speech-to-text functionality. It also mentions the possibility of creating augmented reality face filters with the face detection API. The conclusion highlights the availability of resources on Mozilla docs and a GitHub repository for further learning and code samples.
If You Aren’t First You’re LastWatch video: If You Aren’t First You’re Last
27 min
If You Aren’t First You’re Last
Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.
Design Systems Carnival! One Accessible Component, Many Pretty MasksWatch video: Design Systems Carnival! One Accessible Component, Many Pretty Masks
27 min
Design Systems Carnival! One Accessible Component, Many Pretty Masks
The Talk discusses the concept of design system Carnival and its relation to masks. It emphasizes the importance of accessibility in design systems and provides guidelines for implementing the Disclosure So Hide pattern. The Talk also covers topics like focus management, mouse interactions, and extending the disclosure widget. It warns against mixing different roles and complexity in design systems, using the example of a carousel. Overall, the Talk highlights the challenges and considerations in creating effective design systems.
Forget Bad Code, Focus on the SystemWatch video: Forget Bad Code, Focus on the System
27 min
Forget Bad Code, Focus on the System
Top ContentSetting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.
The Epic StackWatch video: The Epic Stack
21 min
The Epic Stack
Top ContentThis Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Want to Build an Enterprise-Grade App? Tear One Down!Watch video: Want to Build an Enterprise-Grade App? Tear One Down!
13 min
Want to Build an Enterprise-Grade App? Tear One Down!
Nithya Narasimhan discusses how to build an enterprise-grade application by deconstructing a reference implementation. The development environment includes GitHub Codespaces, devcontainer, and GitHub Copilot Chat. The Contoso Real Estate app provides a fully functioning experience in the browser. The Composable Enterprise pattern and API-first design are key components. Deployment is facilitated through infrastructure as code and an azure.yml file.
Beyond First Load Speed with INPWatch video: Beyond First Load Speed with INP
8 min
Beyond First Load Speed with INP
The Talk discusses the Core of Vitals and IMP, which are metrics used to measure user experience in browsers. IMP measures multiple actions such as tab, click, and key press until the next screen updates. It also addresses the issue of rage clicks and their impact on user experience. The Talk emphasizes the importance of optimizing for IMB by avoiding blocking the main thread and suggests using multiple tasks and yield to main thread for optimization. Additionally, it mentions the use of navigatorScheduling.isInputPending to handle user input, with a caveat that support may vary across browsers.
Road to Zero Lint Failures: Tackling Code Quality Challenges at ScaleWatch video: Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale
11 min
Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale
This Talk discusses the journey from thousands of Lint failures to zero in a codebase at Linton that is over 80 years old. The approach involved implementing rules, incentives, and tooling to address the issue. The tool called Checkup was used to visualize ESLint failures by team and lint rule, providing accountability and responsibility. The efforts resulted in cleaning up over 6,000 lint failures, with 55 contributors, and a 30% increase in perceived code quality.
A Nerdy Guide to the Web Trending ConceptsWatch video: A Nerdy Guide to the Web Trending Concepts
17 min
A Nerdy Guide to the Web Trending Concepts
This Talk is about using comic book stories to explain complex software development concepts. The first part introduces the speaker and the purpose of the Talk. The second part explores the concept of hydration using Iron Man as an example. Hydration is a solution to make server-side rendered code interactive. The Talk then moves on to discuss resumability, which allows for immediate interactivity by encoding extra information into the HTML. The concept of resumability is further explained using a story with Iron Man. The Talk concludes by inviting suggestions for future topics and thanking the audience.
Suspense for Data Fetching: How to Fetch During RenderWatch video: Suspense for Data Fetching: How to Fetch During Render
5 min
Suspense for Data Fetching: How to Fetch During Render
This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.
React State Management with Valtio Watch video: React State Management with Valtio
10 min
React State Management with Valtio
This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.
Server Components to the Rescue: Turbocharging and Empowering Your React Apps with StyleWatch video: Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
16 min
Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup. Server components reduce the cost of attractions and provide a unified solution. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.
The Messy Middle — Navigating Complexity in Large React ApplicationsWatch video: The Messy Middle — Navigating Complexity in Large React Applications
10 min
The Messy Middle — Navigating Complexity in Large React Applications
Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.
Defeat Decision Paralysis: Building a Killer Design System in IsolationWatch video: Defeat Decision Paralysis: Building a Killer Design System in Isolation
12 min
Defeat Decision Paralysis: Building a Killer Design System in Isolation
Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.
Lightning Fast E-Commerce: Remix your Shop with Shopify HydrogenWatch video: Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen
27 min
Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen
Today's Talk is about Shopify Hydrogen and how it simplifies the development of headless Shopify stores. The Talk covers topics such as mixing Storyblok and CMS data, code and data manipulation in Hydrogen, creating products and collections, handling SEO, building a performance server-side cart, setting up and managing the cart, and displaying cart and raffle information.
Content Security Policy with Next.js: Leveling Up your Website's SecurityWatch video: Content Security Policy with Next.js: Leveling Up your Website's Security
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
Type-Safe Style Systems: The Future of CSSWatch video: Type-Safe Style Systems: The Future of CSS
22 min
Type-Safe Style Systems: The Future of CSS
This Talk explores the evolution of CSS and the development of style systems in software engineering. It discusses the limitations of CSS and the need for frameworks, pre-processors, and JavaScript to enhance styling capabilities. The Talk highlights different approaches to CSS styling, including libraries like Tailwind and Chakra UI. It also introduces innovative style systems like Vanilla Extract and Rainbow Sprinkles, which offer optimized CSS classes and type safety. The speaker emphasizes the importance of design systems and encourages developers to explore and consider the strengths and weaknesses of different style systems.
Anyone Can Be an Open Source MaintainerWatch video: Anyone Can Be an Open Source Maintainer
7 min
Anyone Can Be an Open Source Maintainer
Hey, everyone. Today, I want to talk about how anyone, even junior developers, can be an open-source maintainer. Let me share my journey of learning to code and becoming a maintainer. I made a website for an internal conference straight from code and made it open source. Participating in Hacktoberfest helped me connect with other developers and learn from them. Becoming an open-source maintainer increases your confidence, helps you make connections, and enables you to share cool tools with the world.
Breaking the 'useEffect' HabitWatch video: Breaking the 'useEffect' Habit
22 min
Breaking the 'useEffect' Habit
Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.
Three Factors That are Blocking Contributions to Your Open Source ProjectWatch video: Three Factors That are Blocking Contributions to Your Open Source Project
14 min
Three Factors That are Blocking Contributions to Your Open Source Project
Welcome to the best talk of React Summit USA. This talk is about three factors that block contributions to open source projects. Application is an open source dev tool platform that eliminates repetitive tasks in creating NodeJS backends, increasing developer productivity. I will discuss the challenges faced by first-time contributors and how to overcome them. If you want to contribute for the first time, we welcome you. Being proactive and engaging with the community can attract long-term contributors.
The Unexpected Key Value Pair in MentoringWatch video: The Unexpected Key Value Pair in Mentoring
9 min
The Unexpected Key Value Pair in Mentoring
2 authors
This Talk discusses the unique mentorship journey of the speakers, who found each other through Coding Dojo and LinkedIn. They highlight the power of mentorship, emphasizing the value of having another woman in tech for support and guidance. The impact of mentorship is also emphasized, with the speakers encouraging others to be mentors and share their knowledge. They describe the mentor-mentee relationship as wonderful, inclusive, and supportive.
Building a Node.js Runtime for the BrowserWatch video: Building a Node.js Runtime for the Browser
13 min
Building a Node.js Runtime for the Browser
This Talk discusses the challenges and collaboration involved in building Nodebox, a Node.js compatible runtime for the browser. It provides an overview of how Nodebooks works, including the main manager, previews, and web workers. The Talk also covers the simplicity and speed of reading from the filesystem in Nodebooks. It highlights the complexity of implementing HTTP support and WebSocket mocking in Nodebox. Lastly, it mentions the ability to build a web server using Nodebox and provides information on available templates.
Trees aren't just Foliage: ASTs and Practical UsageWatch video: Trees aren't just Foliage: ASTs and Practical Usage
9 min
Trees aren't just Foliage: ASTs and Practical Usage
ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.
Using the React Ecosystem With the World's First O(1) Javascript Framework?Watch video: Using the React Ecosystem With the World's First O(1) Javascript Framework?
18 min
Using the React Ecosystem With the World's First O(1) Javascript Framework?
Reshapability in the next generation of front-end frameworks with OOV one loading time. Quick is a web framework that loads instantly and does not require hydration. QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. This represents a significant shift in front-end frameworks.
How Realm by MongoDB is Testing Native Modules “on device”Watch video: How Realm by MongoDB is Testing Native Modules “on device”
11 min
How Realm by MongoDB is Testing Native Modules “on device”
The speaker works on the Atlas Device SDKs, which allows testing code across multiple platforms and has support for multiple programming languages. They also built Mocha Remote CLI, a tool for running tests on Node.js and in a browser. The speaker mentions the popularity of Jest and the alternative Vitest for running tests on platforms like Android and iOS.
OpenAI in React: Integrating GPT-4 with Your React ApplicationWatch video: OpenAI in React: Integrating GPT-4 with Your React Application
22 min
OpenAI in React: Integrating GPT-4 with Your React Application
AI is revolutionizing application development and can enhance React applications. Advancements in AI include batch AI, real-time AI, and generative AI. Language models have limitations in accessing real-time data. Retrieval Augmented Generation (RAG) uses vectors to enhance language models. Vector search capabilities improve GPT models by providing up-to-date information and access to private data. Technologies like Next.js, OpenAI, Lankchain, Versel AI SDK, and MongoDB are used to build smarter React apps. An AI-powered documentation site can be built using custom data and vector search. The talk concludes by emphasizing the importance of integrating AI seamlessly into user-centric platforms like React-based projects.
Automating React Native DeploymentsWatch video: Automating React Native Deployments
9 min
Automating React Native Deployments
This Talk discusses the benefits of automating React Native app deployments and explores tools like Trapeze for automating configuration updates and GitHub Actions for automating the build process. It also highlights the use of signing credentials tooling and cloud credentials management tools like Fastlane Match or AppFlow for more complex builds. The Talk emphasizes the automation of build upload and testing using tools like App Store Developer APIs, Fastlane, Bitrise, or AppFlow, with a specific focus on Fastlane's ability to increment build numbers, build the app, and upload it to TestFlight.
Pushing Boundaries to the EdgeWatch video: Pushing Boundaries to the Edge
21 min
Pushing Boundaries to the Edge
CDNs were introduced to improve website performance by bringing web content closer to users. The concept of the edge addresses the limitations of CDNs by processing client data close to the source. The edge combines serverless functions and CDNs, allowing for server-side logic execution without web server configuration. Use cases for the edge include personalization, geolocation-based content delivery, AV testing, and implementing security logic.
Virtual DOM: Back in BlockWatch video: Virtual DOM: Back in Block
9 min
Virtual DOM: Back in Block
Hi, I'm Annembae, the author of MillionJS, a fast virtual DOM replacement for React. The virtual DOM can be slow depending on the components it powers. The block virtual DOM introduces an O(1) optimization to the traditional virtual DOM, resulting in faster updates with fewer DOM manipulations. MillionJS and the Block Virtual DOM offer a faster alternative to existing virtual-dom libraries like React. It has the potential to revolutionize the way we write React applications.
A11y Beyond the Theory: Integrating Accessibility Testing Into Your WorkflowWatch video: A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow
24 min
A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow
Ntandala Kengose, a software developer, emphasizes the importance of accessibility in software development and the responsibility it carries. The Web Content Accessibility Guidelines (WCAG) provide technical guidelines for making web content more accessible. Ntandala shares various accessibility testing tools and highlights the need for automation in testing. Tools like Pelly CI and GitHub Actions can be used for automated accessibility testing and CI integration. The X-Accessibility Ginter and Husky are tools that provide insights and ensure accessibility in development.
Measuring Coverage of React Design SystemWatch video: Measuring Coverage of React Design System
19 min
Measuring Coverage of React Design System
The Talk discusses the majoring coverage of the Reduzon system and the journey of migrating from design-system-3.0 to design-system-4.0. It introduces React scanner, a tool that statically analyzes code and extracts React component and prop usage. The Talk explores the options and custom functions in React scanner, as well as the processors and AST used by the tool. It also discusses exploring AST using astexplorer.net and showcases the usage of react-scanner. Finally, it mentions the importance of component restructure and introduces Omelet, a tool for component analytics.
Taming the State Management DragonWatch video: Taming the State Management Dragon
23 min
Taming the State Management Dragon
This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.
Authoring HTML in a JavaScript WorldWatch video: Authoring HTML in a JavaScript World
21 min
Authoring HTML in a JavaScript World
This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.
You's the Platform!Watch video: You's the Platform!
18 min
You's the Platform!
The Talk discusses the web platform and the speaker's experience with Remix. It covers issues with mutations and form data submission, fixing bugs, and discovering missing features. The speaker also talks about working on JS DOM and web standards, opening a pull request and making progress, and working on Chromium, Gecko, and Firefox. The Talk concludes with discussions on time to GA and documentation, as well as the speaker's contributions and takeaways.
Superpowers of Browser's Web APIWatch video: Superpowers of Browser's Web API
25 min
Superpowers of Browser's Web API
Today's talk covers Web API, including exotic and not commonly used APIs that can enhance web applications. The IntersectionObserver API allows for lazy loading images and infinite scroll lists. The Screen Wake Lock API prevents devices from locking, ensuring uninterrupted usage. The Wake Lock API is useful for various scenarios, but browser and device support varies. Background Sync and Broadcast Channel APIs enable offline functionality and communication between contexts. Lastly, the impact of code on the planet is highlighted, emphasizing the need for more efficient web development.
How to Use Suspense and GraphQL with Apollo to Build Great User ExperiencesWatch video: How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
27 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
2 authors
Today's Talk is about using suspense and GraphQL with Apollo Client to create smooth user experiences. The Talk covers the introduction and power of suspense, the new Used Suspense Query hook in Apollo Client, updating components with suspense, using suspense boundaries and tradeoffs, optimizing playlist fetching with GraphQL, loading more tracks and using transitions, and concluding remarks and future developments.
Wait, You're Shipping React Native to the Web?!Watch video: Wait, You're Shipping React Native to the Web?!
32 min
Wait, You're Shipping React Native to the Web?!
Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.