DEV Community: Dhamith Kumara

Why have a flat Resume when you can have an OS? 🚀 Dive into BDK-OS

Dhamith Kumara — Sat, 31 Jan 2026 07:06:03 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am a passionate Full Stack Developer with over 2+ years of industrial experience and a deep seated love for building high performance, creative web applications. My journey in tech is driven by the challenge of transforming complex problems into elegant, interactive digital experiences.

My Portfolio Expression

With this portfolio, BDK-OS, I wanted to express more than just a list of skills. I wanted to showcase my ability to blend utility with creativity.

By reimagining my professional profile as a fully functional, browser-based operating system, I hope to demonstrate,

Technical Versatility - Managing complex global states, terminal logic, and game engines.
Design Sensibility - A commitment to high-end aesthetics like glassmorphism and neon-retro UI.
User Centric Innovation - Turning a "Read-only" resume into an "Interactive" experience where visitors can explore my bio, run my code, and even play a game.

I am always looking for new challenges and opportunities to contribute to cutting edge projects. Let's build something amazing together!

Portfolio

How I Built It

Building BDK-OS was an exercise in merging retro computing aesthetics with ultra modern web performance. My goal was to create a portfolio that felt like a "living" workspace rather than a static page.

The Tech Stack

Framework - Next.js 16.1 (App Router) for high performance server side rendering and static generation.
UI/Styling - Tailwind CSS for a utility first, highly customizable design system.
Animations - Framer Motion to power the fluid window transitions, dragging mechanics, and the "Progressbar95" game engine.
Icons - Lucide React for a consistent, minimalist icon language.
Deployment - Docker with a multi stage build, optimized for production using Next.js standalone output.

Design Decisions

The "OS" Concept - I chose a windowed desktop interface (BDK-OS) to showcase my versatility. It allows visitors to interact with my projects, bio, and a terminal as if they are exploring my digital brain.
Glassmorphism & Neon - To make the "Retro" feel "Futuristic," I used heavy backdrop blurs (backdrop-blur-md), semi transparent blacks (bg-black/80), and neon blue accents. This creates a high end, premium feel.
Interactive Terminal - The terminal isn't just for show, It features a simulated file system (bio.txt, projects.md), command history navigation (using Arrow keys), and integration with the window manager to launch apps like the game.

Development Process

I followed a component first architecture. I built a custom WindowManagerContext to handle the state of all open, minimized, and maximized windows globally. This allowed for features like "focus tracking" (bringing the last clicked window to the front) and "one click maximizing."

Google AI Tools Used

This project was built with the assistance of Google Antigravity (powered by Gemini models). Specifically, I used AI to,

Architecture Design - Designing the global state management for the windowing system and terminal logic.
Complex Logic - Developing the collision detection and spawning algorithms for the "Progressbar95" terminal game.
Creative Assets - Generating the custom BDK-OS Favicon using Gemini’s integrated image generation capabilities.
DevOps Optimization - Crafting a production ready Dockerfile and configuring Next.js standalone output for seamless deployment.
SEO & Metadata - Automating the generation of OpenGraph tags and professional descriptions to improve the portfolio's discoverability.

What I'm Most Proud Of

Breathing New Life into a Classic

The feature I am most excited about is the Progressbar95 game integration. I took the core concept of the classic retro game and reimagined it as a fully playable experience within my portfolio.

Technical Achievement - Building a real time game engine inside a React component. I used Framer Motion to handle high performance animations for falling segments and collision detection between the "catcher" and the dropping bars.
The "Easter Egg" Feel - While optional, this feature serves as a tribute to the legacy of OS design that inspired the rest of the site. It's more than just a game; it's a demonstration of how I can apply technical logic to create fun, engaging user experiences.

The Custom Window Management System

Rather than using a standard layout library, I built a custom Window Manager from the ground up.

Depth and Focus - I implemented a dynamic Z index system that tracks which window the user is interacting with, automatically bringing it to the "front" (just like a real OS).
Desktop Workflow: Integrating drag and drop mechanics, window minimizing to the taskbar, and a full screen maximize toggle. Achieving this level of desktop native feel in a web browser using WindowManagerContext was a significant technical milestone for me.

The Command Line Soul

I am particularly proud of the Terminal's integration with my data.

It's not a static text box it has a simulated file system that reads from my actual project data (projects.ts) and biography.
Implementing Command History (using up/down arrows) and unique commands like game to launch other parts of the UI creates a cohesive experience for developer minded visitors.

More Than a T-Shirt: My 3-Year Battle to Win Hacktoberfest

Dhamith Kumara — Mon, 13 Oct 2025 17:50:35 +0000

Everyone talks about the Hacktoberfest event, but they rarely talk about what you actually get after winning it, right?

I've been joining Hacktoberfest since 2022. In the early days, all I could get was the participation badge 😉.

I joined the event again in 2023, but I still only managed to get the participation badge.

However, I learned a lot during all those events. Anyway, I joined the event in 2024 as well. Although I couldn't win, I created 4 PRs and got 4 badges.

But I still wasn't able to win the main event.

However, for Hacktoberfest 2025, I joined with a lot of planning. I was completely in the zone, finding repositories and issues days before the event started. I knew that with thousands of participants worldwide, getting my PRs accepted would be a race against the clock. 😌

I had created 5 of my PRs by the morning of October 1st, the very moment the event started. I quickly realized that winning a global event against such intense competition is incredibly challenging 😪. Anyway, by the end of the first two days, I had created all 6 of my PRs. But that was just the start. Just creating PRs isn't enough; the project maintainers need to review and merge them. And with the 7-day review window to check for spam or low-quality contributions, it’s a long, nerve-wracking process to get final acceptance.

Anyway, after 3 years of hard work and persistence, I finally managed to achieve the goal I set, winning Hacktoberfest event!

What did I get? 😎 More than anything, I learned a lot of new things. You gain a completely different experience when working on many diverse projects.

For winning the event, I received a tree as a gift from Hacktoberfest's tree plantation initiative 😋. I also received a limited edition t-shirt.

Reading this, you might think, "Well, you can buy these things with money."

But that's not the truth. With all this, we can learn new things and gain new experience. This might be a big deal for me, but it might be a small thing for you. 😌

I, too, would love to see more guys and girls contributing to open-source projects on social media someday in the future.

How to Generate sitemap.xml in Next.js for Better SEO

Dhamith Kumara — Sun, 21 Sep 2025 12:42:49 +0000

Search engines like Google and Bing rely on sitemaps to crawl your site effectively. If you're using Next.js you can generate a dynamic sitemap to keep search engines up to date automatically.

This guide will cover,

What a sitemap is and why it matters
How sitemaps impact SEO
The anatomy of a sitemap.xml file
Splitting Large Sitemaps with Index Files
Automating Sitemap Generation in Next.js with next-sitemap

What a sitemap is and why it matters

A sitemap is simply a list of all important URLs on your website, expressed in XML format. It acts as a "roadmap" for search engines, showing them where your content lives and when it last changed.

Key benefits,

Ensures new pages are discovered quickly
Helps index deep content (blog posts, E - commerce products, dynamic pages)
Provides metadata (last modified date, change frequency, priority)
Allows you to prioritize content for crawling

Even though Google can discover URLs through links, a sitemap acts like a direct invitation to crawl every page you want indexed.

How Sitemaps Impact SEO

A sitemap doesn't directly improve rankings, but it makes it much easier for search engines to discover, crawl, and index your content. That can indirectly improve your SEO because your pages get into the index faster and more completely.

Key impacts,

Faster indexing of new content - (When you publish new pages or update old ones, search engines see them immediately if they’re in your sitemap.)
Improved coverage - (Large or deep sites (with many categories or paginated content) can be hard to crawl through links alone. A sitemap tells Google where everything is.)
Crawl efficiency - (Search engines have a "crawl budget" for each site. A sitemap helps them spend it more wisely by pointing only to canonical, important URLs.)
Metadata signals - (The <lastmod>, <changefreq>, and <priority> tags provide hints about how often a page changes and how important it is. Google treats them as advisory, but they still help guide crawling.)

Think of a sitemap as a road map you hand to search engines. It doesn't guarantee rankings, but it makes sure the crawler doesn't miss any of your roads.

The anatomy of a sitemap.xml file

<loc> - URL of the page
<lastmod> - last modification date
<changefreq> - how often the content changes (optional)
<priority> - relative importance (optional)

Splitting Large Sitemaps with Index Files

If your site has more than 50,000 URLs or your XML file is over 50 MB, you must split it into multiple sitemaps and create a sitemap index.

Each child sitemap then lists a portion of your URLs. Search engines crawl the index file and automatically discover all child sitemaps.

Automating Sitemap Generation in Next.js with next-sitemap

Manually crafting a sitemap.xml route can be overkill when your site already has dozens or hundreds of pages. The next-sitemap package takes care of the heavy lifting by generating a valid sitemap (and optional robots.txt) automatically during your build process.

Installation

Add the package to your project

npm install next-sitemap
# or
yarn add next-sitemap

Set Up Configuration

Create a file called next-sitemap.config.js in your project root and define how your sitemap should behave.

Update your build script to run next-sitemap right after next build.

Now every time you run

npm run build

the package will output

public/sitemap.xml (or several if your site is huge)
public/robots.txt

Conclusion

An up to date sitemap is one of the simplest yet most effective ways to help search engines understand your site's structure. By letting the next-sitemap package generate it automatically, you'll ensure every important page is discoverable and indexed quickly.

For small sites, a manual sitemap gives you complete control. For larger or frequently changing sites, the built -in App Router feature or next-sitemap can automate the process and remove maintenance overhead.

Once your sitemap is in place, don’t forget to

Submit it to Google Search Console and Bing Webmaster Tools
Keep your base URL and metadata accurate
Regenerate it on every deploy to reflect new content

Following these steps will give your Next.js project stronger SEO and smoother crawling. Making it easier for search engines (and your audience) to find your content faster.

The Power of "^" in package.json

Dhamith Kumara — Sat, 30 Aug 2025 10:50:36 +0000

If you've ever peeked into your package.json file when working with Next.js (or any JavaScript framework), you’ve probably noticed something like this,

At first glance, it's just a version number with a little caret ^. Seems harmless, right? But that tiny symbol can determine whether your app runs smoothly in production or suddenly breaks after deployment.

This article takes a deep dive into the ^ symbol in package.json,

What it actually means (SemVer).
The difference between "^14.2.0" and "14.2.0".
Why deployments (like on AWS EC2) sometimes install different versions than your local environment.
The pros and cons of using ^.
Best practices for keeping your Next.js projects stable.

By the end, you’ll know exactly when to embrace ^ and when to avoid it.

1. What is Semantic Versioning (SemVer)?

Most npm packages (including Next.js) follow semantic versioning written as,

Example 14.2.0

MAJOR ➮ Breaking changes (14.x.x ➝ 15.x.x).
MINOR ➮ New features, backwards-compatible (14.2.x ➝ 14.3.x).
PATCH ➮ Bug fixes, backwards-compatible (14.2.0 ➝ 14.2.1).

The idea is that you can safely upgrade patch and usually minor versions without breaking your app.

2. What Does the `^` Symbol Do?

In npm, ^ is a version range operator. It says,

Install the latest version compatible with this one.

So when you type,

npm doesn't necessarily install the exact version listed. If you're using ^, it will pick the latest matching version that fits the range.

3. Why Deployments Sometimes Surprise You

Here's a common story,

You run npm install locally. Your next version resolves to 14.2.0.
You deploy to AWS EC2. During npm install, the server pulls 14.3.1 because it's the newest compatible release under ^14.2.0.
Suddenly, your production behaves differently than your local machine.

This happens because,

Without a lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml), npm resolves dependencies fresh every time, possibly grabbing a newer version.
With a lockfile committed, deployments should match your local environment exactly even with ^.

So if you've ever seen EC2 "mysteriously" use a newer Next.js version, the culprit is almost always a missing or ignored lockfile combined with the caret operator.

4. Pros and Cons of Using `^`

5. When to Use ^ vs Exact Versions

Think of it as a tradeoff between stability and freshness,

Use ^ for libraries that are safe and mature (like lodash, date-fns, or axios). These packages rarely break between minors.
Pin exact versions for critical frameworks like next, react, or build tools especially in production apps. That way, you control when you upgrade.

Conclusion

That little caret (^) in package.json is more powerful than it looks.

"^14.2.0" keeps your app automatically updated within the 14.x line (minor + patch updates).
"14.2.0" locks you to one exact version, ensuring maximum stability.

The real issue isn't the caret itself. It's how you manage installs. If you don't commit a lockfile or use npm ci, your deployments (like on EC2) may suddenly run a different version than your local machine.

The key takeaway is balance,

✅ Pin exact versions for critical frameworks like Next.js and React, where stability matters most.
✅ Use ^ for smaller, safer libraries to benefit from automatic fixes.
✅ Always commit your lockfile and use npm ci in deployments to prevent surprises.

Think of ^ as an autopilot mode. It can save time by keeping dependencies fresh, but without guardrails, it can take you somewhere you didn't plan to go.

Mastering when to lock versions and when to allow flexibility will save you countless headaches and give you the best of both worlds stability in production, convenience in development.

How to Hide API Endpoints in Next.js

Dhamith Kumara — Sun, 24 Aug 2025 07:13:24 +0000

In Next.js, securing sensitive data and preventing the exposure of API endpoints is critical for building secure web applications. When fetching data, the approach you choose direct or indirect determines whether API endpoints are visible in the browser's network tab. This article explores how to hide API endpoints in Next.js, using two Proof of Concept (POCs) examples to compare direct and indirect data fetching. We'll demonstrate how direct fetching keeps endpoints hidden and provide best practices for securing your Next.js app, based on a project using Next.js 15.5.0, React 19.1.0, and Supabase.

Project Structure and Setup

The examples in this article are based on a Next.js project with the following setup,

Next.js (v 15.5.0)
React (v 19.0.1)
Supabase
Directory Structure

This setup uses a Supabase table named post with columns post (string) and keyword (string) to store and query data based on user-selected keywords. The POCs demonstrate fetching posts matching a selected keyword, highlighting the differences in endpoint exposure.

Understanding API Endpoint Exposure

When you fetch data in a Next.js application, the method you use determines whether the data-fetching process is visible in the browser's network tab,

Indirect Fetching - Involves calling an API endpoint (e.g., a Next.js API route or external service) via HTTP requests, which are visible in the network tab, exposing the endpoint URL, request payload, and response data.
Direct Fetching - Executes data fetching within the app, typically server-side, without creating a public API endpoint, making it invisible in the network tab.

Hiding API endpoints is critical to prevent attackers from inspecting sensitive data, reverse-engineering your API, or exploiting unprotected endpoints. Let's examine both approaches using POCs that fetch data from a Supabase database.

Indirect Data Fetching (Exposed API Endpoints)

Indirect fetching involves calling a Next.js API route or external service from the client side, creating visible HTTP requests. Here’s a POC demonstrating this approach.

POC - Indirect Fetching with an API Route

In this POC, a Next.js app fetches posts from a Supabase database by calling an API route (/api/getPost).

repo

Observations

Exposed Endpoint - The /api/getPost endpoint is publicly accessible and appears in the browser’s network tab. The request (e.g., POST /api/getPost with payload { keyword: selectedValue }) and response (e.g., { success: true, data: [...] }) are visible.
Security Risk - Without authentication or rate limiting, anyone can call this endpoint, potentially exposing sensitive data or allowing abuse (e.g., brute-forcing keywords).

Direct Data Fetching (Hiding API Endpoints)

Direct fetching involves retrieving data within the Next.js app, typically server side, without exposing an API endpoint. This approach leverages Next.js's Server Components or server actions to keep data fetching internal.

POC - Direct Fetching with Server Actions

In this POC, the app fetches posts from Supabase using a server action, with no public API endpoint.

repo

Observations

No Endpoint Exposure - The getPost function is a server action, executed server-side via Next.js's App Router. No public API endpoint is created, so nothing appears in the network tab related to the data fetch.
Security Benefit - Sensitive operations (e.g., Supabase queries with API keys) remain server side, hidden from the client, reducing the risk of exposing implementation details.

Why Direct Fetching Hides API Endpoints

In the direct fetching POC, the "use server" directive ensures that the getPost function runs on the server, not the client. When the client-side component calls callGetPostData, Next.js handles the request internally as a server action, serializing the response into the JavaScript bundle or rendered HTML. This process,

Eliminates the need for a public API endpoint.
Prevents network requests from appearing in the browser's network tab.
Keeps sensitive data (e.g., Supabase credentials) secure on the server.

In contrast, the indirect fetching POC's /api/getPost endpoint is a standard HTTP API, accessible to anyone unless secured, and its requests are visible in the network tab.

Best Practices for Hiding API Endpoints

Prioritize Server-Side Fetching - Use Server Components or server actions for sensitive data operations to avoid exposing endpoints.
Secure API Routes - If using indirect fetching, implement authentication, rate-limiting, and input validation.
Hide Sensitive Data - Store Supabase credentials and other secrets in .env.local files, as done in the POCs.
Monitor Network Exposure - Test your app's network tab to ensure no sensitive endpoints or data are visible.
Use Incremental Static Regeneration (ISR) - For static sites, fetch data at build time or during revalidation to avoid runtime API calls.

Conclusion

Hiding API endpoints in Next.js is achievable by favoring direct data fetching with server actions or Server Components, as demonstrated in the direct fetching POC using Next.js 15.5.0, React 19.1.0, and Supabase. This approach keeps data retrieval internal, preventing endpoint exposure in the browser's network tab and enhancing security. In contrast, indirect fetching, as shown in the API route POC, exposes endpoints, requiring additional security measures like authentication or middleware. By leveraging direct fetching for sensitive operations and securing any necessary API routes, you can build secure, performant Next.js applications that protect your data and implementation details.

Exploring git cherry and git cherry-pick

Dhamith Kumara — Sun, 10 Aug 2025 18:05:21 +0000

Git is the lifeblood of modern software development. From hobbyists working on personal projects to massive organizations managing enterprise codebases, Git provides the version control backbone. While the learning curve can be steep at first, most developers quickly become familiar with a handful of commands and workflows. But Git is far richer than what most of us use on a daily basis.

Did you know Git has over 150 commands available through its CLI? That number jumps even higher if you count all the flags, aliases, and plumbing commands under the hood. Most developers only scratch the surface using perhaps a dozen commands regularly. That's fine for basic workflows, but understanding some of Git's lesser known capabilities can help you become more effective, avoid pitfalls, and better manage complex codebases.

What is git cherry?

git cherry is a comparison tool. It helps you determine which commits in one branch are missing from another, based on content (not just commit hashes).

When Would You Use It?

Imagine you're working on a long lived feature branch and want to know which of its commits are not yet in the main branch. Or maybe you're preparing a release and want to ensure nothing was forgotten from a development branch.

Syntax

How It Works

Unlike git log, which compares by commit hash, git cherry compares patches. So if two commits have different hashes but the same content (a cherry-pick, for example), git cherry considers them duplicates.

This makes git cherry ideal for code review and release preparation tasks.

What is git cherry-pick?

While git cherry is a read only diagnostic tool, git cherry-pick modifies your codebase. It allows you to take one or more specific commits from another branch and apply them to your current branch—without merging everything from that source branch.

When Would You Use It?

Let's say a developer fixed a critical bug on a dev branch, but the main branch also needs that fix right now. Instead of merging all of dev, you cherry-pick just that one bug fix commit.

Syntax

Important Notes

Cherry-picking creates new commit hashes, even though the content is the same.
Cherry-picking multiple commits? Order matters! Pick them in the sequence they were created.
Conflicts may arise if the codebase has changed significantly since the original commit.

git cherry vs git cherry-pick

A step by step guide to understanding how it works

Step 1 - Create a New Repository

mkdir git-cherry-demo
cd git-cherry-demo
git init -b main

Step 2 - Add an Initial Commit

echo "# Git Cherry Demo" > README.md
git add README.md
git commit -m "Initial commit with README"

Step 3 - Create the hero-section Branch

git checkout -b hero-section

Step 4 - Add a Unique Commit

echo "This is unique to hero-section branch" >> README.md
git add README.md
git commit -m "Add unique content to README in hero-section"

Step 5 - Add a Commit That Will Be Duplicated

echo "This is shared content" >> README.md
git add README.md
git commit -m "Add shared content to README"

Step 6 - Cherry-pick That Commit into main

First, find the commit hash for the "shared content" commit

git log --oneline

Copy the hash (a1549a7) and run

git checkout main
git cherry-pick a1549a7

Step 7 - Compare Branches with git cherry

git cherry main hero-section

You should see something like

Final Thoughts

If Git were a toolbox, most developers stick to the hammer, screwdriver, and tape measure. But tucked away inside are precision tools like git cherry and git cherry pick that can help in nuanced, high stakes situations like release branches, hotfixes, and cross-team merges.

Learning to wield these commands doesn't just make you a better Git user. It makes you a more capable collaborator, a faster debugger, and a smarter code reviewer.

So next time you're facing a tangled merge problem or wondering what's unique in a feature branch, try reaching for git cherry or git cherry-pick. You might find that small, precise changes can make a world of difference.

How I Landed My Internship as an Undergraduate Student

Dhamith Kumara — Sat, 26 Jul 2025 18:31:14 +0000

Hi, I'm Dhamith, a software engineer with over 2.5 years of experience. But back when I was an undergraduate, I faced the same challenge many students face today, finding an internship. These days, it's tough. There's lots of competition, few responses, and endless applications. That's exactly why I'm sharing my story. I didn't land my internship through a job portal or by sending out resumes. It came from something completely different. Here's how it happened.

In the beginning, I built a few hobby projects just for fun. Simple things I was curious about or wanted to try. I didn't expect much from them, but I shared them anyway on social media. At first, I posted my work everywhere Twitter, Facebook, and LinkedIn. But after a while, I started noticing something, LinkedIn was where my work was getting the most attention. People in the tech industry were more active there, and my posts were reaching the right audience. So even though I continued sharing on other platforms, I began focusing more on LinkedIn.

At first, I told myself, "Now you have the platform to share your progress but you don't really have a clear plan." I knew I wanted to build and grow, but I wasn't sure where to begin. So I started with what I could simple landing pages using React, and I shared them online. Then one day, while scrolling through Twitter, I noticed developers consistently posting daily updates using the hashtag #100DaysOfCode. At first, I didn't even realize it was a public challenge. I thought it was just something people were doing independently. But the more I saw, the more inspired I became. That’s when I decided to commit to the #100DaysOfCode challenge myself.

When I started the challenge, I still didn't have a clear roadmap. So on Day 1, I created a simple loading animation using just HTML and CSS. From there, I kept going. I completed several mini projects using HTML, CSS, JavaScript, and later moved on to React and MongoDB. You might find it hard to believe, but as an undergraduate student juggling lectures, assignments, and limited time, I still made it work. While others used weekends to relax, I used mine to build. On many nights, I stayed up late just to complete a project. Every single day, I challenged myself to create and share something new for the #100DaysOfCode.

As I continued sharing my progress through the #100DaysOfCode challenge, something completely unexpected happened. One night, I received a message on LinkedIn that caught me by surprise "We are hiring" The message included openings for roles like ASE, SE, and SSE. I wasn’t actively job hunting, but I replied and mentioned that I was currently looking for an internship as an undergraduate. To my surprise, they were open to it. After a few more messages, they invited me to take part in a technical interview and a coding assessment. I gave it my best, and not long after, they officially offered me an internship.

After completing the internship, my team lead gave me feedback that truly stayed with me. She said, "We were really impressed by your work. That's why we reached out to you through LinkedIn." That one sentence confirmed everything I had believed while doing the #100DaysOfCode challenge. All those late nights, daily posts, and small projects added up. It wasn't luck. It was the result of showing up every day and sharing my progress publicly. That was the moment I truly realized how powerful consistency and building in public can be.

So here's my advice to anyone trying to land an internship, Don't just do what everyone else is doing. Try to create something unique, something so impressive that when people see it, their first reaction is "Wow!" Share your progress on the right platforms, where your work can be noticed by the right audience. And most importantly, never give up. Consistency, creativity, and persistence are the keys to standing out and turning opportunities your way.

Mastering SSG, SSR, ISR, and CSR in Next.js

Dhamith Kumara — Sat, 19 Jul 2025 18:34:50 +0000

Next.js is far more than a React framework, it’s a versatile hybrid rendering engine granting precise control over page creation and delivery. In this detailed guide, we’ll explore the distinctions among Next.js's four primary rendering strategies, their effects on performance and SEO, advanced use cases, and provide code examples for each approach.

Next.js Rendering Strategies

SSG - Static Site Generation
SSR - Server-Side Rendering
ISR - Incremental Static Regeneration
CSR - Client-Side Rendering

1. Static Site Generation (SSG)

With SSG, your pages are generated at build time, turned into HTML, and served via a CDN. It’s blazing fast because there’s no server computation on each request.

Scenarios - Weblogs, Advertising sites, Reference manuals, Creative showcases

2. Server Side Rendering (SSR)

In SSR, the HTML is generated on the server for every request. This ensures that users always get fresh content, but with a performance cost.

Scenarios - Dashboards, Authenticated user pages, Search results, A/B testing pages

3. Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) combines the advantages of static and dynamic rendering, delivering static HTML pages generated at build time that can be updated on-demand without redeploying the entire site. With ISR, you set a revalidation interval (in seconds), and Next.js automatically rebuilds the page in the background when a request is received after the specified time expires. This ensures subsequent visitors receive the updated page seamlessly.

Scenarios - Product pages, News articles, Catalogs, Events and conference sites

4. Client Side Rendering (CSR)

CSR happens entirely in the browser using React. The initial page is a basic HTML shell, and content is fetched and rendered after page load using APIs or React hooks.

Scenarios - Admin panels, Dashboards, Interactive charts, Private areas of apps

Conclusion

Next.js empowers developers with flexible rendering strategies that can be tailored to any application's needs whether it’s SEO driven marketing pages, dynamic dashboards, or hybrid apps that do both.

Understanding when to use SSG, SSR, ISR, or CSR is critical for building fast, scalable, and user friendly web experiences. Each method has its strengths,

SSG offers speed and simplicity.
SSR provides up to date, dynamic content.
ISR bridges the gap between static and dynamic.
CSR enables rich interactivity and personalization.

Instead of picking just one, modern Next.js projects often combine multiple strategies delivering static performance where possible and dynamic flexibility where needed.

By mastering these techniques, you'll not only build better apps, you'll build smarter, faster, and more adaptable ones.

Why You Should Never Commit Your .env File and How to Handle It Properly

Dhamith Kumara — Sun, 08 Jun 2025 06:53:20 +0000

Recently, while reviewing some undergraduate software projects, I stumbled upon a worrying trend. In several cases, students had included their .env files directly in their public repositories. Some even tried a workaround by uploading their .env files compressed inside a .env.rar archive, assuming this would somehow make it safer.

This is a classic example of a problem many new (and even experienced) developers underestimate: how to properly handle environment variables and sensitive configuration files in a project.

If you’re building software, whether as a student, a freelancer, or part of a company, understanding the role of environment configuration and how to manage it securely is an essential skill. In this article, I’ll explain what .env files are, why they’re important, the mistakes people commonly make, how to fix accidents, and the right practices you should follow to handle them safely.

What Exactly Is a `.env` File?

In software development, especially in web applications, your program often needs to connect to databases, access external APIs, or use secret tokens. Hardcoding these values directly in your source code is dangerous because anyone with access to your code would then have access to your sensitive credentials.

A .env file is a simple text file used to store environment variables for your application in a key value format.

This file allows you to separate sensitive information from your codebase. Libraries like dotenv in Node.js or Python's python-dotenv can then load these variables into your application at runtime.

Why Do Developers Use `.env` Files?

The main reason is security and flexibility.

Instead of embedding sensitive values directly into your source files, you place them inside a .env file that’s read when the application starts.

You can keep your code the same while changing your configurations depending on the environment (development, staging, production).
It reduces the risk of accidentally exposing sensitive information in your codebase.

Imagine deploying a website where your database password is written inside your code file. Anyone with access to your source code repository would also have the credentials to access your database. This is exactly what .env files help to avoid.

The Common Mistakes People Make with `.env` Files

Unfortunately, as I saw in those student projects, .env files often aren’t handled the way they should be. Let’s talk about the common mistakes I encountered.

1.Committing .env Files to Public Repositories

The most obvious and dangerous mistake is adding a .env file to your version control system (like Git) and pushing it to a public repository. Doing this exposes your sensitive environment variables to anyone on the internet.

Once secrets are exposed publicly, they can be harvested by bots within minutes, leading to stolen API keys, compromised databases, or unauthorized access to services.

2.Compressing `.env`Files into `.env.rar` or `.zip`

Some students believed that compressing a .env file into a .rar or .zip archive and uploading it to a repository was a secure workaround. Unfortunately, this offers no real security. Anyone can easily download and unzip these archives. Even worse, this practice often signals to attackers, "There’s something important inside here."

Security by obscurity is no substitute for proper handling.

3.Hardcoding Secrets Directly in Code

Another rookie mistake is placing secrets directly into code files, like this

This is just as unsafe as committing a .env file and should be strictly avoided.

What To Do If You Accidentally Commit a .env File

Mistakes happen, and if you’ve accidentally committed a .env file to a public repository. Don’t panic, but act fast. Here’s exactly what you should do,

1. Remove the File from the Repository History

Simply deleting the file and committing the change isn’t enough because Git maintains a full history of all changes. You need to purge the file from the entire Git history using a tool like

git filter-branch (older method)
BFG Repo-Cleaner (simpler, faster)

Example using BFG

Then push your changes back

⚠ Be careful with force pushes, especially on shared projects ⚠

2. Immediately Revoke and Rotate Exposed Secrets

Assume that once the file was pushed, your secrets were compromised. Even if you deleted it moments later. API keys, database credentials, and tokens need to be invalidated and replaced with new ones.

Go through your services (like AWS, Google Cloud, payment processors, email providers) and rotate any exposed credentials.

3. Notify Relevant Stakeholders

If your accidental exposure affects shared infrastructure (like a production database, third-party services, or customer data access), inform your team or supervisor immediately so they can take precautionary measures.

4. Add `.env` to `.gitignore`

Prevent the mistake from happening again by adding .env to your .gitignore file.

How Should You Handle `.env` Files Properly?

Always add .env to your .gitignore to exclude it from version control.
Use a .env.example to provide variable names without real values for others to follow.
Share actual .env files securely via encrypted channels or secret management tools.
Use CI/CD secret management features provided by platforms like GitHub Actions, GitLab, or Jenkins.
Regularly scan your codebase with tools like GitGuardian or Gitleaks to catch accidental secret commits early.
Periodically rotate your secrets even without incidents. It’s good operational hygiene.

Conclusion

Environment variables and .env files are essential tools for separating sensitive configuration details from your application code. But with that convenience comes responsibility. Mishandling these files, whether by committing them to a public repository, hiding them in a .rar archive, or hardcoding secrets can lead to serious security incidents.

If you make a mistake, don’t waste time. Clean your repository history, rotate your secrets, and update your workflow to prevent future accidents.

By adopting proper .env management practices early in your development career, you not only protect your projects and credentials but also build habits that will serve you well in professional environments where security is taken seriously.

Sharing Data Across Next.js Components Using Context API and Hooks (with REST API Example)

Dhamith Kumara — Thu, 05 Jun 2025 06:47:57 +0000

When building React or Next.js applications, one of the most common tasks is sharing data between components. A simple way to do this is by passing data as props from a parent component down to its child components.

While this approach works fine for small projects, it quickly becomes problematic in larger, more complex applications.

Here’s why,

When the data needs to be accessed by deeply nested components, you end up passing props through multiple layers of components that don’t even need the data themselves, a problem known as prop drilling.
This makes your code harder to maintain, harder to read, and prone to bugs as the app grows.
If multiple components in different parts of the app need the same data, you’d have to restructure your component tree just to share that data properly.

This is not considered a good practice for large scale or scalable applications.

The better solution?

Use React's Context API combined with Hooks to create a global data store. This allows any component in your app to access or update shared state without passing props manually through every level of the component tree.

In this article, I’ll show you a simple, beginner friendly example of how to,

Fetch user data from a REST API
Store it in a Context
Access it from any component using the useContext() hook

By the end, you’ll see how this pattern improves your app’s structure and makes your code more maintainable and scalable.

What is Context API and React Hooks?

Context API lets you create a global data store that can be accessed from any component without prop drilling.

React Hooks like useState, useEffect, and useContext allow functional components to manage state and side effects.

Together, they make it easy to manage and share data globally in your application.

Example Scenario

We want to,

Fetch a user's profile from a REST API
Share that data globally
Access it inside a UserProfile component

1.Create the Context

What’s happening here?

Created a User interface for our user object.
Created a UserContextType for the shape of context value.
Created the context using createContext().
Used useState to store user data and useEffect to fetch data.
Provided the user data globally via UserContext.Provider.

2.Create a Global Providers Wrapper

3.Wrap Your Application in layout.tsx

4.Access the Context in a Component

What’s happening here?

Imported useContext to consume UserContext.
Displayed a loading message while data fetches.
Displayed user name and email once available.

Now, when your app loads,

It fetches the user data once.
Stores it in a global context.
Any component can read it using useContext().

Conclusion

React's Context API combined with Hooks is a simple, powerful pattern for managing and sharing global state in Next.js 14+ apps especially when working with REST APIs.

Instead of passing data manually via props, you create a global context and let any component access or update shared data efficiently.

This TypeScript based implementation ensures type safety and scalable architecture, preparing your app for larger, more complex use cases.

Understanding the Difference Between .eq() and .match() in Supabase

Dhamith Kumara — Sat, 24 May 2025 14:15:32 +0000

Supabase is an open source backend as a service (BaaS) that provides developers with a powerful and easy to use interface for managing databases. Built on top of PostgreSQL, Supabase offers a real time database, authentication, and storage solutions, allowing developers to build applications quickly without managing backend infrastructure. In this article, we will explore two important methods for filtering data.

What is Supabase?

Supabase aims to simplify the development process by providing a suite of tools that integrate seamlessly with PostgreSQL. It offers features such as,

Real-time subscriptions - Listen for changes in your database in real-time.
Authentication - Built in user management and authentication.
Storage - Manage files and media easily.
APIs - Automatically generated RESTful APIs for your database tables.

The .eq() Method

The .eq() method is used to filter records in a table where a specific column matches a given value. This method is particularly useful when you want to retrieve rows that meet a single condition.

Syntax

Example

Suppose you have a users table and you want to find a user with the id of 1. You can use the .eq() method as follows

This query will return the user record where the id is equal to 1.

Use Cases for .eq()

Single Record Retrieval - When you need to fetch a specific record based on a unique identifier, such as an id.
Filtering by Status - For example, retrieving all users with a specific status (e.g., active or inactive).

The .match() Method

The .match() method allows you to filter records based on multiple conditions at once. It takes an object where the keys are the column names and the values are the values you want to match. This method is particularly useful for more complex queries where you need to filter by multiple fields.

Syntax

Example

Continuing with the users table, if you want to find a user with both id of 1 and email of 'abc@abc.com', you can use the .match() method

This query will return the user record that matches both conditions.

Use Cases for .match()

Complex Filtering - When you need to filter records based on multiple attributes, such as finding users by both role and status.
Batch Queries - When you want to retrieve records that meet several criteria without chaining multiple .eq() calls.

Conclusion

Supabase provides powerful methods for querying data, and understanding how to use .eq() and .match() effectively can greatly enhance your ability to interact with your database. By leveraging these methods, you can build more efficient and complex queries, making your applications more robust and responsive.

With the right practices and optimizations, you can ensure that your application performs well, even as your data grows. Whether you are building a small project or a large scale application, mastering these querying techniques will be invaluable.

Why the alt Attribute Matters?

Dhamith Kumara — Thu, 15 May 2025 06:57:51 +0000

Images are an essential part of the web. They inform, engage, and enhance the overall user experience. But what happens when an image fails to load, or when a user cannot see it? That’s where the humble alt attribute of the <img> tag comes into play, serving as a vital link between visual content and universal accessibility.

What is the alt Attribute?

The alt attribute in HTML provides alternative text for an image. This text is displayed if the image cannot load. More importantly, it is read aloud by screen readers, helping visually impaired users understand the content and context of images.

Why is the `alt` Attribute Important?

The alt attribute serves several important purposes,

1. Accessibility for Screen Readers

Visually impaired users rely on screen readers to navigate the web. The alt text provides a textual description of images, giving these users critical context and meaning that would otherwise be lost.

2. Context When Images Fail to Load

If a browser can’t load an image due to network issues, broken links, or other problems, the alt text appears in its place. This helps users understand what information they are missing and maintains the continuity of the page content.

3. Improved Search Engine Optimization (SEO)

Search engines can't "see" images the way humans do. The alt attribute provides important context about the image, helping search engines understand your page content better. Well written alt text can improve image search rankings and overall SEO performance.

4. Support for Text Based Browsers

Though increasingly rare, some users still use text based browsers. The alt text ensures these users access the information conveyed by images.

Crafting Effective alt Text

Writing good alt text is an art that balances clarity, brevity, and context. Follow these principles to write meaningful alt attributes,

Be Descriptive and Contextual - Describe the image and its purpose as if explaining it to someone who can't see it.
Keep it Concise - Aim for a brief, one or two sentence description. Overly long alt text can burden screen reader users.
Use Relevant Keywords Naturally - If relevant, include keywords thoughtfully to benefit SEO, but avoid keyword stuffing.
Avoid Redundant Phrases: Don’t use phrases like "image of" or "picture of" screen readers already announce images.
Reflect the Image's Function - If the image functions as a link or button, describe its purpose or destination.
Use Empty Alt for Decorative Images - For purely decorative images that add no content value, use an empty alt attribute alt="" to allow screen readers to skip them.
Use Real Text Instead of Text in Images - Whenever possible, avoid using images to display text. Use HTML text for better accessibility and SEO.

Good and Bad Examples

Good ✔

Why?

It's descriptive and specific.
It tells both what the image is (company logo) and what it depicts (a stylized blue bird in flight).
Helpful for screen readers and gives useful context.

Good ✔

Why?

It’s clear, descriptive, and paints a specific image in the reader’s mind.
Great for accessibility and good for SEO because it naturally mentions relevant, specific content without overdoing it.

bad ❌

Why?

It’s too vague and doesn’t tell what the logo represents.
Screen readers users would just hear “logo”, which is unhelpful.

bad ❌

Why?

This is a classic example of keyword stuffing.
It's a list of keywords with no real sentence structure or meaning.
Bad for accessibility (screen readers will read this awkwardly) and can harm SEO.

How Alt Text Fixer Can Help You

Managing alt attributes manually can be tedious, especially on larger projects. That’s why I created Alt Text Fixer, a lightweight and beginner friendly Visual Studio Code extension that helps you quickly find missing alt attributes and add or edit them directly in your editor.

Key Features -

Scan your files for images missing alt attributes
Quickly add or update alt text without leaving VS Code
Improve your site's accessibility and SEO compliance effortlessly
Lightweight and fast, perfect for developers of all skill levels

get it now

DEV Community: Dhamith Kumara

Why have a flat Resume when you can have an OS? 🚀 Dive into BDK-OS

About Me

My Portfolio Expression

Portfolio

How I Built It

The Tech Stack

Design Decisions

Development Process

Google AI Tools Used

What I'm Most Proud Of

Breathing New Life into a Classic

The Custom Window Management System

The Command Line Soul

More Than a T-Shirt: My 3-Year Battle to Win Hacktoberfest

How to Generate sitemap.xml in Next.js for Better SEO

What a sitemap is and why it matters

How Sitemaps Impact SEO

The anatomy of a sitemap.xml file

Splitting Large Sitemaps with Index Files

Automating Sitemap Generation in Next.js with next-sitemap

Installation

Set Up Configuration

Conclusion

The Power of "^" in package.json

1. What is Semantic Versioning (SemVer)?

2. What Does the ^ Symbol Do?

3. Why Deployments Sometimes Surprise You

4. Pros and Cons of Using ^

5. When to Use ^ vs Exact Versions

Conclusion

How to Hide API Endpoints in Next.js

Project Structure and Setup

Understanding API Endpoint Exposure

Indirect Data Fetching (Exposed API Endpoints)

POC - Indirect Fetching with an API Route

Observations

Direct Data Fetching (Hiding API Endpoints)

POC - Direct Fetching with Server Actions

Observations

Why Direct Fetching Hides API Endpoints

Best Practices for Hiding API Endpoints

Conclusion

Exploring git cherry and git cherry-pick

What is git cherry?

When Would You Use It?

Syntax

How It Works

What is git cherry-pick?

When Would You Use It?

Syntax

Important Notes

git cherry vs git cherry-pick

A step by step guide to understanding how it works

Step 1 - Create a New Repository

Step 2 - Add an Initial Commit

Step 3 - Create the hero-section Branch

Step 4 - Add a Unique Commit

Step 5 - Add a Commit That Will Be Duplicated

Step 6 - Cherry-pick That Commit into main

Step 7 - Compare Branches with git cherry

Final Thoughts

How I Landed My Internship as an Undergraduate Student

Mastering SSG, SSR, ISR, and CSR in Next.js

Next.js Rendering Strategies

1. Static Site Generation (SSG)

2. Server Side Rendering (SSR)

3. Incremental Static Regeneration (ISR)

4. Client Side Rendering (CSR)

Conclusion

Why You Should Never Commit Your .env File and How to Handle It Properly

What Exactly Is a .env File?

Why Do Developers Use .env Files?

The Common Mistakes People Make with .env Files

1.Committing .env Files to Public Repositories

2.Compressing .envFiles into .env.rar or .zip

3.Hardcoding Secrets Directly in Code

What To Do If You Accidentally Commit a .env File

1. Remove the File from the Repository History

2. Immediately Revoke and Rotate Exposed Secrets

2. What Does the `^` Symbol Do?

4. Pros and Cons of Using `^`

What Exactly Is a `.env` File?

Why Do Developers Use `.env` Files?

The Common Mistakes People Make with `.env` Files

2.Compressing `.env`Files into `.env.rar` or `.zip`

4. Add `.env` to `.gitignore`

How Should You Handle `.env` Files Properly?

Why is the `alt` Attribute Important?