#case study

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.

Join Christoph from Nakazawa Tech in building the AI for Athena Crisis, a game where the AI performs actions just like a player. Learn about the importance of abstractions, primitives, and search algorithms in building an AI for a video game. Explore the architecture of Athena Crisis, which uses immutable persistent data structures and optimistic updates. Discover how to implement AI behaviors and create a class for the AI. Find out how to analyze units, assign weights, and prioritize actions based on the game state. Consider the next steps in building the AI and explore the possibility of building an AI for a real-time strategy game.

This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

Hello my friend, in this talk, I wanna share with you how to build your own open source project. Building an open source software project can be challenging. I receive a lot of things randomly in a day, like thank you messages for making my life easier, which motivates me. To choose an open source project to work on, pick one you use every day. Your software is being used when people report issues and send pull requests.

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.

Let me walk you through introducing design system into mature codebase loosely based on Clio. Mature codebase challenges: inconsistent components and styling, multiple color palettes, and inconsistent design patterns. Working in siloed squads led to difficult maintenance, slow onboarding, and disjointed user experience. Design system squad realized the need for a plan and data to guide them. We need data to guide us. A React scanner library enabled us to crawl through the code base and understand the components used. Technologies like GitHub Actions, Redshift, and Count were used to store and query the data. The script involved running a scanner, configuring it, and sending the data to Redshift via Fivetran. ReaRscanner provided the pattern for processing data. We collected and sorted data on component usage and imports to identify pain points and track trends. Collaboration was a challenge, so we engaged teams through surveys, office hours, and extensive documentation. Our goal is to achieve over 60% adoption of the design system. We worked on keeping a single source of truth in our design system. Zero Height is our platform for storing component documentation, integrating tools like storybook and Figma, and ensuring alignment across design and code. Design systems are more than components and tokens; they create a shared language and process that facilitate teamwork and alignment.

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

tldraw is a canvas and a whiteboard SDK that can be integrated into React apps. It allows for high-performance rendering using the DOM and React. tldraw's canvas is powerful and can be enhanced with Vision models for image creation and AI utilization. It enables easy iteration and updating of designs based on annotations. tldraw can be used to create UIs, complex applications, interactive things, calculators, ASCII art, and more. It explores the use of AI on the canvas and can generate images, code, flowcharts, and content. tldraw focuses on performance optimization, AI model exploration, security, usability, and accessibility. The Talk also discusses the business model, future plans, and the vision of building a plugin community for the canvas.

Today's presentation is about full stack development using the new Oracle 23 AI database and Parse Platform. Parse Server simplifies mobile development by providing a flexible backend solution. The new Oracle 23 AI database container offers benefits like JSON support and pluggable database administration. The Parse Server storage adapter allows for easier management and testing of APIs. The stack also includes features like GraphQL, custom Oracle code execution, message queues, and Oracle Spatial for geofencing and trucking applications.

This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.

The Talk discusses how the engineering team at Expedia improved the performance of customer flight search by using various metrics and techniques. These include prefetching resources during browser idle time, preemptive search to predict responses, and optimizing performance through micro queries and a micro front-end architecture. The team also focused on improving build and package size limits for better code analysis. Performance monitoring and automation were implemented for ongoing performance improvements.

AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport. Microfrontends extend microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach for loading remote modules. Microfrontends offer benefits such as incremental upgrades and deployment independence, but also come with downsides like poor performance and complexity. Microfrontends are recommended for large-scale enterprise applications with distinct requirements and the need for experimentation.

JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.

WebAssembly is a cost-effective way to distribute computation and allows for code reuse and performance optimization. It can be used for running bioinformatics tools in the browser without setup, but running it on the server or smaller devices may have limitations. WebAssembly is best suited for playgrounds, small-scale simulations, audio and video processing, and upload pre-processing. It offers few benefits outside the browser for server-side applications, but can be useful for running user-provided code and serverless functions.

JavaScript's power and versatility make it the programming language of choice for consumer applications worldwide. A JavaScript engineer should understand how things work, even if they don't know everything. The Talk discusses modifying websites, uncovering game rigging through developer tools, analyzing fetch requests and overrides, refactoring and state management, and website modification. The speaker shares personal experiences and highlights the importance of understanding and being able to modify code in real-time.

The Talk covers the importance of preventing and dealing with bugs in software development, with the speaker sharing their experiences and solutions. They discuss the impact of bugs on user experience and revenue, the importance of stress testing and implementing alerts, and the surprising impact of CSS. The speaker also emphasizes the importance of simplicity, monitoring, and refactoring, as well as the need to address security threats and learn from failure. They provide tips for writing postmortems and highlight common mistakes to avoid, especially for junior developers.

This Talk introduces WebXR and VR experiments, showcasing examples and encouraging audience engagement. It explores the possibilities of WebXR and AR games, emphasizing the versatility of A-frame for creating AR and VR projects. The Talk also covers asset customization, animations, and augmented reality using LiDAR scanners. It highlights different types of virtual reality experiences and the potential of Apple Vision with WebXR. The speaker emphasizes the importance of community, developer experience, and starting early in WebXR development.

May 25th, 1977, the first Star Wars movie inspired generations with its space travel and lightsaber fights. Goran Vukicic built replicas of the P-Droid and found a community of designers who sell 3D designs for printing. Bringing the droid to a conference is challenging but rewarding. The NVIDIA Jetson Ori Nano is a powerful device for running AI models. Building Star Wars droids at home is possible with open-source development.

Today's Talk discusses the competition between a developer and ChatGPT in building a data visualization platform. Generative AI is widely used, but ChatGPT is not a direct replacement for developers. Prompt engineering enhances ChatGPT's performance. The future of AI is promising, with open source models and proactive AI agents on the rise. Leveraging prompt engineering and dedicated LLM tools can improve code generation and automation.

This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.

This Talk discusses the importance of performance work and how to drive performance governance. It emphasizes the need to frame data, set meaningful budgets, and understand both engineering and product perspectives. The Talk also highlights the significance of delivering value, establishing solid performance governance, and gaining buy-in from management. Additionally, it emphasizes the importance of measuring performance, optimizing through data, and collecting performance data using tools like Speedcurve and Bugbear Sentry. The speaker also mentions their training program and expresses gratitude towards the audience.

Code bases degrade over time, so it's important to build a protective layer and accept imperfections. Collocation and leaving traces in the code are key for better understanding. TypeScript's strict null checks and explicit typing can improve code reliability. Guidelines and naming conventions are crucial for maintaining a consistent and scalable architecture. Version control complexity is not significantly affected by having multiple components in one file.

The Talk discusses the choice between building native or web apps for software development. It explores the benefits of building web apps, such as fast development, easy debugging, and universal rendering. It also highlights the power of native apps, with their advanced features, better offline experience, and monetization opportunities. The Talk suggests using libraries like Capacitor or React Native to combine the benefits of both web and native apps.

Imagine building your own video conferencing app in React using Daily React, a React library built on Daily's client SDK. Rendering components and user controls in the app is crucial, including joining the call, displaying participants, toggling camera and microphone, and leaving the call. Optimize hooks and add features like device pickers, screen sharing, and text chat. Find the code on daily's GitHub and documentation at docs.daily.co.

This Talk explores empathy-driven development in software engineering, emphasizing the importance of understanding and applying empathy in code reviews, communication, and team collaboration. It highlights the benefits of empathy, such as personal growth, effective communication, and high code quality, while cautioning against excessive empathy. The Talk also discusses building empathetic teams, conducting empathy workshops, and practicing empathy in interviews. It addresses language barriers, handling engineers, and the role of AI in fostering empathy.

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.

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.

This talk discusses the challenges of implementing spatial navigation for TV controls and the need for a library. The approach to spatial navigation can be improved by developing extra logic to connect TV control with the application. The demo application showcases the use of a NavigationEngine class and the useFocusRef hook function. The integration logic involves selecting the next node based on key presses and node coordinates. The talk also highlights the challenges of complex arrangements and circular navigations in smart TV application development.

Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.

Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.

Today's Talk focuses on implementing schedules and timelines using the PlanBy component. PlanBy is a React-based tool that offers a simple interface and features like sidebar, timeline, layout, and live program refreshing. It uses a custom virtualized view to handle large amounts of data efficiently. The component allows for easy customization and can be used to build schedulers, conference agendas, TV guides, and more. Installation is straightforward, requiring only a few components, one hook, and two wrappers.

React for eBooks? Learn how to hack an eReader to display a tea menu. Create images and write e-books using React. Use EPUB format to create chapters and include CSS. Use Pandoc and Dino to simplify the process and make quick updates.

Feature management in React.js applications involves techniques like feature flags and toggles, allowing for decoupling of application deployment from feature releases. Gradual rollouts, remote configuration, and audience targeting are key techniques. Increased control and flexibility in feature management provide targeted launches and quick rollbacks, but there are pain points like lack of reviews and approval workflow. Infrastructure as code (IAC) and GitOps are practices that can be combined with feature management. Feature Advisor is a tool that helps with feature management in React applications, focusing on principles rather than the tool itself.

Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.

Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

Leveraging TypeScript and Atomic Design can solve code structure conundrums and achieve readability, efficiency, and flexibility. TypeScript offers benefits like intelligent refactoring, improved on-boarding, and fewer bugs. Typescript makes you think differently and opens doors for what you can do. Real-world challenges and considerations can be exacerbated when using TypeScript with atomic design. Avoid over-engineering and code depth, and stay close to the product to maintain codebase alignment.

TypeChat is an open-source library that uses TypeScript types to guide and validate responses from language models. It allows for the creation of complex responses and provides a way to repair errors in the model. TypeChat programs enable better flow of data and the ability to refer to individual steps. The math example demonstrates the use of a program translator and metaprogramming techniques for type safety. Language models trained on both code and prose perform well in this context.

Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.

The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.

This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.

Today we're going to build a React application with just our voice using GitHub Copilot, an AI peer programmer powered by OpenAI Codecs. It's important to be specific in your comments to get accurate suggestions from Copilot. Prompt engineering tips can be used to create different applications, such as a basic markdown editor and a simple to-do app. The application was tested successfully by adding and deleting to-do items using voice commands.

The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.

React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.

RAPID is a globally integrated FinTech system that abstracts all the integrations into a single platform, eliminating the need for merchants to manage multiple integrations for payments, payouts, fraud detection, and compliance policies in different jurisdictions. RAPID offers various use cases, including e-commerce, online gaming, and marketplaces. With RAPID, merchants can easily handle payments, payouts, and fund transfers. Let's create a hosted checkout page through RAPID by signing up to the client portal, copying authentication keys, and following simple steps. After making a payment on the hosted checkout page, you can view payment details and transferred funds in the client portal. Congratulations, you're now a fintech developer!

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.

Jumbo, a grocery chain in the Netherlands, has a tech campus with over 400 developers working on digital solutions. They built a distributed component library called Kompas, allowing everyone to contribute and ensuring knowledge is not lost. They adopted a hybrid solution, combining centralized and decentralized approaches, for fast development while maintaining a clear vision and high-quality standards. The key takeaway is to be willing to change processes and find what works best for your organization or team.

This Talk explores the journey of learning and recreating Node.js from scratch, highlighting the main components and experimentation involved. It delves into implementing functions in V8 and setTimeout in Node.js, as well as the execution pipeline and the event loop. The collaboration between different JavaScript runtimes and the continuing evolution of Node.js are also discussed. The speaker shares their experience of exploring Node.js and writing a book, and hints at future projects involving React Native.

The Talk discusses the 'rewrite trap' in software development, where the urge to start from scratch often leads to poor outcomes. It emphasizes the importance of understanding the existing project before making big technical decisions and the benefits of gradual improvement. The Talk also highlights the challenges and pitfalls of a complete rewrite, such as false sense of productivity, problems with edge cases, and the accumulation of tech debt. It stresses the need to understand the system and its influences, cater to the needs of stakeholders outside of engineering, and focus on creating value.

The Talk discusses the importance of finding purpose and learning from past experiences in software development. It emphasizes the need to test different areas and reflect on experiences to find direction. Understanding one's purpose and the value it brings is crucial. Mistakes are seen as valuable insights for improvement.

DevRel is about understanding the audience and collaborating with different departments. Dev Advocates bridge gaps between engineering and marketing, provide feedback, and stay updated on industry trends. DevRel helps raise team profiles, assists with editing and getting on podcasts, and aims to make engineers successful. Collaboration is key in DevRel.

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.

React is a versatile tool that goes beyond front-end development and can be used for synthesizing music. Creating a specialized framework with React requires understanding the tooling ecosystem and React's design philosophy. Examining good codebases like createreactapp can accelerate development. Handling side effects and module replacement can be achieved through techniques like dead code elimination and hot module replacement. Maintaining component state and implementing hot module replacement are important considerations for a React application.

Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.

This talk focuses on arrows and their unique features in diagramming tools. It explores the challenges of arrow positioning and connector selection, particularly with irregular shapes. The talk also discusses alternative arrow intersections and curved lines, as well as the challenges of creating curved arrows. The speaker presents a method for creating arrows and moving handles that always look good. The talk concludes with an invitation to try out the new version of Teal Draw and follow the speaker on Twitter for more arrow content.

The Talk discusses the need for more robust tools for visual testing in UI development. It explores the challenges in building UIs, including multiple views, variants, and breakpoints. The importance of component extraction and interactions is emphasized. The Talk also covers story derivation from components and interactions, UI testing with the test runner, and visual regression testing with Chromatic. Automating tests using GitHub Actions and common mistakes in using Storybook are discussed. The Talk concludes with a Q&A session.

AGgrid is an enterprise component with cool chart features that superpowers any application. AG Grid's React UI provides a native React experience with all the benefits of React and AG Grid's intelligence and power.

The speaker shares their personal journey in the software development field, from starting in technology after college to experiencing burnout and taking steps towards self-care. They emphasize the power of technology and accessibility, as well as the emergence of edge computing. The speaker introduces their project, the Multiplayer Development Kit, and discusses the challenges of building real-time multiplayer apps. They also highlight the importance of work-life balance and personal growth in the industry.

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.

This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.

Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.

This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.

The Talk discusses the challenges of detecting and combating bots on the web. It explores various techniques such as user agent detection, tokens, JavaScript behavior, and cache analysis. The evolution of bots and the advancements in automated browsers have made them more flexible and harder to detect. The Talk also highlights the use of canvas fingerprinting and the need for smart people to combat the evolving bot problem.

Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.

How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.

I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.

React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.

The talk focuses on creating the best JavaScript data grid by categorizing code using abstract syntax trees. Code files are represented as tree structures, allowing for the extraction of different sections. Framework-specific converters generate code examples for Angular, React, and Vue. TypeScript validation and testing ensure code quality and easy updates for framework examples.

When faced with challenges in supporting multiple package managers and keeping up with growth, implementing a plugin architecture can help. Extending a CLI for source control management systems like GitHub and GitLab can be done using TypeScript and Oclef CLI. TypeScript errors can be resolved by adding missing properties and implementing required functions for plugins. Supporting multiple repositories by following TypeScript errors and having the right setup can reduce time to production and onboarding. Plugin architecture with TypeScript can be a valuable tool for faster development and onboarding onto repositories.

Today's Talk covers making multiplayer games with Coliseus, Node.js, and Typescript. It explores the state of networking on the web, alternative servers, and how Coliseus works. The Talk also discusses client-side prediction, lag compensation, server limitations, scaling, and showcases cool games made with Coliseus. Additionally, it mentions Nakama and Unity integration for client-side prediction in multiplayer games. Coliseus is available on mobile and can be found on colossus.io or the GitHub repository.

Sneak, a software company, has experienced significant growth since its founding in 2015. They face challenges in culture, hiring, and scaling but focus on communication and transparency to manage change. Sneak emphasizes building a strong culture and supporting communities of practice. They hire based on key values and provide support for new hires to thrive. The concept of 'giving away our Legos' is embraced to scale effectively.