Gradient Text in React Native: Simple Reusable Component

Tree shaking is asked in every frontend interview. Almost no one applies it in production. I fixed it in our UI library and the bundle size dropped by more than half. If you maintain a UI library, run through this checklist: ✅ Ship ESM builds Bundlers like Webpack, Rollup & Vite need static imports to detect unused code. CJS require() is dynamic — tree shaking won't work. ✅ Use preserveModules in Rollup Bundling everything into one file defeats the purpose. Keep modules separate so bundlers can drop individual files that aren't imported. ✅ Declare sideEffects in package.json Without this, bundlers play it safe and include everything. Set it to false or explicitly list CSS files that must always be included. ✅ Add external alongside peerDependencies peerDependencies tells npm. external tells your bundler. You need both — otherwise React or lodash still gets bundled into your library. ✅ Prefer named exports over default exports Named exports make your API explicit. Bundlers can clearly see what's being used and safely eliminate the rest. Miss even one of these and your consumers ship your entire library for a single button import. Wrote a full deep-dive on each point 👇 https://lnkd.in/gciJ3SU3 #JavaScript #Frontend #WebPerformance #React #Bundling

Day 66 of me reading random and basic but important dev topicsss...... Today I read about the Mastering DOM Selection & Range in JavaScript..... When building complex UI features in React or vanilla JS, we often rely on synthetic events and abstract away the DOM. But how do rich-text editors or custom highlighting tools actually work under the hood? It all boils down to two core native APIs: Range and Selection. Now what is a Range? A Range is an abstract pair of boundary points (start and end) in the document. It doesn't visually select anything on its own.... it simply defines a specific fragment of the document tree in memory. * Creating a Range: You instantiate it simply: let range = new Range(); Then, you set the boundaries using range.setStart(node, offset) and range.setEnd(node, offset). * The Offset Gotcha: The behavior of the offset parameter changes completely depending on the node type! 1. If the node is a Text Node: The offset represents the character position. (e.g., range.setStart(textNode, 2) starts at the 3rd letter). 2. If the node is an Element Node: The offset represents the child index. (e.g., range.setStart(pElement, 0) sets the boundary right before the first child node). tip: Your starting and ending nodes don’t even have to be the same or share an immediate parent. A range can span across entirely unrelated nodes, as long as the endpoint logically follows the start point in the document flow. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #React #SoftwareEngineering

DOM Manipulation — Why It Matters The browser converts HTML into a tree structure called the DOM. Every UI change we see is actually a change in that tree. In Vanilla JavaScript, we directly manipulate the DOM: Select elements Change text or styles Add/remove nodes This is powerful — but as applications grow, manually keeping the UI in sync with state becomes complex and error-prone. Frameworks like Angular shift the model: Instead of updating the DOM directly, we update state, and the framework handles DOM updates efficiently. The architectural shift is simple but powerful: 👉 From manually changing the UI 👉 To declaring how UI should look based on state Understanding DOM manipulation helps you: Write better frontend code Optimize performance Debug UI issues faster Before mastering frameworks, understand the DOM. Everything else is just abstraction on top of it. #JavaScript #Frontend #Angular #WebDevelopment

I just shipped something new for React devs: React Pattern Analyzer 🚀 It’s a CLI tool that scans your React project and generates an HTML report with: - Per‑file metrics (LOC, prop count) - Detected issues (large “god” components, prop drilling, hook overuse) - Recommended design patterns (Container/Presentational, Context, etc.) Why I built it: On real projects it’s easy to accumulate big components and messy props. Reviews often say “split this component” or “use context here” but there’s no quick way to see all these problems across the codebase. I wanted a lightweight static analysis tool that speaks the language of React patterns, not just lint rules. How it works: Install as a dev dependency. Run one command against your project. Get a static react-pattern-report/index.html you can open and share with your team. I’m still iterating, but it already helps me quickly understand where a React codebase needs refactoring and which patterns to apply. If you’re interested in: - Refactoring legacy React apps, - Improving consistency in component design, - adding a “design pattern check” step to your pipeline I’d love your feedback and ideas for new rules. https://lnkd.in/dgJJ6_PY #react #reactjs #javascript #typescript #webdevelopment #frontend #frontenddevelopment #codequality #staticanalysis #designpatterns #cleancode #devtools #opensource #nmpackage

🚀 Just Discovered: Oat — A Breath of Fresh Air for Frontend Development Really impressed by the simplicity and clarity of Oat. Great work by Kailash Nadh and team 👏👏👏 If you’ve ever felt weighed down by complex build systems, heavy frameworks, or endless dependencies — this might excite you. I came across Oat, an ultra-lightweight HTML/CSS UI component library that actually lives up to its name. At ~8KB (minified + gzipped), it gives you: 🔹 Semantic, zero-dependency UI components 🔹 No frameworks, no build tooling, no class pollution 🔹 Minimal JS (WebComponents) where needed 🔹 Styles native HTML elements contextually out of the box 💡 Perfect for: ✔ Developers who value semantic HTML ✔ Projects where performance really matters ✔ Anyone tired of bloated UI frameworks Check it out here 👉 https://oat.ink/� #FrontendDevelopment #WebDevelopment #UIEngineering #WebComponents #SemanticHTML #CSS #JavaScript #PerformanceMatters #MinimalismInTech

If you’ve noticed that visiting a route in Next.js local development feels slow, you know why. Let's understand... What’s actually happening? In local development, Next.js compiles pages only when you open them. So the first time you visit a route, it builds it on the spot. That causes a delay. On top of that, development mode includes: -> Extra debugging tools -> Detailed error overlays -> No file minification -> No heavy optimization It’s built for developer experience, not speed. Why production feels fast ? In production, everything is already compiled and optimized. No debugging layers. Clean and compressed files. That’s why routes load instantly. How to improve local dev performance ? 1. Update Next.js & use Turbopack Always run the latest Next.js version — performance improves every release. Turbopack (default dev bundler) is much faster than webpack. 2. Check your imports Import only what you need from libraries, especially icons. Avoid importing entire icon sets or using large barrel files. 3. Check your Tailwind CSS setup – inefficient config can slow compilation 4. Check custom webpack settings – complex rules may affect dev speed 5. Optimize memory usage – close unnecessary apps, increase Node memory if needed 6. Server Components & data fetching – avoid heavy fetches during dev 7. Consider local dev over Docker – Docker can add extra overhead For detailed docs, visit: https://lnkd.in/dCUXnd4u I’m creating content on React and Next.js, simplifying topics for developers — follow me for more. #NextJS #ReactJS #FrontendDevelopment #WebDev #DeveloperTips #PerformanceOptimization #CodingTips

🚀 𝗘𝘅𝗰𝗶𝘁𝗲𝗱 𝘁𝗼 𝘀𝗵𝗮𝗿𝗲 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: 𝗚𝗶𝘁𝗛𝘂𝗯 𝗜𝘀𝘀𝘂𝗲𝘀 𝗧𝗿𝗮𝗰𝗸𝗲𝗿! 💻🔍 I recently built a fully functional frontend application that simulates a GitHub Issue Tracker. This project was a fantastic deep dive into asynchronous JavaScript, external API integration, and dynamic state management! ✨ 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 & 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁: 🔹 𝗦𝗲𝗰𝘂𝗿𝗲 𝗟𝗼𝗴𝗶𝗻 𝗦𝘆𝘀𝘁𝗲𝗺: Created a simulated authentication page to restrict dashboard access. 🔹 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗔𝗣𝗜 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: Fetched and displayed real-time issue data from an external server using Async/Await. 🔹 𝗧𝗮𝗯𝗯𝗲𝗱 𝗙𝗶𝗹𝘁𝗲𝗿𝗶𝗻𝗴: Built a smooth navigation system to seamlessly filter issues by their status (Open, Closed, or All). 🔹 𝗟𝗶𝘃𝗲 𝗦𝗲𝗮𝗿𝗰𝗵 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹𝗶𝘁𝘆: Integrated a search feature that queries the API to instantly find specific issues by text. 🔹 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗠𝗼𝗱𝗮𝗹𝘀: Implemented dynamic modals that fetch and display detailed information (like author, priority, and date) when a specific issue card is clicked. 🛠️ 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: HTML5 | Tailwind CSS | DaisyUI | Vanilla JavaScript (ES6+) | REST APIs Working on this project really leveled up my understanding of DOM manipulation, handling multiple API endpoints, and building a clean, responsive UI. 🔗 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄: https://lnkd.in/gBqxh9AY 💻 𝗚𝗶𝘁𝗛𝘂𝗯 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆: https://lnkd.in/gvkaBkV4 I'd love to hear your thoughts and feedback! Let me know what you think in the comments. 👇 #WebDevelopment #JavaScript #Frontend #TailwindCSS #DaisyUI #APIIntegration #CodingJourney #BuildInPublic #SoftwareEngineering

🚀 Just Built a Random Advice Generator using JavaScript & API! I recently built a small project to practice JavaScript API integration. This project fetches random advice using the Advice Slip API and displays it in a simple responsive UI. 🔹 Features • Fetches advice using Fetch API • Uses Async / Await for API handling • Button loading state while fetching data • Random background color change 🎨 • Fully responsive design 📱 🛠 Tech Stack HTML • CSS • JavaScript • Fetch API 📡 API Used https://lnkd.in/dhQVZzs9 🌐 Live Demo 👉 https://lnkd.in/dPePU2n5 💻 GitHub Repository 👉 https://lnkd.in/dJ7nNPCe This project helped me improve my understanding of JavaScript API calls, async programming, and DOM manipulation. I’ll continue building more projects to strengthen my frontend development skills. #javascript #webdevelopment #frontenddevelopment #api #100DaysOfCode #coding

Frontend Learning: How Virtual DOM Actually Works in React (Step-by-Step) One concept that truly changed frontend performance is the Virtual DOM in React. Here’s the simple 5-step mental model I use 👇 🔹 1️⃣ Initial Render Component returns JSX → React creates a Virtual DOM tree (lightweight JS object). This is then used to generate the Real DOM in the browser. 🔹 2️⃣ State or Props Change When state/props update, React creates a new Virtual DOM in memory. No direct DOM manipulation yet. 🔹 3️⃣ Diffing React compares the previous Virtual DOM with the new one. It calculates the minimal set of changes required. 🔹 4️⃣ Reconciliation Based on the diff, React determines exactly which nodes in the Real DOM must update. 🔹 5️⃣ Efficient DOM Update Only the changed elements are updated — not the entire DOM. This selective update makes UI rendering significantly faster. 💡 Senior takeaway: Virtual DOM isn’t “faster DOM” — it’s a smarter update strategy that minimizes expensive browser operations. Understanding this helps when optimizing re-renders, handling large lists, or debugging performance issues. What’s your go-to strategy when optimizing heavy UI updates? 👇 #FrontendLearning #ReactJS #FrontendEngineering #WebPerformance #JavaScript