#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

🚀 Built a Notes Maker App using JavaScript (DOM Manipulation)...! Just deployed my mini project where users can create, edit, delete and manage notes in a clean UI...🎨 ✨ Features:- 🧾 Add Notes with Title & Content ✏️ Edit Notes instantly ❌ Delete Individual Notes 🧹 Clear All Notes at once 📱 Responsive UI ⚡ Built with Vanilla JavaScript (DOM) 🛠️ Tech Stack:- ✔ HTML5 ✔ CSS3 ✔ JavaScript (ES6 + DOM Manipulation) 🔗 GitHub Repository 📦 Source Code: https://lnkd.in/dDXcDRXe 🎬 Live Demo: https://lnkd.in/dx55p_eW 🎯 What I Learned 🔹 DOM element selection & events 🔹 Dynamic UI updates 🔹 Array-based state management 🔹 Clean & readable JS code Planning to upgrade with localStorage + Search + Dark Mode next! 🔥 #javascript #dom #webdevelopment #frontend #projects #html #css #vanillajs #developer #learning

📢 New Video Uploaded | Web Development Series A new video is now live on JDCodebase 🎥 In this tutorial, we build a Todo App using HTML, CSS, and JavaScript from scratch. This video is part of the Web Development Series and is specially designed for beginners. 🔹 What you’ll learn in this video: - Designing a clean Todo App UI using HTML & CSS - Adding and managing todos using JavaScript - Handling user actions like add, edit, and delete - Using DOM manipulation in a real project - Storing todos using localStorage - Understanding how a complete frontend project works step by step - This project helps beginners move from basic concepts to real-world JavaScript usage with practical UI interaction. 👉 Source Code: https://lnkd.in/ggenj-pj 👉 Watch the full video on YouTube: https://lnkd.in/gu-8KeXF More beginner-friendly tutorials and projects coming soon on JDCodebase 🚀 #WebDevelopment #HTML #CSS #JavaScript #JavaScriptProjects #FrontendDevelopment #WebDevSeries #JDCodebase #LearnToCode

🚀 Project Showcase: Online Library System (React + Tailwind CSS) I’m excited to share my latest project — an Online Library System, a React-based web application designed to provide a smooth and user-friendly book browsing experience. 📚 Key Features: • Browse books by category with dynamic routing • Search books by title or author • View detailed book information including description and ratings • Add new books using a validated form with Redux state management • Custom 404 error page for improved user navigation 🛠 Technologies Used: React | React Router DOM | Redux Toolkit | Tailwind CSS | Axios ⚠️ Note: Newly added books are stored in the client-side Redux store and reset on page refresh due to API limitations. 🔗 GitHub Repository: https://lnkd.in/gw66_gMU I’d love to hear your feedback and suggestions! #ReactJS #TailwindCSS #Redux #WebDevelopment #FrontendDevelopment #JavaScript #Projects

React Folder Structure Explained – Something I Wish I Knew Earlier 👉 “What does each folder actually do?” Folders like assets, components, hooks, pages, redux felt overwhelming at first. I used them without fully understanding their purpose. So I created this simple breakdown to help beginners like me understand: 📁 assets – Images, fonts, and static files 🧩 components – Reusable UI components 📊 data – Static or structured data 🪝 hooks – Custom React hooks 📄 pages – Main website pages 🛒 redux – State management logic 🛠 utils – Helper & utility functions 📐 layout – Page structure (Header, Footer, Sidebar) ⚛ App.jsx – Root component 🎨 index.css – Global styles 🚀 main.jsx – Application entry point If you’re starting with React.js, save this post — it will clear a lot of confusion 💡 💬 Comment “React” if you want more beginner-friendly content like this. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactBeginner #LearningToCode #MERN

🚀 Note Card Stack App Built using HTML, CSS, and Vanilla JavaScript ✨ Key Features Dynamic form validation LocalStorage-based data persistence Interactive card stack UI (Up / Down navigation) Clean and minimal user interface Efficient DOM manipulation This project helped me strengthen my understanding of JavaScript logic, DOM handling, and UI behavior, while focusing on building practical and user-friendly functionality. Always learning. Always building. 💻 Live link page :- https://lnkd.in/g6eYzdjP 🔖 Hashtags #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #VanillaJS #FrontendDeveloper #LearningByDoing #DeveloperJourney

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

So you wanna build a drag-and-drop tree view in React - that's a great idea. It's like creating a digital LEGO structure, where you can move pieces around to visualize your data in a more intuitive way. He-tree-react is a powerful tool that can help you achieve this. To get started, you'll need a few things: Node.js version 14.0 or higher, a package manager like npm or yarn, and a React project set up. It's also helpful to have a basic understanding of React hooks and JavaScript. You can install he-tree-react using npm, yarn, or pnpm - just run the command and you're good to go. It's easy. He-tree-react provides a simple API for creating interactive tree structures, and you can enable drag-and-drop functionality by setting a couple of props to true. Think of it like building a tree with branches that you can drag and drop to reorder or move around. Key concepts to keep in mind: each node has an id, text, and optional children array - it's like a family tree, where each person has a name, age, and kids. And when you drag and drop nodes, you're essentially moving them to a new branch or reordering them. The library also provides features like custom node rendering, drag constraints, search and filtering, and context menus - it's like having a toolbox full of options to customize your tree view. Check out the official repository for more information: https://lnkd.in/gjCEeKmt Source: https://lnkd.in/gH4Xksh2 #React #DragAndDrop #TreeViews #JavaScript #WebDevelopment

Ever stared at your webpage wondering why elements won't line up the way you want? I've been there. Spent hours adjusting margins and padding, only to realize I didn't understand how HTML elements actually behave. That's why I wrote "HTML Layout Issues? Master Block & Inline" – to help you avoid the frustration I went through. What you'll learn: ✅ Why HTML is called the "skeleton" of the web (and what that actually means) ✅ The critical difference between tags and elements (most beginners confuse these) ✅ How block vs. inline elements work (this one concept fixed 80% of my layout issues) ✅ Which tags to use and when (with real examples you can try right now) ✅ Common mistakes that break your layout (with before/after fixes) This is part of my "Zero to Full Stack Developer" series – a complete roadmap from absolute beginner to building production-ready applications. Read here: https://lnkd.in/gNkrAUpy Follow the complete series: https://lnkd.in/g2urfH2h Which HTML layout issue frustrates you the most? #WebDevelopment #FullStackDeveloper #Programming #HTML #FrontendDevelopment #LearnToCode #WebDesign #ResponsiveDesign #SoftwareEngineering #TechBlog #CodeNewbie

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