DEV Community: Kinuri Mahoshadhi Edirisinghe

🕰️ Where Programming Began — The Journey from Machines to Modern Code

Kinuri Mahoshadhi Edirisinghe — Tue, 08 Sep 2026 12:11:58 +0000

**_

Have you ever wondered how humans first learned to communicate with computers?

_**

Today, we write code using languages such as Python, JavaScript, Java, and C++. But programming didn’t start there.

In the early days of computing, computers had to be given instructions in machine language — a system based on binary instructions that computers could directly understand.

💻 Machine Language
Computers understood instructions represented using 0s and 1s. It was powerful, but extremely difficult for humans to work with.

⬇️

⚙️_ Assembly Language_
Assembly introduced symbolic instructions, making programming more understandable and manageable.

⬇️

🧠_ High-Level Languages_
Languages such as FORTRAN, LISP, and COBOL brought programming closer to human-readable concepts.

⬇️

🌐 Modern Programming
Over decades of innovation, programming languages continued to evolve — eventually leading to the technologies we use today for web development, artificial intelligence, data science, software engineering, and much more.

💡 The interesting part?

Programming didn’t become powerful because computers suddenly became smarter.

Humans kept finding better ways to communicate with them.

And that evolution is still happening today. 🚀

As I continue learning Python, Web Development, AI, and Creative Technology, I’m becoming more interested not only in how to write code, but also in where these technologies came from and why they evolved.

This is Post 01 of my “Programming Through Time” series.

Next → The Birth of Python 🐍

KME Luxury Designs

Where Creativity Meets Technology. 🖤✨

I ASKED AI TO CREATE SCARIEST GAMES 🫢😱

Kinuri Mahoshadhi Edirisinghe — Mon, 24 Aug 2026 05:20:34 +0000

I Asked AI to Create the Scariest Games 🫢😱

What happens when you ask AI to design the scariest game it can imagine?

I decided to find out.

Instead of creating a normal game concept, I gave AI one simple challenge:

“Create the scariest horror game you can imagine.”

The results were… interesting. 👀

🧠 The Experiment

My goal wasn't to build a complete horror game.

I wanted to see how AI would approach fear, atmosphere, mystery, and storytelling when given almost no creative restrictions.

I asked AI to think about things like:

The setting
The atmosphere
The main mystery
What makes the player feel uncomfortable
The final twist

And then I started developing the ideas visually.

👻 Concept #1 — The Abandoned Place

The first concept started with a seemingly abandoned location.

At first, everything looked normal.

An empty building.

Dark surroundings.

No people.

But the more details AI added, the more unusual the environment became.

That made me realize something interesting:

Horror doesn't always need a monster.

Sometimes the feeling that something is wrong is enough.

🌑 Concept #2 — Something Is Watching

For the second concept, I asked AI to make the environment feel less safe.

Instead of immediately showing a creature, I wanted the viewer to wonder:

“Is someone watching?”

This is where AI-generated visuals became especially useful.

Small changes in lighting, shadows, fog, and background details can completely change the mood of an image.

😨 The Interesting Part

The most interesting thing about this experiment wasn't the scary images.

It was seeing how AI interprets fear.

AI doesn't experience fear like a human does.

It learns patterns from human-created stories, movies, games, artwork, and descriptions.

So when we ask AI to create something frightening, it combines those patterns into something new.

That raises an interesting question:

Can AI actually be creative, or is it remixing what humans have already created?

I don't think there's a simple answer.

🤖 AI Is a Creative Tool

For me, the experiment showed that AI is most interesting when you don't simply ask:

“Make me an image.”

Instead, you give it a creative problem.

For example:

“Create a place that looks beautiful at first, but becomes increasingly unsettling the longer you look at it.”

That's much more interesting.

The AI becomes part of the creative process rather than just an image generator.

🎬 From Experiment to Short Video

After creating the concepts, I decided to turn the experiment into a short-form video.

The idea is simple:

I asked AI to create the scariest games possible.

Then I show the concepts one by one, making each one stranger than the previous one.

The goal isn't just to scare people.

It's to make them curious enough to ask:

“What would the next one look like?”

🔥 What Would You Ask AI?

Now I'm curious about your ideas.

If you could give an AI one instruction to create the most terrifying fictional game concept possible, what would you tell it?

Would you choose:

🏚️ An abandoned building?
🌲 A mysterious forest?
🚪 A house with no exit?
🌌 Something in space?
🤖 An AI-controlled world?

Or something completely different?

Tell me your idea.

Maybe I'll use one of them for the next experiment. 👀

Final Thought

This experiment reminded me that AI isn't only useful for writing code or answering questions.

It can also be a creative playground.

Give it a strange idea.

Add your own imagination.

Then see what happens.

And sometimes… what happens is genuinely creepy. 🫢😱

FetchAI - Quantum Dog Breed Scanner & Story Generator

Kinuri Mahoshadhi Edirisinghe — Sat, 15 Aug 2026 07:14:01 +0000

## What I Built
I built FetchAI, an intelligent, cyberpunk-styled dark mode web application that acts as a quantum dog breed scanner and an AI story generator.

When a user uploads a portrait of their dog, the application connects directly to the Google AI matrix using the latest Gemini API (gemini-2.0-flash). It instantly extracts the exact breed classification, creates a behavioral profile, provides care metrics, and writes a beautiful, unique 3-sentence short story featuring the dog as a heroic character!

Category Chosen

Best use of Google AI 🤖 (Powered by Gemini API via Google AI Studio).

Demo

Here is the repository link containing the full source code and preview details:
[https://edirisinghekinurimahoshadhi-debug.github.io/Dog/]

Journey

I am a 14-year-old student (Grade 9) from Sri Lanka, currently learning coding through freeCodeCamp and AI concepts via the Elements of AI course.

When I saw the "Dog Days Edition" challenge, I wanted to build something highly functional but with a premium, engaging UI. I designed the front-end using clean HTML5 and modern CSS3 featuring a glowing golden dog-paw pulse animation (🐾) inspired by the classic Google search Easter egg.

The hardest part was converting the uploaded image into a Base64 stream inside vanilla JavaScript and passing it down to the Gemini API securely without using any heavy back-end frameworks. With strict prompts, the AI now successfully identifies the breed and automatically generates a creative narrative ("The Hero's Tale") giving the dog a random name!

This project taught me how seamlessly Google AI can be integrated into everyday client-side web applications to build fast, intelligent, and user-centric features.

My Comfort Food Project: Interactive Sri Lankan Spicy 🧀 Kottu Calculator! 🍜

Kinuri Mahoshadhi Edirisinghe — Sun, 02 Aug 2026 13:40:38 +0000

Hi everyone! 🇱🇰

For the DEV Frontend Challenge: Comfort Food Edition, I wanted to build a web page inspired by the ultimate street comfort food from my home country, Sri Lanka — *Spicy Cheese Kottu!
*
Kottu is a legendary Sri Lankan street food made with shredded parotta roti, aromatic spices, fresh vegetables, eggs, and meat. In this special version, we add a massive amount of melted cheese to balance out the heavy spice. It's warm, comforting, and the perfect meal for a quiet midnight craving.

🚀 Live Demo

You can try out my live interactive web app here:
👉 Click Here to See My Cozy Kottu Website

What I Built 🛠️

Inspired by a cozy midnight ramen illustration, I created a dark-themed UI featuring a soft glowing moon, stars, a warm lamp effect, and a steaming Kottu bowl.

I implemented an Interactive Ingredient Portion Calculator using vanilla JavaScript. When a user adjusts the number of servings, the application dynamically calculates the exact amount of Parotta Roti, Melted Cheese, and Chicken needed in real-time!

The Code Snippet 💻

Here is the JavaScript logic I used to handle the real-time serving calculations based on the input element:

const servingsInput = document.getElementById('servings');
const rotiSpan = document.getElementById('roti');
const cheeseSpan = document.getElementById('cheese');

const baseRoti = 2;
const baseCheese = 50;

servingsInput.addEventListener('input', () => {
    const servings = parseInt(servingsInput.value) || 1;
    rotiSpan.textContent = baseRoti * servings;
    cheeseSpan.textContent = baseCheese * servings;
});

Why this is my Comfort Food ❤️

In Sri Lanka, Kottu isn't just food; it's an experience. The rhythmic sound of metal blades chopping the roti on hot iron griddles can be heard down every street at night. Whenever we gather with friends or family after a long day, a warm, cheesy bowl of Kottu always makes us feel right at home.

I would love to hear your feedback! Have you ever tasted authentic Sri Lankan Kottu or any spicy street food like this? Let me know in the comments below! 🍜🧀

5 Common CSS Mistakes Beginners Make and How to Fix Them

Kinuri Mahoshadhi Edirisinghe — Sun, 02 Aug 2026 12:31:08 +0000

Learning CSS can feel like magic, but it can also be incredibly frustrating. One minute your website looks perfect, and the next minute, a single line of code breaks the entire layout.If you are struggling to get your web pages to look exactly how you want, don't worry. Here are 5 of the most common CSS mistakes beginners make and exactly how you can fix them.

1. Forgetting the CSS Box Model (Adding Padding Breaks Width)

The Mistake: You set a box's width to 100%, but as soon as you add padding: 20px; or a border, horizontal scrollbars appear and your layout breaks.Why it happens: By default, CSS adds padding and borders on top of the width you specified. So, 100% width + 20px padding left + 20px padding right = wider than the screen!The Fix: Always use box-sizing: border-box; at the top of your CSS file. This forces the browser to include padding and borders inside the specified width.

/* Add this to the very top of your CSS file */

{ box-sizing: border-box; margin: 0; padding: 0; }

2. Confusing Block vs. Inline Elements

The Mistake: You try to add a vertical margin, width, or height to a or an tag, but nothing changes on the screen.Why it happens: Tags like , , and are inline elements. By default, inline elements ignore top/bottom margins, heights, and widths.The Fix: Change the element's display property to inline-block or block.

/* Fix: This will now respect your width and margin settings */
a {
display: inline-block;
width: 150px;
margin-top: 20px;
}

3. Overusing Absolute Positioning (position: absolute)

The Mistake: Using position: absolute; to push elements around the screen until they look "perfect" on your laptop, only to find the layout completely scrambled on a mobile screen.Why it happens: Absolute positioning takes elements out of the normal document flow. It makes your website completely rigid and unresponsive.The Fix: Stop using absolute positioning for general layouts. Instead, learn and use CSS Flexbox or CSS Grid to build flexible layouts.

/* Instead of absolute position, use Flexbox to center things easily */
.container {
display: flex;
justify-content: center;
align-items: center;
}

4. Hardcoding Fixed Widths (width: 800px)

The Mistake: Setting major containers or image wrappers to a hardcoded pixel size like width: 1200px;.Why it happens: A fixed pixel width looks great on a large desktop monitor, but when viewed on a smartphone (which usually has a width under 400px), your content will get cut off.The Fix: Use relative units like percentages (%), viewport width (vw), or combine max-width with a percentage.

/* Fix: The container will shrink safely on smaller mobile screens */
.main-container {
width: 100%;
max-width: 1200px;
}

5. Using the Wrong Color and Font Units

The Mistake: Using px for text sizing everywhere, making it difficult for users with accessibility needs to scale up the text on their browsers.Why it happens: Pixels are absolute units. If a user sets their default browser font larger for better readability, your px fonts will ignore their preference.The Fix: Use rem for font sizes. 1rem is typically equal to the browser's default font size (usually 16px).

/* Fix: Responsive typography that respects user settings /
h1 {
font-size: 2.5rem; / Equals 40px on standard settings /
}
p {
font-size: 1rem; / Equals 16px on standard settings */
}

ConclusionCSS
isn't broken; it just has specific rules! By using box-sizing: border-box, switching to Flexbox, and using relative units like rem and %, you will instantly eliminate 90% of your layout bugs.What is the most frustrating CSS bug you've encountered so far? Let me know in the comments below!