ReactJS Component Composition Pattern

Pretext just dropped, and I had to see it for myself. Built a live side-by-side: Pretext vs DOM reflow. 3 moving shapes, same text, real-time. Left: 60 FPS. Text flows perfectly around every shape. Right: ~15 FPS. Text lags. Shapes move, but the layout can't keep up. That's the problem. Every time the browser measures text, it freezes and recalculates the entire page. Pretext skips the DOM entirely, pure math, Canvas API, zero reflow. 15KB. Zero deps. By Cheng Lou. #pretext #javascript #frontend #webdev #react

Hot take. Tailwind is not a design system. It just looks like one. I used Tailwind on a real project. And for a while it felt great. Fast to write, consistent spacing, no context switching between files. Then someone new joined the team. They opened a component and saw a div with twenty utility classes stacked on it. And they had no idea what the design intent was. Was this a card? A hero section? A promotional banner? The classes told you what pixels were doing. Not what the thing was supposed to be. That is the problem nobody talks about with Tailwind. CSS with proper class names like .product-card or .hero-banner carries meaning. You read it and you understand the design decision. Tailwind gives you px-4 py-2 rounded-lg bg-white shadow-md and leaves you to figure out the rest. Over time that adds up. The codebase grows. Components multiply. And the design intent slowly disappears into a wall of utility classes that describe the output but never the thinking behind it. Tailwind is fast. I get why people love it. But speed without structure is just a different kind of mess. Anyways that's my two cents. Are you using Tailwind in production? Has the readability held up over time or are you starting to feel it? #TailwindCSS #Frontend #React #WebDevelopment #CSS #TechLead #SoftwareEngineering #Sydney

Sometimes I just like to play around with code and build fun, slightly nonsensical things. So when someone asked me to create a dynamic puzzle effect, I briefly considered the “sensible” route of using SVG… but then decided it was the perfect excuse to experiment with the new shape() function in CSS. With a bit of help from custom properties, it turned into something fully dynamic, responsive, and capable of holding real content like images or text. If you want to build one yourself, I walk through everything, from the very first Tab and Socket, to handling real content inside the pieces. Let’s Get Puzzled! 🧩 (on Frontend Masters) https://lnkd.in/dBPZ8XxF Go break it, tweak it, and make something weird with it. 😉

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

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

🚀 Excited to share two open-source projects I built using the Pretext library! Pretext is a powerful text-layout engine that avoids expensive DOM measurements by relying purely on arithmetic, enabling sub-millisecond layout performance. Here’s what I’ve been working on: 🔹Pretext Breaker (Text Arcade Game) A Breakout-style game where every brick is made of text. ⚡ Watch words shatter and dynamically reflow in real time at 60+ FPS — all computed off-DOM. It’s a fun, fast-paced canvas demo that highlights how efficient Pretext is for highly dynamic UIs. 🔹Headless Text Layout (JS Engine) A lightweight engine that separates text preparation from layout. 🎯 Prepare your text once, then quickly calculate line breaks and layout for any container size. Ideal for server-side rendering, canvas/SVG rendering, or virtual scrolling — anywhere you need layout without triggering browser reflows. 🔗 Get Involved Both projects are available on GitHub with source code and live demos. Feel free to ⭐ star the repos, try them out, and share feedback or contribute! Links GitHub • pretext-breaker → https://lnkd.in/dA_CbMtX • headless-textflow → https://lnkd.in/dqN5aA8g Live Demos • Pretext Breaker → https://lnkd.in/dWFMK7_8 • Headless Layout → https://lnkd.in/drdjX6tw 🙌 Huge thanks to the Pretext community for the inspiration. If you're into frontend performance or building fast UI systems, I’d love for you to check these out! #WebDevelopment #JavaScript #Performance #OpenSource #Frontend #Pretext #DevTools

Why your UI looks bad even if your code is correct 👇 Your code is working fine. Everything runs perfectly. But still… the UI doesn’t look good 😕 Here’s the simple reason: 1. Spacing is not right Too much space or too little space makes things look weird 2. Everything looks same Same font size, same style → nothing stands out 3. Alignment is off Buttons, text, cards not properly lined up = messy look 4. Colors are random Using different shades without thinking makes UI look unclean 5. Small details are missing Things like border radius, shadow, line spacing matter a lot Good UI is not just about code working It’s about how it *looks and feels* Even small changes can make a big difference — If your UI looks bad, don’t worry Every developer goes through this 🙂 Just focus on small improvements step by step #frontend #webdevelopment #ui #reactjs #coding

Honestly, I used to think frontend was just about making things look good. Buttons, cards, modals, animations — ship it, done. Until I actually started digging into why pages feel slow, and realized there's an entire layer of engineering most of us never talk about. One metric changed how I see frontend work completely — `LCP (Largest Contentful Paint)`. It measures how fast the biggest visible thing on your screen actually appears. Not the spinner. Not the skeleton. The real content. And if that number is above 2.5 seconds, Google quietly buries your page and your users quietly leave. What surprised me most is that LCP isn't even one number — it breaks into 4 sequential phases. Miss any one of them and you're slow, even if the rest is perfect. I put it all in the image below 👇 — the score zones, the phases, what kills each one, and a before/after on how the browser discovers your image. A few things that actually moved the needle for me: Your hero image URL should never live inside a JS bundle or a CSS background. The browser finds it too late. Put it in a real `<img>` tag, add `fetchpriority="high"`, and never touch `loading="lazy"` on anything above the fold. A CDN alone can drop your TTFB from 600ms to 45ms. That's not an exaggeration — the image shows the actual numbers. Frontend is not just UI. There's real engineering underneath it. The sooner we start thinking that way, the better we build. - What's something about frontend performance that caught you off guard when you first learned it? Read it in more details here - https://lnkd.in/dp6i8zTP #Frontend #WebPerformance #CoreWebVitals

One of the most valuable lessons I learned today 👇 Never let a component grow beyond 500 lines. Once it starts getting too big, it becomes harder to understand, debug, and maintain. The solution? Break it down into smaller, reusable components using the Atomic Design approach. Start thinking in levels: - Atoms → basic UI elements (buttons, inputs) - Molecules → small combinations of atoms - Organisms → more complex UI sections - Templates & Pages → complete layouts This approach keeps your code clean, scalable, and easy to manage. Good code isn’t just about making things work , it’s about making them maintainable and future-proof. #WebDevelopment #ReactJS #CleanCode #Frontend #SoftwareEngineering #AtomicDesign

It's good to see web text become liquid. Cheng Lou (creator of React Motion) recently dropped Pretext, a library that treats UI like physical material instead of rigid boxes, and I used the library to build this demo. Here's why this is hard: CSS wasn't built for this. Try to animate this many complex shapes and you force the browser to recalculate layout every frame, which will instantly melt your browser. Pretext bypasses that entirely. Text reacting to a physics engine in real-time, reflowing seamlessly, locked at 60 FPS. Excited to see what use cases devs come up with. Try and make the framerate drop, link in the first comment 👇