Efficiently detect viewport elements with Intersection Observer API

🚀 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

💡 Mastering Closures in JavaScript! Today I explored one of the most powerful concepts in JavaScript — Closures 🔥 Built a small utility function makeTextSizer() that dynamically changes font size using closures. The inner function remembers the size even after the outer function has executed — and that’s the magic! ✨ 🧠 Key Learnings: 🛠️ Example use case:Click a button → dynamically update UI → clean & efficient code This is why JavaScript feels so powerful once you understand what’s happening behind the scenes. 🚀 On to deeper concepts next! #JavaScript #WebDevelopment #Frontend #Closures #CodingJourney #LearnInPublic #100DaysOfCode

spent the last week going deep into React to understand how rendering actually works under the hood. turned it into a video , tracing what happens between writing JSX and seeing pixels on screen. every step, from createElement to fiber nodes to the one appendChild call that makes the page appear. this is part 1 covering the initial render. part 2 on re-renders and reconciliation is coming next. link : https://lnkd.in/dycpqavw if you've ever wondered what the "virtual DOM" actually is (spoiler: it's just plain objects that get thrown away every render), this one's for you. #react #javascript #frontend #webdev

💡 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

What is a closure in JavaScript? A closure is a function that remembers variables from its outer scope even after that scope has finished executing. Why does this work? - `createCounter` runs once - It creates a variable `count` - The inner function “closes over” that variable - Even after `createCounter` finishes, `count` is still accessible Each time `counter()` runs: → it uses the same preserved state 💡 Closures are everywhere: - React hooks - Event handlers - Memoization - Encapsulation patterns They’re not just a concept — they’re part of how JavaScript manages state. #Frontend #JavaScript #React #WebDevelopment #SoftwareEngineering

Day 5 Callback Functions 🔁 Understanding how functions can control the flow of execution is a game changer in JavaScript. Callbacks help us handle tasks at the right time, especially when working with async operations. 💡 Simple idea: “Do this task, and when it’s done, call another function.” Question: Where have you used callbacks in your projects? 👇 #JavaScript #WebDevelopment #Frontend #CodingJourney #LearnToCode

Six characters that completely changed how we write JavaScript. 👇 If your code is still cluttered with the function keyword, it’s time for an upgrade. Arrow functions () => {} aren't just syntactic sugar; they are the backbone of clean, modern JS. Swipe through the carousel to see: - Why developers prefer them - How they fix the classic this headache - Where they shine the most How often are you using arrow functions in your current projects? #JavaScript #WebDev #CleanCode #Frontend #Coding

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

Turned my ASCII text scramble hover effect into a full-screen playground. Radial waves that expand from the cursor and scramble chars. Added a GUI for you to play with. Fun experiment but not sure it's very useful, might as well read some Lovecraft while you're there. Vanilla JS kept under 10k (gzipped) and only dependency is lil-gui for the control panel. → CodePen link: https://lnkd.in/dHrq789e #creativecoding #javascript #codepen #frontend #vanillajs

I built a Pomodoro timer into ACE and honestly it's been one of those features I didn't know I needed until I had it. The idea was simple. I was using ACE to study and kept switching tabs to find a timer. So I just built one in. 25 minutes. Focus. Break. Repeat. If you're building something, don't sleep on the small features. Sometimes the thing that makes your product actually usable isn't the AI or the fancy architecture. It's the 25 minute timer sitting quietly in the corner. #buildinpublic #nextjs #webdevelopment #javascript #frontenddevelopment