Mastering Dark Mode, CSS Container Queries + Shadcn Gets New Charts

Dive into React Compiler, ESLint's future, and why AI might not be the answer for modern web dev. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ [SitePoint logo](~/AAAHUQA~/RgRobkitP0UgOGU0ODQyZTlhN2RkYmQ3ZDcxN2NjMDFmYjcyNGRjMzNEFGh0dHBzOi8vc2l0ZXBvbnQuY29tVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) July 8th, 2024 | [Read Online](~/AAAHUQA~/RgRobkitP0TbaHR0cHM6Ly9iZXJyaW1hLmVvY2FtcGFpZ24xLmNvbS93ZWItdmVyc2lvbj9lcD0yJmxjPTg3MDdlZTg2LTUyZjAtMTFlZS1hZjUyLTRiNTM4MmJhM2I5NCZwPWE2Y2E5ZTBhLTM3YmQtMTFlZi1iNjU3LWIxODlmYjJlNTdhMSZwdD1jYW1wYWlnbiZ0PTE3MjA0MzU2Mjkmcz0zMDg0ZGE2ZGU2M2Q1NGYzYzkxODUxNWRkMmEyNzFhMjc5NzY5YTBhMzYxZWFhYjk0NzcyZmQ4NmU5NDU3MDdlVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) SitePoint Source Welcome, Developers! 👋 Today, we explore advanced dark mode implementation, container queries with legacy support, and stunning new open-source UI charts. We also dive into React Compiler's workings, ESLint's new roadmap, and a thoughtful piece on the current web development paradigm. 🚀 Let's dive in. From our Sponsor:🍦Vanilla ~/AAAHUQA~/RgRobkitP0UgZTJhZTg3NWI4ZWVhYWUyZTZiNjQ4MTQ4YmYxZjk0ZDdEGGh0dHBzOi8vdmFuaWxsYWFwcHMuY29tL1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~ ~/AAAHUQA~/RgRobkitP0UgMzZmODVkZjZkMzc2ZDEzMTMxZDM5ODc3NjgwOGFiZjlEmGh0dHBzOi8vbWwuc2l0ZXBvaW50LmNvbS9saW5rL2MvWVQweU16RXhOemMyTmprMk5UZzFOREkyT1RrMkptTTlhVEp5TUNabFBUQW1ZajB4TWpFeE5qUXdOVGs1Sm1ROVpqWnJOM1V6YWc9PS5RcndWOWk0QWI0a0RRVndLRnU4Sk1QUnFQVUNPZk50blNGREwtMXBNQU1vVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd🍦 A suite of apps to run your business. Say goodbye to support chaos with VanillaApps’ Inbox! 🎉 This free customer support tool organizes all your customer inquiries in one place, making it a breeze to manage and respond. Get your Inbox today and watch your customer satisfaction soar! [Start for free!](~/AAAHUQA~/RgRobkitP0UgZTJhZTg3NWI4ZWVhYWUyZTZiNjQ4MTQ4YmYxZjk0ZDdEGGh0dHBzOi8vdmFuaWxsYWFwcHMuY29tL1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) 🌓 Perfecting Dark Mode Brandur reveals often-overlooked insights for implementing dark mode. He advocates for a tri-state toggle, provides solutions for eliminating theme flicker, and covers cross-tab synchronization and real-time OS theme responses. You’ll also explore dual-theme syntax highlighting with Shiki. [By Brandur Leach →](~/AAAHUQA~/RgRobkitP0UgNzcxOGVjYTMxNDczMmU4NjQ5OWIzMmIwZGEwYjBlNzNELWh0dHBzOi8vYnJhbmR1ci5vcmcvZnJhZ21lbnRzL2RhcmstbW9kZS1ub3Rlc1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) 📦 Using Container Queries (While Supporting Old-browsers) Get rid of viewport-based limitations and say hello to component-level responsiveness! Philip Walton brings attention to the under-use of CSS container queries and suggests a pragmatic approach to use them all while handling limitations like container query units and nested containers. [By Philip Walton →](~/AAAHUQA~/RgRobkitP0UgN2JmOGFjYzYxZDNiOGJkNWJmMTlkNzBiZDdjYzIyNTFENWh0dHBzOi8vd2ViLmRldi9ibG9nL2hvdy10by11c2UtY29udGFpbmVyLXF1ZXJpZXMtbm93VwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) 🎨 Shadcn UI - Introducing Charts Shadcn UI introduces new, ready-to-use chart components. Open-source and beautiful as always. ~/AAAHUQA~/RgRobkitP0UgNDY0OGRmNWYzMWM0NjIzMTg0YmY2YzY1NDYzYTkwZDZEHGh0dHBzOi8vdWkuc2hhZGNuLmNvbS9jaGFydHNXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~ [By Shadcn UI →](~/AAAHUQA~/RgRobkitP0UgNDY0OGRmNWYzMWM0NjIzMTg0YmY2YzY1NDYzYTkwZDZEHGh0dHBzOi8vdWkuc2hhZGNuLmNvbS9jaGFydHNXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) ⚛️ Understanding React Compiler Manually optimizing component re-renders has long been a developer pain point, but the new React Compiler automates this process, boosting performance by rewriting code. From automatic memoization to granular caching, React Compiler is set to transform how we think about and implement performance optimization in React applications. [By Tony Alicea →](~/AAAHUQA~/RgRobkitP0UgODE3YjI5NThiNGFlNmRkNGZiNGZjYTIzOTNkOTk1NjVEOWh0dHBzOi8vdG9ueWFsaWNlYS5kZXYvYmxvZy91bmRlcnN0YW5kaW5nLXJlYWN0LWNvbXBpbGVyL1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) 🔮 What’s Coming Next for ESLint? From the creator of ESLint himself, Nicholas provides an exciting roadmap. With upcoming language plugins for JSON and Markdown, you'll soon be able to use ESLint on non-JS languages too. Future plans include a complete rewrite for a more flexible, async-friendly core, a comprehensive API, a new CLI, and more. [By Nicholas Zakas →](~/AAAHUQA~/RgRobkitP0UgNjQxMDNmNTBiOTlhNTBkNGZhMDk5MGJkZWI0ZmQ5ZGZEPWh0dHBzOi8vZXNsaW50Lm9yZy9ibG9nLzIwMjQvMDcvd2hhdHMtY29taW5nLW5leHQtZm9yLWVzbGludC9XBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) 🌐 The Future of Web Dev: Beyond AI Assistants As React and Single-Page-Apps face increasing criticism over performance, a paradigm shift is imminent. Developers, users, and regulatory bodies are starting to voice their frustrations with the status quo, paving the way for new approaches. Excitingly, a radically different landscape is emerging, one where AI wouldn't be as instrumental due to lack of training data for the new web. [By Baldur Bjarnason →](~/AAAHUQA~/RgRobkitP0UgMmMwNTE3MTE0NTIyYmUyMDZlZTE5NGIxYjZiMjgzYTdEMWh0dHBzOi8vd3d3LmJhbGR1cmJqYXJuYXNvbi5jb20vMjAyNC9uZXctd2ViLWRldi9XBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~) 🧰 The Toolbox Tools and products we're excited about today: CustomJS CustomJS is a code-first automation platform that allows developers to seamlessly create and integrate custom JavaScript logic into any system. Whether it's sending emails, generating PDFs, or updating data fields in a CRM system, CustomJS extends your tools with ease. [Learn more →](~/AAAHUQA~/RgRobkitP0UgMjc4ODY1MGM4OGI2ZmE5NmZmNTNjNTRiNTg4OWVmNWNEKmh0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS9wb3N0cy9jdXN0b21qc1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) Git2Log Git2Log transforms your Git commits into beautiful, customer-friendly changelogs in minutes. Keep your users in the loop without breaking a sweat! [Learn more →](~/AAAHUQA~/RgRobkitP0UgNmVjZDY0YTA2M2I2YWMzODllYTFhYjY0N2Y1Y2YzYjFEKWh0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS9wb3N0cy9naXQybG9nVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) Calen Vercel for long-running tasks. Seamlessly manage background processes and recurring jobs beyond typical serverless limits. [Learn more →](~/AAAHUQA~/RgRobkitP0UgYWRmOTcyZjdmZTM1OWJkYmQ3NzFiNGIxYTZmZTlkMzJEJ2h0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS9wb3N0cy9jYWxlblcFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) ~/AAAHUQA~/RgRobkitP0UgMzZmODVkZjZkMzc2ZDEzMTMxZDM5ODc3NjgwOGFiZjlEmGh0dHBzOi8vbWwuc2l0ZXBvaW50LmNvbS9saW5rL2MvWVQweU16RXhOemMyTmprMk5UZzFOREkyT1RrMkptTTlhVEp5TUNabFBUQW1ZajB4TWpFeE5qUXdOVGs1Sm1ROVpqWnJOM1V6YWc9PS5RcndWOWk0QWI0a0RRVndLRnU4Sk1QUnFQVUNPZk50blNGREwtMXBNQU1vVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd🍦 A suite of apps to run your business. Say goodbye to support chaos with VanillaApps’ Inbox! 🎉 This free customer support tool organizes all your customer inquiries in one place, making it a breeze to manage and respond. Get your Inbox today and watch your customer satisfaction soar! [Start for free! →](~/AAAHUQA~/RgRobkitP0UgZTJhZTg3NWI4ZWVhYWUyZTZiNjQ4MTQ4YmYxZjk0ZDdEGGh0dHBzOi8vdmFuaWxsYWFwcHMuY29tL1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) Come say hi! SitePoint’s community is a place where you can come to talk tech, development, and design. Join us today and get involved with other members who share your interests in tech! [Join now →](~/AAAHUQA~/RgRobkitP0UgMjY1M2ZiMGRlOWY4Nzc4ZDY0MTY2NWJmMGI3OTQyMGFEJGh0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5L1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) That's a wrap for today! Let us know how you felt about today's newsletter. ~/AAAHUQA~/RgRobkitP0UgMTM4ZjY0YTM4MjVjYmYyZThmZmYxMjMxYmMxM2YzMWNEWWh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1ob3dfZGlkX3lvdV9mZWVsPTAxSFdUSE40WUtXVzVGQkhOQ0NDVllDSFYxVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd ~/AAAHUQA~/RgRobkitP0UgYWNmMzg2N2Y2NDc0ZTY2MTA0NjVkNGY0OWUzZjVhZWNEWWh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1ob3dfZGlkX3lvdV9mZWVsPTAxSFdUSE40WUtQSkE4Uk44QUJZV1QzNkNXVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd ~/AAAHUQA~/RgRobkitP0UgOTk5ZmRhNzE3ZDkyNGRiNjg2MjNlN2QwYWVjNTRlZGREY2h0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1ob3dfZGlkX3lvdV9mZWVsPTEzNjg3YjBhLTMwZmQtNDQxNC1iZDFlLTRkNjQ1ZGIzYTkwMVcFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~ What do you want to see more of? ~/AAAHUQA~/RgRobkitP0UgOTI1NzQ3NGZjMjBjZDFkZjQyYTkyM2NjZWM1Y2M4MDFEXmh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1zZWVfbW9yZV9vZj0wMjQ1MWQ0ZC05Y2NhLTQzNmMtYmFhOS0zYzAzNmM4ODZhMGRXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~ ~/AAAHUQA~/RgRobkitP0UgODVmMTc2YTkyZjRmZTFkMzYwMjdiNzQxZWI5OGMzNTBEXmh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1zZWVfbW9yZV9vZj1iZGYzZDg5ZS0xYmU1LTRjNTctYjhmNy1iNzljM2RiYjkyMmVXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~ ~/AAAHUQA~/RgRobkitP0UgYmJlMGU5OTM2NzMzNTIwMTI5ODQ5ZDQ1MTVlYTc0MjREXmh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1zZWVfbW9yZV9vZj00ZGYzYzQwZC1lMzhhLTQ0OWYtOGJmMi1kYWEwMDI1YTFkMWVXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~ ~/AAAHUQA~/RgRobkitP0UgMDVhZDVlMDRhM2JiNWFkM2Q4ZTUyMjljMDVkMDRhNGZEXmh0dHBzOi8vZm9ybS50eXBlZm9ybS5jb20vdG8vdTVEQ3B0QkcjYW5zd2Vycy1zZWVfbW9yZV9vZj1hYTAzMzMxNi0zM2I4LTQzOWEtYTMwZi1hOTI1MGU0YjJhYjNXBXNwY2V1QgpmdK3Di2ZwAS7PUht0cmlzdHJhbWJhbGR3aW45MUBnbWFpbC5jb21YBAAAZB0~ 71 Balmain Street Cremorne Vic 3121 Australia Your received this email because you signed up on our website or made purchase from us. [facebook social link](~/AAAHUQA~/RgRobkitP0UgMDUyNzUwNTRjMzIxMTU1M2QwMWQ5Nzc3NzRjNWU0YWZEI2h0dHBzOi8vd3d3LmZhY2Vib29rLmNvbS9zaXRlcG9pbnQvVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd) [x social link](~/AAAHUQA~/RgRobkitP0UgMjQ5YmYwODc5YTU0ODZiNjc3ZDgzZjkxN2NjNTMzMzNEJGh0dHBzOi8vdHdpdHRlci5jb20vc2l0ZXBvaW50ZG90Y29tL1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) [linkedin social link](~/AAAHUQA~/RgRobkitP0UgMDFiOTBiNTU3Nzk4MzQ3YTNkMzgxMDEyZGU3Yzk4ZjFEJ2h0dHBzOi8vbGlua2VkaW4uY29tL2NvbXBhbnkvc2l0ZXBvaW50L1cFc3BjZXVCCmZ0rcOLZnABLs9SG3RyaXN0cmFtYmFsZHdpbjkxQGdtYWlsLmNvbVgEAABkHQ~~) [Unsubscribe from this list](~/AAAHUQA~/RgRobkitP4QWAWh0dHBzOi8vYmVycmltYS5lb2NhbXBhaWduMS5jb20vdW5zdWJzY3JpYmU_ZXA9MiZsPWNhYTY1ODU4LTRhYzYtMTFlZS04MDE2LTRkY2U5YmEwOGU2ZCZsYz04NzA3ZWU4Ni01MmYwLTExZWUtYWY1Mi00YjUzODJiYTNiOTQmcD1hNmNhOWUwYS0zN2JkLTExZWYtYjY1Ny1iMTg5ZmIyZTU3YTEmcHQ9Y2FtcGFpZ24mcHY9NCZzcGE9MTcyMDQzMjg0NyZ0PTE3MjA0MzU2Mjkmcz03OWE3MjM1YWJlYWU1NjBlMDE3YTI2Zjg3MzU2NmZlZDI5NzJkYmM4M2Y1YzNmNjQ0YTM0MjZhOTQxNDdlMmMwVwVzcGNldUIKZnStw4tmcAEuz1IbdHJpc3RyYW1iYWxkd2luOTFAZ21haWwuY29tWAQAAGQd)