moTimeline v2.10.0 is out! New renderCard(item, cardEl) option — skip the built-in card HTML and inject anything you want into each timeline slot. The library still handles column placement, spine, badges, arrows, and addItems(). Perfect for React users: createRoot(cardEl).render(<YourComponent {...item} />) just works. npm install motimeline@latest https://lnkd.in/eV65B7Rs #JavaScript #OpenSource #WebDev #FrontEnd #npm #mattopen #react

𝐀𝐫𝐞 𝐲𝐨𝐮 𝐬𝐭𝐢𝐥𝐥 𝐥𝐞𝐭𝐭𝐢𝐧𝐠 `useEffect` 𝐫𝐞-𝐫𝐮𝐧 𝐲𝐨𝐮𝐫 𝐞𝐱𝐩𝐞𝐧𝐬𝐢𝐯𝐞 𝐥𝐨𝐠𝐢𝐜 𝐟𝐨𝐫 𝐧𝐨 𝐠𝐨𝐨𝐝 𝐫𝐞𝐚𝐬𝐨𝐧? 🤯 It’s a common scenario: you have a `useEffect` that sets up a subscription or an interval, and you really only want it to run once on mount and clean up on unmount. So you put an empty dependency array `[]`. But what happens when you need a reference to a mutable value (like a prop or state) inside that effect, but you don't want changes to that value to re-trigger the effect? If you add it to the dependency array, it re-runs. If you omit it, you risk stale closures. Enter `useRef` as your stable escape hatch! Instead of: ```typescript useEffect(() => { const handler = () => console.log(someProp); // someProp is stale window.addEventListener('scroll', handler); return () => window.removeEventListener('scroll', handler); }, []); // Empty deps, but `someProp` is captured at mount ``` Try this pattern: ```typescript const latestSomeProp = useRef(someProp); useEffect(() => { latestSomeProp.current = someProp; // Update the ref on every render const handler = () => console.log(latestSomeProp.current); // Always fresh! window.addEventListener('scroll', handler); return () => window.removeEventListener('scroll', handler); }, []); // Effect itself only runs once ``` This way, your `useEffect` only runs once for setup/teardown, but `latestSomeProp.current` always holds the most up-to-date value. It’s perfect for ensuring cleanup functions always operate on the current state or props, without re-triggering the effect. It's a subtle but powerful pattern for optimizing performance and avoiding tricky bugs in React. What other `useEffect` patterns have saved you from debugging hell? Share your tips! #React #FrontendDevelopment #JavaScript #WebDev #Performance

🚀 Redux Toolkit Made Simple! Understanding Redux doesn’t have to be confusing anymore. 👉 Just remember this simple flow: Slice → Action → Reducer → Store → UI Update 💡 Trick to remember: “S.A.R.S.U” (Slice, Action, Reducer, Store, UI) With Redux Toolkit: ✔️ You write less boilerplate ✔️ Logic stays clean & scalable ✔️ State management becomes predictable ✨ Pro Tip: Use createAsyncThunk() for handling API calls easily. #Redux #ReduxToolkit #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic

Ever noticed this in JavaScript? 👀 -------- console.log("start"); setTimeout(() => console.log("timeout")); Promise.resolve().then(() => console.log("promise")); console.log("end"); -------- Most developers expect setTimeout to run first. But the output is: -------- start end promise timeout -------- Why? Because Promises go into the Microtask Queue, while setTimeout goes into the Macrotask Queue. The JavaScript event loop always processes all microtasks before the next macrotask once the call stack is empty. Execution order becomes: 1️⃣ Synchronous code 2️⃣ Microtasks (Promise, queueMicrotask) 3️⃣ Macrotasks (setTimeout, setInterval, DOM events) So even setTimeout(fn, 0) will run after Promise callbacks. Understanding this small detail helps explain many tricky async bugs in real applications. #javascript #webdevelopment #frontend #async #eventloop

setTimeout(fn, 0) is not immediate. Here is why. ⏱️ If you think setTimeout runs "right now," you are misunderstanding the JavaScript Event Loop. The Hierarchy of execution: Synchronous Code: The call stack (LIFO). Microtasks: Promises, queueMicrotask. (These run immediately after the stack empties, blocking rendering). Macrotasks: setTimeout, setInterval. (These run after the microtask queue is clear). The "Gotcha": If you chain too many Promises or heavy calculations in microtasks, you will block the UI update (layout/paint) completely. setTimeout yields control back to the browser, allowing it to breathe (paint a frame) before running your code. Knowing where to queue your work is just as important as the work itself. #JavaScript #EventLoop #AsyncProgramming #WebPerf

🌐 Day 62/100 — JavaScript Closures (the magic of remembering) Ever wondered how some functions "remember" values even after they finish running? That’s a closure. In simple words: A function can carry its outer variables with it — like a backpack — wherever it goes. Example: function counter() { let count = 0; return function () { count++; console.log(count); }; } const increment = counter(); increment(); // 1 increment(); // 2 increment(); // 3 Even though counter() already executed… count is still alive inside increment(). That’s closure memory. 💡 Why real websites use closures: • Data privacy (hide variables from global scope) • Event handlers remembering values • Caching & performance optimization • React hooks & state management So closures aren’t just theory — they power interactive UIs every day. Today’s takeaway: 👉 Functions in JavaScript don’t just run… they remember. #JavaScript #WebDevelopment #Frontend #100DaysOfCode #LearningInPublic

⚠️ One tricky thing in React that confused me at first: useEffect dependencies At first, I thought useEffect just runs magically. But the truth is very simple 👇 🧠 Think of useEffect like this: “React, run this code after render, and re‑run it only when I tell you to.” That “telling” happens through the dependency array. ✅ Examples (super simple) useEffect(() => {  console.log("Runs once"); }, []); ➡️ Runs only when component mounts but for the below case useEffect(() => {  console.log("Runs when count changes"); }, [count]); ➡️ Runs every time count changes 🚨 The tricky part If you use a variable inside useEffect but forget to add it as a dependency, React will use an old value (stale data). 🧠 Rule to remember: If you use it inside useEffect, it should be in the dependency array. Once I understood this, useEffect stopped feeling scary 😊 Just logic + clarity. #React #JavaScript #Hooks #useEffect #Frontend #LearningInPublic

Can you implement your own bind? Here’s a simplified version: Function.prototype.myBind = function(context) { const fn = this; return function(...args) { return fn.apply(context, args); }; }; Usage: function greet() { console.log(this.name); } const user = { name: "Prakhar" }; const boundFn = greet.myBind(user); boundFn(); // Prakhar Understanding this makes call, apply, and bind crystal clear. Deep knowledge > memorizing syntax. #javascript #frontend #webdevelopment #engineering

One of the most revealing benchmarks: swap two rows in a list. React: 29.7 ms Granular: 7.3 ms 75 percent faster. Here's why the difference is so dramatic. React re-renders the entire list component, builds a new VDOM tree, and runs its diffing algorithm across all rows to find what moved. It's doing linear-time work to handle a two-element swap. Granular updates only the two affected DOM subtrees. It knows exactly which bindings changed because each reactive value maintains direct references to its DOM nodes. No tree walk. No reconciliation. Cost proportional only to the change - which is 2 nodes. This is the direct-binding advantage in its clearest form: work proportional to what changed, not proportional to what exists. Benchmarks from js-framework-benchmark suite: https://lnkd.in/dtQqp9YW #javascript #frontend #performance #benchmarks #webdev