React Advanced

React Advanced 2024

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

CSS Is more powerful than we usually give it credit for. Let's see together how we can make use of CSS to build together fully functioning filtering capabilities into an emoji-picker component, improving performance while at it. We will use some old and new techniques, and combine them in creative ways to turn a slow, laggy experience into a responsive and modern searching capability. We'll learn about the advancements in CSS, and discover the untapped potential of CSS for building dynamic UIs.

CSS Is More Powerful Than You Think! Building React Search in CSS

Evyatar Alush

Today we're going to talk about best practices for using Tailwind CSS. Tailwind CSS is a popular and controversial tool. It balloons within developers into two opposing camps. For some tasks, Tailwind is extremely cool. After working with Tailwind for a long time, I have identified two main requirements where Tailwind is suitable, and without them, it's better to choose an alternative tool. The first requirement is the project must have a design system. The second requirement for using Tailwind CSS is that your project must have a component approach. If you have a design system and a component approach, then Tailwind CSS may be a nice option for you. Instead of specifying the same margin at the top or the bottom, you can specify only a vertical one. Second rule while working with Tailwind is group design tokens and name them semantically. Rule number three, keep class ordering. The next advice for using Tailwind will be useful not only for Tailwind, but also when working with any content tools, monitor the bundle size and try to optimize it. The last rule for Tailwind, use sets of style variants to avoid problems when overriding classes. Instead of passing classes arbitrarily via props, define a set of variants for the component. Use fewer utility classes, group design tokens, and name them semantically. Keep class ordering, minimize your build size, and use sets of style variants. Remember that Tailwind CSS is a useful tool, but not the only solution for all projects.

Tailwind blew in sweeping developers into two opposing camps. You have already picked your side, you’re either team pro Tailwind or you run far away. But what if I told you there is a third option?  This CSS framework should come into play only when the perfect type of project calls for gentle breezes. In this talk, with illustrative examples, we'll elaborate on how to improve the experience of working with Tailwind CSS using simple practices. I’ll challenge your preconceptions and answer the important question, for which cases Tailwind is the best solution or when it's better to choose an alternate CSS tool.

5 Best Practices for Preventing Chaos in Tailwind CSS

Nina Torgunakova

React Summit

React Summit 2024

Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.

Most developers closely follow the framework wars. So busy with these games, that we forget to check what new features HTML, CSS, and JavaScript offer us. Native modals, dynamic viewport units, and optional chaining are just some of the features you should use already! If you stopped following Web Platform development in 2015, it's time to refresh your knowledge. I will teach you to build applications tailored to 2024 and prepare you for the new Web Platform features that will appear in the coming years.

Webdevelopment Tailored for 2024

Andrzej Fricze

React Day Berlin

React Day Berlin 2023

Evitar Alus, a frontend engineer, shares a trick to improve search performance in React applications by optimizing the search algorithm and reducing DOM updates. CSS attribute selectors can be used for filtering and applying styles based on emoji values. A component called CSS Search can be created to improve search performance by hiding emojis that do not match the search query. Despite some performance drawbacks, this solution works significantly faster. Visit Evitar Alus' website or Twitter account for more of their work.

Working on emoji-picker-react I encountered a challenge - filtering the list of 1800 emojis triggered a significant delay due to re-renders.Let's learn how I fixed this only using CSS!

CSS Only* Search: Improve React Filtering Performance with CSS!

React Advanced 2023

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

React Summit 2023

CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

Building Pixel-Perfect UI Components Using CSS Variables

Sam Sycamore

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.

In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

React Advanced 2022

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.

Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.

Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️

Ankita Kulkarni

React Summit 2022

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.

Build a Design System with React and Tailwind CSS

Shruti Balasa

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

How to achieve layout composition in React

Travis Waith-Mair

React Finland

React Finland 2021

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

Rethinking CSS - Introducing Stylex

Naman Goel

JSNation Live

JSNation Live 2021

This Talk is about CSS techniques that can simplify web development and eliminate the need for JavaScript. It covers topics such as responsive typography, flexible font sizing, CSS math functions, scroll snapping, sticky elements, and CSS masonry layout. The speaker emphasizes the importance of understanding how sticky elements work and highlights the potential bugs that can occur. CSS Masonry layout is discussed as a native solution for creating masonry grids in the browser. Overall, CSS provides flexible solutions for web styling and is an exciting tool for developers.

CSS has evolved and grown immensely since it was first introduced back in 1996. There was a time back then when CSS was not even meant for doing layouts, but that time has long past. Today, web layouts are practically synonymous with CSS. In addition to that, CSS can now be used to build things that used to only be feasible with Javascript. This talk will showcase a few of such features and explain how to build them yourself. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CSS Can Do That Too

Chen Hui Jing

React Summit Remote Edition

React Summit Remote Edition 2021

The Workshop covers building a multi-user blogging app using Next.js, Amplify, and Tailwind. It focuses on core functionality like authentication, data storage, API access, and file storage. The workshop also explores server-side rendering (SSR) options and scalability using cloud providers like AWS. Topics include configuring Amplify CLI, creating AWS services, implementing GraphQL API and authorization, and generating dynamic pages with Next.js.

You'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.   <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#css