Everyone is experimenting with this new text engine. Here is what it actually looks like in a real UI. Text reflows around moving elements in real time. Smooth, no layout breaks. I built an interactive demo 👇 https://lnkd.in/ezshxrKB Built with Pretext by Cheng Lou: https://lnkd.in/eex7dUWH Would you use this in production? #Frontend #JavaScript #WebDev #BuildInPublic #Pretext

𝗧𝗵𝗮𝘁 𝗲𝘅𝘁𝗿𝗮 <𝗱𝗶𝘃> 𝗰𝗼𝗺𝗲𝘀 𝘄𝗶𝘁𝗵 𝗮 𝗰𝗼𝘀𝘁 𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝘄𝗵𝗲𝗻 𝘄𝗲 𝘂𝘀𝗲 <𝗱𝗶𝘃> 𝗶𝗻𝘀𝘁𝗲𝗮𝗱 𝗼𝗳 <> </>? <𝗱𝗶𝘃></𝗱𝗶𝘃> creates a real DOM element. <> </> doesn’t render anything in the DOM. That means:  • 𝗠𝗼𝗿𝗲 𝗺𝗲𝗺𝗼𝗿𝘆 𝘂𝘀𝗮𝗴𝗲  • 𝗠𝗼𝗿𝗲 𝘄𝗼𝗿𝗸 𝗳𝗼𝗿 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗮𝗻𝗱 𝗹𝗮𝘆𝗼𝘂𝘁  • 𝗛𝗮𝗿𝗱𝗲𝗿 𝘁𝗼 𝗱𝗲𝗯𝘂𝗴 𝗮𝗻𝗱 𝗶𝗻𝘀𝗽𝗲𝗰𝘁 Fragment avoids all of that by keeping the DOM clean. div is still needed for styling, layout, events, refs, CSS targeting. Are there other differences? #reactjs #javascript #frontend #webdevelopment

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. 😉

𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗱𝗼𝗲𝘀𝗻'𝘁 𝘀𝘁𝗼𝗽 𝘀𝗰𝗮𝗹𝗶𝗻𝗴. 𝗬𝗼𝘂𝗿 𝗮𝗽𝗽𝗿𝗼𝗮𝗰𝗵 𝘁𝗼 𝗶𝘁 𝗱𝗼𝗲𝘀. After using it across multiple React and Next.js projects, I've seen the same pattern: Tailwind feels clean early on, then somewhere around the third month the classnames get out of hand and people blame the tool. The real issue is almost never Tailwind itself. It's the absence of conventions around it. A few things that actually make it scale: - 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗮𝗯𝘀𝘁𝗿𝗮𝗰𝘁𝗶𝗼𝗻 𝗶𝘀 𝗻𝗼𝗻-𝗻𝗲𝗴𝗼𝘁𝗶𝗮𝗯𝗹𝗲. If the same div with 12 classes appears in 4 places, that's a component waiting to exist. Tailwind doesn't enforce this. That is up to you to do it. - 𝗰𝗻() 𝘄𝗶𝘁𝗵 𝗰𝗹𝘀𝘅 𝗼𝗿 𝘁𝗮𝗶𝗹𝘄𝗶𝗻𝗱-𝗺𝗲𝗿𝗴𝗲 𝗰𝗵𝗮𝗻𝗴𝗲𝘀 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴. Conditional classes written inline turn into unreadable noise fast. Centralizing that logic keeps components clean. - Remember, 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝘃𝟰 𝗺𝗼𝘃𝗲𝗱 𝘆𝗼𝘂𝗿 𝗱𝗲𝘀𝗶𝗴𝗻 𝘀𝘆𝘀𝘁𝗲𝗺 𝗯𝗮𝗰𝗸 𝗶𝗻𝘁𝗼 𝗖𝗦𝗦. Use it properly. No more tailwind.config.js file. Your tokens now live in @theme inside your CSS file. Custom colors, spacing, and font sizes defined there generate utility classes automatically. The moment you start writing arbitrary values like w-[372px] everywhere, you've lost the point entirely. - 𝗦𝗲𝗽𝗮𝗿𝗮𝘁𝗲 𝗹𝗮𝘆𝗼𝘂𝘁 𝗰𝗹𝗮𝘀𝘀𝗲𝘀 𝗳𝗿𝗼𝗺 𝘀𝘁𝘆𝗹𝗲 𝗰𝗹𝗮𝘀𝘀𝗲𝘀 𝘃𝗶𝘀𝘂𝗮𝗹𝗹𝘆. Some teams adopt a loose ordering convention... positioning first, then sizing, then colors. It sounds minor until you're reading someone else's component at 11pm. Tailwind gives you speed. Convention gives you scale. You need both. The devs who say Tailwind doesn't scale are usually the ones who never built the guardrails. 💬 What conventions does your team use? #TailwindCSS #React #Frontend #WebDev #NextJS #TypeScript #SoftwareDevelopment

𝐇𝐓𝐌𝐋 𝐟𝐢𝐠𝐮𝐫𝐞𝐝 𝐭𝐡𝐢𝐬 𝐨𝐮𝐭 𝐝𝐞𝐜𝐚𝐝𝐞𝐬 𝐚𝐠𝐨. A <𝐬𝐞𝐥𝐞𝐜𝐭> doesn't have a prop called options. 𝐘𝐨𝐮 𝐜𝐨𝐦𝐩𝐨𝐬𝐞 <𝐨𝐩𝐭𝐢𝐨𝐧> elements inside it. A <𝐭𝐚𝐛𝐥𝐞> doesn't ask you to pass rows as a config object. You write <𝐭𝐫> 𝐚𝐧𝐝 <𝐭𝐝> yourself. The 𝐂𝐨𝐦𝐩𝐨𝐮𝐧𝐝 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭 pattern 𝐛𝐫𝐢𝐧𝐠𝐬 this 𝐬𝐚𝐦𝐞 𝐭𝐡𝐢𝐧𝐤𝐢𝐧𝐠 𝐭𝐨 𝐑𝐞𝐚𝐜𝐭. 𝐈𝐧𝐬𝐭𝐞𝐚𝐝 𝐨𝐟 one component 𝐚𝐜𝐜𝐞𝐩𝐭𝐢𝐧𝐠 𝐞𝐯𝐞𝐫𝐲 𝐜𝐨𝐧𝐟𝐢𝐠𝐮𝐫𝐚𝐭𝐢𝐨𝐧 𝐚𝐬 𝐩𝐫𝐨𝐩𝐬, you split it 𝐢𝐧𝐭𝐨 𝐧𝐚𝐦𝐞𝐝 𝐩𝐢𝐞𝐜𝐞𝐬 that compose together. A <Section.Title> A <Section.Action> A <Section.Content> 𝐄𝐚𝐜𝐡 𝐩𝐢𝐞𝐜𝐞 is independent and 𝐜𝐮𝐬𝐭𝐨𝐦𝐢𝐳𝐚𝐛𝐥𝐞 without touching the others. 𝐂𝐨𝐧𝐭𝐞𝐱𝐭 𝐢𝐬 𝐨𝐩𝐭𝐢𝐨𝐧𝐚𝐥. For simple cases, 𝐜𝐨𝐦𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧 𝐚𝐥𝐨𝐧𝐞 𝐢𝐬 𝐞𝐧𝐨𝐮𝐠𝐡. You only reach for context when children need to share state with each other. It fits naturally for components like the following: - A <Modal> with a header, body and footer where each part is placed and styled independently per usage - A <Card> with a header, media, body and footer where consumers compose only the parts they need - A <Tabs> with a tab list, individual triggers and content panels each controlled independently If you find yourself adding props just to make a component fit a new screen that's usually a good signal. I posted a real example of this last week where we refactored a shared button component using this pattern. Link in the comments. Patterns don't make code better. Knowing when to use them does. #ReactJS #Frontend #DesignPatterns #CleanCode #ComponentDesign

💡 How do you implement dark mode in your projects? I recently built a simple dark/light mode toggle using CSS variables and JavaScript in my portfolio. In this carousel, I’m sharing the exact steps I used. Sometimes, small features like this make a huge difference in user experience. 🔗 Check out my portfolio here: https://lnkd.in/d5PJ_nj8 Curious to know 👇 How do you handle theming in your projects? #WebDevelopment #JavaScript #CSS #Frontend #UIUX #DevCommunity #Jameskamz

https://pretextjs.dev A new frontend library called Pretext (March 2026) is trying to change how we handle text layout. Current approach: Render → Measure → Re-render Pretext approach: Calculate → Render once Instead of using DOM measurements like getBoundingClientRect(), it lets you: • Predict text size before rendering • Avoid layout shifts • Reduce re-renders Useful for: • Chat/message UIs • Infinite scroll lists • Dynamic cards • Multilingual layouts It works without the DOM and can run on the server as well. Still new, but interesting direction for performance-focused UIs. #frontend #javascript #reactjs #webperformance

I was writing separate font sizes for every screen size. Three, sometimes four media queries just for text. Then I found out CSS clamp() exists and felt a bit stupid, honestly. You give it a minimum, a preferred size, and a maximum. The browser figures out the rest based on screen width. Clean. No breakpoints needed. It's one of those things that once you know it, you can't go back. Broke it all down in the carousel, real examples included. If this helped you, repost it. Someone on your feed is definitely still doing it the hard way. #CSS #WebDev #Frontend #ResponsiveDesign #CSSClamp #LearnToCode #WebDesign #JavaScript #HTML5 #TechTips #CSSAnimation #UIDesign #Coding #100DaysOfCode #ProgrammerHumor 

Understanding CSS Units Made Simple Choosing the right CSS unit can make or break your layout. Here’s a quick breakdown: 📌 px — Fixed and precise 📌 % — Relative to parent 📌 rem — Based on root font size 📌 em — Relative to parent font 📌 vh/vw — Based on viewport size 💡 Pro Tip: Use px for precision, rem/em for scalability, and vh/vw for responsive layouts. Save this for later and level up your CSS game 🚀 #WebDevelopment #CSS #Frontend #Coding #100DaysOfCode #DevTips

Most websites feel static. Scroll… nothing happens. No feedback. No motion. No life. So developers try to fix it: ❌ Add one library for scroll ❌ Another for parallax ❌ Another for counters ❌ Another for text effects Now the site is heavy and messy. There should be a simpler way. ✅ One setup ✅ Multiple effects ✅ Lightweight ✅ Easy to use That’s exactly what I built 👇 👉 MotionFlow.dev Turn static websites into smooth experiences — without complexity. #motionflow #webdev #frontend #buildinpublic #javascript