Rebuilding Redux from Scratch: A Simplified Blueprint

Scroll events giving you headaches? 😩 There's a better way. The Intersection Observer API lets you detect when elements enter the viewport — no scroll listeners, no layout thrashing, just clean and efficient JS. ⚡ I just published a full breakdown with real code examples, tips, and common mistakes to avoid. 🔧 Read it now 👉 hamidrazadev.com #javascript #webdev #frontend #learntocode #100daysofcode

💡 JavaScript Tricky Question let a = 'hello'; a[0] = 'H'; console.log(a); 👉 Output: `hello` ✅ Explanation: Strings in JavaScript are **immutable** (cannot be changed). Even though it looks like we’re modifying `a[0]`, JavaScript ignores it. So the original string stays the same. 🔹 To change it, you must create a new string: a = 'H' + a.slice(1); #JavaScript #WebDevelopment #Frontend #Coding #JSConcepts

Day 4 — Today was the day the web stopped being static for me. DOM manipulation. Sounds scary. Actually really fun. Built a simple to-do list from scratch — no libraries, no frameworks. Just vanilla JS touching the page directly. The moment I typed something in an input field and saw it appear on screen because of code I wrote... that feeling doesn't get old. Key thing I learned: event delegation. Instead of adding an event listener to every single element, you add one to the parent and let events bubble up. Cleaner and way more efficient. Also — preventDefault() is your best friend in form handling. Took me an embarrassing number of refreshing pages to learn that lesson. What was your first "I built this" moment in coding? #javascript #webdev #frontenddeveloper #learninpublic

💡 Tree Shaking vs Rollup — Confusion Clear in 30 Seconds! A lot of developers mix these two, but they’re NOT the same 👇 🌳 Tree Shaking: A technique that removes unused code from your project. → Result: Smaller bundle size & better performance 📦 Rollup: A JavaScript bundler that combines your code AND applies tree shaking. → Result: Clean, optimized output 🧠 Simple analogy: Tree Shaking = cleaning 🧹 Rollup = the person doing the cleaning 👷♂️ ⚡ Bottom line: You don’t need to “choose” between them — Rollup uses tree shaking internally. #javascript #reactjs #webdevelopment #frontend #coding #performance

🎨 I got tired of recoloring SVGs one at a time. You know that thing where you need 30 icons in a new brand color and you're sitting there doing find-and-replace on hex codes file by file? I kept doing that for way too long before I thought, okay, I should just automate this. So I built SVG Batch Recolor Tool. Here's how it works: 📋 Paste a bunch of SVG URLs 🎯 Pick a hex color ⚡ Hit recolor — all fills, strokes, and inline styles update instantly 👀 Live preview grid so you see what you're getting 📦 Download individually or grab everything as a ZIP It fetches the SVGs server-side (because CORS will ruin your afternoon otherwise), does the recoloring client-side with regex, and bundles the output with jszip. 🛠 Built with: Next.js 15 · React 19 · Tailwind v4 Honestly it's a simple tool. I just couldn't find one that worked the way I wanted, so here we are. The whole thing is open source 👇 🔗 Link: https://lnkd.in/gK-QQwi7 ♻️ Repost if this could save someone's afternoon. #webdev #nextjs #react #opensource #svg #developertools #frontend #javascript #typescript

Two JavaScript operators that quietly save you from runtime crashes: ?. — Optional Chaining ?? — Nullish Coalescing Before: const city = user.address.city; // 💥 Crashes if user or address is null After: const city = user?.address?.city ?? 'Unknown'; // ✅ Safe. Always. What each one does: ?. → Stops evaluation and returns undefined if anything in the chain is null/undefined. No crash, no if-checks needed. ?? → Returns the right-hand value ONLY when the left is null or undefined. Unlike ||, it won't replace 0, false, or '' — which are valid values. Combined, they make your data-fetching code 10x more resilient. One line. Zero crashes. Ship it. #JavaScript #WebDevelopment #Frontend #CodingTips #CleanCode

A method easier than "methods"? 🤯 I was recently working on a problem where I needed to trim an array. I started writing a standard for loop to shift elements and was ready to reach for splice()... but then I tried an experiment. I simply wrote: arr.length = arr.length - 1 It worked perfectly. No methods, no complicated logic, just a direct property change. I actually thought I had found a bug! But after checking the MDN documentation, I realized this is a well-known, intentional feature of JavaScript. Why this is easier than splice() or pop(): Zero Complexity: You don't need to remember arguments or return values. Instant Truncation: If you want to keep only the first 3 items, just set .length = 3. Done. Performance: It's a high-speed way to discard elements without the overhead of method calls. Do you think you'll start using this as your default way to shorten arrays now, or will you stick to splice for better code readability? comment below .. #javascript #codingtips #frontend #react #webdevelopment #programming #webdev #softwareengineering Nikhil Kilivayil Brototype

I spent some time today just renaming things in my code. Not changing logic. Not adding features. Just naming things better. Functions that were too generic. Variables that didn’t clearly say what they hold. Files that didn’t reflect what they actually do. It felt unnecessary at first. But once the names started making sense, the whole code became easier to read. Less guessing. Less confusion while coming back to the same file. I’m starting to realize that good naming does a lot of the work on its own. Still building. Still trying to make the code easier to understand, not just easier to run. #FrontendDevelopment #ReactJS #JavaScript #WebDevelopment #SoftwareDevelopment

I broke my own rule today… and it paid off. I usually avoid adding new dependencies. But I needed faster validation for a complex form. Instead of reinventing everything, I used a lightweight validation helper. Saved time. Reduced bugs. Sometimes “don’t add libraries” becomes a limitation. The real rule should be: 👉 Add dependencies intentionally, not emotionally. Balance matters. Do you prefer building from scratch or using libraries? #webdev #javascript #productivity

🧠 Day 5 of 21days challenge JavaScript Higher Order Functions (HOF) 🔥 function greet(name) { ... } Why return a function? A higher-order function is a function that takes another function as an argument or returns a function. It helps write more reusable and flexible code. For easy understanding : HOF = function using another function Can take function as input Or return function as output 👉 That’s how powerful abstractions are built This changed how I write functions 🚀 #JavaScript #HOF #Frontend