DEV Community: Karthick (k)

What is the Model Context Protocol (MCP)?

Karthick (k) — Tue, 21 Jul 2026 10:01:17 +0000

**MCP (Model Context Protocol) **is an open-source standard for connecting AI applications to external systems.

Using MCP, AI applications like Claude or ChatGPT can connect to data sources (e.g. local files, databases), tools (e.g. search engines, calculators) and workflows (e.g., specialised prompts)—enabling them to access key information and perform tasks.
Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardised way to connect electronic devices, MCP provides a standardised way to connect AI applications to external systems.

What can MCP enable?
Agents can access your Google Calendar and Notion, acting as a more personalised AI assistant.

Claude Code can generate an entire web app using a Figma design.
Enterprise chatbots can connect to multiple databases across an organisation, empowering users to analyse data using chat.
AI models can create 3D designs on Blender and print them out using a 3D printer.

Why does MCP matter?

Depending on where you sit in the ecosystem, MCP can have a range of benefits.
Developers: MCP reduces development time and complexity when building or integrating with an AI application or agent.
AI applications or agents: MCP provides access to an ecosystem of data sources, tools and apps which will enhance capabilities and improve the end-user experience.

End-users: MCP results in more capable AI applications or agents which can access your data and take actions on your behalf when necessary.

Broad ecosystem support

MCP is an open protocol supported across a wide range of clients and servers. AI assistants like Claude and ChatGPT, development tools like Visual Studio Code, Cursor, MCPJam, and many others all support MCP — making it easy to build once and integrate everywhere.

Learn more

https://modelcontextprotocol.io/docs/learn/architecture

React Conditional Rendering

Karthick (k) — Sun, 19 Jul 2026 17:14:16 +0000

Conditional rendering controls which parts of the UI are displayed based on specific conditions. It is widely used to show or hide elements depending on user input, data state, or system status. This helps keep the interface relevant and responsive to changes.

Displays different UI elements based on the current state or props.
Automatically updates what the user sees when data or conditions change.
Removes the need to manually manipulate the DOM to show or hide content.

Implementation of Conditional Rendering

Using If/Else Statements If/else statements allow rendering different components based on conditions. This approach is useful for complex conditions.

function Item({ name, isPacked }) { if (isPacked) { //name="Book" return <li className="item">{name}✔</li>; } return <li className="item">{name}</li>; }

If isPacked is true, it displays: Book✔
If isPacked is false, it displays: Book

2. Using Ternary Operator

The ternary operator (condition ? expr1: expr2) is a concise way to conditionally render JSX elements. It’s often used when the logic is simple, and there are only two options to render.

function Greeting({ isLoggedIn }) { return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>; }

If isLoggedIn is true: Welcome Back!
If isLoggedIn is false: Please Sign In

3. Using Logical AND (&&) Operator

The && operator returns the second operand if the first is true, and nothing if the first is false. This can be useful when you only want to render something when a condition is true.

If hasNotifications is true: You have new notifications!
If hasNotifications is false: Nothing is rendered.

Props in React

Karthick (k) — Fri, 17 Jul 2026 11:36:00 +0000

Understanding Props in React

In React, props (short for "properties") are fundamental for passing information from one component to another. The primary purpose of props is to enable a parent component to pass data to its child components, ensuring that data flow within your application is efficient and organised.

Key Points about Props:

Read-Only: The receiving component cannot modify props. They are strictly meant for reading data and should not be altered. This immutability helps maintain a unidirectional data flow, making the application easier to understand and debug.
Dynamic Updates: While props themselves are immutable, they can be updated when the parent component’s state changes. This allows for a responsive and interactive UI without any direct modifications to the props within the child components.
Prop Types: It's highly recommended to define the expected data types for props using PropTypes, which can help catch bugs in development by warning about incorrect prop types.

Example Usage

Here’s a simple example of how props are used in a React component:

import React from 'react';

function Greet(props) {
    return <h1>Hello, {props.name}!</h1>;
}

function App() {
    return <Greet name="John" />;
}

export default App;

In this example, the Greet component receives a name prop and renders a greeting message. The App component passes the prop, demonstrating how data flows from a parent to a child component.

Output:

You can visualise the output as follows:

Conclusion

Props are an essential part of how React components communicate with one another. By understanding how to use props effectively, you can build modular and maintainable components that enhance the overall structure of your application.

Reference: GeeksforGeeks - What are Props in React?

Feel free to add or modify anything else you'd like!

React useState Hook

Karthick (k) — Thu, 16 Jul 2026 08:49:41 +0000

React useState Hook

The useState hook allows functional components in React to store and manage data that can change over time. It is simple to use and ideal for handling basic state updates within a component.

It lets you add state variables to functional components.
It is best suited for simple state updates.
The hook must be imported from React before using it.

const [state, setState] = useState(initialState)

state: It is the value of the current state.
setState: It is the function that is used to update the state.
initialState: It is the initial value of the state.

Working of useState()
The useState() hook allows you to add state to functional components in React. It works by:

Initialise State: When you call useState(initialValue), it creates a state variable and an updater function.

const [count, setCount] = useState(0);

State is Preserved Across Renders: React remembers the state value between re-renders of the component. Each time the component renders, React keeps the latest value of count.

3. State Updates with the Updater Function: When you call setCount(newValue) React updates the state and it re-renders the component to reflect the new state value

<button onClick={() => setCount(count + 1)}>Increment</button>

Implementing the useState hook

Here is the implementation of the useState hook:

1. Counter using useState

A common example of using useState is managing the state of a counter with actions to increment and decrement the value.

import { useState } from 'react';
export default function Counter() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }
    return (
        <button onClick={handleClick}>
            Click {count} me
        </button>
    );
}

Output

Reference: https://www.geeksforgeeks.org/reactjs/reactjs-usestate-hook/

React DOM

Karthick (k) — Wed, 15 Jul 2026 12:29:46 +0000

React DOM vs JavaScript DOM

The primary difference is that the JavaScript DOM (Real DOM) is the browser's live, structural representation of a webpage. In contrast, React DOM is a software library that uses an in-memory Virtual DOM to update the Real DOM efficiently. Vanilla JavaScript directly manipulates the browser's elements, while React abstracts this process away to minimise heavy browser recalculations.

Understanding React DOM (The Virtual DOM)

// React Declarative Approach const [clicked, setClicked] = useState(false); return ( <button onClick={() => setClicked(true)}> {clicked? 'Clicked!': 'Click Me'} </button> );

Understanding JavaScript DOM (The Real DOM)

// JavaScript Imperative Approach const button = document.querySelector('#myBtn'); button.textContent = 'Clicked!'; button.style.backgroundColor = 'blue';

React Components

React components are reusable UI units that handle their own logic, accept data through props, manage state, and efficiently update only the parts of the UI that change

syntax

function ComponentName() { return ( <JSX /> ); }

Types of React Components

There are two primary types of React components:

1. Functional Components

Functional components are JavaScript functions that return React elements and are the preferred way to build modern React applications.

Can manage state and lifecycle logic using React Hooks.
Use a simpler syntax, making them ideal for reusable components.
Offer better performance by avoiding the use of the this keyword.

function Greet(props) { return <h1>Hello, {props.name}!</h1>; }

2. Class Components

Class components are ES6 classes in React that extend React. Component and support state and lifecycle handling.

Manage component data using this. the state property.
Use lifecycle methods such as componentDidMount and componentDidUpdate.

class Greet extends React. Component { render() { return <h1>Hello, {this.props.name}!</h1>; } }

React Introduction

Karthick (k) — Tue, 14 Jul 2026 08:02:43 +0000

ReactJS is a component-based JavaScript library used for building dynamic and interactive user interfaces. It enables developers to create reusable UI components and develop fast, scalable single-page applications (SPAs) with efficient rendering and updates.

What is Vite, and why has it replaced Create React App?

Vite (pronounced "veet", French for "fast") is a modern frontend build tool and development server used to scaffold, run, and optimise React applications. It acts as the infrastructure for your project. React handles the user interface, while Vite compiles your code, serves it locally during development, and bundles it for production.

NodeJS NPM

NPM (Node Package Manager) is the default package manager for Node.js. It helps manage project dependencies, scripts, and third-party libraries, and is automatically installed when you install Node.js.

Using NPM with NodeJS
To start using NPM in your project, follow these simple steps

Step 1: Install NodeJS and NPM

First, you need to install NodeJS. NPM is bundled with the NodeJS installation.

Step 2: Verify the Installation

After installation, verify NodeJS and NPM are installed by running the following commands in your terminal:

node -v npm -v

Step 3: Initialise a New NodeJS Project

In the terminal, navigate to your project directory and run:

npm init -y

This will create a package.json file, which stores metadata about your project, including dependencies and scripts.

Step 4: Install Packages with NPM

To install a package, use the following command

npm install <package-name>

For example, to install the Express.js framework

npm install express

This will add express to the node_modules folder and automatically update the package.json file with the installed package information.

Step 5: Install Packages Globally

To install packages that you want to use across multiple projects, use the -g flag:

npm install -g <package-name>

Step 6: Run Scripts

You can also define custom scripts in the package.json file under the "scripts" section. For example:

{
    "scripts": {
        "start": "node app.js"
    }
}

{% embed Then, run the script with

npm start

React

CRD-Create Read App (not recommended)

Vite=build config tool

What is vite in React? (important)

React is not important.


React installation is node important.

npm is The full form of npm is Node Package Manager

JSX-javascript xml


HTML-Xml

HTML-predefined tags
XML-user-defined tags

XML stands for Extensible Markup Language


components are stated with a capital value.

what is re useable compontes?


There are two types of components

The two primary types of components in React are Functional Components and Class Components
 %}

Simplicity Over Complexity: How I Built My Minimalist Developer Portfolio

Karthick (k) — Sun, 12 Jul 2026 17:42:16 +0000

As software developers, it's easy to get caught up in the trap of over-engineering. We reach for heavy frameworks, endless animations, and massive dependencies before we even consider what we are trying to convey.

For my latest portfolio layout, I decided to live by a simple rule: Choose simplicity over complexity.

Here is how I designed and built a premium, modern developer portfolio using nothing but semantic HTML and clean CSS grid/flexbox layouts.

🎨 The Design Identity

The goal was to create a light, spacious layout that feels dynamic yet entirely professional.

The Palette: Clean light backgrounds powered by subtle, moving ambient gradients (radial-gradient combinations).
Typography: A harmonious pairing of Outfit (for sharp, structural geometric UI elements) and Ovo (a refined serif for striking headers and expressive blocks).
The Highlight: A glassmorphic, capsule-shaped navigation deck (.nav-menu-capsule) that floats elegantly at the top of the interface.

🏛️ The Architecture Breakdowns

1. The Dynamic Hero & Live Status Badge

Instead of a static greeting, the landing view includes a live pulsing indicator badge to clearly state my availability to engineering teams right away.


html
<div class="live-status-badge">
    <span class="pulse-dot"></span>
    <span class="status-text">Open to new engineering roles</span>
</div>

Promises & Async/Await

Karthick (k) — Thu, 09 Jul 2026 05:57:39 +0000

Why JavaScript promises

The following example defines a function getUsers() that returns a list of user objects:

function getUsers() {
  return [
    { username: 'john', email: 'john@test.com' },
    { username: 'jane', email: 'jane@test.com' },
  ];
}

Understanding JavaScript Promises

By definition, a promise is an object that encapsulates the result of an asynchronous operation.

A promise object has a state that can be one of the following:

Pending
Fulfilled with a value
Rejected for a reason

In the beginning, the state of a promise is pending, indicating that the asynchronous operation is in progress. Depending on the result of the asynchronous operation, the state changes to either fulfilled or rejected.

The fulfilled state indicates that the asynchronous operation was completed successfully:

Creating a promise

To create a promise object, you use the Promise() constructor:

const promise = new Promise((resolve, reject) => {
  // contain an operation
  // ...

  // return the state
  if (success) {
    resolve(value);
  } else {
    reject(error);
  }
});

Note that the callback functions passed into the executor are resolved and rejected by convention only.

Consuming a Promise: then, catch, finally

1) The then() method:

To get the value of a promise when it’s fulfilled, you call the then() method of the promise object. The following shows the syntax of the then() method:

promise.then(onFulfilled,onRejected);

2) The catch() method

If you want to get the error only when the state of the promise is rejected, you can use the catch() method of the Promise object:

promise.catch(onRejected);

Summary

Use then() method to schedule a callback to be executed when the promise is fulfilled, and catch() method to schedule a callback to be invoked when the promise is rejected.
Place the code that you want to execute in the finally() method, whether the promise is fulfilled or rejected.

References:

I have written about this article and I am learning about this topic's future. I will updated more
I've learned a lot from this article about JavaScript promises, and I'm planning to update my notes as I continue my studies on the topic. I'm excited to explore how promises can be used in asynchronous programming and their impact on code structure. If I come across more information, I’ll make sure to revise and add to my understanding!

https://www.javascripttutorial.net/es6/javascript-promises/

JavaScript Closures Explained with Examples

Karthick (k) — Wed, 08 Jul 2026 13:28:10 +0000

Closure in JavaScript

A closure is the combination of a function and its lexical environment, allowing the function to access variables from its outer scope even after the outer function has finished executing.

Retains access to outer function variables.
Preserves the lexical scope.
Allows data encapsulation and privacy.
Commonly used in callbacks and asynchronous code.

function outer() {
    let outerVar = "I'm in the outer scope!";

    function inner() {
        console.log(outerVar);
    }
    return inner;
}

const closure = outer();

closure();
closure();

Disadvantages of Closures

Closures are a powerful tool in programming, but they can also result in memory leaks if not used correctly. The closure's ability to allow internal functions to retain external variables can cause these variables to persist in memory, leading to memory leaks if the code is executed repeatedly.

The example below demonstrates how a memory leak can occur when using closures. The longArray constant is still remembered by addNumbers due to the closure, even if it is not in use. This can cause a buildup of memory over time, resulting in a memory leak.

function outer() {
  const longArray = [];
  return function inner(num) {
    longArray.push(num);
  };
}
const addNumbers = outer();

for (let i = 0; i < 100000000; i++) {
  addNumbers(i);
}

HTML Document Object Model

Karthick (k) — Mon, 06 Jul 2026 06:41:23 +0000

DOM tree

The backbone of an HTML document is tags.

According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.

All these objects are accessible using JavaScript, and we can use them to modify the page.

For example, document.body is the object representing the tag.

Running this code will make the red for 3 seconds:

An example of the DOM

Let’s start with the following simple document:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

Summary

An HTML/XML document is represented inside the browser as the DOM tree.

Tags become element nodes and form the structure.
Text becomes text nodes.
…etc, everything in HTML has its place in the DOM, even comments.

"Understanding createElement() and appendChild() in JavaScript DOM"

Karthick (k) — Sun, 05 Jul 2026 12:37:03 +0000

What is the DOM?

WITH THE DOM API in JavaScript, you can manipulate the HTML document effectively. The DOM (Document Object Model, Dom ApI provide set of functions and methods to modify the HTML dynamically in JavaScript

createElement() :

In JavaScript, document.createElement() is a built-in DOM method used to dynamically create a new HTML element in the browser's memory.

Simple Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const h1=document.createElement("h1")

        console.log(h1)


        const p=document.createElement("p");
        p.textContent="Hello"

        console.log(p);
    </script>
</body>
</html>

What is appendChild() Method

The appendChild() is a method of the Node interface. The appendChild() method allows you to add a node to the end of the list of child nodes of a specified parent node.

Syntax:

parentNode.appendChild(childNode);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>appendChild</title>
</head>
<body>
    <ul id="Menu"></ul>

    <script>
        const li=document.createElement("li");

        li.textContent='Home'

        const Men=document.querySelector("#Menu")
        Men.appendChild(li);
    </script>

</body>
</html>

JavaScript Roadmap

Karthick (k) — Sat, 04 Jul 2026 15:20:56 +0000

Let’s be completely honest: I haven't actually started studying JavaScript properly yet. Looking at a blank code editor feels intimidating, and the sheer volume of things to learn is overwhelming.

But instead of diving in blindly and getting stuck in tutorial hell, I decided to map out a concrete strategy first. I got my hands on a brutal, practice-heavy roadmap that covers 9 modules, over 90 practice programs, and 8 real-world projects.

I’m sharing my exact battle plan before I write my first line of code. If you're a beginner, feel free to steal this. If you're a senior dev, let me know in the comments if I'm missing anything!

🔄 Phase 1: Logic & Reusability

This is where I learn how to make the computer repeat tasks and organize my thoughts.

Module 3: Control Flow & Loops
- Core Topics: for, while, do...while, Nested loops, break, and continue.
- The Goal: Complete 20 practice programs to nail down basic logic.
Module 4: Functions
- Core Topics: Function Declarations vs. Expressions, Arrow Functions, Parameters, Return statements, Scope, and basic Closures.
- The Goal: Complete 20 practice programs to master reusable code.

📦 Phase 2: Data Structures

How to store, organize, and manipulate data efficiently in JavaScript.

Module 5: Arrays (The Big One)
- Core Topics: Creating arrays, basic methods (push, pop, shift, unshift), slicing/splicing, and the heavy-lifters: map(), filter(), reduce(), find(), some(), every(), and sort().
- The Goal: 30 practice programs (this is going to be a massive coding weekend).
Module 6: Objects
- Core Topics: Key-value pairs, Nested Objects, Object Methods, Constructor Functions, the this keyword, and Optional Chaining.
- The Goal: Complete 20 practice programs.

🌐 Phase 3: Making It Alive (The DOM)

This is the milestone where JavaScript finally meets the browser and things get interactive.

Module 7: The DOM ⭐⭐⭐
- Core Topics: Selecting elements (getElementById, querySelector), changing content (innerHTML, textContent), handling forms, updating styles, and using addEventListener().
- 🧰 The First Projects:
  - Counter App
  - Calculator
  - To-Do App

🚀 Phase 4: Modern JS & Async Power

Learning how modern developers actually write JavaScript and how to fetch real data from the internet.

Module 8: ES6+ Features
- Core Topics: let & const, Template Literals, Destructuring, Spread & Rest Operators, Default Parameters, and Modules.
Module 9: Async JavaScript
- Core Topics: Callbacks, Promises, async / await, Fetch API, and handling JSON.
- Project: Weather App (fetching live, real-time data!).
Module 10: Error Handling
- Core Topics: Learning how to fail gracefully using try, catch, finally, and throw.

🏆 The Grand Finale: Mini Projects

To cement everything I've learned, I will build 6 distinct projects from scratch to build up my portfolio:

🧮 Calculator
⏰ Digital Clock
📝 Quiz App
☀️ Weather App
📓 Notes App
💳 Expense Tracker

Why I'm Backing This Specific Roadmap

What I love about this plan is the heavy emphasis on practice. Reading about a map() function takes 2 minutes; understanding when to actually use it requires writing code.

By the end of this journey, I will have built 90+ small programs and 8 portfolio-ready projects. That's how you actually learn to code—by building, breaking, and fixing things.

Join My Journey!

I'm officially starting Module 3 today.

To the beginners: Do you want to study this roadmap with me? Let's connect in the comments and keep each other accountable!
To the veterans: Which module here do you think will give me the most headaches? (My bet is on closures or async/await!).