🚀 𝗕𝘂𝗶𝗹𝘁 𝗮𝗻 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗮𝗹𝗲𝗻𝗱𝗮𝗿 𝘄𝗶𝘁𝗵 𝗥𝗮𝗻𝗴𝗲 𝗦𝗲𝗹𝗲𝗰𝘁𝗶𝗼𝗻 & 𝗡𝗼𝘁𝗲𝘀 I recently worked on a frontend challenge where the goal was to turn a static wall calendar design into a fully interactive component — and I took it as an opportunity to focus on both functionality and product experience. 🔹 Key features: • 📅 Dynamic month navigation with smooth animations • 🎯 Date range selection (with reverse handling & hover preview) • ✍️ Notes system attached to selected date ranges • 💾 Persistent data using localStorage • 🖼 Dynamic hero images for each month • 🎨 Clean, responsive UI inspired by real wall calendars Instead of over-engineering, I focused on: → Clean architecture using custom hooks → Avoiding unnecessary state libraries (kept it simple & scalable) → Improving UX with small but impactful details 🔗 Live Demo: https://lnkd.in/gwfBCZw4 💻 GitHub: https://lnkd.in/gTPyR8zm Would love to hear your feedback! #react #frontend #javascript #webdevelopment #tailwindcss #framerMotion #uiux

Trying out the latest shadcn/ui lately and it just feels different. Most UI libraries box you in. This one doesn’t. You get clean components, full control over styling, and since it’s built on Tailwind, everything feels natural. What stood out while working with shadcn/ui: – Clean, minimal, and modern design out of the box – Fully customizable (colors, variants, layouts no limits) – Built on top of Tailwind, so styling feels natural and fast – No unnecessary abstraction you understand what you build – Perfect fit for dashboards and data-heavy interfaces Used it recently while working on PrepMate’s dashboard: • showing enrolled exams • weekly progress • phase-wise tracking If you’re building dashboards or any modern UI, shadcn/ui is definitely worth it. #shadcn #NextJS #TailwindCSS #Frontend #BuildInPublic

𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘃𝘀 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗛𝗼𝗼𝗸 𝗮𝘁 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗶𝗺𝗲 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

🧮 𝑆𝑖𝑚𝑝𝑙𝑒 𝐶𝑎𝑙𝑐𝑢𝑙𝑎𝑡𝑜𝑟 | 𝐹𝑟𝑜𝑛𝑡-𝐸𝑛𝑑 𝑃𝑟𝑜𝑗𝑒𝑐𝑡 Excited to share a project I recently built using 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, and 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — a modern, responsive calculator designed with a strong focus on clean UI, usability, and smooth user experience. 🔹 Implements core arithmetic operations with real-time calculations 🔹 Built using DOM manipulation to handle interactive button inputs 🔹 Fully responsive design that works across different screen sizes 🔹 Lightweight and fast performance with clean code structure Through this project, I strengthened my understanding of JavaScript logic, event handling, and dynamic UI updates, while also improving my front-end development skills. I also explored how small UI decisions can significantly improve user experience and interaction flow. 🌐 Live Demo: https://lnkd.in/gcsCzzTa 💻 GitHub: https://lnkd.in/gDZetHBU Looking forward to enhancing this project further with features like: 🕘 History tracking 🌙 Dark mode ➗ Advanced operations 🎨 UI animations Always learning, always building 🚀 #FrontendDevelopment #JavaScript #WebDevelopment #HTML #CSS #StudentDeveloper #Projects #BuildInPublic

I’m pleased to share a new set of additions to 𝗔𝘇𝗲𝗺𝗺𝘂𝗿, with the introduction of a new 𝗟𝗮𝘆𝗼𝘂𝘁𝘀 section. Until now, Azemmur focused on components and primitives. This update expands that foundation with layout patterns, 𝗮 𝗵𝗶𝗴𝗵𝗲𝗿-𝗹𝗲𝘃𝗲𝗹 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗯𝗹𝗼𝗰𝗸𝘀 for structuring motion, content, and interaction across a page. 𝗡𝗲𝘄 𝗹𝗮𝘆𝗼𝘂𝘁𝘀:  • 𝗙𝗹𝗼𝗮𝘁𝗶𝗻𝗴 𝗛𝗲𝗮𝗱𝗲𝗿: a persistent, motion-aware header for navigation and context. • 𝗣𝗮𝗿𝗮𝗹𝗹𝗮𝘅 𝗥𝗲𝘃𝗲𝗮𝗹 𝗦𝗲𝗰𝘁𝗶𝗼𝗻: a layout primitive for scroll-based storytelling and progressive content reveal. Alongside layouts, new additions to the system:  • 𝗧𝗶𝗺𝗲𝗹𝗶𝗻𝗲: for building structured, animated chronological flows.  • 𝘂𝘀𝗲𝗠𝗲𝗿𝗴𝗲𝗥𝗲𝗳𝘀: a small utility hook for safely composing multiple refs across components. This release also includes ongoing improvements:  • Codebase refinements.  • Documentation revisions.  • Unification of variants for more consistent composition. This is a step toward a more complete system, not just components, but how they come together to shape experiences. Explore the updates: https://lnkd.in/d_j45Gth 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸, 𝗶𝗱𝗲𝗮𝘀, 𝗮𝗻𝗱 𝗰𝗼𝗻𝘁𝗿𝗶𝗯𝘂𝘁𝗶𝗼𝗻𝘀 𝗮𝗿𝗲 𝗮𝗹𝘄𝗮𝘆𝘀 𝘄𝗲𝗹𝗰𝗼𝗺𝗲. #OpenSource #React #NextJS #UI #DesignSystems #Frontend #Motion #Accessibility #MCP

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.

REACT INTERNALS - PART 12 Render Phase vs Commit Phase In earlier parts, we understood what rendering means. Now let’s go one level deeper: How does React actually update the UI internally? 🧠 The Core Idea React updates the UI in two phases: Render Phase → Prepare changes Commit Phase → Apply changes 🔄 1. Render Phase (Preparation) This is where React figures out what needs to change • Creates and updates the Fiber tree (each component is tracked) • Determines what needs to change in the UI • Prepares the next UI state No DOM updates happen here ❌ ⚠️ Key Behavior • Can be paused • Can be resumed • Can be interrupted This keeps the UI responsive ⚙️ 2. Commit Phase (Execution) This is where React applies the prepared changes • Applies all changes • Updates the DOM in one step • UI updates on screen ✔ ⚠️ Key Behavior • Cannot be paused • Cannot be interrupted Must complete fully to keep UI consistent 🧩 Simple Flow Render Phase (prepare) ↓ Commit Phase (apply) ↓ UI updates instantly 🎯 Why This Matters • Rendering work can pause → better responsiveness • Updates happen together → consistent UI • Overall smoother user experience 🔗 Connection to the Series • Re-renders → trigger updates • Batching → groups updates • Scheduling → prioritizes updates • Fiber → manages work in small units • This part → when work is prepared vs applied 🎯 Key Insight React prepares all changes first Then applies them together in one step 🔑 Final Takeaway Render phase is interruptible Commit phase is not 🎬 Wrapping Up the Series This completes our journey into how React works internally - from re-renders to Fiber and scheduling Next: Breaking down React Hooks in the same simple way #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering

📸 "𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲 𝗶𝗺𝗮𝗴𝗲𝘀" 𝗺𝗶𝗴𝗵𝘁 𝗯𝗲 𝗴𝗼𝗶𝗻𝗴 𝗮𝘄𝗮𝘆. Not because they failed... but because we don't need them anymore. 🧠 𝗧𝗵𝗲 𝗼𝗹𝗱 𝘄𝗮𝘆 We used: 🔹 `srcset` 🔹 `sizes` 🔹 `<picture>` To guess which image a device needed. ⚠️ 𝗧𝗵𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 🔹 Complex markup 🔹 Multiple image versions 🔹 Hard to maintain 👉 We were solving a platform problem manually. 🚀 𝗪𝗵𝗮𝘁'𝘀 𝗰𝗵𝗮𝗻𝗴𝗶𝗻𝗴 🔹 Modern CSS (container queries, fluid layouts) 🔹 Smarter browsers 🔹 Image CDNs 👉 The platform now knows: 🔹 How big your image is 🔹 What resolution is needed 🔹 What to load 🧩 𝗧𝗵𝗲 𝘀𝗵𝗶𝗳𝘁 From: "Optimize images for devices" ➡️ to: "Let layout + browser handle it" 🧠 The real insight: Frontend evolution always follows the same pattern: 👉 We hack solutions 👉 The platform catches up 👉 Complexity disappears 🚀 The takeaway: 👉 The code you don't have to write anymore. 🔗 Source: https://lnkd.in/dwWHWCcb #Frontend #WebDevelopment #CSS #WebPerformance #UX

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.

eq_ui v0.3.0 just dropped on crates.io 🦀 So I've been building a Dioxus 0.7 component library because apparently I enjoy pain and CSS gradients in equal measure. What's new in v0.3.0: EqButton — 5 variants, 3 sizes, and gradient hover transitions that actually morph colors smoothly using CSS @property. Yes, I spent an unreasonable amount of time making buttons change color nicely. You can control the gradient angle, disable the animation, override text color, or go fully solid. 21 themes, each with hand-picked default and hover palettes. The Watermelon theme literally goes from red to green. Because watermelon. EqCheckbox — Three-state checkbox (checked, unchecked, indeterminate) rendered with Phosphor Icons. No <input type="checkbox"> was harmed in the making of this component. EqGrid upgrades — Drag-and-drop row reordering with a grip handle, multi-column sorting, and CSV/JSON export. You can now move rows around, sort by everything, and export the results. Basically a spreadsheet that doesn't judge your data. 21 built-in themes — From Nord to Dracula to Egypt to Gold. Each one has its own button gradient palette because I believe buttons deserve personality. Everything follows atomic design: atoms → molecules → organisms. Fully portable, zero JavaScript, pure Rust + Tailwind CSS. cargo add eq_ui GitHub: https://lnkd.in/d2k-qXrn crates.io: https://lnkd.in/di-p9Dmk Feedback, issues, and PRs welcome. Or just tell me your favorite theme I'll take that too. #Rust #RustLang #Dioxus #OpenSource #WebDev #ComponentLibrary #UI #UX #CratesIO #Frontend #TailwindCSS #AtomicDesign #WebAssembly #WASM #RustUI #DevTools