Abdul Rahman Ali’s Post

After covering State Machines fundamentals, here's part 2 on using XState state machine library. Just published a complete guide on XState - the powerful Redux alternative for complex application logic. What's covered: • React + TypeScript setup • Async operations without race conditions • Visual debugging tools • Real multi-step form example • When to use it (and when not to) Read it: https://lnkd.in/dzHKjgaf New to State Machines? Start with Part 1 (link in comments). #XState #React #JavaScript #WebDevelopment #StateManagement

Exploring Brimstone, a new JavaScript engine written in Rust. This project supports almost all of the ECMAScript language and offers a bytecode VM, compacting garbage collector, and custom RegExp engine. Use case: Enhanced performance in web apps by leveraging Rust's efficiency. Another use case: Server-side JavaScript execution with improved memory management. Contribute and learn more: https://lnkd.in/g4GrgeBA #JavaScript #Rust #ECMAScript #SoftwareDevelopment #OpenSource

Extracting Types from Arrays Ever needed to get the type of items inside an array without rewriting it manually? You can achieve that with TypeScript as follows ⬇️. const statuses = ["active", "inactive", "pending"] as const; type Status = (typeof statuses)[number]; // "active" | "inactive" | "pending" That is because Arrays in JavaScript are actually objects with numeric keys, So [number] literally means: “Give me the type of whatever is stored at any index in this array.” It even works with arrays of objects: const tabs = [  { label: "Home", value: "/home" },  { label: "About", value: "/about" }, ]; type Tab = (typeof tabs)[number]; // { label: string; value: string; } 💡 This applies the Open/Closed Principle (OCP). #TypeScript #WebDevelopment #Frontend #CodingTips #JavaScript #LearnInPublic

Working with non-TypeScript files in a TS project? In many TypeScript projects, we import files that are not TypeScript: configuration files, templates, schemas, assets, or any file transformed by a loader or build step. By default, TypeScript cannot infer the shape of these imports. The result is either compiler errors or any-typed values. 👉🏻 A simple module declaration resolves this by explicitly defining the expected type This pattern serves two key purposes: - It tells the TypeScript compiler that files matching *.ext are valid modules. - It defines the contract (type) of the imported value so that downstream code receives correct static typing. This technique is essential when working with: - Custom build pipelines that transform files at compile time - Loaders that convert non-TS assets into JavaScript objects (e.g., parsers, code generators, template engines) - Domain-specific formats that need predictable types in the TypeScript layer What strategies are you using to type external or transformed assets in your TypeScript pipelines? 💬 Ali N. #TypeScript #JavaScript #WebDevelopment #SoftwareEngineering #TypeSafety #FrontendEngineering #DevExperience #CodeQuality

Not True: “Primitives are in the Stack, Objects are in the Heap” in javascript. Most of us have heard (or even said): “Primitives are stored in the stack, and objects in the heap.” But that’s not actually true in JavaScript. The ECMAScript specification doesn’t define a memory model, not a “stack,” not a “heap.” It only defines behavior, not how engines must implement that behavior. Memory management is entirely up to the JavaScript engine (V8, SpiderMonkey, JavaScriptCore, etc.). For example: “JavaScript values in V8 are represented as objects and allocated on the V8 heap, no matter if they are objects, arrays, numbers, or strings.” (V8 Blog) Different engines may handle memory differently. “The behavior may vary by engine, and it really doesn't matter to your code. JavaScript’s spec describes behavior, not implementation.” A JS engine might: Store small, short-lived values in the stack or CPU registers. Store large or long-lived values (like big strings or objects) in the heap. Even decide dynamically, based on size, lifetime, or optimization. #JavaScript #FrontendDevelopment #WebDevelopment #CodingTips #JSFacts #V8Engine #ReactJs #FrontendDeveloper

🚀 Day 5 of My 30 Days of JavaScript Challenge 🧩 Problem: Apply Transform Over Each Element in Array (LeetCode #2635) Given an integer array arr and a mapping function fn, return a new array such that: newArray[i] = fn(arr[i], i) Solve this without using the built-in Array.map() method. 💻 Language: JavaScript ❓ Question: https://lnkd.in/eq8qYfpb 💡 Solution: https://lnkd.in/eT5U2kBp 🧠 Concepts Used: Higher-order functions (passing functions as arguments) Loops and callback functions Core idea behind how .map() works internally 📚 Takeaway: By recreating the Array.map() method manually, I learned how callback execution and array transformations work under the hood — a must-know for mastering JavaScript fundamentals. #Day5 #JavaScript #30DaysOfCode #LeetCode #CodingChallenge #WebDevelopment #FrontendDevelopment #100DaysOfCode

🚀 Day 11 of My 30 Days of JavaScript Journey ✅ Challenge: Memoize (LeetCode #2623) The task was to create a memoize(fn) function that caches results so that repeated calls with the same inputs return instantly from cache — without re-executing the original function. This helps improve performance when dealing with expensive computations like fibonacci or factorial, and even simple operations like sum when called repeatedly. 💻 Language Used: JavaScript ❓ Problem Link: https://lnkd.in/gnHmbPih 💡 Solution: https://lnkd.in/gGJZjYY9 🧠 Concept Highlighted: Memoization is a powerful optimization technique that uses caching to avoid repeating calculations. It strengthens understanding of closures, function arguments handling, and performance-oriented JavaScript. #JavaScript #LeetCode #30DaysOfCode #CodingChallenge #WebDevelopment #FrontendDevelopment #Memoization #PerformanceOptimization #LearningEveryday #ProblemSolving

🚀 Day 19 of 30 Days of JavaScript – LeetCode Problem: 1207. Unique Number of Occurrences Today’s challenge was all about checking whether the number of occurrences of each value in an array is unique. ✅ My Approach 1️⃣ Count occurrences I used a for...of loop to count how many times each element appears in the array. 2️⃣ Store frequency results This gives me an object holding the occurrence count of every unique item. 3️⃣ Convert to a Set I extracted the values and converted them into a Set using new Set(), since a set automatically removes duplicates. 4️⃣ Compare values Arrays and sets can’t be directly compared, so I converted both to strings using JSON.stringify() to compare their datatype + values. 5️⃣ Return result If both match, I return true; otherwise, false. #JavaScript #LeetCode #30DaysOfCode #codingjourney #developerlife

Excited to see how JavaScript is evolving in 2025! New server-first frameworks like SvelteKit, Astro, Remix, SolidStart, Qwik, Fresh and Analog are pushing boundaries, while established frameworks such as Next.js and Nuxt continue to innovate (JavaScript Frameworks - Heading into 2025). The ECMAScript 2025 spec introduces powerful features like the RegExp /v flag for enhanced Unicode regex support, Float16Array, Math.f16round(), Promise.try(), and new Set methods like union(), intersection() and symmetricDifference() (JavaScript 2025). These updates will make our code faster, cleaner and more maintainable. #JavaScript #ES2025 #WebDevelopment #TechTrends

🔍 JavaScript Insight: Object Equality by Reference Ever wondered why two objects with identical properties still return false when compared with ===? This quick snippet is a reminder that in JavaScript, objects are compared by reference—not by value. ✅ obj1 === obj3 → true (same memory reference) ❌ obj1 === obj2 → false (different objects, even if identical) Understanding this is key when debugging, designing data flows, or working with state management in React or backend logic. #JavaScript #WebDevelopment #FullStack #CodeTips #DeveloperNotes #ReactJS #InterviewPrep