JS Minifier with Visualization and Performance Boost

Day 22 #100DaysOfCode 💻 1. Difference between map and filter? — B. map transforms, filter selects 2. What triggers this? (addEventListener) — B. Button click 3. What happens here? (onclick) — B. Runs on click 4. What is the output? (map without return) — B. [undefined, undefined, undefined] 5. Which is correct to get input value? — B. value 6. What is the output? (array.find) — B. 2 7. What does async/await simplify? — B. Callbacks 8. What is the output? (array.filter) — B. [3, 4] 9. Which is best for spacing between flex items? — B. gap 10. What does querySelector do? — B. First match 11. Layout direction (Tailwind flex-col md:flex-row) — B. Column on small, row on medium+ 12. Why does map return undefined? — B. Missing return 13. What does JSON.stringify() do? — A. Converts object to string 14. What does Array.push() do? — A. Adds element to the end 15. What is the use of the spread operator (...) ? — C. Copying or merging arrays/objects 16. How to save data in LocalStorage? — B. setItem('key', 'value') 17. Difference between const and let — A. const cannot be reassigned 18. == vs === — B. === checks both value and type 19. What is the output of typeof null? — C. "object" 20. What is Hoisting? — A. Moving declarations to the top 21. Why is useState used in React? — B. To manage component state 22. What does p-4 mean in Tailwind? — A. Padding on all sides 23. What does Array.reduce() do? — B. Accumulate values to a single result 24. Why use event.preventDefault()? — A. Stops default browser behavior 25. Which method does fetch() use by default? — A. GET 🚀 #javascript #reactjs #webdevelopment #frontenddeveloper #coding #learninginpublic #Akbiplob

You’re still building forms manually from JSON? --- Every time I get a JSON response, I end up doing the same thing: → read structure → map fields → wire inputs → repeat… again --- It’s boring. It’s repetitive. And it shouldn’t exist in 2026. --- So I built something for myself: 👉 Paste JSON 👉 Get a working form instantly --- No setup. No backend. No config headaches. Just: JSON → UI --- Introducing: 🔧 JSON → Form (part of useSignal) 👉 https://lnkd.in/grSx-SEi --- It’s fully browser-native. Which means: - your data never leaves your machine - everything runs instantly - no dependency on any service --- This isn’t just a generator. It’s a way to: → skip repetitive UI work → prototype faster → actually focus on logic --- Try it once. You probably won’t go back to building forms manually. --- 💬 Curious — how are you handling JSON → forms today? #frontend #webdevelopment #javascript #reactjs #devtools #buildinpublic #productivity #developers #webdev

Pure functions improve testability and composability. ────────────────────────────── async/await Clean Async Code Pure functions improve testability and composability. #javascript #async #await #asynchronous ────────────────────────────── Key Rules • Avoid mutating shared objects inside utility functions. • Write small focused functions with clear input-output behavior. • Use const by default and let when reassignment is needed. 💡 Try This const nums = [1, 2, 3, 4]; const evens = nums.filter((n) => n % 2 === 0); console.log(evens); ❓ Quick Quiz Q: What is the practical difference between let and const? A: Both are block-scoped; const prevents reassignment of the binding. 🔑 Key Takeaway Modern JavaScript is clearer and safer with immutable-first patterns. ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

Here are your 37 topics organized by section: Execution, Scope & Memory 1. Execution context & call stack 2. var, let, const (scope + hoisting + TDZ) 3. Lexical scope & scope chain 4. Closures (behavior, not definition) 5. Shadowing & illegal shadowing 6. Garbage collection basics & memory leaks Functions & this 7. Function declarations vs expressions 8. this binding rules (default, implicit, explicit, new) 9. call, apply, bind 10. Arrow functions vs normal functions 11. Currying & partial application 12. Higher-order functions Async JavaScript 13. Event loop (call stack, microtasks, task queue) 14. Promises & chaining 15. async / await (error handling & sequencing) 16. Race conditions & stale closures 17. Timers (setTimeout, setInterval) vs microtasks 18. Promise utilities (all, allSettled, race, any) Data, References & ES6+ 19. == vs ===, truthy / falsy & type coercion deep dive 20. Object & array reference behavior 21. Deep vs shallow copy 22. Destructuring, rest & spread 23. Map, Set, WeakMap, WeakSet Prototypes & OOP 24. Prototype chain & Object.create() 25. class syntax vs prototype under the hood 26. Inheritance patterns Error Handling 27. try/catch with async/await edge cases 28. Custom error types 29. Unhandled promise rejections Modules 30. ES Modules (import/export) vs CommonJS (require) 31. Tree shaking concept 32. Dynamic imports — import() Iterators & Generators 33. Symbol.iterator & iterable protocol 34. Generator functions (function*) 35. Connecting generators to RxJS mental model Browser & Runtime Fundamentals 36. Event bubbling, capturing, delegation, preventDefault vs stopPropagation 37. DOM vs Virtual DOM, Reflow vs repaint, Web storage, Polyfills #angular #javascript #html #css #webdeveloper #angularDeveloper

There's always something to gain from going back to the fundamentals. Between client projects and building out systems, I've been carving out time to sharpen my JavaScript. Recently covered: → Primitive vs Reference Data Types → Number, Null, Undefined, BigInt, and Symbols → The typeof operator → Ternary operators → Introduction to Object Destructuring None of this is glamorous. But the designers and developers who write clean, predictable code are almost always the ones who took the fundamentals seriously. Still a few more concepts on the list. Sharing the progress as I go. #JavaScript #WebDevelopment #Webflow #LearningInPublic

If a function fires 1000 times, but you only want it to run every 100 calls, there's a neat technique for that. Today I learned about counter-based sampling in JavaScript. Use Cases • sampling analytics events to reduce load • limiting noisy logs or metrics • running expensive work periodically in high-frequency flows How it's different from throttling? Sampling is call-count based → run every N calls Throttling is time-based → run at most once every X ms So if 1000 events fire instantly: • sampling (every 100) → runs 10 times • throttling (200ms) → may run only once Different problems, different tools. #javascript #softwareengineering #frontend #webdevelopment #todayilearned

For years, finding the last matching element or its index in a JavaScript array meant writing clumsy loops or reversing arrays. This not only added unnecessary lines of code but also obscured the intent, making your code harder to read and maintain. Many developers still resort to these manual iterations because they're familiar patterns or they're simply unaware of the newer, more direct Array methods. Using verbose loops for a common task like finding the last occurrence can introduce subtle bugs, especially when managing loop conditions and break statements. The lack of a native `findLast()` or `findLastIndex()` method led to developers crafting custom solutions that varied in performance and reliability across codebases. This inconsistency made onboarding new team members tougher and slowed down code reviews. It also forced developers to write more complex conditional logic to handle edge cases like empty arrays or no matches. With `Array.findLast()` and `Array.findLastIndex()`, introduced in ES2023, you can achieve this with a single, expressive line of code. These methods are concise, performant, and make your code's purpose immediately clear. Are you still using reverse loops or `reduceRight()` to find the last matching item? #JavaScript #ES2023 #WebDevelopment #CodeCleanUp #JSArrayMethods

Most developers know map, filter and reduce exist. Fewer know when to use which one. Here is how I think about it: map() — when you need to transform every element Same number of items in, same number out. Just different shape. filter() — when you need to remove some elements Same data, fewer items. Nothing is transformed. reduce() — when you need one value from the whole array Total, average, grouped object, flat list — anything single. The real power comes from chaining them: devs  .filter(d => d.active)  .map(d => d.name)  .sort() Three operations. One clean chain. No loops. No temporary variables. And the ones people forget: find() — returns one element, not an array some() — true if at least one matches every() — true only if all match flatMap() — map + flatten in one step Save this for your next code review. Which array method do you reach for most often? #JavaScript #WebDevelopment #Frontend #CleanCode #SoftwareEngineering

Custom hooks can make your codebase harder to debug. Not easier. Here’s why 👇 We often extract logic into hooks: → useUsers → useAuth → useDashboard Sounds clean. But over time: ✖ Logic becomes hidden ✖ Data flow becomes indirect ✖ Debugging requires jumping files Now imagine debugging: → Component → Hook → Another Hook → API You lose context. What I’ve learned: ✔ Not everything should be a hook ✔ Keep critical logic visible ✔ Avoid over-abstraction Use hooks for: → Reusability with clarity Avoid hooks for: → Hiding complexity Key insight: Abstraction reduces duplication. But increases cognitive load. Balance matters. #ReactJS #CustomHooks #Frontend #SoftwareEngineering #Architecture #JavaScript #CleanCode #AdvancedReact #Engineering #Programming