Are you still using media queries based on the viewport for everything? 📱 Have you ever heard of 👉 Container Queries in #CSS? Instead of making components respond to the screen size… you make them respond to their own container size. That means a component adapts based on where it lives — not the device it’s viewed on. This unlocks: ♻️ Truly reusable components. 🧼 Cleaner responsive design. 🚫 Less dependency on global breakpoints. It’s a small shift in mindset, but a big improvement in how we build UI.

DARK mode !!! yea right 🙃 Most dark modes are an afterthought. A prefers-color-scheme media query slapped on at the end. Inverted colours that clash. Text that's suddenly unreadable. I wrote about how to do it properly — and built the tooling to make it effortless. Dark Mode Done Right is now live on my blog at gwan.dev. 👇 In the article I break down: → Why most dark modes fail at the token level — not the component level → The CSS custom property architecture that makes light and dark truly independent, not just inverted → How GWAN separates --background, --surface, --surface-raised, and --surface-overlay so your UI has actual depth in both modes → Why color-scheme matters and what happens when you get it wrong → The pattern that makes every single GWAN component adapt automatically — zero conditional class logic in your components But here's the part I'm most proud of: You don't have to figure this out manually anymore. GWAN's Theme Explorer lets you configure your entire light AND dark token palette visually — tweak colours, see every component update in real time, then copy one block of CSS into your globals.css. That's it. Your entire brand, in both modes, in minutes. 🎨 Try the Theme Explorer: https://gwan.dev/themes 📖 Read the full article: https://lnkd.in/gh67_-6V 📦 npm install gwan-design-system Dark mode shouldn't be a separate design exercise. It should be a first-class output of your token system. GWAN makes that the default. Would love to hear how your team currently handles dark mode — drop it in the comments. 👇 #DarkMode #ReactJS #NextJS #TailwindCSS #DesignSystem #OpenSource #FrontendDevelopment #UIDesign #TypeScript #WebDevelopment #DesignTokens

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟲𝟮: 𝗪𝗵𝘆 𝗗𝗢𝗠 𝗨𝗽𝗱𝗮𝘁𝗲𝘀 𝗔𝗿𝗲 𝗮 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 (𝗔𝗻𝗱 𝗛𝗼𝘄 𝗥𝗲𝗮𝗰𝘁 𝗧𝗵𝗶𝗻𝗸𝘀 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁𝗹𝘆) Updating UI looks simple… until it isn’t. 🔹 𝗛𝗼𝘄 𝗨𝗜 𝗨𝗽𝗱𝗮𝘁𝗲𝘀 𝗪𝗼𝗿𝗸 (𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗥𝗲𝗮𝗰𝘁) • We directly update the DOM • We decide what to change and how Example: document.getElementById("title").innerText = "Hello" 🔹 𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 • DOM operations are relatively expensive • You must track what changed manually • Easy to make mistakes • Becomes complex as UI grows 🔹 𝗪𝗵𝗮𝘁 𝗺𝗮𝗸𝗲𝘀 𝗶𝘁 𝗵𝗮𝗿𝗱 • UI = multiple states + frequent updates • Small changes can affect many elements • Manual DOM handling doesn’t scale well 🔹 𝗪𝗵𝗮𝘁 𝗥𝗲𝗮𝗰𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝘀 • You don’t update DOM directly • You describe what UI should look like • React figures out the most efficient way to update 🔹 𝗞𝗲𝘆 𝗜𝗱𝗲𝗮 • Shift from “How to update UI” • To “What should UI look like” 🔹 𝗧𝗵𝗲 𝗠𝗶𝘀𝘀𝗶𝗻𝗴 𝗣𝗶𝗲𝗰𝗲 👉 But how does React know what actually changed? 👉 This is where Virtual DOM comes in 👉 React creates a representation of UI and compares it before updating the real DOM 🔹 𝗠𝗼𝘀𝘁 𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗜𝗻𝘀𝗶𝗴𝗵𝘁 • Problem is NOT creating UI • Problem is updating it efficiently 💬 GitHub link in comments. #JavaScript #React #Frontend #Day62 #100DaysOfCode

𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘃𝘀 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗛𝗼𝗼𝗸 𝗮𝘁 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗶𝗺𝗲 React gives developers powerful hooks to manage side effects, but understanding when each hook runs can make a significant difference in UI performance and user experience. Two commonly misunderstood hooks are: 🔹 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁() useEffect runs after the browser has painted the UI. This makes it the right choice for:  • API requests  • Event listeners  • Subscriptions  • Logging  • Updating external systems Because it runs after paint, it does not block rendering, helping keep your application fast and responsive. 🔹 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁() useLayoutEffect runs immediately after the DOM updates but before the browser paints the screen. This makes it useful for:  • Reading element dimensions  • Measuring layout  • Scroll position adjustments  • Preventing visual flicker  • Synchronizing DOM changes before display Since it runs before paint, users never see intermediate layout changes. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 Using the wrong hook can lead to: ❌ Layout shifts ❌ Flickering UI ❌ Incorrect measurements ❌ Less predictable rendering behavior Choosing the correct hook leads to: ✅ Smoother interfaces ✅ Better visual stability ✅ More predictable components 𝗦𝗶𝗺𝗽𝗹𝗲 𝗿𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯 Use useEffect → for most side effects Use useLayoutEffect → when layout or visual updates must happen before paint Small React details like this often separate working code from polished frontend engineering. #React #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering

Modern web performance challenges are not always rooted in inefficient code, but often in the underlying browser architecture. Cheng Lou has recently explored an alternative approach to UI rendering that questions long-standing assumptions in frontend development. In the current model, every UI update passes through a sequence of steps: • DOM updates • Layout recalculation (reflow) • Paint and compositing This pipeline operates on the main thread and can introduce latency, particularly in complex applications where frequent updates are required. An emerging experimental direction proposes: • Reducing or eliminating dependency on the DOM • Avoiding traditional CSS-based layout systems • Implementing a custom rendering layer using TypeScript • Drawing UI elements directly, similar to canvas or GPU-driven approaches The potential advantages include: • Improved rendering performance • Greater control over layout and updates • More predictable behavior under heavy UI workloads However, this approach also introduces trade-offs: • Increased implementation complexity • Limited ecosystem and tooling support • Challenges related to accessibility and search engine optimization This line of exploration does not replace existing frameworks such as React, but it highlights an important shift in thinking—from optimizing within browser constraints to re-evaluating those constraints altogether. As frontend systems continue to evolve, understanding these foundational trade-offs will be critical in making informed architectural decisions. #Frontend #WebDevelopment #React #JavaScript #WebPerformance #SystemDesign

Not all CSS properties are animatable, which can be frustrating when building smooth UI interactions. Isaac Pavon walks you through how to turn “non-animatable” problems into flexible, performant solutions. 👇 https://lnkd.in/eNyXqERf #CSS #Frontend #WebDevelopment #UIEngineering

Sometimes the UI looks fine. But it feels slow. That’s usually not design. That’s JavaScript doing too much. Common issues I see: • Large components doing everything • Too many unnecessary re-renders • Blocking work on the main thread UI is not just visuals. It’s behavior. If it doesn’t feel smooth, users notice immediately. How to fix it: • Break large components into smaller ones • Memoize expensive renders with "React.memo", "useMemo", and "useCallback" • Move heavy tasks off the main thread • Lazy load non-critical components • Measure performance before optimizing A fast UI feels better, performs better, and keeps users engaged.

Messy UI layouts can break the user experience. One of the most common issues developers face is Content Overflow. In this quick tutorial, I’ve explained: ✅ What is CSS Overflow? ✅ How to use overflow: hidden; to keep layouts clean. ✅ Implementing overflow: scroll; for better accessibility. Perfect for beginners and junior developers looking to polish their CSS skills! #WebDevelopment #CSS #FrontendDeveloper #CodingTips #TechTutorial 

💡 Tailwind CSS tip that improved my workflow: Use reusable class patterns for consistent UI. Example: Instead of rewriting styles repeatedly, create reusable components. Benefits: • Faster development • Cleaner code • Consistent design • Easier maintenance Tailwind has really improved my UI productivity. What’s your favorite Tailwind feature? #TailwindCSS #FrontendDeveloper #ReactJS #WebDevelopment

Came across this article that explains why premium UIs like Linear and Stripe feel different — and it comes down to one decision most devs never consciously make. They never use pure neutrals. Instead of #F8F8F8 → they use #F5F7FF (white + a trace of brand blue) Instead of black shadows → brand color at low opacity Instead of flat grey text → grey that leans warm or cool The brand color doesn't sit on top of the design. It runs through it. Small shift. Big difference in how "premium" a UI feels. #frontend #css #uidesign #webdevelopment