Why I switched from js-joda to date-fns for Date and Time 🤔 📅 On my last project, we were using two different date and time libraries: js-joda and date-fns. This made the code harder to read and support: two different APIs, two ways to work with dates, extra conversions. I decided we should keep only one library and chose date-fns. Here’s why date-fns worked better for us: ▪️Simple, functional API With date-fns you just call functions like addDays(date, 3) or format(date, 'dd.MM.yyyy'). You work with the native Date object, which is familiar to any JavaScript developer. ▪️Easier for new developers New people don’t have to learn js-joda types like LocalDate or ZonedDateTime. It’s much faster to start writing code when you only use Date + small helper functions. ▪️Less boilerplate and conversions Before, we often had to convert between js-joda objects and Date. With date-fns everything stays in one format, so there is less extra code and fewer mistakes. ▪️Good for bundle size date-fns supports tree-shaking 🔥 You import only the functions you actually use, so the bundle stays smaller. ▪️Lots of examples and community It’s easy to find examples, answers, and snippets for date-fns online. That saves time when you need to solve common tasks with dates and time. After we switched fully to date-fns, the codebase became more consistent and easier to maintain. 👍 📝 Sometimes the best choice is not the "most powerful" library, but the one that keeps the project simple and clear for the whole team. #React #JavaScript #TypeScript #Frontend #Date #DateTime
Switching to date-fns for simpler date and time management
More Relevant Posts
-
Most JavaScript developers think they understand equality… until this happens: {} === {} // false And suddenly… nothing makes sense. Let me show you what’s REALLY happening 👇 In JavaScript, not all data is equal. 👉 Primitives (numbers, strings…) are stored by value 👉 Objects are stored by reference (in memory) So when you compare objects, you're NOT comparing their content… You're comparing their addresses. Now here’s where things get interesting 🔥 JavaScript doesn’t just compare values… It actually transforms them behind the scenes using something called: 👉 Type Coercion Example: "5" - 1 // 4 Why? Because JS silently converts "5" → number. But what about objects? 🤔 const obj = { id: 105 }; +obj // NaN ❌ JavaScript doesn’t know how to convert it. Except… sometimes it DOES 😳 const t1 = new Date(); const t2 = new Date(); t2 - t1 // works ✅ Wait… how did that happen?! This is where things go from “JavaScript” to magic 🧠✨ Behind the scenes, JS uses: 👉 Symbol.toPrimitive A hidden mechanism that tells the engine: “Hey, if you need to convert this object… here’s how to do it.” And here’s the crazy part 👇 You can control it yourself. const user = { [Symbol.toPrimitive](hint) { return 105; } }; +user // 105 ✅ This is called: 👉 Metaprogramming You’re not just writing code… You’re controlling how the language itself behaves. 💡 Why this matters? Because: You avoid weird bugs You understand how JS REALLY works You level up from “writing code” → “engineering behavior” And now you understand why tools like TypeScript exist… 👉 To protect you from all this hidden complexity. 🚀 Final thought: Most developers try to avoid JavaScript quirks… But the best developers? They understand them… and take control. #JavaScript #Frontend #WebDevelopment #Programming #SoftwareEngineering #TypeScript #CleanCode #100DaysOfCode #MERNStack #CodingTips #LearnToCode
To view or add a comment, sign in
-
-
🚀 JavaScript just got smarter (again)… are you keeping up? Most developers are still catching up with ES6… But JavaScript has moved way ahead. Here are some latest JS features that can actually level up your code 👇 🔥 𝟭. 𝗔𝗿𝗿𝗮𝘆.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲.𝘁𝗼𝗦𝗼𝗿𝘁𝗲𝗱() (𝗡𝗼 𝗺𝘂𝘁𝗮𝘁𝗶𝗼𝗻!) We’ve all done this: arr.sort() Problem? It mutates the original array 😬 Now: const sorted = arr.toSorted(); ✅ No side effects ✅ Cleaner functional approach 🔥 𝟮. 𝗔𝗿𝗿𝗮𝘆.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲.𝘁𝗼𝗥𝗲𝘃𝗲𝗿𝘀𝗲𝗱() Instead of: arr.reverse() Use: const reversed = arr.toReversed(); 👉 Original array stays untouched (finally!) 🔥 𝟯. 𝗔𝗿𝗿𝗮𝘆.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲.𝘁𝗼𝗦𝗽𝗹𝗶𝗰𝗲𝗱() Replace this messy mutation: arr.splice(1, 2, 'new') With: const newArr = arr.toSpliced(1, 2, 'new'); 💡 Immutable + predictable state (React devs… you’ll love this) 🔥 𝟰. 𝗢𝗯𝗷𝗲𝗰𝘁.𝗵𝗮𝘀𝗢𝘄𝗻() (𝗕𝗲𝘁𝘁𝗲𝗿 𝘁𝗵𝗮𝗻 𝗵𝗮𝘀𝗢𝘄𝗻𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝘆) Old way: obj.hasOwnProperty('key') Modern way: Object.hasOwn(obj, 'key') ✅ Safer ✅ Cleaner ✅ No prototype issues 🔥 𝟱. 𝗧𝗼𝗽-𝗹𝗲𝘃𝗲𝗹 𝗮𝘄𝗮𝗶𝘁 No more wrapping in async functions: const data = await fetch(url); 🚀 Makes scripts and modules much cleaner 🔥 𝟲. 𝗳𝗶𝗻𝗱𝗟𝗮𝘀𝘁() & 𝗳𝗶𝗻𝗱𝗟𝗮𝘀𝘁𝗜𝗻𝗱𝗲𝘅() Find from the end of the array: arr.findLast(x => x > 10); 💡 Super useful in real-world data processing ⚠️ Reality check: Most devs don’t fail because they don’t know JS… They fail because they write outdated JS. 💡 If you're serious about growth: Start writing modern, immutable, predictable JavaScript Follow for more real-world dev insights 🚀 #javascript #webdevelopment #frontend #reactjs #softwareengineering #programming #coding #developers #365DaysOfCode #DAY80
To view or add a comment, sign in
-
-
🚀 JavaScript String Interpolation: Small Feature, Big Impact Ever noticed how JavaScript automatically converts arrays into strings when used inside template literals? That’s interpolation behavior in action—and it can be both helpful and tricky. 💡 Implicit Behavior When you embed an array inside a template string: const items = ['React', 'Node', 'TypeScript']; console.log(`Stack: ${items}`); 👉 Output: Stack: React,Node,TypeScript JavaScript internally calls .toString() on the array, which joins elements with commas by default. ⚠️ The Catch This implicit behavior might not always give you the format you want. It works—but not always professionally or readably. ✅ Better Approach: Explicit Control const technologies = ['React', 'Node', 'TypeScript']; const sentence = `I work with ${technologies.join(', ')} daily.`; 👉 Output: I work with React, Node, TypeScript daily. 🔥 Why This Matters Improves readability of your output Gives you full control over formatting Avoids unexpected results in production code 🧠 Pro Tip Always prefer explicit .join() when formatting arrays in strings—clean code > clever shortcuts. #JavaScript #WebDevelopment #CleanCode #Frontend #reactjs #nodejs #ProgrammingTips
To view or add a comment, sign in
-
-
Why Can’t I Use 'super.variable' in TypeScript? (Simple Explanation) I recently got confused by something in TypeScript 👇 I tried to access a parent class property using 'super.variable'… and it didn’t work. 💡 Here’s the simple reason: 👉 'super' only works with **methods**, not **properties** So: * 'super.method()' ✅ works * 'super.variable'❌ doesn’t work --- 🔍 Why? In JavaScript/TypeScript: * Methods are stored in something called the *prototype* * Properties (variables) are usually stored directly in the object (inside the constructor) 'super' looks at the **parent’s prototype**, so it can find methods - but not properties. --- 💡 Example: class Parent { num:number = 10; getValue() { return this.num; } } class Child extends Parent { num:number = 30; print() { console.log(super.getValue()); // ✅ works console.log(this.num); // ✅ correct way - Print overriden value console.log(super.num); // ❌ undefined } } --- ✅ Takeaway: If you want to access a parent property, just use 'this.variable' --- If you're learning TypeScript or JavaScript, this is one of those small things that can be confusing at first 😅 Did this ever confuse you too? #JavaScript #TypeScript #Beginners #WebDevelopment
To view or add a comment, sign in
-
Blog 05 of my JS Unlocked series is live! 🚀 Arrow Functions in JavaScript: A Simpler Way to Write Functions 👇 One of the best upgrades modern JavaScript ever got — less typing, cleaner code, same result. In this one I cover: ✅ What arrow functions are and why they exist ✅ Syntax with 0, 1, and multiple parameters ✅ Implicit return — writing a function in ONE line ✅ Normal function vs arrow function — key differences ✅ Real usage inside map() on arrays ✅ Hands-on challenge to practice all of it Would love your feedback if you read it 🙏 🔗 https://lnkd.in/dYFfKgH7 Thanks to Hitesh Choudhary Sir, Piyush Garg #JavaScript #WebDevelopment #Hashnode #WebDevCohort2026 #LearningInPublic #Frontend #ES6
To view or add a comment, sign in
-
𝗧𝗵𝗲 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗡𝗮𝘁𝘂𝗿𝗲 𝗼𝗳 𝗝𝗮 v𝗮𝗦𝗰𝗿𝗶𝗽𝘁 When you start writing JavaScript, it seems simple. Code runs from top to bottom, line by line. But then you learn about timers like setTimeout and setInterval. Things get weird. You find out JavaScript is single-threaded. It can only do one thing at a time. Think of a fast-food restaurant with one cashier. This cashier is like the Call Stack. It does things one by one. If a function takes too long, like fetching data from an API, it won't freeze the whole app. But how does it work? JavaScript uses Web APIs, the Callback Queue, and the Event Loop. Web APIs handle long tasks like network calls. The Callback Queue holds the results. The Event Loop checks the Call Stack and runs the next task. There are two kinds of Callback Queues: Macro Task Queue for timers and Micro Task Queue for promises. Over time, async code in JavaScript evolved. We used Callback Functions, then Promises, and now Async/Await. Async/Await makes async code look sync. You declare a function with async and use await to pause it. This makes it non-blocking. JavaScript is single-threaded, but the Event Loop and environment give it superpowers. The Call Stack runs sync code, and the Event Loop checks for empty stacks to push queue tasks. Source: https://lnkd.in/gERccB3C
To view or add a comment, sign in
-
🚀 Demystifying JavaScript: How the Event Loop Handles Asynchrony! Ever wondered how JavaScript, which is single-threaded (meaning it can only do one thing at a time), manages to handle complex operations like fetching data from an API, waiting for user clicks, and running timers, all without freezing the browser? 🤔 The secret sauce is the JavaScript Event Loop! I put together this infographic to visualize this crucial concept. Understanding the Event Loop is essential for writing efficient, non-blocking code and is a favorite topic in technical interviews. Here’s the TL;DR breakdown using the analogy of a busy kitchen: 1. The Call Stack (The Chef): This is where your synchronous code is executed, one line at a time. Like a chef focusing on one dish, the stack handles current function calls. 2. Web APIs (The Prep Station): When you call an asynchronous function (like setTimeout, fetch(), or attach an event listener), JavaScript doesn't wait. It hands that task off to the browser’s Web APIs (the prep station) and continues executing the next line of code in the Stack. 3. The Callback Queue (The Completed Orders): Once the Web API finishes its task (e.g., the 5-second timer runs out, or the data arrives), the "callback function" associated with that task is placed into the Callback Queue. It's like a completed order waiting to be served. 4. The Event Loop (The Manager): This is the magic! The Event Loop is constantly running. Its only job is to look at the Call Stack and the Callback Queue. If the Call Stack is completely empty 🥣, it takes the first item from the Callback Queue and pushes it onto the Call Stack to be executed. Key Takeaway: Asynchronous tasks don't run in the main thread; they are handled externally and their callbacks are queued up. This keeps your application responsive! ⚡️ Did this visual help clarify how JS works under the hood? What's your favorite analogy for explaining technical concepts? Let's discuss in the comments! 👇 #JavaScript #WebDevelopment #Frontend #Backend #FullStack #SoftwareEngineering #CodingEducation #LinkedInGrowth #CareerDevelopment #TechCommunity
To view or add a comment, sign in
-
-
Most JavaScript developers use async/await every day without actually understanding what runs it. The Event Loop is that thing. I spent two years writing JavaScript before I truly understood how the Event Loop worked. Once I did, bugs that used to take me hours to debug started making complete sense in minutes. Here is what you actually need to know: 1. JavaScript is single-threaded but not blocking The Event Loop is what makes async behavior possible without multiple threads. 2. The Call Stack runs your synchronous code first, always Anything async waits in the queue until the stack is completely empty. 3. Microtasks run before Macrotasks Promise callbacks (.then) execute before setTimeout, even if the timer is zero. This catches a lot of developers off guard. 4. Understanding this helps you write better async code You stop writing setTimeout hacks and start understanding why certain code runs out of order. 5. It explains why heavy computations block the UI A long synchronous task freezes the browser because nothing else can run until the stack clears. The mindset shift: JavaScript is not magic. It follows a very specific execution order and once you see it clearly, you write code that actually behaves the way you expect. 🧠 The Event Loop is one of those concepts that separates developers who guess from developers who know. When did the Event Loop finally click for you? 👇 If this helped, I would love to hear your experience. #JavaScript #WebDevelopment #EventLoop #Frontend #SoftwareEngineering
To view or add a comment, sign in
-
-
𝗧𝗵𝗲 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗡𝗮𝘁𝘂𝗿𝗲 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 When you start writing JavaScript, it seems simple. Code runs from top to bottom, line by line. But then you learn about timers like setTimeout and setInterval. Things get weird. You find out JavaScript is single-threaded. It can only do one thing at a time. Think of a fast-food restaurant with one cashier. This cashier is like the Call Stack. It does things in the order they were received. If a function takes too long, it won't freeze your app. But how does it work? There are key players: Web APIs, the Callback Queue, and the Event Loop. JavaScript doesn't have built-in tools for long tasks like network calls. The environment, like a browser or Node.js, handles these tasks. Web APIs handle tasks in the background. When done, they add the result to the Callback Queue. The Event Loop checks the Call Stack. If it's empty, it moves the first task from the Queue to the Call Stack. There are two types of Callback Queues: Macro Task Queue for timers and Micro Task Queue for promises. Over time, async code in JavaScript evolved. We used callback functions, then promises, and now async/await. Async/await makes async code look sync. You declare a function with async and use await to pause it. This lets other code run, making it non-blocking. JavaScript is single-threaded, but the Event Loop and environment give it async superpowers. Source: https://lnkd.in/gERccB3C
To view or add a comment, sign in
-
Understanding the JavaScript Event Loop is a game changer for writing efficient asynchronous code. Many developers use setTimeout and Promise daily — but fewer truly understand what happens behind the scenes. Here’s a quick breakdown 👇 🔹 JavaScript is single-threaded 🔹 Synchronous code runs first (Call Stack) 🔹 Then all Microtasks execute (Promises, queueMicrotask) 🔹 Then one Macrotask runs (setTimeout, setInterval, DOM events) 🔹 The loop repeats 📌 Execution Priority: Synchronous → Microtasks → Macrotasks Example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); ✅ Output: 1 → 4 → 3 → 2 Understanding this helps in: ✔ Debugging async issues ✔ Optimizing performance ✔ Writing better React applications ✔ Cracking frontend interviews I’ve created a simple infographic to visually explain the entire Event Loop process. If you're preparing for JavaScript or React interviews, mastering this concept is essential. 💬 Now Your Turn 👇 What will be the output of this code? console.log("A"); setTimeout(() => console.log("B"), 0); Promise.resolve().then(() => { console.log("C"); }); console.log("D"); 👨💻 Follow for daily React, and JavaScript 👉 Arun Dubey Drop your answer in the comments 👇 Let’s see who really understands the Event Loop 🔥 #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #EventLoop #CodingInterview
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development