🚀 Day 22 – React Portals (Break Out of the DOM Tree) As your UI grows, you may face layout issues: ⚠️ Modals hidden behind elements ⚠️ Tooltips getting clipped ⚠️ z-index not working as expected The problem is not CSS… 👉 It’s DOM hierarchy 🛒 Simple Analogy Imagine a building 🏢 🔴 Without Portal You’re stuck inside nested rooms 👉 Your message stays hidden inside 👉 No one outside can see it 😓 🟢 With Portal You use an emergency exit 🚪 👉 Jump outside the building 👉 Now everyone can see your message 👉 That’s React Portal: Render outside parent hierarchy 🧠 Why Portals Matter Without Portals: • Content gets clipped • z-index issues • Poor UI layering With Portals: • Clean overlays • Proper layering • Better UX 💻 1. Without Portal (Problem) function App() { return ( <div style={{ overflow: "hidden" }}> <Modal /> {/* ❌ Might get clipped */} </div> ); } 💻 2. With Portal (Solution) import ReactDOM from "react-dom"; function Modal({ children }) { return ReactDOM.createPortal( <div className="modal">{children}</div>, document.getElementById("modal-root") ); } ✅ Renders outside parent ✅ No clipping issues 💻 3. HTML Setup <div id="root"></div> <div id="modal-root"></div> ⚡ How It Works 👉 Component stays in React tree 👉 But renders in different DOM node 📌 Key Concepts ✔ createPortal(child, container) ✔ Breaks out of parent DOM hierarchy ✔ Keeps React logic intact 🧠 Common Use Cases • Modals • Tooltips • Dropdowns • Notifications ⚠️ Important Note 👉 Events still bubble up through React tree 👉 Even if DOM position is different 💬 Developer Question Where do you use portals the most? 1️⃣ Modals 2️⃣ Tooltips 3️⃣ Dropdowns 4️⃣ Notifications #React #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #UIUX #CodingJourney 🚀

🚨BREAKING: Someone open sourced a tech icon library that makes every other SVG pack look broken. It's called Developer Icons. And it's not just another logo collection. It's a fully-typed React component library with customizable, perfectly scalable SVGs for every major framework, language, and tool you actually use. Here's what makes it different: → Every icon ships as a typed React component (HtmlIcon, JavascriptIcon, ReactIcon, etc.) → Customize size, color, stroke width, and style with standard SVG props → Optimized with SVGO so file sizes stay microscopic without losing quality → Light mode, dark mode, and wordmark variants built in for every brand → Consistent design rules across the entire set (no more mismatched stroke widths) → Works in React, Next.js, Astro, or download raw SVGs for Figma → Install with one command: `npm i developer-icons` → Zero config. Import the icon, drop it in your JSX, done. Here's the wild part: Most devs waste 20 minutes hunting for a clean Postgres logo, then another 10 resizing it so it doesn't look blurry next to the Tailwind one. Developer Icons pre-solves that entire problem. Every icon follows the same design system, same optimization pipeline, same component API. Drop in 15 tech logos on your portfolio -- they all look like they belong together. import { HtmlIcon, JavascriptIcon } from "developer-icons"; <JavascriptIcon size={52} /> That's it. Fully typed. Fully scalable. MIT licensed. Built with Astro, React, TypeScript, Tailwind, and Vite. 17 contributors. 40 releases shipped. 100% Open Source. Link: https://lnkd.in/dREk_iV5 Must Follow Datafy Associates For More updates.

🚨BREAKING: Someone open sourced a tech icon library that makes every other SVG pack look broken. It's called Developer Icons. And it's not just another logo collection. It's a fully-typed React component library with customizable, perfectly scalable SVGs for every major framework, language, and tool you actually use. Here's what makes it different: → Every icon ships as a typed React component (HtmlIcon, JavascriptIcon, ReactIcon, etc.) → Customize size, color, stroke width, and style with standard SVG props → Optimized with SVGO so file sizes stay microscopic without losing quality → Light mode, dark mode, and wordmark variants built in for every brand → Consistent design rules across the entire set (no more mismatched stroke widths) → Works in React, Next.js, Astro, or download raw SVGs for Figma → Install with one command: `npm i developer-icons` → Zero config. Import the icon, drop it in your JSX, done. Here's the wild part: Most devs waste 20 minutes hunting for a clean Postgres logo, then another 10 resizing it so it doesn't look blurry next to the Tailwind one. Developer Icons pre-solves that entire problem. Every icon follows the same design system, same optimization pipeline, same component API. Drop in 15 tech logos on your portfolio -- they all look like they belong together. import { HtmlIcon, JavascriptIcon } from "developer-icons"; <JavascriptIcon size={52} /> That's it. Fully typed. Fully scalable. MIT licensed. Built with Astro, React, TypeScript, Tailwind, and Vite. 17 contributors. 40 releases shipped. 100% Open Source. Follow Vishakha Singhal for more 🫶 Repost to share in your network (Link in the comments)

🚨BREAKING: Someone open sourced a tech icon library that makes every other SVG pack look broken. It's called Developer Icons. And it's not just another logo collection. It's a fully-typed React component library with customizable, perfectly scalable SVGs for every major framework, language, and tool you actually use. Here's what makes it different: → Every icon ships as a typed React component (HtmlIcon, JavascriptIcon, ReactIcon, etc.) → Customize size, color, stroke width, and style with standard SVG props → Optimized with SVGO so file sizes stay microscopic without losing quality → Light mode, dark mode, and wordmark variants built in for every brand → Consistent design rules across the entire set (no more mismatched stroke widths) → Works in React, Next.js, Astro, or download raw SVGs for Figma → Install with one command: `npm i developer-icons` → Zero config. Import the icon, drop it in your JSX, done. Here's the wild part: Most devs waste 20 minutes hunting for a clean Postgres logo, then another 10 resizing it so it doesn't look blurry next to the Tailwind one. Developer Icons pre-solves that entire problem. Every icon follows the same design system, same optimization pipeline, same component API. Drop in 15 tech logos on your portfolio -- they all look like they belong together. import { HtmlIcon, JavascriptIcon } from "developer-icons"; <JavascriptIcon size={52} /> That's it. Fully typed. Fully scalable. MIT licensed. Built with Astro, React, TypeScript, Tailwind, and Vite. 17 contributors. 40 releases shipped. 100% Open Source. (Link in the comments) Github: https://lnkd.in/g-eAtsXW

🚀Exploring Advanced & Modern Features Today wasn’t just basic CSS… I explored some next-level concepts that are actually used in modern UI engineering 👇 ✨ 1. CSS :has() Selector (Game Changer 🔥) Learned how to style a parent based on its children 👉 Example: if a container has a .red element, change its background This felt like bringing JavaScript logic into CSS 📌 Applied in my project: A parent .balls container reacts when it contains specific colored elements ✨ 2. Advanced Selectors & Conditional Styling Used structural logic to control UI behavior dynamically without JS 👉 Cleaner, smarter, more maintainable CSS ✨ 3. CSS Anchor Positioning (Futuristic UI 🤯) Experimented with anchor positioning, where elements can align relative to another element dynamically 📌 What I did: Assigned anchor-name on hover Positioned another element using anchor() values 👉 Result: a dynamic overlay that follows elements smoothly ✨ 4. Mix Blend Mode for Visual Effects Used mix-blend-mode: difference 👉 Created a cool contrast/inversion effect for overlays ✨ 5. Transitions & Interaction Design Smooth transitions (transition) Hover-based interactions 👉 Focus on UX + performance, not just visuals 💡 Key Realization: Modern CSS is evolving fast — features like :has() and anchor positioning are making CSS more powerful than ever, reducing dependency on JavaScript. ⚡ Small experiments like these are helping me think like a frontend engineer, not just a coder More projects coming soon. #webdevelopment #frontenddevelopment #css #advancedcss #uiux #webdesign #coding #developer #learninpublic #100daysofcode #htmlcss #javascript #softwaredeveloper #reactjs #design #tech #developersindia #programming

Someone just reinvented how text works on the web. And it's been broken for 30 years. Every website you've ever used measures text the same way — ask the DOM, trigger a layout reflow, read the result back. Do that 500 times? 500 reflows. 30ms of the browser grinding to a halt. That's why masonry grids flash. That's why chat bubbles mis-size. That's why magazine layouts on the web never looked as good as in print. Cheng Lou (the engineer behind react-motion and Midjourney's frontend) just shipped Pretext — a 15KB TypeScript library with zero dependencies that breaks this entirely. Here's the technical trick he pulled off: → canvas.measureText() uses the same font engine as the DOM but lives outside the layout tree → Pretext uses it to cache every word's width in one pass → After that, layout becomes pure arithmetic — addition, line breaks, done Result:  500 paragraphs measured in 0.09ms instead of 30ms. Zero reflows. 300–600x faster. But speed is just the beginning. The real unlock is layoutNextLine(widthPerLine) — pass a different width for each line, and text flows around arbitrary shapes, animated obstacles, and moving objects in real time, at 120fps. Things that were previously impractical on the web: ✦ Text flowing live around a moving cursor ✦ Tight chat bubbles with zero jank ✦ Magazine-style columns without layout shift ✦ Server-side text layout — before the browser even opens This isn't a UI trick. It's infrastructure. It makes text layout portable and mathematical — usable in design tools, AI-generated interfaces, game UIs, and SSR pipelines. Engineers from Vercel, Remix, Figma, and shadcn have already taken notice. This is the kind of open source that makes you want to go build something. Repo link. - https://lnkd.in/gBtYGp43

When I started frontend, I wasn’t using any UI libraries. Everything was just custom CSS. Took time, things broke a lot but honestly that helped me understand basics better. Then slowly I started exploring different libraries… Tried Tailwind, shadcn, and many UI tools. At first it felt confusing — too many options in the market. But after using them, one thing became clear: There’s no “best” UI library. Every library has its own use case. Some are fast, some are flexible, some are just good for specific things. Now I just do this: 1. First decide what kind of UI I want to build 2. Then pick tools based on that These are some libraries/tools I explored 👇 Origin UI → https://originui.com MVPBlocks → https://lnkd.in/g5BHAHza Skiper UI → https://skiper-ui.com Ant Design → https://ant.design Cult UI → https://cult-ui.com Eldora UI → https://eldoraui.site shadcn/ui → https://ui.shadcn.com Tailark → https://tailark.com SmoothUI → https://smoothui.dev Pattern Craft → https://patterncraft.fun   I use this for my UI reference  Landing Page Inspiration → https://land-book.com Right now I mostly use Tailwind + shadcn, and add other things only when needed. Still learning, still figuring things out 🚀 #frontend #reactjs #tailwindcss #webdev

🌐 Introducing Book Library – A Smart and Interactive Online Book Discovery Platform! 📚🚀 Book Library is a fully responsive web application designed to help users discover, explore, and manage books seamlessly. Built using modern frontend technologies, this project integrates with the Open Library API to fetch real-time book data and provides a smooth and interactive reading experience for users. The platform allows users to search books, filter by categories, view detailed descriptions, and maintain a personal reading list — all within a clean and user-friendly interface. 🔥 Key Features: ✅ Dynamic Book Search System – Users can search for books in real-time using the Open Library API. ✅ Category-Based Filtering – Explore books by genres like fiction, horror, thriller, kids, and more. ✅ Detailed Book View Page – Displays complete book information including title, author, description, and cover image. ✅ Reading List Feature – Users can add and remove books from a persistent reading list stored in localStorage. ✅ Interactive UI Design – Clean card-based layout with responsive Bootstrap design for all devices. ✅ API Integration – Fetches live data from Open Library API for updated book information. ✅ Fully Responsive Design – Optimized for mobile, tablet, and desktop screens. 🛠️ Tech Stack: 🚀 Frontend: 🔹 HTML5 – Structured and semantic layout 🔹 CSS3 – Custom styling and UI enhancements 🔹 Bootstrap 5 – Responsive grid system and components 🔹 JavaScript (ES6+) – DOM manipulation, API handling, and application logic 🌐 API Used: 🔹 Open Library API – For fetching book data and metadata 🌐 Live Website: https://lnkd.in/gHPYMp7e 💻 GitHub Repository: https://lnkd.in/gXNcYhwG 💡 Building this project helped me strengthen my skills in JavaScript DOM manipulation, API integration, localStorage handling, and responsive UI design. I focused on creating a real-world experience similar to modern digital library platforms. I’m continuously improving my frontend development skills by building practical, real-world projects and exploring new technologies. 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #Bootstrap #HTML #CSS #API #OpenLibrary #ResponsiveDesign #PortfolioProject #BuildInPublic 📚 Special thanks to Athulya Aji and Lakshmi Priya K M for their support in this project.

🚀 Turning Logic into a Real-Time Calculator Experience I’m excited to share one of my recent hands-on projects — a fully functional smart calculator built using HTML, CSS, and JavaScript 💻✨ This project was more than just building a calculator — it was about handling real-world user interactions and edge cases just like a production-level application. 🔹 What makes this project special? ✔️ Dynamic display — input and result behave like a real calculator ✔️ Smart handling of brackets () and percentage (%) ✔️ Input validation to avoid invalid operations ✔️ Auto-scroll for long calculations (no overflow issues) ✔️ Clean, responsive, and modern UI design ✔️ Backspace & clear functionality with proper UX 💡 Key Learning: This project helped me strengthen my problem-solving ability, logical thinking, and frontend development skills, especially in managing complex input scenarios. 🔧 Tech Stack: HTML | CSS | JavaScript 🎯 Moving forward, I aim to enhance this further by adding features like keyboard support, history tracking, and advanced calculations. Would love your feedback and suggestions! 🙌 #WebDevelopment #JavaScript #Frontend #Projects #CodingJourney #LearningByDoing #UIUX #Developers #TechProjects