Creating My Own NPM Package for Reusable Code

My Top 10 VS Code Extensions for Boosting Productivity 💻 As a Frontend Developer, I spend most of my time inside VS Code and having the right extensions makes a huge difference in speed, code quality, and overall workflow. Here are my Top 10 Productivity Extensions that I personally use and highly recommend → Live Server – Instantly preview your projects in the browser. → ESLint – Keeps your code clean and consistent. → GitLens – Supercharges Git right inside VS Code. → Better Comments – Write more meaningful, color-coded comments. → Prettier – Automatically format your code for perfect readability. → GitHub Copilot – Your AI pair programmer → Auto Rename Tag – Rename paired HTML tags automatically. → Path Intellisense – Autocomplete file paths quickly and accurately. → Qodo Gen – Generate boilerplate code faster than ever. → Night Owl Theme – A beautiful dark theme for night coding These extensions have significantly improved my development workflow — from writing cleaner code to saving hours of manual work. If you found this helpful, save this post and try adding a few of these to your setup! -- Tahfeez Mizan #FrontendDevelopment #VSCode #Productivity #SoftwareDevelopment #WebDevelopment #CodingTools #TypeScript #DeveloperLife #JavaScript #SoftwareEngineer #ReactJS #NextJS #Productivity #DevTools #CodeEditor #DeveloperProductivity #AutomationTools #CodingSetup #ProgrammingWorkflow #TechStack #DeveloperExperience

How to Build Custom React Hooks: A Practical Guide Custom hooks are one of React's most underutilized features. They allow you to extract and reuse component logic elegantly, keeping your code DRY and maintainable. In this tutorial, I break down: 𝟭. 𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝗖𝘂𝘀𝘁𝗼𝗺 𝗛𝗼𝗼𝗸𝘀? Reusable functions that encapsulate stateful logic. They can use other React hooks and follow the same rules, but are completely flexible to your needs. 𝟮. 𝗧𝗵𝗲 𝗘𝘀𝘀𝗲𝗻𝘁𝗶𝗮𝗹 𝗥𝘂𝗹𝗲𝘀 - Must start with "use" - Only call at the top level - Can compose other hooks These conventions ensure React can track state correctly. 𝟯. 𝗥𝗲𝗮𝗹-𝗪𝗼𝗿𝗹𝗱 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: 𝘂𝘀𝗲𝗙𝗲𝘁𝗰𝗵 I walk through building a complete data-fetching hook that handles loading states, errors, and data, all reusable across your entire application. 𝟰. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 Some custom hooks I've built in production: - useLocalStorage - Persist state across sessions - useDebounce - Optimize API calls and search - useWindowSize - Responsive UI logic - useAuth - Centralized authentication state 💡 𝗞𝗲𝘆 𝗜𝗻𝘀𝗶𝗴𝗵𝘁: When you find yourself copying the same logic between components, that's your signal to extract it into a custom hook. In my recent projects, using custom hooks reduced code duplication by ~40% and made testing significantly easier by isolating logic from presentation. What's your favorite custom hook to build? Or do you have questions about implementing them? #ReactJS #JavaScript #WebDevelopment #SoftwareEngineering #CustomHooks #FrontendDevelopment #FullStackDevelopment #Programming #CleanCode #ReactTutorial #DeveloperTips #TechEducation #SoftwareDeveloper #CodingTutorial #WebDev #UKJOB

Understanding 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 scoping changed 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴 for me today. Here’s what really clicked and why my code just got a whole lot cleaner 👇 𝟭. 𝗦𝗰𝗼𝗽𝗲 𝗱𝗲𝗰𝗶𝗱𝗲𝘀 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴   `var` is 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻-𝘀𝗰𝗼𝗽𝗲𝗱 (or global), while `let` and `const` are 𝗯𝗹𝗼𝗰𝗸-𝘀𝗰𝗼𝗽𝗲𝗱.   Translation? Your variables finally stay where they belong. No accidental leaks. No silent chaos. 𝟮. 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴: 𝘁𝗵𝗲 𝘀𝗻𝗲𝗮𝗸𝘆 𝗽𝗮𝗿𝘁   `var` gets hoisted and initialized with `undefined`. So yes, you can “use” it before declaring but you probably shouldn’t.   `let` and `const` are hoisted too but not initialized. Try touching them early? You’ll meet the 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲.   Painful lesson → but a safety net for cleaner code. 𝟯. 𝗥𝗲𝗱𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝗼𝗻 & 𝗿𝗲𝗮𝘀𝘀𝗶𝗴𝗻𝗺𝗲𝗻𝘁: 𝗰𝗵𝗼𝗼𝘀𝗲 𝘆𝗼𝘂𝗿 𝗳𝗶𝗴𝗵𝘁𝗲𝗿 → `var`: Can redeclare and reassign (freely... and dangerously). → `let`: Can reassign, not redeclare. → `const`: Neither. Once set, always set. Perfect for fixed values or configs. 𝟰. 𝗪𝗵𝘆 𝗺𝗼𝗱𝗲𝗿𝗻 𝗝𝗦 𝗹𝗼𝘃𝗲𝘀 `𝗹𝗲𝘁` 𝗮𝗻𝗱 `𝗰𝗼𝗻𝘀𝘁` → They make bugs easier to catch. → They make code easier to reason about. → And `const` tells your future self: “This value isn’t changing. Don’t even try.” 𝟱. 𝗧𝗵𝗲 𝗺𝗶𝗻𝗱𝘀𝗲𝘁 𝘀𝗵𝗶𝗳𝘁   Stop writing for “it works.”   Start writing for predictability, readability, and intent. That’s how I see it now → the difference between writing code and writing reliable code. Anyhow, my JavaScript journey just got a clarity upgrade. Next stop → mastering closures. P.S. What’s one JS concept that finally made sense to you after struggling with it? #frontend #webdevelopment #scss #html #javascript #developer #cohort2 #learningjourney

What’s the Main Point of Using .d.ts Files in TypeScript? If you’re working with TypeScript, you’ve probably seen .d.ts files and wondered why they matter. Here’s the simple truth: The main purpose of a .d.ts file is to teach TypeScript about code that doesn’t have built-in types. That’s it. But it makes a huge difference. Why We Use .d.ts Files 1️⃣ Type safety for things TypeScript doesn’t understand When you import CSS modules, JSON, images, or certain JS libraries, TypeScript has no idea what they are. A .d.ts file explains their structure so you don’t get errors. 2️⃣ Create global, reusable types Instead of repeating interfaces everywhere, you can define them once and use them across the entire project without importing. 3️⃣ Add types for plain JavaScript libraries If a third-party library doesn’t provide TypeScript definitions, .d.ts lets you describe them manually so your code stays typed. 4️⃣ Better developer experience More IntelliSense, more autocompletion, fewer mistakes. Your editor becomes smarter. In Short .d.ts files exist to make TypeScript fully understand your project. ✔ Prevents “cannot find module” errors ✔ Makes custom structures strongly typed ✔ Helps you write cleaner, safer, and more predictable code #TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips  #DeveloperLife #CleanCode #ProgrammingBasics #DevCommunity  #CodeSmart #LearnToCode #TechEducation #WebDevTips

Hook: Want to code faster and debug in half the time? 🚀 Your VS Code setup can be your biggest bottleneck or your greatest productivity hack. I've been optimizing my workflow and found these 5 extensions to be absolute game changers: ⚡ ES7+ React/Redux/React-Native snippets: Stop typing boilerplate. This gives you instant code skeletons for components and hooks with simple prefixes (rfce, usememo). A non-negotiable for React devs. 🔄 Auto Rename Tag: A simple time-saver that prevents broken markup. Rename an opening HTML/XML tag, and the closing one updates automatically. 🥷 Console Ninja: My personal favorite for debugging. It displays console.log output and errors directly in your editor, right next to the code. No more flipping to the browser's dev tools. 🎨 Material Icon Theme: Don't underestimate a clean UI. This makes your file explorer instantly scannable with clear, distinct icons for every file and folder. Find what you need, faster. 📸 CodeSnap: The perfect tool for sharing. Create beautiful, presentation-ready screenshots of your code snippets for documentation, blogs, or just asking for help. My philosophy is simple: less time on boilerplate, more time solving problems. What's your "can't-live-without" VS Code extension? I'm always looking for new ones. Drop your favorites below! 👇 💬 Connect & Comment “Extension” below I’ll share the exact extensions I use. 👥 Follow Mohamed Irfaan for early access to the full guide on Front End Development and hands-on tutorials! #VSCode #DeveloperTools #Productivity #WebDevelopment #Coding #ReactJS #JavaScript #VSCodeExtensions #Tech #AI #Software

Every developer should know these core project files! 🔥 Whether you’re working on a small side project or a full-scale production app, these configuration files are the backbone of your setup. 🗝️ .env — Stores sensitive keys and environment variables. Never push it to GitHub! 🚫 .gitignore — Tells Git which files or folders to skip. Keeps your repo clean. 📦 package-lock.json — Locks package versions to ensure consistent builds. 🔢 .nvmrc — Keeps your Node version consistent across the team. 🧩 .editorconfig — Makes sure your code looks the same in every editor. 🧹 .eslintrc — Enforces clean, consistent coding standards. 🎨 tailwind.config.js — Customizes TailwindCSS for your unique design system. ⚙️ tsconfig.json — Controls how TypeScript compiles your code. 🚀 .babelrc — Configures Babel to make your code compatible across browsers. ⚡ vite.config.ts — Manages your Vite build setup for blazing-fast dev experience. 💬 Understanding these files doesn’t just make you a better developer — it makes you a smarter problem solver. Master them, and your workflow will become faster, cleaner, and more professional. 💻✨ #FullStackDevelopment #WebDevelopment #JavaScript #TypeScript #Vite #TailwindCSS #CodingTips #DeveloperCommunity

💛 JavaScript Cheatsheet — Code Smarter, Build Stronger! Excited to share my newly designed #JavaScript Cheatsheet, crafted to help developers, students, and professionals master JS with clarity and confidence. This modern visual guide transforms complex JS concepts into a clean, easy-to-grasp layout — perfect for quick learning and daily reference. ⚡ Key Highlights: - Covers all essential #JavaScript fundamentals — Variables, Data Types, Loops, and Functions. - Deep dive into ES6+ features like Arrow Functions, Destructuring, Template Literals & Modules. - Simplified guide on Async Programming, including Promises, async/await, and Callbacks. - Practical section on DOM Manipulation, Events, and Browser APIs for #FrontendDevelopment. - Explains Array Methods (map, filter, reduce) and Objects with clear examples. - Includes Error Handling, APIs (Fetch, XMLHttpRequest), and Testing Basics. Built with a bright, minimalist yellow theme for readability and visual appeal. - Ideal for both beginners and experienced developers for daily coding or revision. Why You’ll Love It: This cheatsheet is your ultimate JavaScript quick reference — helping you understand, recall, and apply concepts faster. Whether you’re a #WebDeveloper, #JSDeveloper, or just exploring #Programming, it’ll level up your coding efficiency and confidence. 💡 Hashtags: #JavaScript #Frontend #WebDevelopment #CodingCommunity #LearnJavaScript #Programming #DeveloperTools #CodeSmart #ES6 #AsyncJS #DOMManipulation #TechDesign #MATsHub #BuildWithMATsHub #OpenSource #CleanCode

Modern JavaScript – The Game Changer for Every Developer... Here are some key advanced JavaScript concepts that every serious developer should master 👇 1. Asynchronous Programming – Mastering Promises, async/await, and the event loop to write clean, non-blocking code. 2. Closures & Scope – Understanding how functions retain access to their lexical environment helps you write smarter and more efficient code. 3. ES6+ Features – Destructuring, arrow functions, spread/rest operators, template literals, and modules—these features make modern JS elegant and powerful. 4. Prototypes & Classes – Deep knowledge of inheritance and the prototype chain separates beginners from true professionals. 5. Modules & Bundling – Working with ES modules, Webpack, and Vite to build modular, scalable applications. 6. Advanced Patterns – Learn design patterns, immutability, and functional programming to build cleaner and maintainable systems. The more you explore modern JavaScript, the more you realize—it’s not just a language; it’s a mindset. #JavaScript #WebDevelopment #Programming #Frontend #Developer #Learning #Code

Day 8: Scope & Closures In JavaScript, understanding how variables behave inside different parts of your code is essential for building scalable and maintainable applications. Today, I explored an important concept: Scope & Closures Scope determines where variables are accessible whether globally, inside functions, or within blocks. This helps keep code organized, avoids conflicts, and ensures safe data handling. Closures allow functions to “remember” variables from their outer environment, even after that environment is gone. Closures make it possible to create private data and build powerful patterns like counters, modules, and state management logic. Mastering these concepts is key to writing clean, efficient, and secure JavaScript programs. #JavaScript #WebDevelopment #Coding #Frontend #SoftwareEngineering #CleanCode #Developers #TechJourney

🧱 The Difference Between type and interface — and When to Use Each If you’ve been writing TypeScript for a while, you’ve probably used both type and interface — and wondered, “Aren’t they the same?” They look similar, but there are subtle (and powerful) differences that can impact how you structure your code. Let’s break it down 👇 💡 1. Interfaces are extendable — perfect for OOP-like structures interface User { name: string; } interface Admin extends User { role: string; } 👉 Great for models, API responses, or component props that might evolve over time. ⚙️ 2. Types are more flexible — unions, intersections, and beyond type Status = "loading" | "success" | "error"; type ApiResponse = User & { token: string }; 👉 Perfect for combining multiple structures or defining literal types. 🔄 3. Compatibility Both can often be used interchangeably, but when merging is needed (like augmenting libraries), interface wins. When you need more advanced composition or unions, type is your tool. 📘 Quick rule of thumb: Use interface → for object shapes you plan to extend. Use type → for everything else (unions, intersections, advanced types). Mastering both isn’t about memorizing syntax — it’s about knowing which one helps your code stay scalable and readable. Do you prefer type or interface in your projects? Let’s discuss 👇 #TypeScript #JavaScript #WebDevelopment #CodingTips #Frontend