International JavaScript Conference’s Post

We built a React calendar engine that's 4.9 KB gzipped with zero dependencies. Here's how that stacks up: - @gentleduck/calendar: 4.9 KB, 0 deps - react-day-picker v9: 20 KB + date-fns - react-calendar: 18 KB - react-datepicker: 38 KB + date-fns + react-popper - react-aria (DatePicker): 45 KB + 6 dependencies And it's not a stripped-down toy: - 4 calendar systems (Gregorian, Islamic, Persian, Hebrew) - 7 pluggable date adapters - Single, range, and multi-date selection - Headless useCalendar hook, you own the rendering - Full RTL support The trick isn't doing less. It's architecture. Shared internals are loaded once. Every additional feature adds only its own code. No dependency tree bloat. No duplicated utils across packages. Open source. MIT licensed. https://lnkd.in/dyXgCUvJ #react #opensource #javascript #typescript #frontend #webdev #calendar

⚡ A Common JavaScript Misconception About the Event Loop Many developers think: "setTimeout(fn, 0) runs immediately." That’s incorrect. Even with 0 milliseconds, the callback still goes through the Event Loop cycle. Example: console.log("A"); setTimeout(() => console.log("B"), 0); Promise.resolve().then(() => console.log("C")); console.log("D"); Output: A D C B Why? Because JavaScript has two queues: 🔹 Microtask Queue → Promises, MutationObserver 🔹 Callback Queue → setTimeout, setInterval The Event Loop always processes microtasks first. Understanding this difference is critical when debugging async behavior in real applications. Master the Event Loop → Master asynchronous JavaScript. #javascript #asyncjavascript #webdevelopment #frontend #mernstack

𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? JavaScript is single-threaded, but it can handle asynchronous operations efficiently using the Event Loop. The Event Loop is a mechanism that allows JavaScript to perform non-blocking operations like API calls, timers, and file reading while still running on a single thread. Here’s how it works: 1️⃣ Call Stack – Executes synchronous JavaScript code. 2️⃣ Web APIs – Handles async operations like "setTimeout", "fetch", and DOM events. 3️⃣ Callback Queue / Microtask Queue – Stores callbacks waiting to be executed. 4️⃣ Event Loop – Continuously checks if the call stack is empty and pushes queued callbacks to the stack for execution. This architecture allows JavaScript to manage asynchronous tasks without blocking the main thread, making it ideal for building fast and scalable web applications. Understanding the Event Loop is essential for mastering Promises, async/await, callbacks, and performance optimization in JavaScript. #JavaScript #EventLoop #WebDevelopment #FrontendDevelopment #NodeJS #AsyncJavaScript #CodingInterview #SoftwareEngineering #FullStackDeveloper #LearnToCode

Don't do JavaScript. I mean it. The browser is a highly optimized engine written in C++, Rust, and C. It parses HTML. It diffs the DOM. It handles routing, focus, accessibility, scroll, history. It compresses repeated patterns with Brotli by factors of thousands. It is insanely good at this. And we keep replacing it. With JavaScript. ◆ How we got here Servers used to be slow. Threading was expensive. So we pushed logic to the client. SPAs made sense — in 2010. That constraint is gone. The complexity stayed. And quietly, over years, frameworks started re-implementing the browser itself. Virtual DOM. Client router. Hydration. State machines. JSON APIs just to feed them. We're not solving data problems anymore. We're solving framework problems. ◆ The forgotten principle: Progressive Enhancement Start with HTML that works. Always. No JavaScript required. Then layer interactivity on top — not as a dependency, but as an improvement. A page that works without JS and flies with it. That's not a compromise. That's good engineering. ◆ What the fast path actually looks like → Render HTML on the server — fully functional, accessible, indexable → Stream updates over a single SSE connection → Let the browser do diffing, layout, rendering → Repeated HTML over SSE + Brotli is often cheaper than your clever JSON diff → Add ~10 KB of Datastar for local state and reactivity on top → No build step — easier DevOps, faster iteration No virtual DOM. No hydration step. No client router. The server stays the source of truth. JS enhances — it doesn't own. ◆ Measure, don't vibe If one approach is 30–40x faster, uses less memory, less bandwidth, and less code — be willing to throw the old one away. The web was never slow. We just forgot how to use it. Delaney Gillilan explains this better than anyone — link in comments 👇 #JavaScript #ProgressiveEnhancement #WebDevelopment #Datastar #Hypermedia #SSE #CraftCMS

When you understand web beyond frameworks: At the core of every modern web application—no matter the framework—is JavaScript. Not just syntax. But how it actually works under the hood. When you click a button on a web page, a lot more happens than we realize: * The browser parses HTML into a DOM structure * JavaScript hooks into that structure via event listeners * The call stack executes synchronous code * The event loop coordinates async operations * The callback queue / microtask queue decides what runs next * The rendering engine decides when and what to paint Understanding this changes everything. Because performance issues, bugs, and scalability problems often live below the framework layer. 👉 Slow UI? Could be blocking the main thread 👉 Unexpected behavior? Could be async timing 👉 Re-renders? Could be inefficient state updates 👉 Memory leaks? Could be unmanaged subscriptions Frameworks come and go but these fundamentals stay. #JavaScript #WebDevelopment #SoftwareEngineering #Frontend #Performance #SystemDesign #Programming #Developers

⚡ Debounce vs Throttle — Optimizing Event Handling in JavaScript Handling frequent events like typing can quickly lead to unnecessary function executions and performance issues if not controlled properly. 🧠 Key Differences: • Normal execution → Runs on every event trigger • Debounce → Executes only after the user stops triggering the event • Throttle → Limits execution to once per specified time interval 💡 Why it matters: Uncontrolled event handling can lead to excessive API calls and degraded performance. Applying the right strategy ensures efficient, predictable, and optimized behavior. ⚡ Takeaway: Use debounce for input fields and search functionality Use throttle for continuous events like scrolling or resizing Choosing the right approach is essential for building high-performance, scalable frontend applications. #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #Performance #CleanCode #SoftwareEngineering #Debounce #Throttle

💡 JavaScript Tip: Closures are one of the most powerful — and most misunderstood — concepts in JS. A closure is simply a function that remembers the variables from its outer scope, even after that scope has finished executing. Here's a classic example: function makeCounter() {  let count = 0;  return function () {   count++;   return count;  }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 The inner function has "closed over" the count variable — it keeps it alive and private. Why does this matter in real projects? → Data privacy (no need to expose variables globally) → Factory functions & currying → Event handlers that remember state → Memoization & caching Once you truly understand closures, a lot of JavaScript starts making sense. ♻️ Repost to help someone struggling with JS fundamentals. #JavaScript #WebDevelopment #CleanCode #Frontend #CodingTips

Writing a JavaScript Framework: Project Structuring Simplified   When building a JavaScript framework, structuring your project is everything. A well-designed architecture ensures scalability, maintainability, and performance.   This visual (inspired by RisingStack Engineering) highlights how different layers interact within a framework: 🔹 Middlewares – Handle core functionalities like routing, rendering, and data interpolation 🔹 Helpers – Tools like compiler and observer that power reactivity and optimization 🔹 Symbols & Components – The building blocks that connect logic with UI 🔹 Your App – The central piece that ties everything together seamlessly   💡 The takeaway? A strong separation of concerns and modular design is what makes frameworks robust and developer-friendly. If you’re exploring how frameworks work under the hood, this is a great starting point to understand the bigger picture.   ✨ Build smarter. Structure better.   #JavaScript #WebDevelopment #Frontend #Frameworks #SystemDesign #SoftwareArchitecture #FullStack #Developers #Coding #TechLearning

JavaScript is single-threaded… yet it handles timers, API calls, and user events at the same time. 🤯 How? Meet the Event Loop 🔁 — the system that keeps JavaScript running smoothly. Here’s the simple flow: 🧠 Call Stack – Executes synchronous code first 🌐 Web APIs – Handles async tasks like setTimeout, fetch, DOM events 📥 Queues – Completed tasks wait here to run But there’s a twist 👇 ⚡Microtask Queue (High Priority) Examples: Promise.then(), queueMicrotask() ⏳ Macrotask Queue (Lower Priority) Examples: setTimeout, setInterval, DOM events When the stack is empty, the Event Loop checks: 1️⃣ Microtasks first 2️⃣ Then Macrotasks Example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); Output 👇 1 → 4 → 3 → 2 Because Promises run before setTimeout. Understanding this small concept can save you hours of debugging async code.🚀 Yogita Gyanani Piyush Vaswani #JavaScript #WebDevelopment #AsyncProgramming #FrontendDevelopment #EventLoop #CodingConcepts