DEV Community: Nabir14

Drawing On DOS

Nabir14 — Thu, 05 Mar 2026 13:42:31 +0000

I always found retro games very interesting. Since I grew up playing browser games and most of them were emulated I think it played a big role in defining this interest in me.

Anyways, So among all the other platforms DOS (Disk Based Operating System) is one of my favorite. I have recently installed FreeDOS and plan to program on it as hobby.

Today, I will explain how you can draw pixels on screen using C as the programming language, FreeDOS as the operating system and Doing by directly writing to VGA (Video Graphics Array).

Some Info About VGA

VGA (Video Graphics Array) is a video display controller that was first introduced in IBM PS/2 line computers.

Generally,

The 3h mode also known as Text Mode can be used to print text and is used in Terminal and CLI applications/games to display text.

The 13h mode also known as Graphics Mode can be used to plot pixels, draw shapes and images on screen. It is used by 2D/3D games.

This blog post will mostly focus on VGA mode 13h.

Drawing A Single Pixel

To draw a single pixel we will first create a new C source file pixel.c (you can name it whatever you want).

Before we can draw anything we need to switch our video mode from Text Mode to Graphics Mode.

We do the following:

#include <dos.h>
#include <bios.h>

int main() {
    // Define a REGS union
    union REGS regs;

    regs.h.ah = 0; // Set AH to 0x0 because we want to set video mode
    regs.h.al = 0x13; // Set AL to 0x13 because we want Graphics Mode
    int86(0x10, &regs, &regs); // Call Intrrupt 10h

    return 0;
}

Here we first include two headers dos.h and bios.h. These are needed to get the REGS union and int86() function. You can also inline assembly but I choose to code this way.

Now we are in Graphics Mode. We can now draw pixel on screen of a specific color.

We can do it like this:

#include <dos.h>
#include <bios.h>

int main() {
    union REGS regs;
    unsigned char far* vga = (unsigned char far*)0xA0000000;    
    unsigned short offset = 0;

    int x = 0;
    int y = 0;
    int color = 0x0C;

    regs.h.ah = 0;
    regs.h.al = 0x13;
    int86(0x10, &regs, &regs);

    offset = y * 320 + x;
    vga[offset] = color; // Set pixel at offset with a specific color

    return 0;
}

Here we first declare a pointer that stores the VGA address. This address is 0xB000 for Text Mode and 0xA000 for Graphics Mode.

For DOS we need to declare it as a far pointer and asign memory address 0xA0000000. (if we wanted Text Mode it would be 0xB0000000)

We also declare an offset variable since the VGA buffer is a 1D array unlike computer screens that are 2D. We can calculate offset from x and y by doing:

offset = y * MAX_WIDTH + x

In VGA 13h mode screen resolution can range from 320x200 to 640x480. So I did:

offset = y * 320 + x

I also declared a color variable.

Below is the VGA pallette with HEX code:

This means that we want to draw a pixel with a Bright Red color.

If we now compile the code as is there would be a bright red pixel drawn on screen.

I am using the OpenWatcom compiler to compile my code for FreeDOS.

What's that? You can't switch back to your Terminal?? :(
Don't worry you can switch back to Text Mode before terminating the program.

We can do this:

#include <dos.h>
#include <bios.h>
#include <conio.h>

int main() {
    union REGS regs;

    unsigned char far* vga = (unsigned char far*)0xA0000000;    
    unsigned short offset = 0;

    int x = 0;
    int y = 0;
    int color = 0x0C;

    regs.h.ah = 0;
    regs.h.al = 0x13;
    int86(0x10, &regs, &regs);

    offset = y * 320 + x;
    vga[offset] = color;

    // Wait for an input
    getch();

    // Switch back to Text Mode and terminate
    regs.h.ah = 0;
    regs.h.al = 0x03;
    int86(0x10, &regs, &regs);

    return 0;
}

Here we use getch() provided by conio.h to read for an input. So if any key is pressed we immediately switch back to VGA 3h Text Mode.

Filling The Entire Screen With Random Colored Pixels

With the knowledge of how to draw a single pixel we can now do a for loop and loop over the entire screen filling it with random colors!

We do that like this:

#include <dos.h>
#include <bios.h>
#include <stdlib.h>
#include <conio.h>
#include <time.h>

int random_range(int min, int max) {
    return rand() % (max - min + 1) + min;
}

int main() {
    union REGS regs;

    unsigned char far* vga = (unsigned char far*)0xA0000000;
    unsigned short offset = 0;

    int x = 0;
    int y = 0;

    // Seed rand() with time 
    srand(time(NULL));

    regs.h.ah = 0;
    regs.h.al = 0x13;
    int86(0x10, &regs, &regs);

    for (x = 0; x < 320; x++) {
        for (y = 0; y < 200; y++) {
            offset = y * 320 + x;
            vga[offset] = random_range(0, 0x0F); // Assign a random color ranging from 0x0 to 0x0F
        }
    }

    getch();

    regs.h.ah = 0;
    regs.h.al = 0x03;
    int86(0x10, &regs, &regs);

    return 0;
}

Here we define a new function random_range for generating random integer values in a set range.

We first seed rand() using time provided by time.h. Then we do two for loops one for x and one for y.

This will start form (0, 0) and end at (320, 200) which is our screen resolution.

Then we calculate the offset and set the current pixel with a random color ranging from 0x0 to 0x0F.

Compiling and running the code gives us a screen filled with random colored pixels.

Conclusion

That's it! Now you can create cool games or graphical applications for DOS :D

I also posted this blog on my newly created personal website: https://nabir14.github.io/website

AI Vibe Coding Is A Lie

Nabir14 — Sun, 30 Nov 2025 14:05:04 +0000

Introduction

Hello 👋,
I am a self-taught programmer. I mostly do Game Development and Web Development. I have also worked on some Low Level Projects.

In this article I will present my opinions on Vibe Coding.

In the last 2 years the term "AI Vibe Coding" has been very hyped. I mean the idea of "Clicking a button and generating anything you can imagine" is very exciting at first but not a great idea at the same time.

I will give my opinion on why it isn't a good idea to depend on AI Vibe Coding tools.

How AI Tools Work

Let's first talk about how basically these Vibe Coding AI Models work.

AI LLMs are trained on data and are trained to predict output from user input (prompt) based on that data.
The whole functionality of those AI Models depend on the data they are trained on.

Which means AI Models that can code is trained on existing human written code and AI Models that can draw is trained on existing human drawn art. This means that AI can't create something entirely unique that has never been created by humans without the help of humans.

Present

Currently many people are trying to establish tools that can "Create anything you can imagine with only a click of a button" and people are also trying to make Game Development a thing for "everyone".

But are failing to do so.

Instead we are seeing slop games that aren't even actually fun to play from a gamers perspective.

Many web apps made with AI have broken features and are most likely a clone of an existing solution with less quality and more security vulnerabilities.

Instead of being helpful they are just cash grabs and some are even scams! That other people are falling for.

It should be understood that with current AI Models it is impossible to create something with one click that is fully secure, has unique features and has literally no bugs.

Now to fix these bugs you need programming knowledge and a lot of time to debug.

In that way you would be better creating the game or coding the website on your own. Atleast you will have the full idea of the thing you are working on.

If people continue with Vibe Coding trying to replace actual developers. One day the internet will be filled with more garbage content than actual useful content.
Then probably we would need to come up with a solution to entirely filter these garbage?

Future (My Prediction)

Now let's imagine for a moment that there's a new AI Model that can create anything you want by just telling it what to generate and it generates it without any errors at all in one click.

This sounds very good right!? No need to buy subscriptions for an app when you can generate it yourself in one click without any knowledge of how it works under the hood!

Well Exactly, That is the problem.

In this way there won't be any consumers. Because why would someone use your app if they can generate something like it themselves?

Oh then maybe making or training AI Models will be the only thing in programming?

No, In this case anyone can build their own AI better than yours.

Basically, In this way nobody will buy software because they can create it themselves.

Conclusion

The idea "Coding For Everyone" is like "Giving A Cat To Every Human On Earth". It sounds cute but not everyone needs a cat (some people can't even take care of one!) and just like that not everyone needs to code.

A person who really wants to code will not depend on something that prevents them from coding.

Instead they will learn how to code and use AI Models just as a tool to help them on their journey. They might use AI Models as a mentor, As a debugger or As a code reviewer etc.

Just like a cat for a person who doesn't know how to take care of it is dangerous. AI Coding Tools for a person who doesn't understand basic programming is also dangerous.

In that case we are just wasting our useful resources on AI Vibe Coding that we could instead use for something else.

Infact In My Opinion, People who think that without understanding actual programming and depending on AI Vibe Coding tools is making them productive are actually wasting their time.

We can only expect absolute slop and vulnerable apps from vibe coding.

Yes it will save time and bring some money but when people get sick of AI Slop that saved time and money will be spent to find an alternative earning source.

Yes it will keep improving but improving it just to replace humans might not be a great idea.

Would you want the internet to be filled with copy paste clones of the same apps and games but with less quality and soul?

Let me know about your thoughts on AI Vibe Coding.

Make Games On Phone

Nabir14 — Thu, 31 Jul 2025 08:53:49 +0000

Hello 👋, I am an indie game developer and I have been making games using my phone as I don't have any PC or Laptop. I learned programming, gamedev, pixel art and etc on my phone.
So today I am writing for those who are interested in making games on phone.

NOTE that it's generally not recommended to make games on phone. As even on high-end computers it's just too much work to do. Only make games on phone if you don't have any other options or you're very interested in it.

How To Make Games

To make games you would generally use:

Frameworks: If coding the game from scratch.
Game Engines: If not coding from scratch.
Asset Stores: If using premade assets.
Asset Creation Tools: If you want to make assets yourself.

Frameworks like SDL, RayLib and LÖVE is mostly chosen to make games from scratch and Game engines like Unity, Godot and Unreal is commonly used for making games. For assets Sketchfab is a great place for 3D assets and Itch.io also has premade assets. Blender is very commonly used to make 3d assets and Asprite for pixel art assets.

Though when making games on phone your choices are limited... Or Is It?

How To Make Games (on phone):

When making games or even coding you need a "Development Environment". On phone you can use Termux which is a terminal emulator and gives you a Linux Environment. If you have a decent phone (e.g 4GB ram, Android 11 and Adreno 610) you can run Linux apps like Blender (hardware acceleration required), Gimp, Tiled etc. You also get to run IDEs like VSCode on it with frameworks. For Game Engines you can use Godot which is available natively on Android or use it with Termux to bypass some limitations with the Godot Android Editor.

I have discussed these in more details in my latest video.

👇 Check it out if you're interested in Gamedev On Android 👇
https://youtu.be/Htdui-cR2Mg

Cross-Compiling GCC in Linux

Nabir14 — Sat, 02 Nov 2024 08:05:32 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Maintainer Experience

In this article I will help you cross compile gcc in your Linux system. You need a cross-compiled GCC to compile code for multiple platforms from a single development host. I needed this to make my own Operating System from scratch. Dosen't matter what projects your cross compiling for the process is almost same. A note that this article only focuses in cross compiling on Linux systems. If you are on other systems like MacOS the process might be different.

Required Packages:

build-essential
bison
flex
libgmp3-dev
libmpc-dev
libmpfr-dev
texinfo
libisl-dev

You can install these by typing sudo apt install <package-name> if you use Ubuntu/Debian, sudo dnf install <package-name if you use Fedora or sudo pacman -Syu <package-name> if you use Arch Linux. This depends on your distro.

Cross-Compiling Process:
First you have to set some global variables:

export CC=/usr/bin/gcc 
export LD=/usr/bin/gcc 
export PREFIX="/usr/local/i386elfgcc"
export TARGET=i386-elf
export PATH="$PREFIX/bin:$PATH"

You can get the path of your gcc using which gcc. Then you can set it for CC and LD. PREFIX is where you want your cross-compiled files to be saved in. Target is your target architecture which is the architecture your cross-compiling for. I used x86 (i386) as an example.

Now you have to make a temporary directory to save your downloaded files:

mkdir /tmp/src 
cd /tmp/src

Make the directory and CD into it.

Now, Finally you can start compiling:

curl -O https://ftp.gnu.org/gnu/binutils/binutils-version.tar.gz 
tar xf binutils-version.tar.gz
mkdir binutils-build
cd binutils-build
../binutils-version/configure --target=$TARGET --enable-interwork --enable-multilib --disable-nls --disable-werror --prefix=$PREFIX 2>&1 | tee configure.log
make all install 2>&1 | tee make.log

cd /tmp/src
curl -O https://ftp.gnu.org/gnu/gcc/gcc-version/gcc-version.tar.gz 
tar xf gcc-version.tar.gz 
mkdir gcc-build
cd gcc-build
../gcc-version/configure --target=$TARGET --prefix="$PREFIX" --disable-nls --disable-libssp --enable-languages=c --without-headers
make all-gcc 
make all-target-libgcc 
make install-gcc
make install-target-libgcc

Please replace the version with your binutils and gcc version. For example binutils-version might be binutils-2.40 and gcc-version might be gcc-12.1.0.

This will take some time to compile so get some coffee ☕ (or do anything to pass the time). Then after it's done you will have the usable binaries in your /usr/local/i386elf/bin/ prefixed as i386- (or the architecture of your target if you didn't choose i386 as target). For example your cross compiled gcc might be i386-gcc.

Congratulations 🎉 you have successfully cross-compiled your GCC.

Hello, I am a student and I love programming. If my articles help you and you want to donate then thanks as it will support my education and help me reach my goal! Donate Nabir14

Center HTML div With CSS

Nabir14 — Wed, 30 Oct 2024 13:32:54 +0000

It is quite challenging to center divs in HTML especially doing both horizontally and vertically. But in this article I'll help you!

Code Example With Explanation:

Let's say there is a div with class myDiv:

<div class="myDiv">hello dev</div>

Now let's,
Center Horizontally Using CSS:
To center this div horizontally we can use this CSS code:

.myDiv {
  padding: 0 100%;
}

In this CSS code padding: 0 100%; sets the X-axis padding to 100% (full-screen width) to center the div horizontally.

Center Vertically Using CSS:
To center this div vertically we can use this CSS code:

.myDiv {
  padding: 100% 0;
}

In this CSS code padding: 100% 0; sets the Y-axis padding to 100% (full-screen height) to center the div vertically.

Center Horizontally & Vertically Using CSS:
Now let's center it both vertically and horizontally using CSS.
Let's use this code:

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

In this code display: flex; sets the display mode to flexbox which is important for this to work. Then justify-content: center; justifies the content to center and align-items: center; aligns the items to center. They work together to horizontally centering the div. Finally padding: 100% 0; adds 100% padding to Y-axis (full-screen height) to center the div vertically like before. Putting all together they center div vertically and horizontally.

This was all about centering divs using CSS, Learn More

Using TailwindCSS:

Yes, I can't end this article without telling you to use TailwindCSS. It's my favorite framework as it helped me a lot as a beginner.

Let's center the div using TailwindCSS,
Horizontally:
Using TailwindCSS to center a div horizontally can be done by using this code:

<div class="flex items-center">hello dev</div>

In this code the TailwindCSS class flex sets the display to flexbox and items-center centers the item horizontally.

Vertically:
Using TailwindCSS to center a div vertically can be done by using this code:

<div class="h-screen flex items-center">hello dev</div>

In this code the TailwindCSS class h-screen makes the div using full-screen height, the class flex sets the display to flexbox and items-center centers the item.

Vertically & Horizontally:

<div class="h-screen flex items-center justify-center">hello dev</div>

In this code the class h-screen makes the div using full-screen height, the class flex sets the display to flexbox, items-center centers the item and justify-center justifies the item to the center. Putting all together centers the div both vertically and horizontally.

That's all for centering divs using TailwindCSS, Learn More

Conclusion:

Centering divs can make elements in your website stand out and that's how you center a HTML div.

Make sure to practice and not fully depend on memorizing properties. Have A Nice Day :)

Hello, I am a student and I love programming. If my articles help you and you want to donate then thanks as it will support my education and help me reach my goal! Donate Nabir14

Learn CSS Properly

Nabir14 — Tue, 29 Oct 2024 16:54:39 +0000

Learn CSS Properly

CSS (Cascading Style Sheets) are used by web developers to style websites.

When I started learning web development I was very confused about CSS. The most difficulty I had was in both remembering properties and maintaining my code. In this article I will help beginners avoid the mistakes I had made while learning.

1. Practice
Programming is something you can't fully memorize. It's all about understanding it by practicing.
While I was learning CSS practicing it was a bit hard because I can't memorize things very well. I tried to avoid the "copy & paste" because I thought it would ruin my skills. At the end I did ended copy and pasting CSS code. Now I am not saying that copy and pasting would make things better. But if you try to understand what's happening when you run your copy and pasted CSS code. It will be way better than memorizing CSS properties.

(For Example) If you wanted to style a button round and black with white text and wanted it swap background and text colors when hover. You could past a block of CSS code that did exactly that like:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Without understanding what it does it won't help much.
If you understand that:

border: 2px solid; added a 2 pixel solid border to the button,
border-radius: 16px made it 16 pixels rounder,
background-color: #000000; made the background black,
color: #ffffff; made the text white, :hover,
background-color: #ffffff;
and color: #000000; makes the background white and the text black when hover.

You will be able to code a button next time without needing to copy paste and even better you will have basic understanding of border, border-radius, background-color, color and :hover and will be able to use it on more than just a button. This is why you should understand the code that you copy paste.

Recourses:
Where you are copy and pasting code from also matters. As you will need good explanation of code as a beginner.

There are a lot of sites that do this job well but I'd recommend:

1. Geeks For Geeks:

GeeksforGeeks is a leading online platform that provides computer science and programming resources to millions of developers and technology enthusiasts worldwide with a vast library of courses, offline classroom programs, tutorials, articles, coding challenges, practice problems, & much more.

This platform gives code with good explanations and it is my personal favorite.

Visit GeeksForGeeks

2. W3Schools:

W3Schools is a school for web developers, covering all the aspects of web development: HTML Tutorial. CSS Tutorial. JavaScript Tutorial. PHP Tutorial.

This website is also pretty much same as "Geeks For Geeks". But the explanation technic is different so it depends on if you're comfortable or not.

Visit W3Schools

Code Maintainability:
While learning web development the second most annoying thing was my CSS code getting too big. It was getting hard to maintain CSS code for a complex website project. Well thanks to frameworks like TailwindCSS you always don't have to write raw CSS.

TailwindCSS:

Tailwind CSS is an open-source CSS framework. Unlike other frameworks, like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

TailwindCSS makes CSS codes like our previous button example:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

Into classes like:

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

That can be added to your HTML Button Element like:

<button class="border-2 rounded-md bg-black text-white hover:bg-white hover:text-black">Click Me</button>

Upon other frameworks like ReactJS I'd recommend TailwindCSS for beginners. It's much easier to learn and used in production. It makes your CSS code much Maintainable. You can also use it with ReactJS increasing your code efficiency and maintainability. TailwindCSS also have docs with very detailed and easy to understand code explanations.

Visit TailwindCSS

Conclusion:
While learning CSS might be difficult but practicing it frequently while understanding it will help a lot.

Don't just copy paste the code but also understand what it does as it is the correct way to learn CSS.