Make your code ready for change — without breaking old stuff

“A class should be open for extension but closed for modification.”
— Bertrand Meyer

What Does That Even Mean?

Let’s break it down:

• Open for extension = You can add new things to it (new features, types, logic).

• Closed for modification = You don’t change old working code that’s already been tested.

So basically:

You should be able to add new features without editing old code.

A Real-Life Example

Imagine you built a school prize system:

function getPrize(category) {
  if (category === 'sports') return 'Trophy';
  if (category === 'science') return 'Medal';
  if (category === 'music') return 'Certificate';
}

Now you want to add "Art" as a new category.

What do you have to do?

You’ll go inside the getPrize() function and change it — but that might accidentally break the others!

Let’s Follow the Rule

We’ll make a system in which each category has its own logic:

class Prize {
  getPrize() {
    return 'No prize';
  }
}

class SportsPrize extends Prize {
  getPrize() {
    return 'Trophy';
  }
}

class SciencePrize extends Prize {
  getPrize() {
    return 'Medal';
  }
}

class MusicPrize extends Prize {
  getPrize() {
    return 'Certificate';
  }
}

Now to add Art:

class ArtPrize extends Prize {
  getPrize() {
    return 'Sketchbook';
  }
}

• No changes to old classes.

• We just extended the system by adding a new class.

That’s the Open/Closed Principle!

Why Should You Care?

• Adding new feature is easier

• Easily maintainable when project will grow.

• You don’t need to worry about the old code

Final Thoughts

The Open/Closed Principle is like building with LEGO:

• You don’t break the old code.

• You just add new code!

The Liskov Substitution Principle—what happens when classes don't behave as we expect them to—will be covered in the upcoming post.

Let’s Keep Building Together

I hope you enjoyed this..! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Hashnode

Checkout more Portfolio

Checkout more Work

Single Responsibility Principle (SRP)

The Single Responsibility Principle states:

“A class should have only one reason to change.” – Robert C. Martin

A class should only do one task and, ideally, have one responsibility. A class that consists of more than one responsibility has the potential to become coupled with multiple system aspects. This would mean that when a single responsibility changes, unexpected and unwanted bugs could arise.

The Problem with Multiple Responsibilities

Imagine you're working with the User class in JavaScript:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  validateEmail() {
    // Validate email format
  }

  saveToDatabase() {
    // Logic to save user to DB
  }

  sendWelcomeEmail() {
    // Email logic
  }
}

This User Class Handler does too much responsibilities:

• It Validates user data

• It Handles persistence

• It Sends emails

Consider a scenario where you want to change the logic of email-sending — you have to change the User class which is unrelated to user data. This in itself violates SRP.

Refactoring Using SRP

Let’s break responsibilities into focused classes:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

class UserValidator {
  static validate(user) {
    // Check if user.email is valid
  }
}

class UserRepository {
  static save(user) {
    // Save to DB
  }
}

class EmailService {
  static sendWelcomeEmail(user) {
    // Send email
  }
}

Each class now has only one reason to change:

• UserValidator changes only if validation logic changes.

• UserRepository changes only if storage changes.

• EmailService changes only if email logic changes.

This is SRP in action!

Why SRP Matters

Maintaining a system SRP compliant is bound to improve:

• ✅ Better Maintainability – Less change will improve unrelated broken functionality.

• ✅ Improved Readability – Focused and clear cut code will be far easier to read.

• ✅ Simpler Testing – Mocking and unit testing class is made easier by small class size.

• ✅ Enhanced Reusability – Independent use of each class without affecting the other improves reusability.

Key Takeaways

• One class = One responsibility.

• SRP makes your code cleaner, modular, and more testable.

What’s Next?

In the following sections of the series we will discuss the Open/Closed Principle, which teaches us how to design our code in a way that allows for easy extensibility but restricts alteration of existing code.

Follow along and stay tuned!

I hope you enjoyed this..! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Hashnode

Checkout more Portfolio

• AI agents are smart software systems that can work independently.

• They can plan, make decisions, and work with other agents without constant human guidance.

• Examples include AutoGPT and BabyAGI.

Benefits

• Flexibility: Agents can handle specific tasks independently.

• Growth potential: Easy to add more agents as needed.

• Better decisions: Agents process information quickly.

• Cost savings: Automation reduces need for human staff.

• Independence: Agents can work without constant supervision.

Challenge To Consider

• Over-automation risks: Not enough human supervision can cause errors.

• Context limitations: Agents will have problems dealing with complicated situations.

• Coordination difficulties: Controlling numerous agents cooperating is intricate

• Data security concerns: Require robust safeguards for personal data.

• Performance and cost issues: Agent systems are slow and costly to execute.

System Design Reimagined

• AI agents give rise to more adaptable, skill-based designs.

• Old ideas such as resilience and observability require rethinking.

• Trade-off between flexibility and predictability is very important.

Where AI Agents fits and where it may fail

AI agents thrive in environments with:

• Well-defined domains and boundaries such as customer support & content generation.

• Fallback mechanisms available.

• Chances of supervised learning.

They Struggle in situations with:

• High-risk, irreversible choices such as patient monitoring in hospitals.

• Intricate physical inspections.

• Extremely volatile variables.

• Legal or ethical responsibility demands.

How They Compare to Microservices

• Both break down complex systems into smaller parts.

• Microservices follow fixed rules and use strict APIs.

• AI agents can adapt and make decisions on their own.

• Agents communicate using natural language instead of rigid protocols.

Why Do we need it?

• Prevent DDOS attacks and malicious users from overloading our site's traffic.

• Preventing these attacks helps to reduce costs for the company. They need fewer servers to manage their traffic load.

• To stop password guessing and brute-force assaults

Prerequisites

How will you identify the user?

• In an Authenticated system, we can use user ID

• In an Open API, it's common to use the IP address.

Rate Limiting Algorithms

There are multiple algorithms available for rate limiting. Choosing one depends on what you're optimizing for—accuracy, memory, burst handling, etc.

Let’s take a deeper look into one of the simplest and most accurate: the Sliding Window Log.

Sliding Window Log

Sliding Window Log is a precise rate limiting algorithm that tracks each individual request’s timestamp and checks if a user has exceeded the allowed number of requests within a sliding time window (e.g., last 15 minutes).

Let's Imagine

• Imagine a guard at a gate who keeps a notebook with the timestamps of when people entered.

The Rule is Only 100 people are allowed to enter within the 15 minutes.

Each time some one arrived , the guards

• Check the notebooks and remove all the entries older than 15 minutes

• Count the remaining entries

• If less than 100, let the person in and record the current time.

• If greater than 100 then reject the person

How It Works in Code:

// In-memory store
const ipStore = {};

// Middleware
app.use((req, res, next) => {
  const ip = req.ip;
  const now = Date.now();

  if (!ipStore[ip]) {
    ipStore[ip] = [];
  }

  // Remove timestamps older than 15 minutes
  ipStore[ip] = ipStore[ip].filter(timestamp => now - timestamp < 15 * 60 * 1000);

  if (ipStore[ip].length >= 100) {
    return res.status(429).json({ message: "Too many requests. Please try again later." });
  }

  // Add current request timestamp
  ipStore[ip].push(now);
  next();
});

Code Explanation

Create an in-memory store

• A JavaScript object (ipStore) is used to keep track of request timestamps for each IP address.

Capture user IP and current time

• On each request, we get the user's IP (req.ip) and the current timestamp

Initialise or clean request log

• If it's the user's first request, we initialise an empty array.

• We then filter out timestamps older than 15 minutes from their log.

Check request count

• If the user has already made 100 requests in the last 15 minutes, respond with a 429 Too Many Requests error.

Allow and log the request

• If under the limit, we store the current timestamp and let the request proceed using next().

Advantages

• Very accurate

• Always enforces X requests per sliding window exactly.

Disadvantages

• Memory usage increases with traffic since every request is logged individually.

• Needs cleanup or optimization in high-load systems.

Reference Links

• Github Repo

• MDN Web Docs – HTTP 429 Too Many Requests

• Express.js Middleware Docs

Architecture Diagram

Conclusion

We explored how a simple yet accurate rate limiter works using the Sliding Window Log algorithm. While it’s perfect for small apps and demos, it may need optimizations like Redis or token bucket for high-traffic production systems.

I hope you enjoyed this..! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Hashnode

Checkout more Portfolio

Real-time + Horizontal Scalability

Introduction

When I first started building this chat app, there was one requirement I had in mind: it has to be real-time, scalable, and easy to scale up. Sounds easy—until you introduce multiple servers to the mix.

In this article, I'm going to walk you through how I built a horizontally scalable chat app using:

• Socket.io for real-time messaging

• Express.js as the backend framework

• Redis Pub/Sub for synchronizing messages between servers

This is a simple, yet strong—and horizontally scalable for production traffic capable—system.

Architecture Overview

Here’s a quick look at the architecture I implemented:

• Users 1–3 are connected to App Server A

• User 4 is connected to App Server B

• Both servers are connected to Redis

• Redis handles message broadcasting between servers

With this setup, the system is horizontally scalable—add app servers whenever needed.

Why Redis Pub/Sub?

As your application grows, you can no longer rely on a single server. However, if there are lots of servers, broadcasting a chat message to everyone is tricky.

Here's why:

• Suppose User 1 is on Server A, and User 4 is on Server B. A message from one server will never reach the other user—unless servers talk to one another.

That's when Redis Pub/Sub comes into play:

• Each app server subscribes to a Redis channel (e.g. chat)

• When a message is posted, it's published to the channel

• All servers receive it and emit to their connected clients

So Redis is essentially a router of messages between servers.

Test Scenario

Here’s what I tested:

• User 1 sends a message → hits Server A → published to Redis

• Server B receives it via Redis → emits to User 4

• Everyone sees the message in real-time

So even though users may be on different app servers, the chat is synchronized.

Why This Architecture Works

• Stateless app servers – easy to scale horizontally

• Redis handles cross-server communication

• No message loss or delay

• Production-ready

Try It Out

• Live Demo: errasor.io

• Source Code: GitHub Repo

Final Thoughts

Redis Pub/Sub + Socket.IO is an excellent pairing to build highly scalable real-time systems. If you're working on anything from chat through multiplayer games or real-time dashboards—this pattern is worth learning.

I hope you enjoyed this..! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Hashnode

Checkout more Portfolio

But

At the same time, I kept hearing things like:

“AI will take developer jobs.”
“If you don’t learn AI now, you’ll be irrelevant tomorrow.”
“The future belongs to AI—developers who don’t adapt will be left behind.”

Honestly, it was overwhelming. I wasn’t a data scientist. I am just a simple developer.

I don’t know what is models, LLMs, GenAI. But I knew how to build things. So I decided to stop overthinking and just start exploring.

Where I Actually Began – With Curiosity, Not Theory

I didn’t know where to start. With a lot of enthusiasm and curiosity, I just started. As any developer, I go to Google, YouTube, and ChatGPT to help me learn AI.

But

It is not easy… there was so much information, tons of articles, but most of it was packed with heavy terms like transformer, tokenization, Ollama, Hugging Face, fine-tuning RAG, and so on.

My goal wasn’t to build the next ChatGPT; I just wanted to understand the basics. What exactly is GPT? What is OpenAI? Everyone kept saying "AI, AI, AI," but I needed to know the fundamentals first.

That’s where my journey truly began.

Understanding the Basics

Once I started, I realized that to build anything useful, I first needed to understand some core concepts. It was shocking, but true—I finally got what tokenization, transformers, and self-attention actually mean.

I used to thinkg ChatGPT and the OpenAI API would give the same answer to simple questions, like “What’s the weather in Delhi?”

But I was wrong

ChatGPT gave me the answer. But the OpenAI API said... nothing useful. Why?

Here is the simple reason

🧠 ChatGPT is like a smart robot with internet and extra tools.
📦 OpenAI API is like the same smart robot, but without internet or tools.

In simple terms, ChatGPT is like a brain with a full working body — it can think and take action. It can search the web, do calculations, read files — just like a body helping the brain get things done.

But the OpenAI API is just the brain.
It’s super smart and can think really well, but it can’t do anything by itself.
If you want it to act — like search the web or get the weather — you have to build the body around it..

Wrapping Up

So that’s how my AI journey started with small steps, a curious mind, and a strong developer instinct.

From feeling overwhelmed by AI buzzwords to understanding how tools like ChatGPT actually work

And trust me, if I can do it, you definitely can too.

In the next post, I’ll break down one of the most basic but powerful concepts in AI:

What is tokenization?
(Hint: It’s like teaching a computer how to read!)

Managing dates in your React applications just became a lot easier with the React Infinite Scroll Calendar. Whether you’re building a scheduling app, booking system, or simply need an efficient way to display calendar data, this package is here to help you implement an infinite scrolling calendar with minimal effort.

In this post, we’ll take a deep dive into the features, installation process, usage, and how you can contribute to the project to make it even better. Let’s get started!

🎉 What is React Infinite Scroll Calendar?

The React Infinite Scroll Calendar is an open-source npm package that provides a smooth, infinite scrolling calendar component for React. This component allows you to display and navigate through months or days of the calendar dynamically without the need for page reloads or heavy data fetching, making it a great choice for performance-focused applications.

The key features of this calendar include:

• Infinite Scrolling: Load and display months or days incrementally as the user scrolls.

• Customisable: Tailor the calendar’s appearance and behavior to fit your specific needs.

• Lightweight: Optimised for speed and responsiveness, with minimal dependencies.

• React Friendly: Fully compatible with React’s declarative style and hooks.

Whether you’re building a project that requires displaying large amounts of calendar data or just need a more intuitive user experience, this package simplifies the process while ensuring excellent performance.

Features

Here are some of the key features that make the React Infinite Scroll Calendar stand out:

• Infinite Scroll: Users can scroll through months or years without manually loading each one.

• Custom Event Handling: Easily add custom events and dates to specific days.

• Responsive Design: The calendar is fully responsive, adjusting smoothly for both desktop and mobile users.

• Customisable Styles: Apply your own CSS to tweak the look and feel of the calendar.

• Day Highlighting: Highlight specific days for events or important dates.

💻 Installation

1. Install the package

npm install @anvikjs/react-infinite-scroll-calendar

2. Once installed, you can start using the calendar in your React components:

import InfiniteScrollCalendar from "@anvikjs/react-infinite-scroll-calendar";

3. Customising the Calendar

<InfiniteScrollCalendar
calendarHeight={600}
calendarWidth={500}
renderMinDate={new Date(2022, 0, 1)}
renderMaxDate={new Date(2022, 11, 31)}
inifinityScroll={true}
isMultipleSelect={true}
selectedDates={["19-11-2024"]}
handleDateSelect={(date) => {
console.log(date);
}}
disabledDates={["18-11-2024"]}
/>

🛠️ How to Contribute

This package is open-source, and I welcome contributions from the community to make it even better. Whether you’re fixing bugs, adding features, or improving the documentation, there’s always something you can do. Whether you’re a seasoned developer or just getting started with React, there’s a place for you to contribute.

Here are some ways you can help:

• ⭐ Star the repo: If you find the project useful, give it a star on GitHub to show your support.

• 🔧 Report bugs: If you find any bugs or issues, please report them on the Issues tab.

• 💡 Suggest features: If you have ideas for improving the library, feel free to submit a feature request.

• 📨 Submit a pull request: If you want to make changes or add features, open a pull request!

📚 Documentation and Resources

You can find detailed documentation on usage, configuration options, and examples in the GitHub repository for the project.

If you have any issues or suggestions, feel free to open an issue on GitHub or ask questions via the issues page. I also encourage you to join the community and contribute to the ongoing development of this project!

🤝 Acknowledgments

A big thank you to everyone who has contributed to the development of this package! Your help has made this project possible.

📝 Conclusion

The React Infinite Scroll Calendar is a versatile and user-friendly component for anyone needing a scalable solution to display calendars in React apps.

With its infinite scrolling feature, ease of use, and customisation options, it’s the perfect tool to improve your application’s date display.

Feel free to explore the repository, contribute to its growth, and build awesome applications with it. Happy coding!

🌐 Join the Community

This is just the beginning, and I’m excited to see where we can take react-infinite-scroll-calendar with the help of contributors like you!

• GitHub

• Open Issues & Discussions

• NPM

🌐 Connect with Me

I’d love to hear your thoughts on this project, answer any questions, or simply connect with fellow developers! Feel free to reach out to me on any of the platforms below:

• LinkedIn: Kawal Jain

• Portfolio: kawaljain.com

Whether you want to discuss the project, ask for help, or collaborate on open-source initiatives, don’t hesitate to reach out! Let’s stay connected and keep building amazing things together. 💬

I’ve always been a big fan for building code that is reusable, modular, and simple on its own but capable of achieving great things when combined with other components. The goal of this blog is to share how you can create reusable code modules and publish them online so that developers around the world can access and use them in their own projects.

Github

If you like to skip the end, here is the link: Repo

In this repository, you’ll see how I’ve structured the code to keep it modular and focused on a single responsibility.

Feel free to check it out, experiment with it, and see how you might adapt or expand it for your own needs!

Prerequisites

Before starting, ensure you have:

• Node.js and NPM installed.
• A basic understanding of React and package management.
• Git configured (for publishing to NPM).
• Rollup

Rollup

Rollup is a powerful JavaScript bundler optimised for creating libraries. Its tree-shaking capabilities make it ideal for building NPM packages, especially React components. In this guide, we’ll walk through creating and publishing a React package using Rollup.

Steps

Step 1: Setup the Project

1. Create a directory for your package:

mkdir react-rollup-package-template
cd react-rollup-package-template

Note: Make sure your npm package name is unique and there is no module with exactly the same as yours.

2. Initialise the package:

npm init -y

This generates a package.json file.

Step 2: Install Dependencies

1. Install React and ReactDOM as peer dependencies:

npm install react react-dom --save-peer

2. Install Rollup and plugins:

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel rollup-plugin-peer-deps-external rollup-plugin-terser --save-dev

1. [@rollup/plugin-node-resolve](http://twitter.com/rollup/plugin-node-resolve "Twitter profile for @rollup/plugin-node-resolve"): Resolves third-party modules in node_modules
2. [@rollup/plugin-commonjs](http://twitter.com/rollup/plugin-commonjs "Twitter profile for @rollup/plugin-commonjs"): Converts CommonJS modules to ES6 for Rollup to process.
3. [@rollup/plugin-babel](http://twitter.com/rollup/plugin-babel "Twitter profile for @rollup/plugin-babel"): Transpiles modern JavaScript.
4. rollup-plugin-peer-deps-external: Automatically excludes peer dependencies like react.
5. rollup-plugin-terser: Minifies the output.

Step 3: Write Your React Component

Create a directory src/ and add your component file.

// Dummy.tsx
import React from "react";
import "./style.css";

import { DummyComponentProps } from "./Dummy.types";

const DummyComponent: React.FC = ({ name, age }) => {
return (

I am {name}

I am {age} years Old

export default DummyComponent;

Step 4: Configure Rollup

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

const packageJson = require("./package.json");

export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
name: "test-package-cr-typ",
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
external(),
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.json",
tslib: { optional: false },
}),
postcss(),
terser(),
],
},
{
input: "dist/esm/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
external: [/\.css$/],
plugins: [dts.default()],
},
];

Step 5: Update package.json

1. Addd main and module fields to indicate the package entry points

{
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js"
}

2. Add a build script

{
"scripts": {
"build": "rollup -c --bundleConfigAsCjs"
}
}

// package.json
{
"name": "react-rollup-package-template",
"version": "0.1.0",
"type": "module",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"tslib": {
"optional": true
},
"scripts": {
"build": "rollup -c --bundleConfigAsCjs"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-typescript": "^8.5.0",
"@types/react": "^18.3.12",
"react": "^18.3.1",
"rimraf": "^3.0.2",
"rollup": "^4.27.2",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^5.6.3"
},
"repository": {
"type": "git",
"url": "https://github.com/kawaljain/react-rollup-package-template.git"
},
"keywords": [
"react",
"reactjs",
"react package",
"create react package",
"typescript react package",
"create npm package",
"create react npm package",
"typescript create package",
"package create",
"example package npm create",
"build npm package",
"custom package react npm",
"custom react typescript package"
],
"author": "Kawal Jain",
"license": "MIT",
"bugs": {
"url": "https://github.com/kawaljain/react-rollup-package-template/issues"
},
"homepage": "https://github.com/kawaljain/react-rollup-package-template#readme"
}

Step 6: Build the Package

Run the build command:

npm run build

This creates a dist/ folder containing the compiled files.

Step 7: Test the Package Locally

1. Link the package:

npm run link

2. In a separate React project, link and test the package:

npm install react-rollup-package-template

Step 8: Publish to NPM

1. Ensure you are logged into NPM

npm login

2. Publish the package

npm publish

Use the access public flag if it's your first public package:

npm publish --access public

Conclusion

Congratulations! You’ve created and published your first React package using Rollup. Share your package with the world, and remember to maintain it by updating dependencies and fixing issues.

Tips

• Add a README.MD with usage instructions.
• Include a TypeScript declaration file (.d.ts) for TypeScript compatibility.
• Keep peer dependencies updated for compatibility with the latest React versions

That’s all from me, feel free to read and comment, If you find any issues, you can directly open an issue on GitHub. If you interest in flutter, you can read my article here in my medium. See you!

Github

You can find the demo repository, which showcases some core principles of creating modular code. The goal is to demonstrate the building blocks that you can later expand into more complex, reusable components. While it’s not a complete library yet, this example can serve as a starting point for building larger, reusable components that can be shared across multiple projects.

Feel free to check it out, experiment with it, and see how you might adapt or expand it for your own needs!

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
• Create a free AI-powered blog on Differ.
• More content at PlainEnglish.io

In this post, I’m going to explain what is Markdown, how Markdown works and why it’s so useful. We’ll dive into its key features, common uses, and show you how to get started with it.

Markdown has always been a go-to for developers when it comes to writing clean and readable documentation. But have you ever wondered how the text you write in markdown turns into beautifully formatted HTML? 🤔

Let’s explore!

What is Markdown ?

A Markdown file (with a .md or .markdown extension) is a simple, lightweight format for writing structured text that can easily be converted into HTML or other formats.The core idea behind Markdown is to allow users to write text that is both easy to read in plain form and can be converted into HTML without complex code or tags.

Key Features of Markdown:

Plain Text-Based: Markdown files are readable in any text editor and don’t require special software to view.

Lightweight Syntax: With simple symbols like #, *, and [](), you can create headings, lists, links, and more.

Extensible: Many platforms and tools support custom extensions, so you can add tables, footnotes, or even code blocks.

Common Use Case

• Documentation

• Content Creation

• Note-Taking and Writing

• Technical Communication

A Developer’s Journey 🚀

My journey with Markdown began when I used it to document my projects on GitHub. Its simplicity and versatility amazed me, sparking my curiosity about how such a markup language could be created from scratch.

I embarked on a fun and challenging journey — building my own Markdown parser from scratch! It was a deep dive into parsing and lexing, but also an excellent way to sharpen my understanding of text transformation and regular expressions.

Key Challenges:

• Handling Edge Cases: Markdown is simple, but edge cases like nested lists or inline HTML can make parsing tricky.

• Efficient Parsing: Ensuring the parser handles both small and large documents efficiently.

• Regex Mastery: Understanding and leveraging regular expressions to correctly interpret different markdown elements like headings, lists, links, and code blocks.

Project Step

Here are the steps to set up the project, which is developed in React.js. You can find an online demo link for your reference. Additionally, be sure to check out the GitHub README file for detailed instructions and information.

Clone this repository:

git clone https://github.com/kawaljain/markdown-parser.git

Navigate to the project directory:

cd markdown-parser

Install dependencies:

npm run install

Now run the following commands assuming you are in markdown-parser directory or simply follow this documentation.

npm run dev

The app will run on your localhost. Simply Ctrl + Click the provided link to open it in your browser. And Congrats! You’ve successfully built your very own Markdown parser!

Wrapping up

This project has been a truly rewarding experience! It not only deepened my understanding of Markdown but also enhanced my skills in writing parsers and working with text processing overall. I look forward to applying what I’ve learned to future projects!

Contributions & Feedback**!**

I’m excited to announce that I’m open-sourcing this project and would love for others to contribute or share feedback on how I can make it even better. Whether you’re passionate about markup languages, parsers, or just want to collaborate, your ideas and input are welcome! Stay tuned for the repo link

let’s build something amazing together! 📂

Reference Links

Here are some helpful resources:

• React Documentation

• Markdown Documentation

• Basic Markdown Syntax Guid

• Online Demo

• Github Repository

Mission Accomplished: Unraveling the Code!

As I wrap up this journey of creating my own Markdown parser, I’m thrilled with the insights and skills I’ve gained along the way. This project has not only challenged me but has also deepened my appreciation for the beauty and simplicity of Markdown.

I encourage you to dive into the code, experiment with your own features, and share your ideas. Whether you’re a seasoned developer or just starting, there’s always something new to learn and explore. Thank you for joining me on this adventure — let’s keep pushing the boundaries of what we can create together!

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio

In this article, we will explore a fascinating piece of JavaScript code that demonstrates the asynchronous nature of the language, particularly how closures and the setTimeout function work together. If you’ve ever been puzzled by why your loop outputs unexpected results, you’re in the right place!

Key Concept

Asynchronous Programming: JavaScript is single-threaded, meaning it can only execute one piece of code at a time. However, it can handle asynchronous operations, allowing certain tasks to run in the background while the main thread continues executing.

SetTimeout: This function is used to execute a piece of code after a specified delay. It takes two parameters: a callback function and a delay in milliseconds.

Closures: A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. This is crucial for understanding how variables are accessed in asynchronous callbacks.

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful

Think about how JavaScript will process each line. Once you’ve made your guess, keep reading to see if you got it right!

Explanation

Let break down the code step by step:

Loop Execution: The loop runs five times, incrementing `i` from 0 to 4.

setTimeout: For each value of `i`, a `setTimeout` is scheduled to log `i` after `i * 1000` milliseconds.

Closures: By the time the `setTimeout` callbacks execute, the loop has already completed, and `i` has a final value of 5. Therefore, all the callbacks will log `5`.

What you might except

0
1
2
3
4

What actually Happen

5
5
5
5
5

However, this is not the actual output that you would see. The reason for this is a common JavaScript behavior related to the scope of the `i` variable.

In the provided code, the `i` variable is declared using `var`, which means it has function scope. When the `setTimeout()` functions are executed, the loop has already completed, and the value of `i` is 5. Therefore, all the `setTimeout()` functions will log the value 5 to the console, regardless of the delay.

Fixing the Issue

To achieve the expected output of `0, 1, 2, 3, 4`,

We can use an **`Immediately Invoked Function Expression (IIFE) `**to create a new scope for each iteration.
We can use `let` keyword instead of `var`.

Solution

1- Immediately Invoked Function Expression (IIFE)

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Now, each `setTimeout` will captures the current value of `i`, and output will be:

0
1
2
3
4

2- By Using `Let` keyword

The `let` keyword creates a block-scoped variable, which means that each iteration of the loop will have its own copy of the `i` variable, and the `setTimeout()` functions will capture the correct value of `i` for each iteration.

Conclusion

Understanding how JavaScript handles asynchronous operations and closures is crucial for writing effective code. The original code snippet serves as a great example of how the `setTimeout` function interacts with the loop variable `i`. By using an `IIFE`, we can ensure that each timeout logs the correct value. So, the next time you encounter a similar situation, remember the power of closures and how they can help you manage asynchronous behaviour in JavaScript

Mission Accomplished: Unraveling the Code!

I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.

Thanks for reading

I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio

I am going to explain javascript interview coding question. How javascript compiler works and what it actually produces as output.

I’ll break down each part of the output, explain why it appears this way, and connect it back to the specific lines of code responsible

let a = {};
let b = { key: 'b' };
let c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful

“Think about how JavaScript will process each line. Once you’ve made your guess, keep reading to see if you got it right!”

Explanation of above code

1. For Line-1

let a = {};

Above code, creates an empty object, and assign to the variable ‘a’.

2. For Line-2

let b = { key: 'b' };

This line creates an object with a single property key and the value ‘b’, and assigns it to the variable ‘b’.

3. For Line-3

let c = { key: 'c' };

This line creates an object with a single propery key and the value ‘c’, and assign it to the variable ‘c’.

4 For line-4

a[b] = 123;

**a[b] = 123** This line sets a property of the object a using the object b as the key. In JavaScript, when an object is used as a key in another object, the object is first converted to a string using the toString() method. In this case, the string representation of the object b is “[object Object]” . So, the property “[object Object]” of the object a is set to the value 123.

5. For Line-5

a[c] = 456;

Similar to the Previous step, “c” is also a object and converted to string, it becomes “ “[object Object]””.

Therefore, the line a[c] = 456; is equivalent to “a[object Object]”=456, which means that object has “[object Object]” property and its value is 456.

6. For Line-6

console.log(a[b])

Output is 456. when you try to access the the property “a[b]”, javascript again convert b to string, which is “[object Object]”. Since object has a property with the key “[object Object]” and its value is 456. So it will print the output.

Conclusion

In Summary, the code demonstrate that when an object is used as a key in the another object, the object is first converted to a string representation, which is “[object Object]” by default. This means that the objects b and c are treated as the same key, and the last value assigned to that key is the one that is retrieved.

Mission Accomplished: Unraveling the Code!

I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.

Thanks for reading, and I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio