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

🚀 𝗙𝗶𝘅𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗧𝗮𝗯𝗹𝗲 𝗟𝗮𝗴 𝗪𝗵𝗲𝗻 𝗨𝘀𝗲𝗿𝘀 𝗦𝗲𝗹𝗲𝗰𝘁 𝗠𝘂𝗹𝘁𝗶𝗽𝗹𝗲 𝗥𝗼𝘄𝘀 Recently worked on a performance issue where the React Table UI started lagging whenever users selected multiple rows. As the number of selected rows increased, the table became slow and less responsive. 🔍 𝗥𝗼𝗼𝘁 𝗖𝗮𝘂𝘀𝗲: Unnecessary re-renders of rows and table components Expensive state updates on every selection change Repeated calculations during row selection 💡 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗲𝗱: Optimized state management for row selection Used useMemo and useCallback to prevent redundant renders Applied component memoization for better rendering control Ensured only affected rows updated instead of the full table refresh ✅ 𝗥𝗲𝘀𝘂𝗹𝘁: Smooth multi-row selection Faster UI response time Better scalability for large datasets Improved overall user experience 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗶𝘀 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗮𝗯𝗼𝘂𝘁 𝘀𝗽𝗲𝗲𝗱 — 𝗶𝘁’𝘀 𝗮𝗯𝗼𝘂𝘁 𝗰𝗿𝗲𝗮𝘁𝗶𝗻𝗴 𝗮 𝘀𝗲𝗮𝗺𝗹𝗲𝘀𝘀 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝗳𝗼𝗿 𝘂𝘀𝗲𝗿𝘀. ⚡ #ReactJS #FrontendDevelopment #PerformanceOptimization #JavaScript #WebDevelopment #ReactTable #UIUX #CodingJourney

#FrontendFridays - Loading to Success Button This week, I built a simple yet practical UI interaction that transitions a button from a loading state to a success state. This pattern is commonly used in real-world scenarios like form submissions and API calls to provide clear user feedback. Key highlights: • Loading spinner with disabled state • Smooth transition to success feedback • Auto reset after completion • Lightweight and reusable component Live Demo: https://lnkd.in/gZ2jgKYy Continuing to explore small UI interactions that improve user experience with minimal code. #FrontendFridays #FrontendDevelopment #WebDevelopment #UIUX #JavaScript #CSS #HTML

Stop building "static" components. Build systems. 🏗️ Lately, I’ve been focusing on making my UI components more reusable and scalable. Instead of hardcoding values, I’m leaning into Tailwind Css, Next Js. My top 3 rules for a great UI component: 1️⃣ Consistency: Does it match the design system? 2️⃣ Performance: Is it bloated with unnecessary div nesting? 3️⃣ Empathy: Is it accessible for screen readers? #FrontEndDevelopment #ReactJS #CleanCode #WebDev

Most people think UI development is slow, messy, and full of compromises It doesn’t have to be Here’s a combo that completely changed how I build interfaces: ⚛️ React 🎨 Tailwind CSS 🧩 shadcn/ui This stack is not just about building fast—it's about building clean, scalable, and beautiful UIs without fighting your code Why it works so well: Tailwind CSS → utility-first, no more context switching between files shadcn/ui → real components you own (not a black box library) React → flexible architecture to scale anything 👉 The real power? You’re not installing a heavy UI framework You’re composing your own design system No more: ❌ overriding endless CSS ❌ fighting component libraries ❌ inconsistent design Instead: ✅ full control over UI ✅ consistent, reusable components ✅ modern, clean design out of the box This is how a modern frontend should feel: fast, flexible, and actually enjoyable If you’re still stuck with bloated UI libraries… it might be time to switch What’s your go-to UI stack right now? #ReactJS #TailwindCSS #shadcn #FrontendDevelopment #UIUX #WebDevelopment #JavaScript #DesignSystems #CleanCode #DeveloperExperience #Programming #DevCommunity

Progressive enhancement is having a quiet comeback — and HTML-first frameworks are a big reason why. Tools like **HTMX** and **Astro** make it easier to start with fast, accessible, server-rendered HTML and then layer in interactivity only where it actually adds value. Why this matters: - **Faster pages**: less JavaScript shipped to the browser - **Better resilience**: core functionality works even if JS fails - **Improved accessibility**: semantic HTML does more of the heavy lifting - **Simpler architecture**: fewer client-side state and hydration headaches What I like about this approach is the mindset shift: Instead of asking *“How do I build this as a fully client-rendered app?”* you ask *“What is the simplest HTML-first version, and where does interactivity truly belong?”* - **HTMX** brings dynamic behavior directly into HTML with server-driven UI updates - **Astro** lets you ship mostly static HTML and hydrate only the interactive islands It’s not about rejecting JavaScript. It’s about being more intentional with it. For many products, the best UX doesn’t come from shipping the most JS — it comes from shipping the least necessary. **Build from HTML. Enhance progressively. Keep complexity earned.** #WebDevelopment #Frontend #HTMX #Astro #ProgressiveEnhancement #JavaScript #WebPerformance #Accessibility #DX #WebDevelopment #TypeScript #Frontend #JavaScript

𝐘𝐨𝐮 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐨𝐯𝐞𝐫𝐭𝐡𝐢𝐧𝐤𝐢𝐧𝐠 𝐬𝐭𝐚𝐭𝐞 𝐮𝐩𝐝𝐚𝐭𝐞𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝟏𝟖. Remember the days of `ReactDOM.unstable_batchedUpdates` or manually wrapping multiple `setState` calls to prevent excessive re-renders? Good news: React 18 made those mostly obsolete with automatic batching. Now, pretty much any updates—inside event handlers, promises, or `setTimeout`—are batched together into a single re-render. It's a huge win for performance out of the box! However, there's always an escape hatch: `ReactDOM.flushSync()`. This function forces React to process any pending state updates synchronously and update the DOM immediately. While powerful, it's rarely needed and should be used with extreme caution. **When might you reach for `flushSync`?** * **Immediate DOM measurements:** If you need to read the updated DOM layout right after a state change (e.g., for complex animations or integrating with non-React UI libraries) before the browser paints the next frame. * **Controlling browser painting:** For very specific, imperative UI sequences where you need a synchronous render cycle. For 99% of use cases, React's automatic batching handles performance beautifully. Reaching for `flushSync` is usually a sign you might be fighting React's reconciliation process, not working with it. What's the most obscure React API you've had to use for a specific UI challenge? #React #ReactJS #Performance #Frontend #WebDev #JavaScript

I created this modern calculator UI using pure HTML, CSS, and JavaScript — without using any frameworks or libraries. ✨ Features: Basic arithmetic operations (+, −, ×, ÷) Clean dark UI design Smooth user interaction 🛠 Tech Stack: HTML CSS JavaScript (Vanilla JS) 💡 What I learned: DOM manipulation Event handling Building logic from scratch Improving UI/UX design skills This project helped me strengthen my core JavaScript fundamentals. 📸 (Check out the UI in the image below 👇) 💻 GitHub: https://lnkd.in/dWvi5iff I’d really appreciate your feedback! #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Projects #Learning

If this was on a real website… would you think it's custom-built or a template? I built this using only HTML, CSS, and JavaScript. To enhance the interaction, I used Swiper.js and customized it to create a smooth 3D coverflow experience with a modern, responsive UI. Features: • Interactive coverflow slider • Autoplay + navigation controls • Animated gradient background • Fully responsive design This project reminded me: Great UI isn’t about complexity — it’s about how it feels. I’m constantly experimenting with new technologies, frameworks, and ideas — pushing myself to build better with every project. Follow on LinkedIn for more experiments in motion and code: 📍 Fazarath Ahamed 📍Source code: https://lnkd.in/g8BHg8Hs JavaScript Mastery as the source. #webdevelopment #frontend #javascript #uiux #css #buildinpublic #coding

💡 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