At this year's React Conf 2024 over the 2 days there were few major announcements including the React 19 RC, the React Native New Architecture Beta, release of the React Compiler and others.

Full video recordings from the official React channel: Day 1 & Day 2.
Below is a full list of topics with their short summaries and some helpful links:

Web Development

How Spotify Used the Picture-in-Picture API to Create the Spotify Mini Player

  • Chrome now supports Picture-in-Picture (PiP) for Spotify on desktop, allowing users to view a floating window while browsing.
  • PiP can be enabled by right-clicking on the video player and selecting "Picture in Picture."
  • The feature enhances multitasking, letting users control playback without switching tabs.
  • Spotify's integration with PiP improves user experience by offering seamless access to controls and content.

When to Use Components vs. Plain HTML?

  • Components are ideal for complex, reusable elements, ensuring maintainability and scalability.
  • Use plain HTML for simple, static content to avoid unnecessary complexity.
  • Consider components for interactive or dynamic features requiring state management.
  • Use HTML when performance is a concern, as it has a lower overhead than JavaScript frameworks.
  • Evaluate the project's size and future growth when deciding between components and HTML.

Better Understanding Console Errors and Warnings with Gemini

  • The feature helps understand errors and warnings in Chrome DevTools Console using AI.
  • Users need the latest Chrome version and must be signed in to access this feature.
  • Provides explanations for console messages, making it easier to interpret complex errors.
  • The feature can be enabled in DevTools settings.
  • Interacting with error messages in the console gives detailed insights and suggestions.

Enhancements with New Switch Controls in HTML

  • Introduces a new switch attribute for checkboxes in HTML to create native switch controls.
  • Supported by Safari Technology Preview 185 and Safari 17.4.
  • ncludes new pseudo-elements ::thumb and ::track for enhanced styling.
  • Simplifies creating accessible and visually appealing switches without checkbox hacks.
  • Currently limited to Safari, so developers must consider compatibility and accessibility before widespread adoption.

Animating the Dialog Element

  • Discusses animating the <dialog> element in HTML using modern CSS techniques.
  • Covers methods for both opening and closing animations.
  • Utilizes @starting-style for transitions and @keyframes for broader browser support.
  • Explains handling display changes and maintaining visibility during animations with transition-behavior: allow-discrete and overlay.
  • Simplifies creating animated dialogs without JavaScript, ensuring better cross-browser compatibility.

Performance

Visualizing Render-Blocking Scripts on Your Site

  • Explains how to visualize and detect render-blocking scripts on your website.
  • Utilizes tools like DevTools, Lighthouse, and DebugBear for detection.
  • Details the impact of render-blocking scripts on page load performance.
  • Provides practical steps to identify and address these issues.
  • Discusses techniques such as using async or defer attributes and repositioning scripts within the HTML to improve load times and user experience.

How Chrome Extensions Affect Website Performance in 2024

  • Explores the impact of Chrome extensions on website performance.
  • Details how extensions can slow down page load times and increase CPU processing.
  • Analyzes metrics like First Contentful Paint (FCP) and Interaction to Next Paint (INP).
  • Includes testing the performance of 5,000 popular extensions, noting most have minimal impact, but some significantly degrade performance.
  • Highlights that ad blockers, while generally reducing processing time, can also add some overhead.
  • Advises on optimizing extension code and Google's role in promoting faster extensions.

A Comprehensive Guide to Analyzing JavaScript Performance with Chrome DevTools

  • Provides a comprehensive guide to analyzing JavaScript performance using Chrome DevTools.
  • Focuses on improving the rendering frames per second (FPS) of a canvas library.
  • Guides on navigating the Performance tab, analyzing the flame chart, and using Bottom-Up analysis.
  • Emphasizes practical techniques to identify and optimize inefficient code.
  • Demonstrates significant performance improvements through real-world examples and step-by-step instructions.

Quantifying the Impact of Styled Components on Server Response Time

  • Investigates the impact of Styled Components on server response times in a React app.
  • Analyzes CPU traces and finds that Styled Components significantly increase server-side rendering (SSR) times, consuming around 47% of the rendering process.
  • The detailed examination involved unminifying the Styled Components library for accurate trace data.
  • Concludes that Styled Components substantially degrade SSR performance.
  • Suggests reconsidering CSS handling approaches for performance optimization.

CSS

Modern CSS Layouts: You Might Not Need a Framework

  • Discusses creating modern CSS layouts without relying on frameworks.
  • Emphasizes the utility of native CSS features like Grid and Flexbox.
  • Introduces four utility classes for flexible, responsive layouts, eliminating the need for additional libraries.
  • Covers setting up CSS Cascade Layers and using CSS Variables.
  • Focuses on creating reusable, adaptable layout classes.
  • Aims to simplify layout creation, reduce dependencies, and leverage modern CSS capabilities for efficient and clean design practices.

On Readability and Accessibility: Creating Text Colors with CSS

  • Discusses the new CSS contrast-color() function, which automatically selects readable text colors on varying backgrounds.
  • Addresses longstanding CSS issues of ensuring text readability regardless of background color.
  • Explores Relative Color Syntax (RCS) as a workaround until contrast-color() is widely supported.
  • Provides detailed examples, fallback methods, and insights into browser compatibility.
  • Emphasizes the balance between readability and compliance.

We Now Have Container Queries, but Are We Actually Using Them?

  • Discusses the adoption of container queries in CSS despite their anticipated popularity.
  • Notes that container queries are underutilized due to factors like newness, browser support concerns, and existing flexible layout methods.
  • Highlights significant benefits for component-based design offered by container queries.
  • Practical use remains limited due to current challenges.
  • Provides examples and personal experiences illustrating the potential and challenges of container queries in modern web development.

Introducing Pigment CSS: The Next Generation of CSS-in-JS

  • Introduces Pigment CSS, a zero-runtime CSS-in-JS solution for improved performance.
  • Enhances compatibility with React Server Components (RSC) and the Next.js App Router.
  • Generates colocated styles at build-time, offering significant performance gains over solutions like Emotion.
  • Maintains a familiar developer experience and aims to minimize migration friction for Material UI users.
  • Currently in alpha and set to be released with Material UI v6.

contrast-color(): Great, but Solves the Problem at the Wrong Level

  • Examines the new contrast-color() CSS function, designed to ensure text readability by adjusting text colors for sufficient contrast.
  • Highlights the accessibility benefits of the function.
  • Argues that contrast-color() addresses the problem at the wrong layer, suggesting that browsers should inherently manage contrast issues.
  • Emphasizes the need for default accessible design practices over-relying on user preferences and browser settings.

Should You Use the CSS text-emphasis Property for Headings?

  • Demonstrates various CSS and HTML techniques through a live example.
  • Showcases interactive elements and styles, providing a practical representation of modern web development practices.
  • Allows exploration of the project's source code to see how different HTML and CSS components are implemented and interact.
  • Offers a visual and functional example of web design or functionality.

Guide to Implementing Bulma CSS: Overview, Examples, and Alternatives

  • Provides an in-depth guide to adopting Bulma CSS, a lightweight CSS framework.
  • Covers key features such as responsive design, readability, and modular components.
  • Explains how to get started with Bulma.
  • Compares Bulma with other frameworks like Tailwind, Bootstrap, and Chakra UI.
  • Highlights Bulma's strengths, including ease of use, performance, and extensive community support.
  • Discusses potential limitations of Bulma.

Improving CSS View Transitions with Velvette

  • Introduces Velvette, a utility library designed to simplify CSS view transitions.
  • Explains the challenges of using the CSS View Transitions API, such as unique name generation and scoped transitions.
  • Velvette provides a declarative way to manage transitions, mitigating these issues.
  • Includes steps to install and set up Velvette.
  • Provides examples of list item and navigation animations.
  • Highlights the benefits of using Velvette for creating smooth, engaging transitions with less boilerplate code.

JavaScript

What's New in JavaScript Frameworks (May 2024)

  • Provides updates on the latest trends and features in JavaScript frameworks as of May 2024.
  • Angular: Introduces new signals and partial hydration.
  • Astro: Features hybrid rendering and new developer tools.
  • React: Adds server components and a new compiler.
  • Remix: Supports SPA mode and Vite.
  • Covers updates in frameworks like Next.js, Vue, Nuxt, Solid, and Svelte.
  • Emphasizes the convergence of frameworks on features like component-based architecture and modern server-side rendering (SSR) support.

Five Cutting-Edge JavaScript Techniques

  • Highlights five advanced JavaScript techniques for modern web development:
    • Monads: Simplify asynchronous operations and error management.
    • Declarative Programming: Focus on writing concise and expressive code.
    • Server-Side Caching: Improve performance through efficient data retrieval.
    • Immutability: Ensure consistent state management and reduce debugging.
    • Pattern Matching: Enable efficient conditional branching and data handling.
  • These techniques enhance the development of dynamic, interactive, and high-performance web applications.
  • Showcases JavaScript's versatility and growing sophistication in modern web development.

WebSocket Alternative: Using Firestore for Real-Time Event Listening

  • Explains how to use Firestore as an alternative to WebSockets for real-time event listening in a Vue 3 application.
  • Details the setup process, including installing Firebase, configuring Firestore, and creating a collection.
  • Demonstrates building a real-time chat app, showing how to send and display messages.
  • Describes how to listen for real-time updates using Firestore's onSnapshot method.
  • Highlights Firestore's advantages over WebSockets, such as simplicity, scalability, offline support, and integration with Firebase services.

React

React Conf 2024 Recap

  • Hosted in Henderson, Nevada with 700+ attendees.
  • Announced React 19 RC, React Native New Architecture Beta, and experimental React Compiler.
  • Key talks included Vanilla React, React Rhythm & Blues, and updates on React 19 features.
  • Day 2 focused on React Native's state, with highlights on app usage and the new architecture beta.
  • Community talks covered accessibility, CSS, server components, and error reporting.
  • Included Q&A sessions with the React and React Native teams.

Highlights from React Conf 2024

  • React 19 Release Candidate: Entered the release candidate phase with enhanced features and performance improvements.
  • Open-Sourcing the React Compiler: Aims to optimize React applications, improving load time and runtime performance.
  • React Native's New Architecture: Now in beta, offering a more robust framework for better mobile app performance.
  • Expo Recommended: Officially recommended for new React Native applications.
  • Universal React Server Components: Integrates with Expo Router, optimizing performance.
  • Remix and React Router Merge: Unifies routing in React applications.
  • RedwoodJS Supports Server Components: Enhances dynamic, server-rendered applications.
  • Pigment CSS: New CSS-in-JS library focused on performance and ease of use.
  • React Native for TV, AR, and VR: Expanding support for TV applications and spatial computing.

React Compiler with React 18

  • React 18 introduces a new React compiler that aims to improve developer experience and bundle size.
  • The compiler offers features like automatic imports, JSX transform, and optimized code generation.
  • It utilizes the JSX transform to remove the need for React imports and make JSX work seamlessly without them.
  • The compiler optimizes generated code by removing unnecessary elements and simplifying function calls.
  • Developers can expect reduced bundle sizes and improved performance.

How to Style React Components

  • Various methods to style React components are covered: inline styles, CSS files, CSS modules, and styled-components.
  • Inline styles involve directly applying styles as JavaScript objects within JSX, offering simplicity but limited flexibility.
  • CSS files allow for separate styling, enhancing organization and reusability but may lead to naming conflicts and global scope issues.
  • CSS modules offer scoped styles by automatically generating unique class names, preventing style clashes and enabling encapsulation.
  • styled-components provide a more dynamic approach by allowing styling through JavaScript, facilitating component-specific styles and dynamic theming.
  • Each styling method has its advantages and use cases, developers should choose based on project requirements and preferences.

Integrating Remix with React Router

  • Remix and React Router are merging to combine server-rendering with client-side navigation.
  • Remix optimizes performance and SEO with server-rendering, while React Router excels in client-side routing.
  • This integration combines the strengths of both tools for improved performance and user experience.

Restyle: Zero Config CSS for React

  • Restyle is a design system framework for React Native, which provides a more efficient and flexible way to create and manage UI components.
  • It allows for consistent styling across the app, streamlining development, where developers can customize components using predefined themes and style props.
  • It simplifies the process of creating and maintaining a visually cohesive app design.

Automatic Open Graph Image Generation in NextJS

  • Demonstrates how to auto-generate Open Graph images in Next.js.
  • Open Graph images enhance social media sharing by providing visually appealing previews.
  • Next.js API routes are utilized to generate dynamic images based on user input.
  • The sharp library is employed for image processing and manipulation.
  • Integrating auto-generated Open Graph images can improve the visibility and attractiveness of shared content.

Using Mountaineer to Develop React Applications in Python

  • Explores using Mountaineer to develop React apps with Python.
  • Mountaineer enables Python developers to create React apps without switching to JavaScript, seamlessly integrating Python code with React components.
  • Developers can leverage Python's simplicity and productivity while benefiting from React's frontend capabilities simultaneously.
  • Mountaineer simplifies the development process by bridging Python and React seamlessly.

Vue

Building Real-Time Applications with Vue.js and WebSockets

  • Discusses building real-time applications with Vue.js and WebSockets.
  • Vue.js simplifies frontend development, while WebSockets enables real-time communication between clients and servers.
  • The tutorial covers setting up a Vue.js project and integrating WebSockets for live data updates.
  • Real-time applications offer enhanced user experiences by delivering instant updates without page reloads.

Creating CatGPT: A Guide to Vue 3 and Vuetify for Cat Image Enthusiasts

  • Guides in creating "CatGPT," a Vue 3 and Vuetify app for cat image enthusiasts.
  • It covers Vue 3 setup, Vuetify integration, and using the Cat API for fetching images.
  • Shows how to implement features like fetching random cat images, breed searches, and saving favorites.
  • CatGPT highlights the ease of Vue 3 and Vuetify for crafting engaging web apps.