JavaScript Date Math Without Frameworks

Simplicity wins. It's crazy how we overcomplicate things - like using React and Vue for basic math. You want to calculate the difference between two timestamps, right? That's it. But then we go and load up these massive frameworks, and suddenly our tool is bloated. I mean, think about it - a simple calculator shouldn't need 1.5MB of JavaScript, that's just ridiculous. Your users don't care about your state management library, they just want your tool to load fast, and work on any device, even on slow internet. So, what's the solution? Well, for starters, you can handle date math in JavaScript without all the extra baggage. Just write some lean functions that handle edge cases, and keep your code clean and simple - that's the way to go. For example, calculating the difference between two dates can be a breeze - just create a function that takes two dates as input, calculate the years and months between them, and return the result. Done. And let's not forget about accessibility and portability - these are key when building tools. Use functional HTML/CSS/JS that runs on any device, avoid tracking scripts and heavy assets, and keep your code clean and simple. That way, you can ensure your tool is fast, and works for everyone. Check out this article for more on the case for minimalist web tools: https://lnkd.in/gkVc4d4q #JavaScript #WebDevelopment

DAY 2 | WHY DID JAVASCRIPT EVEN NEED NEW VARIABLES — WHEN VAR WAS ALREADY THERE? 🤔 Before React, before modern apps, JavaScript had only one way to store values — var. It worked. But as code grew, problems showed up 👇 🔹 values changed without warning 🔹 same variable behaved differently in different places. 🔹 understanding the code became confusing Example: PROBLEM WITH var var count = 10; var count = 20; console.log(count); Output=20. This confusion became a real issue when applications started growing bigger. So in 2015, JavaScript introduced let and const. 👉 let — for values that can change 👉 const — for values that should not change Example: ✅ WITH const const count = 10; const count = 20; console.log(count); Output: Error,count has been already declared This change was not for style. It was to make code clear, predictable, and easier to understand. And this is exactly the kind of JavaScript React depends on. 💬 If this explanation makes sense (or if you see it differently), let’s discuss in the comments. #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #LearnInPublic #CodingJourney #SoftwareEngineering

#A Small Framework I Built a Long Time Ago Some time ago, out of curiosity more than necessity, we built a small JavaScript framework. Not to compete with React or Vue. Not to create the “next big thing”. Just to really understand how modern frontend frameworks work under the hood. That project became mini-framework-z01. It’s a lightweight framework built with plain JavaScript and focused on fundamentals: Virtual DOM abstraction Simple reactive state with subscriptions Client-side routing for SPAs A small event system Component-based structure One intentional choice was keeping things simple. When state changes, the virtual tree is re-rendered and the framework handles DOM replacement efficiently. No complex magic, just clear logic. I don’t actively maintain it today, but it represents an important step in my learning journey. It was the moment I stopped only using frameworks and started building one. #Built with friends and curiosity ❤️ MOHAMED EL FIHRY Omar Ait Benhammou ibrahim el harraq OUSSAMA BENALI If you’re curious about how frontend tools actually work behind the scenes, this kind of project teaches you a lot. Repo: https://lnkd.in/dq2W3cfD #JavaScript #Frontend #LearningByDoing #BuildInPublic #SoftwareEngineering

So you wanna dive into Vue. It's a wild ride. First things first: you gotta know the basics - we're talking HTML/CSS, JavaScript, NPM/Yarn, Node.js, and Git. It's like building a house, you need a solid foundation. Then you can start to understand how Vue works, which is pretty cool. You'll learn about introduction, installation, and configuration - it's like getting familiar with a new neighborhood. Next up, you'll dive into template syntax, reactivity, and components - this is where things start to get really interesting. And don't worry, you can start with simple projects like a to-do list, just to get a feel for it. As you get more comfortable, you'll start to explore advanced components, and the whole Composição API vs Options API debate - it's like choosing between two different roads, both with their own pros and cons. You'll also learn about custom directives, forms and validation, and events and transitions - it's like adding new tools to your toolbox. And let's not forget about state management, routing, and consuming APIs - this is where you'll start to build more complex applications. It's like going from a small town to a big city, there's a lot more to navigate. But to create really robust applications, you'll need to learn about global state management with Pinia - it's like having a master plan for your city. You'll also need to know about advanced Composição API, performance optimization, and testing with Vue Test Utils and Jest - it's like having a team of experts to help you build and maintain your application. And of course, you'll want to learn about best practices for coding - it's like having a set of guidelines to keep you on track. Finally, you'll get to the fun stuff: Vue CLI and Vite, styling with Tailwind CSS or Vuetify, server-side rendering with Nuxt.js, Progressive Web Apps, and deployment options - it's like having a whole new world of possibilities open up. You can check out this roadmap for more info: https://lnkd.in/ghxUpypj #JavaScript #WebDevelopment

Mastering JSX has made React finally “click” for me. This week, I revisited the fundamentals of JSX, and a few concepts suddenly made React feel much simpler and more powerful. Here’s what stood out: * JSX isn’t magic; it’s just syntactic sugar. <h1>Hello</h1> basically becomes: React.createElement("h1", {}, "Hello") Once you know this, React feels less “black box” and more like JavaScript. ✅ React is Declarative Instead of telling the DOM how to update step-by-step, we describe what the UI should look like — React handles the rest. This leads to cleaner code, fewer bugs, and a better mental model. ✅ Rules that save headaches: - One top-level element only - Use className (not class) - Use {} for expressions - Use ternary instead of if inside JSX - Use {{}} for objects/styles ✅ Styling options: - Inline styles with objects - External CSS files Both are valid depending on the use case. Big takeaway: 👉 JSX is just JavaScript + UI syntax. Once you treat it that way, everything becomes predictable. Sometimes going back to basics unlocks more clarity than learning new libraries. What React concept took you the longest to truly understand? #React #JavaScript #Frontend #WebDevelopment #JSX #Learning #SoftwareEngineering

📚 React js Handwritten notes Most people get stuck in "tutorial hell" because they don't have a structured roadmap . This handbook is designed to help master the library ecosystem faster by focusing on the core principles that drive modern web applications. Concepts Covered: 🔹 The Foundations: Understanding React as a library , the difference between frameworks and libraries , and setting up your environment with bundlers like Parcel or Webpack . 🔹 JSX & Rendering: Mastering JSX syntax , why it isn't just HTML inside JS , and how React efficiently updates the DOM using the Virtual DOM and Diff Algorithm . 🔹 Component Architecture: Building with Functional vs. Class-based components , and implementing Component Composition for scalable UI . 🔹 State Management & Hooks: Creating dynamic applications using useState for local variables and useEffect for handling API calls and side effects . 🔹 Advanced Patterns: Implementing Config-Driven UI , passing data through Props , and optimizing performance with keys and HMR . 🔹 Routing & SPAs: Building seamless Single Page Applications (SPAs) using react-router-dom and client-side routing . #Pro_Tip: Always use unique keys when rendering lists . It allows React to match children in the original tree with the subsequent tree, making tree-conversion efficient and saving expensive re-rendering time . 👉 Which React concept do you find the hardest to master? Let's discuss in the comments! 👇 #reactjs #frontend #webdevelopment #javascript #codingtips #programming #hooks

How I Learned Pagination in React When I first heard the word pagination, I thought: “Okay… another fancy frontend word 😅” But then I faced a real problem. I had a list of data. Too much data. The UI looked messy. Scrolling felt endless. That’s when pagination stopped being a concept and became a need. So I didn’t start with code. I started with a question: 👉 How do humans read data? Not all at once. We read page by page. That’s it. That’s pagination. Then I broke it down in my head like a story: 1️⃣ I have all data (from API or array) 2️⃣ I decide how many items per page 3️⃣ I track current page 4️⃣ I show only the data for that page 5️⃣ Buttons help me move forward or backward Suddenly, it felt… easy. In React, state became my friend: One state for current page One variable for items per page Math did the rest: Start index End index Slice the data No magic. Just logic. The biggest lesson? 📌 Don’t learn features. Learn problems. 📌 Don’t memorize code. Understand behavior. Now when I build pagination, I don’t think like a developer. I think like a user reading a list. And that changed everything. Still learning. Still building. 🚀 One small concept at a time. #ReactJS #FrontendDevelopment #LearningInPublic #WebDevelopment #JavaScript #ReactHooks

What key actually does in React lists Most people think key is for React warnings. It’s not. key exists for one reason only: 👉 to preserve identity between renders React doesn’t diff arrays by position. It diffs elements by identity. Without keys, React assumes: > “same index = same component” That assumption breaks things: input values jump animations glitch local state resets bugs appear that feel random With keys, React can say: > “this is the same item as before - just moved” That’s the entire job. If you’ve ever seen a list behave weirdly after reordering, you’ve already paid the price of missing or unstable keys. This isn’t a React quirk. It’s how reconciliation stays predictable. How senior engineers think about keys Keys should be stable Keys should be data-derived Index is a key only if the list never changes Keys don’t improve performance. They improve correctness. And correctness is what stops 2am bugs. If this resonates, react 👍 Next I’ll break down: why index keys fail how keys affect local state why animations depend on them This is one of those details you only learn after shipping real apps Here’s the core idea in plain JavaScript 👇

React Hooks Simplified – Your Ultimate Visual Guide 🚀 Struggling to remember when to use useEffect vs useLayoutEffect? Or why useMemo even exists? React Hooks changed the game for functional components, but they can be a lot to take in at first. I’ve put together this cheat sheet to help you master the most common hooks and when to reach for them in your projects. 🛠️ The Big 6 You Need to Know: 🔹 useState – Manage local state (numbers, strings, objects). 🔹 useEffect – Handle side effects (API calls, subscriptions, timers). 🔹 useContext – Bypass "prop drilling" to share data globally. 🔹 useRef – Persist values without re-renders or grab DOM elements. 🔹 useMemo – Optimize performance by caching expensive calculations. 🔹 useCallback – Memoize functions to prevent unnecessary child re-renders. Whether you are just starting your React journey or need a quick refresher before an interview, this guide has you covered. Whether you are just starting your React journey or need a quick refresher before an interview, this guide has you covered. 📌 Save this post for your next debugging session! 🔄 Share it with a fellow developer who is mastering the frontend. What’s the one React Hook you use the most? Let’s chat in the comments! 👇 #ReactJS #WebDevelopment #Frontend #CodingTips #JavaScript #ReactHooks #SoftwareEngineering #TechCommunity #100DaysOfCode