We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

In this talk, we'll explore what critical CSS is, when to use it or not, how to implement it effectively, and some common challenges and use cases. The critical rendering path is a sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible content on the screen. Time and CPU are crucial factors in rendering content quickly, especially for mobile devices. Critical CSS matters because the CSOM can't be built incrementally, and the order of CSS rules affects their specificity. There are two primary ways to add CSS to your HTML: inline styles using style tags or external stylesheets using link tags. Critical CSS aligns only the styles needed to render the above-default content, reducing the size of render-blocking styles. There are manual and automatic tools for identifying critical CSS. Critical CSS is commonly used for static websites with statically generated pages. Testing the effect of critical CSS can be done using Lighthouse, Chrome Performance tab, or WebPageTest.org. BISTIs requires some extra handling but offers better performance. Over-inlining CSS and wrong style order can cause issues with critical styles. Implement optimization at build time.

Welcome to my talk on AI powered development. We'll explore the implications of AI tools and where the value lies in software development. We're transitioning to a new age where AI plays a significant role in coding. The new workflow involves asking AI for code, verifying it, and continuing to build. AI tools are available in the market, offering different options for developers. It's important to choose the right approach that aligns with your goals. Keeping IDE and AI separate allows for better control. The value of AI-powered development lies in architecture, scalability, and creativity. We're in the early stages of AI-powered development, presenting a significant advantage for those entering the field now.

Hey, my name is Mikhail Levchenko. I've changed my job and became a full-time developer productivity engineer. Let me share a little story. Imagine being a wealthy trader in 15th century Europe. Delivering spices for profit was not an easy task. Middle East nations heavily taxed any traders. But the Portuguese sailed around Africa using the Mariner's Astrolabe. Fast forward, Gerardo Mercator invented a map perfectly suited for deep ocean navigation. The Dutch East India Company became the new king of the spice trade. Developer productivity is about building a cozy environment for developers, solving hard problems, and identifying process bottlenecks. It focuses on the whole development process as a product. By leveraging this perspective, you can drive change among developers and other roles. Observing developer processes as a product involves meeting stakeholders, formulating a vision, creating a model and metrics, finding productivity problems, and proposing solutions. The stakeholders include developers, CEOs, CTOs, engineering managers, and other roles involved in software development. The goal is to make everyone more productive, guided by the motto of happier developers building better software faster. There are three highlighted frameworks in this talk: DORA, DEVX, and Mertrix. DORA focuses on speed and reliability with metrics like acceleration frequency, lead time, failure rate, and recovery time. DEVX addresses the human factor with metrics related to feedback loops, cognitive load, and flow state. DX4 is a recent metric that combines DORA and DEVX, introducing proprietary metrics for top management. It includes a failure rate to encompass reliability and a percentage of time spent on new features. Engineer-developed metrics like the reliability metrics from Dora and the percentage of time spent on new features are valuable additions. Talking to top management about changes is made easier with a cool metric. Research concerning metrics, consult stakeholders, and read literature to improve understanding. Try prototypes before developing custom tools as a last resort. Confirm success with empirical metrics. Release managers often feel constantly interrupted and overwhelmed by the task of supervising a release. Sharing the role with the entire team proved to be ineffective, leading to forgotten procedures. Automation and streamlining of the release process improved satisfaction and reduced delayed releases. Make developer productivity part of company goals and culture code. Advocate for developers to top management. Drive change by starting small, experimenting, and using tools as a last resort. Find ways to make teammates more productive.

Today's Talk discussed the potential of AI to enhance managerial productivity. The importance of frameworks and Git in coding was emphasized, as well as the need to stay updated with new technologies. Various AI tools and their use cases were mentioned, with a focus on data security. The benefits of using AI agents and case templates for project management were highlighted. AI tools for presentations, automation, and bias in AI models were also discussed. The limitations of AI and ethical considerations were mentioned, emphasizing the need for human creativity and accountability. Overall, the Talk provided valuable insights into the role of AI in software development and engineering.

Today's Talk explores productivity challenges and solutions for AI engineers, focusing on an application called Contoso Chat. The end-to-end workflow is examined from a productivity perspective, introducing the concept of Exposure to AI. Building an AI application involves ideation, augmentation, and operationalization stages. Provisioning and setup are crucial steps, with infrastructure as code being a productivity tool. GitHub Codespaces and development containers provide consistent development environments. Azure AI Inference API allows easy iteration and prototyping. AI-assisted evaluation involves training AI models and using evaluators for grading responses. Custom evaluators can be created. Overall, the Talk emphasizes the importance of productivity throughout the AI engineer's journey.

Hey, everybody, I'm Graham, and I'm really excited to give you a talk today on feature flagging with React server components. We're going to give examples of how you can deploy feature flags in your application, and how feature flagging interacts with React's rendering strategies. Feature flags are conditional logic that allows you to control the state of a feature independent from the code deploy. This separation of code deployments from feature releases is critical for large product organizations. It enables frequent commits without exposing changes to users, conditional release of features, and easy rollback in case of unexpected bugs. Using FeatureFlag gives you a kill switch where you can turn off your feature. It allows you to do A-B testing and measure the impact of new features. You conditionally release the feature to different sets of users, allowing you to control for externalities and changes to your product. A FeatureFlag is used to get the state and conditionally show a component. The flag state can be stored in a file or using environment variables. However, environment variables have limitations in terms of complexity. A more complex example uses growth book syntax, allowing for advanced control over feature rollout. Building your own system can be tricky, but feature flagging platforms offer fully-featured solutions with two main advantages. Feature flagging applications have a nice UI for controlling feature releases and an SDK that integrates with the code. React poses complications in using feature flags due to its rendering strategies. Static site generators like Next.js have limitations in user targeting and require redeploy for updates. Client components are not async, requiring the use of React primitives. These approaches have their own challenges in implementing feature flags. To initialize the SDK, instantiate the SDK outside of the app and use a user effect hook to download the feature flag payload and update the user data on the SDK. The growth book provider builds context for evaluating feature flags, allowing components to easily access feature flag states. However, there may be a slight flicker in the UX due to the time it takes to initialize the SDK and download the feature flag state. Network optimization can help reduce flickering, but the client's network connection is beyond your control. There are some workarounds for flickering, like showing a loading spinner while rendering in the background. Using feature flags for SEO is not ideal as the initial HTML payload doesn't include all the contents. Server components in React 19 provide an async solution without the need for complicated useEffect and state. react.cache allows caching expensive operations scoped to the current request. The getSdk function call retrieves the value of the feature flag from the cache, providing faster subsequent calls. Our SDK has its own in-memory cache. Dynamic rendering can be expensive in terms of requests, rendering, network calls, and running React on the service side. It can also be slow, and tracking events may be challenging. The server-client hybrid approach combines the advantages of the previous strategies without the downsides. By making the outer app a server component and caching the feature flag payload, we can achieve no-flicker client-side feature flagging. The client component can use the UseMemo hook and the initSync method with the payload already in memory. Passing the SDK instance and wrapping the main app in a provider allows us to have the best of both worlds. Although it may be slightly more complex to set up, using Next.js with React server components offers a cool and modern approach to feature flagging with high performance.