Iklash khan’s Post

🚀 Day 6 of My MERN Stack Journey — Hands-On DOM: How I Built a Task Manager in Plain JS Today I moved beyond basics and built a dynamic Task Manager using JavaScript and DOM. What I learned: ✅ Arrays and objects for managing data ✅ .push(), .pop(), .map(), .filter() in real use ✅ DOM manipulation to display tasks ✅ Event handling using addEventListener ✅ Building a functional UI from scratch 💡 Biggest takeaway: Connecting JavaScript logic with the DOM made everything feel real. This is where frontend development actually starts making sense. Next step: Improving the project with better UI and local storage. 🔗 GitHub: https://lnkd.in/dSw73q63 Read More: https://lnkd.in/ddfkuhWa #MERNStack #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment

Building Dynamic UIs with Vanilla JavaScript and Tailwind CSS I recently worked on a project that focuses on one of the most essential skills for a front-end developer: working with APIs and the DOM. I built a User Profile Card Generator that fetches data from the RandomUser API. Instead of hardcoding the UI, I used JavaScript to dynamically create every element—from the profile images to the stat counters. What I focused on: Handling asynchronous data using the Fetch API. Creating reusable UI components through JavaScript functions. Implementing a dark-themed, modern design using Tailwind CSS. This project was a great way to practice writing clean, maintainable code while ensuring the final result looks professional and polished. Check out the repository here: [Insert GitHub Link] #WebDevelopment #JavaScript #TailwindCSS #Frontend #CodingProject #Programming

20 projects complete. 80 to go. Started this challenge a month ago - 100 JavaScript projects in 100 days to build a strong foundation before diving deeper into frameworks. First 10 projects: Counter, color flipper, tip calculator, quote generator, modal popup, accordion menu, todo list, digital clock, stopwatch, countdown timer. Projects 11-20 (took me more than 15 days, but consistency matters more than speed): ⚖️ BMI Calculator - Input validation and health category logic 🌡️ Temperature Converter - Multi-unit conversion (Celsius, Fahrenheit, Kelvin) 🔐 Random Password Generator - Customizable length and character types 🔤 Character Counter - Real-time tracking with remaining character display ❓ FAQ Collapse/Expand - Smooth animations and toggle functionality 🖼️ Image Slider - Navigation controls and auto-slideshow 📑 Tabs Component - Active state management and content switching 🍔 Navbar Toggle - Responsive mobile menu 🌓 Dark/Light Mode Toggle - Theme switching with localStorage persistence 📝 Form Validation - Real-time error messages for empty fields What's clicking now: First 10 projects were about basic DOM manipulation. Projects 11-20 took it up a notch - localStorage for data persistence, CSS variables for theming, smooth transitions. The dark/light mode project really helped me understand how CSS variables and transitions work together properly. Key learnings: ✅ localStorage for saving user preferences ✅ CSS variables for dynamic theming ✅ Transition effects for smooth UI changes ✅ Form validation without libraries My JavaScript foundation is getting stronger. When I go back to React, Vue, or Angular, I'll know exactly what's happening behind the abstractions. 🌐 CHECK OUT ALL LIVE PROJECTS HERE: 👉 https://lnkd.in/gHAUwuM3 💻 Source Code: https://lnkd.in/gexDJ7BY Progress: 20/100 (20% complete) Next 10 projects include scroll animations, progress bars, star ratings, toast notifications, and drag & drop functionality. Let's keep building. 🚀 #JavaScript #100DaysOfCode #WebDevelopment #FrontendDeveloper #LearningInPublic #VanillaJS

🧠 Building My Own Mini React (from scratch) 🚀 Today I went beyond just using React — I tried to understand how it actually works under the hood. So I built a custom version of React’s rendering system using plain JavaScript. Instead of relying on the library, I recreated the core idea behind it: ✨ A virtual “React element” object ✨ A custom render function ✨ DOM manipulation using createElement, setAttribute, and appendChild 💡 What I built: A simple React-like object: { type: "a", props: { href: "https://google.com", target: "_blank" }, children: "Click me to visit Google" } And a custom renderer that converts it into real DOM elements. 🔥 Key Takeaways: ✔ React is basically an abstraction over DOM manipulation ✔ JSX ultimately becomes React.createElement() ✔ Virtual DOM starts from simple JavaScript objects ✔ Frameworks are just layers over core fundamentals 🧩 What I realized: When you strip React down, it’s just: 👉 JavaScript objects + functions + DOM APIs This made React feel far less “magical” and much more logical. 🚀 What’s next: I’m planning to take this further by adding: Component support Re-rendering logic 🔗 GitHub Repo: https://lnkd.in/ggFVNmuC 💬 Would love your feedback! Have you ever tried building something like this from scratch? Or do you think this is the best way to truly learn frameworks? #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode #GitHub

Most React tutorials show basic folder structures—but real-world projects need something more scalable. Here’s the approach I follow to keep my projects clean and production-ready: 🔹 I separate logic by features, not just files 🔹 Keep components reusable and independent 🔹 Move all API logic into services (no messy calls inside components) 🔹 Use custom hooks to simplify complex logic 🔹 Maintain global state with Context or Redux only when needed 🔹 Keep utilities and helpers isolated for better reuse 💡 The goal is simple: Write code today that’s easy to scale tomorrow. As projects grow, structure becomes more important than syntax. What’s your approach—feature-based or file-based structure? 👇 #ReactJS #FrontendDevelopment #MERNStack #CleanCode #WebDevelopment #Javascript

What is AstroJS, and why do I love it so much? (Part 3) I believe that AstroJS--and VueJS for that matter--have an incredibly bright future ahead of them. (Which is good news, as I use Astro and Vue in two of my app projects.) In order to understand why, we need to look at Astro and Vue's build tool--Vite. Vite is a modern web development build tool that provides fast, incremental rebuilds and efficient development experiences for your applications. It's a way of building your AstroJS--and VueJS--applications. Now, previously, Vite used JavaScript bundling tools Rollup and ESM-Build. They were slow, and not the most efficient thing in the world, causing build times to be dozens of seconds long in many cases. However, a recent project has now officially turned that on its head. As of March 12, 2026, Vite announced that they had incorporated the new RC version of a new JavaScript build tool--Rolldown, which is a game changer in terms of website load and build times. Rolldown is a significant improvement over the Rollup + ESBuild approach to building an AstroJS or VueJS application. Rolldown is written in Rust--a language that, if you've seen my past posts, is an extremely powerful and performant language for all sorts of different things. This makes Rolldown up to 3000% (or arguably even higher than that!) faster than Rollup. It offers many of the same features as ESBuild, such as Node.js compatible module resolution, CSS bundling, TypeScript / JSX / syntax lowering transforms, etc. The newest version of Vite--Vite 8--swaps out Rollup and ESBuild for Rolldown, providing massive performance gains. AstroJS currently uses Vite 7, but Vite 8 will soon be rolled out to AstroJS versions--it's on the timeline! If you haven't already, I highly recommend trying out an AstroJS + VueJS approach for the frontend of your business web applications. You now have an incredibly powerful frontend at your disposal. Take a look at Rolldown here, and you'll quickly see why it's so powerful: https://rolldown.rs/

Most React tutorials show basic folder structures—but real-world projects need something more scalable. Here’s the approach I follow to keep my projects clean and production-ready: 🔹 I separate logic by features, not just files 🔹 Keep components reusable and independent 🔹 Move all API logic into services (no messy calls inside components) 🔹 Use custom hooks to simplify complex logic 🔹 Maintain global state with Context or Redux only when needed 🔹 Keep utilities and helpers isolated for better reuse 💡 The goal is simple: Write code today that’s easy to scale tomorrow. As projects grow, structure becomes more important than syntax. What’s your approach—feature-based or file-based structure? 👇 Follow me - Abhishek Anand 😍 #share #like #repost #ReactJS #FrontendDevelopment #MERNStack #CleanCode #WebDevelopment #Javascript Credit #jamesCodeLab

🚀 Day 15 — Currying in JavaScript (Explained Simply) Currying is a powerful concept that helps you write cleaner and more reusable functions 🚀 --- 🔍 What is Currying? 👉 Currying is when a function takes one argument at a time instead of multiple arguments at once. --- 📌 Normal Function function add(a, b) { return a + b; } add(2, 3); // 5 --- ⚡ Curried Version function add(a) { return function (b) { return a + b; }; } add(2)(3); // 5 --- 🧠 What’s happening? 👉 Instead of passing all arguments at once: We pass them step by step Each function returns another function --- 🚀 Why it matters ✔ Helps create reusable functions ✔ Useful for partial application ✔ Common in functional programming ✔ Seen in libraries like React, Redux --- 💡 Real-world use const multiply = (a) => (b) => a * b; const double = multiply(2); double(5); // 10 --- 🔥 One-line takeaway: 👉 “Currying breaks a function into smaller functions, each taking one argument.” --- #JavaScript #Currying #FunctionalProgramming #WebDevelopment #Frontend #100DaysOfCode

JavaScript: forEach() vs map() 🚀 A lot of developers confuse forEach() and map(), but they are not the same. Here’s the easy way to remember it: ✅ Use forEach() when you want to do something with each item • Logging data • Updating the UI • Calling an API • Running side effects It does not return a new array. ✅ Use map() when you want to transform each item • Changing values • Creating a new list • Rendering data in React It returns a new array. Simple rule: If you need a new array → use map() If you just need to loop through items → use forEach() Small choice, big impact on code clarity 💡 What do you use more often in your projects — forEach() or map()? 👇 #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #CodingTips #Programming #LearnJavaScript #100DaysOfCode #DevCommunity #SoftwareDevelopment #CodingLife #ReactDeveloper

🔥 10 JavaScript One-Liners Every Developer Should Know In this guide, we're sharing 10 tricks that you should know to up your JavaScript game. ✅ Swap Two Variables ✅ Check if a Value is an Array ✅ Generate a Random Integer (0 to N) ✅ Flatten a Deeply Nested Array ✅ Remove Duplicates from an Array ✅ Get the Last Element of an Array ✅ Get the Max or Min Value in Array ✅ Check if an Object is Empty ✅ Reverse a String ✅ Short-Circuit Default Values Save & share with your team! --- If you found this guide helpful, follow me, React.js | JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #WebDevelopment #CheatSheet #Coding #CSS #Filters #UI #Frontend #JavaScript #ReactJS