2025 10 03 14 EVYATAR ALUSH CONGRESO REACT ALICANTE The international React js conference in Spai
summary
An emoji picker with ~1,850 items and ~450,000 weekly downloads goes from sluggish to snappy by replacing JavaScript filtering with CSS-only search using attribute selectors and the new :has selector plus CSS counters and nesting to hide empty categories and show result counts. Styling moves into a package-oriented solution called Flare Up. A separate virtualization branch renders only visible items for extreme throttling, cutting perceived input lag even at 6× or 20× slowdowns.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:56Developer tools & OSS challenges
- 3:02Emoji picker search performance
- 5:32Virtualization difficulties
- 7:20CSS-only search start
- 9:09CSS search component
- 11:16Hiding non-matching emojis
- 12:44Matching emojis with selectors
- 14:52Removing empty categories
- 16:40Disabling nav during search
- 18:32Counting search results
- 21:22Positioning results counter
- 22:27CSS nesting benefits
- 23:31OSS styling challenges
- 24:34Introducing Flare Up
- 26:42Styling counter with Flare Up
- 28:09Virtualization solution
- 29:13Live demo
- 30:59Why CSS search
