Social Media Is Demonic. Stop Feeding It!

mihna123 — Sun, 19 Jul 2026 00:00:00 +0000

Big and evil corporations own YOU and your data. Are you really not going to do anything about it? Well most people wont, they will even make fun of people who try to quit these evil websites. "You really don't have instagram bro? Oh so you are one of those online hipsters. Get a life maaan."

Being a cuck to Mr. Zuck</h2>

original photo by MillenniaThinker</a>
"Hey mr. Zuck, could you please upload this photo for me? I will sell you my precious data in return. I will even tell you all the conversations I have with my friends, what I enjoy doing in my spare time, hell even what my profession is. What music I like listening to, what political party I support, I will even give you divine knowlegde over myself that even I do not possess.1</a>"
~ This is you if you use instagram
Mr. Zuck will gladly take your offering. It is a great deal, all of this data can be sold to make the big bucks plus he can do whatewer he wants with your "photo" since it is not even yours anymore.
As per Mr. Zucks TOS</a> (bolded by me):
"When you share, post, or upload content that is covered by intellectual property rights (like photos or videos) on or in connection with our Service, you hereby grant to us a non-exclusive, royalty-free, transferable, sub-licensable, worldwide license to host, use, distribute, modify, run, copy, publicly perform or display, translate, and create derivative works of your content"
So esentially, you are giving away your data plus you are giving Mr. Zucky to have his way with your dear and loving family photos? Sorry if I am the first one to break it to you, but you are getting cucked hard.
They are telling you what to think, and you are listening like a good boy</h2>
People often say that "I have nothing to hide dude, why do I care if they can see my every move?". Well, they not only have read privileges to your brain, they have write ones as well! (For my normie friends, I wanted to say here that they can alter what you are thinking)
"Whoa dude, nobody can tell me what to think! I am a spiritual miracle individual, miracle spiritual individual... I am super duper unique and my thoughts are only mine!"
You are what you think, what you think is what you consoome</h3>
Sorry to break it to you son, but you are essentially what you think, and what you think is effectively what you consume day to day.
Now take a look at your daily consumption of the Gram or any other similar social media platform. You might be the lucky one and have daily consoome time of only about an hour! Most of you are not so lucky I would assume.
Now lets say that on average your consoome time is 2h per day. That is around 730 hours per year, lets say that average person will be a consoomer their whole adult life - around 50 years - that comes up to about 36.500 hours of content consoomed. To become an expert at something they say you need around 10.000 hours, just for comparison.
"So what dude? My feed is full of the stuff I like and the stuff I am interested in! I am only getting more informed about stuff I am passionate about dude!"
Yeah thats neet and all, but
You don't choose what you consoome</h3>
Remember the good ol' days when your feed was just images and posts from the people you followed? Once you looked at all of their posts, it would be the end. You could go about your day and stopped looking. There was nothing more to see.
Now you will barelly see people you know, you will just get served the content that "The Algorithm" choose for you. You don't know what is best for you dude, "The Algorithm" does.
When it is not serving content it wants directly to your face, "The Algorithm" will also boost content it wants to promote. Posts or people going "viral" are just another result of this phenomenon. There are still posts that go "organically" viral, but only if the big Mr. Zuck allows that.
You are being trained to do what they want</h3>
Similarly to how you would train a dog to do what you want, you, Mr. Zuck's own dog are being rewarded or disciplined when you are a good or a bad boy accordingly.
Having a non popular opinion? Well it is not going to be very popular, you might even get kicked out from Mr. Zucks property.
Have some NPC and bland thing to say that doesn't go against the status quo in any way and supports the stuff Mr. Zuck and the gang say shoud be supported? Congratulations! You now have a ton of likes!
Well it wont go excatly like this to be fair, you might get no popularity either way. But it would be good to look at most people you follow, are they saying anything non popular? I would assume that they are not.
At the end of the day, modern "cancel culture" is very much self evident.
"But dude, I just like watching memes, I am not into politics or any social issues. I live a peacefull life you know. Just watching funny memes and gym content".
Very nice dude, but I must say that
You are being lobotomized</h2>
Just like putting a couple big needles in ones brain, poking around a bit to make them more "normal".
By filling you thoughts with stuff that doesn't matter, with entertaining stuff, they are deliberatelly taking away your thought real estate. Making you way less prone to thinking.
When you are less prone to think, you are way less prone to notice that you are being lobotomized.
There no modern philosophers</h3>
Why is that? Not because they hate women and would get cancelled, but because nobody even "ponders" anymore. Modern man doesn't have time for thinking about the world around him, why would he do so? Why would he spend his precious life energy with thinking when it is much easier to go to the Gram and see what other bros are saying? Don't need to think much man, just watch the fast haha clips!
Modern man has very little original thought, as much more efficient is just accepting the "collective thought"
Big evil corps make these websites intentionally addictive</h2>
You just can't stop looking at the reels page eh? Why would you ever stop looking at it? Seems like "The Algorithm" seems to have figured you out - It just knows how to hit the funny bone dude. Almost like he knows exactly what you will find funny. You will send this to all your other friends who find this funny, they will get a notification and see the funny. We all laugh, what a great time dude, no way can "The Algorithm" be evil!
The Zuck essentially: "Please oh please just keep looking at The Gram. I give you all this goodness from the bottom of my good heart!"
You essentially: "Yes, my lord Zuck, I will forever keep looking. I love you."
Why do you think that "The Feed" is never-ending? Why do you think they are bombarding you with notifications all the time? Why is "The Algorithm" so good at finding just the right content for you to consoome? Why are you as a "creator" rewarded if you can make a lot of people watch?
It's addictive, it gives your little monke brain stimulus.
Why are most popular women on the platform shaking their half-naked bottoms at their camera and giving their bodies to you for free?
Because sexuality is addictive and super normalized in western culture. And again it makes your small monke brain go tickle tickle.
Everyone else is doing it</h2>
But you will do it, because everyone else is doing it, why wouldn't you feed the demon like everybody?
Well first thing is, you managed to get to this point in the blog, means you have at least some reading capacity left, which is good.
You didn't angrily close the tab and got offended, which is good as well.
There is hope for you.
What can you do?</h2>
It is rather simple. Couple of stuff I recomend is:

Get controll over your feed, start using rss</a></li>
Get back ownership over your content, create your website</a></li>
Reject the modern silos</a>, embrace the indie web</a></li>
Start reading books about history, philosophy and religion</li> </ul>
One more thing about the Zuck</h2>
I mentioned the Zuck and Instagram here mostly, but the same issue lies with all other social media: Facebook, LinkedIn, TikTok, and others.
^{1
They can predict the stuff you will like in the future with good
probability, using information such as likes of similar people to you mixed
with some machine learning. You are not so speaciall after all!
</div>}

Minimalist comments engine for personal blogs

mihna123 — Mon, 09 Jun 2025 00:00:00 +0000

Note from [2026-07-15]. This is a blog imported from my old blog site mihna123.github.io</a> in an attempt to reconsile everything in one place.
I will need to rewrite this. Not enough minimalist. This uses Next.js and is hosted this on Vercel for heavens sake!

I wanted a comments solution that was fast, simple and had no sign ups. So I built a simple solution.
The problem with other comment engines</h3>
I used to use "Disqus</code>" for my comments. The problem with similar solutions is the traction associated with trying to post a comment when you dont have an account.
All I wanted was a solution that let anyone just enter the desired username and comment. No accounts, no limitations. The OG way of commenting.
The problem with my proposal</h3> Obviously, the problem is that anyone can pick any username, there is no authentication. Yeah that would be a problem if I had any readers! If someone stumbles upon some of my blogs, I dont want to scare them away with asking for their email and making them create an account. This is so simple and there is really no strings attached.
How did I build it</h3>
It is just a very simple api done in "next.js</code>". Here is the whole code:
import { NextRequest, NextResponse } from "next/server"; import { neon } from "@neondatabase/serverless"; const allowCORSHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, OPTIONS, POST", "Access-Control-Allow-Headers": "Content-Type", }; export async function OPTIONS() { return new Response(null, { status: 204, headers: allowCORSHeaders, }); } export async function GET(request, { params }) { const { post } = await params; const sql = neon(process.env.DATABASE_URL); const comments = await sql.query("SELECT * FROM comments WHERE post = $1", [ post, ]); comments.reverse(); return new NextResponse( `<ul class="simple-comments"> ${comments.map((c) => `<li>${c.username} - ${c.createddate.toUTCString()}:${c.comment}</li>`).join("")} </ul>`, { headers: { "content-type": "text/html", ...allowCORSHeaders }, status: 200, }, ); } /** * @param {NextRequest} request * */ export async function POST(request, { params }) { const formData = await request.formData(); const { post } = await params; const username = formData.get("username"); const comment = formData.get("comment"); if (!username || !comment) { return new NextResponse("Missing fields", { status: 400, headers: allowCORSHeaders, }); } const sql = neon(process.env.DATABASE_URL); await sql.query( `INSERT INTO comments (post, username, comment, createddate) VALUES ($1,$2,$3, current_timestamp)`, [post, username, comment], ); return new NextResponse("Success", { status: 200, headers: allowCORSHeaders, }); }</code></pre> So as you can see, one simple way of fetching comments based on what post they are refering to, and one simple way of posting comments to some post. Very wasy to implement. The second thing I needed was the frontend script that would make it easy to just paste the comment section in any page I wanted. Here is the script:
const form = document.createElement("form"); const pathParts = window.location.pathname.split("/"); let postName = pathParts[pathParts.length - 1]; if (postName.length === 0 || !postName) { postName = pathParts[pathParts.length - 2]; } const url = `https://simple-comments.vercel.app/${postName}`; form.classList.add("simple-comments-form"); form.innerHTML = ` <label for="username">Username</label> <input required type="text" name="username"/> <label for="comment">Comment</label> <textarea required cols="50" name="comment"></textarea> <button type="submit">Post comment</button> `; function htmlToNode(html) { const template = document.createElement("template"); template.innerHTML = html; return template.content.firstChild; } async function getComments() { const res = await fetch(url); const bodyHtml = await res.text(); if (!bodyHtml) return; document.querySelector("ul.simple-comments")?.remove(); form.after(htmlToNode(bodyHtml)); } /** * @param {SubmitEvent} e * */ async function onSubmit(e) { e.preventDefault(); try { await fetch(url, { method: "POST", body: new FormData(e.target), }); form.querySelectorAll("input, textarea").forEach((i) => (i.value = "")); await getComments(); } catch (e) { console.error(e); } } form.onsubmit = onSubmit; document.currentScript.after(form); getComments();</code></pre> The script fetches the comments and refreshes them after each submit. Very easy. The only thing the user needs to do is paste in the script</code> tag with the source leading to this script and thats that.
The customization</h3> You can customize the comments very easily. Just make some class rules in css for .simple-comments-form</code> and ul.simple-comments</code>. If you want the look of my comment section here is the css:.simple-comments-form { margin-bottom: 20px; } .simple-comments-form button[type="submit"] { margin-top: 5px; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border: none; color: inherit; cursor: pointer; border-radius: 3px; } .simple-comments-form button[type="submit"]:hover { background-color: rgba(0, 0, 0, 0.8); } .simple-comments p { font-size: initial; margin: 0; } .simple-comments li>p:last-of-type { margin-left: 20px; padding-left: 5px; background-color: rgba(0, 0, 0, 0.5); }</code></pre>The conclusion</h3> This is definetely not something you want to use on a large scale project or a realy big blog, but for my usecases it is the best thing. Maybe we will update the functionalities if the need arises. If you want to check out the source you can do so on my Github</a> Try and comment below to see how it works (be nice!) [2026-07-15] edit: You can't see it here but can go to this link</a> and scroll to the bottom :)
Lets build #2 - Conway's game of life mihna123 — Wed, 04 Jun 2025 00:00:00 +0000 Note from [2026-07-15]. This is a blog imported from my old blog site mihna123.github.io</a> in an attempt to reconsile everything in one place. I was wondering what should I make today, and I stumbled upon this little game called "John Conway's game of life". It seemed very interesting and I thought to myself: "How would I build something like this?" The game</h3> Soo the game is initialy a large grid composed of cells. These cells can eather be dead or alive based on some rules. If they are alive the cell is colored black, when dead it is white. The rules are as follows: If cell has less than two alive neighbours, it dies (as of starvation)</li> If cell has three alive neighbours, it becomes alive (as of reproduction)</li> If cell gas more than three alice neighbours, it dies (as of overpopulation)</li> </ul> This rather simple rule set can produce a very interesting gameplay as you will see later. This logic set is actually turing complete, so you can essentialy build a computer inside this game. Some people actually built a game of life inside game of life, which is pretty crazy. The building process</h3> I decided that we are once again just gonna use the plain old java script for this job. I think that the simplest way of doing this is just to have a large grid of divs. Each div will represent a cell. When the div has a "cell-on</code>" class, the cell is alive. Let's get going! Firstly we will grab this html boilerplate and paste it into "index.html</code>": <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>John Convay's Game of Life</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> <link rel="icon" href="favicon.png"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>John Conway's Game of Life</h1> <div class="flex"> <button class="tick-btn">tick</button> <button class="play-btn">play</button> <button class="stop-btn">stop</button> </div> <section class="game"></section> <noscript>Please enable java script or use another browser.</noscript> <script src="app.js"></script> </body> </html></code></pre> Then create the style.css</code> file: body { background-color: gray; color: white; } div.cell { width: 30px; height: 30px; background-color: white; } div.cell:hover { background-color: gray; } div.cell-on { background-color: black; } .flex { display: flex; } .row { flex-direction: row; } .col { flex-direction: column; } </code></pre> This should be good, now onto making the actual cells. Making the cells work</h3> I imagine a good way of doing this is to have a number of row flex divs, each containing a number of actual cells. This way we have a sort of matrix of divs, each representing one cell. Create a file named "app.js</code>". This will contain all our game logic. Let's create some variables that would be usefull for our game: const COLUMNS = 100; const ROWS = 100; // Lets also grab the section where we want to keep our game /** @type {HTMLElement} */ const gameSection = document.querySelector("section.game");</code></pre> Next step would be adding all the div cells. Here is one way to do it: for (let i = 0; i < ROWS; ++i) { const row = document.createElement("div"); row.classList.add("flex"); for (let j = 0; j < COLUMNS; ++j) { const cell = document.createElement("div"); cell.classList.add("cell"); row.appendChild(cell); } gameSection.appendChild(row); }</code></pre> If you save all the files and open up the index.html</code> file in the browser, you will notice that we have just a bunch of divs that don't do much. Lets allow the user to turn any cell into a living one by clicking on it: /** @type {HTMLDivElement[]} */ const cells = document.querySelectorAll("div.cell"); for (const cell of cells) { cell.onclick = () => { cell.classList.toggle("cell-on"); }; }</code></pre> It should look like this now: So next step would be to add the actual logic of the rules into our game. Adding rules</h3> So this is how we are going to do this: Make a function called tick</code> that contains the rules logic</li> Go through all the cells and count the number of closest live neighbours</li> Mark the cell to die or become alive depending on the number of neighbours</li> </ul> So here it is: function tick() { const toDie = []; const toLive = []; // Go trough each cell using two loops for (let i = 0; i < ROWS; ++i) { for (let j = 0; j < COLUMNS; ++j) { // Get the cell that we are counting for const row = gameSection.children.item(i); const cell = row.children.item(j); let neighbours = 0; // Go trough 8 of its neighbours // This can be done without loops but I found this to be more elegant for (let x = -1; x < 2; ++x) { for (let y = -1; y < 2; ++y) { // I know how ugly the namings are... const xind = i + x; const yind = j + y; // Check if we are out of bounds if (xind < 0 || yind < 0 || xind >= ROWS || yind >= COLUMNS) { continue; } // Get the neighbouring cell const ncell = gameSection.children.item(xind).children.item(yind); // Dont count self as a neighbour if (cell.isSameNode(ncell)) { continue; } // Up the counter if neighbour is alive if (ncell.classList.contains("cell-on")) { ++neighbours; } } } // The actual game logic is simple if (neighbours < 2 || neighbours > 3) { toDie.push(cell); } if (neighbours === 3) { toLive.push(cell); } } } // We alive or kill the cell based on previous rules and that is that for (const c of toLive) { c.classList.add("cell-on"); } for (const c of toDie) { c.classList.remove("cell-on"); } }</code></pre> In order for us to be able to see if this is working, lets add a button that will invoke the tick</code> function on click. Add this in the body of the index.html</code> <button class="play-btn">play</button></code></pre> Add this to the end of the app.js</code> document.querySelector("button.tick-btn").onclick = tick;</code></pre> This is the result: Now it is only a matter of making the game play automatically. Finishing touches</h3> We are going to add two buttons bellow our initial start button: <button class="play-btn">play</button> <button class="stop-btn">stop</button></code></pre> Then in the app.js</code> file we are going to handle the button presses: // Use this variable for event handle let playEv = undefined; // Play button starts the interval document.querySelector("button.play-btn").onclick = () => { if (playEv) return; playEv = setInterval(tick, 100); }; // Stop button clears the interval document.querySelector("button.stop-btn").onclick = () => { clearInterval(playEv); playEv = undefined; };</code></pre>The end result</h3> Feels good when you finish a project like this. Play the game on github pages</a> or check out the result below and if you want the full source code, go to the github link</a>. Better way of navigating directories in Linux mihna123 — Fri, 30 May 2025 00:00:00 +0000 Note from [2026-07-15]. This is a blog imported from my old blog site mihna123.github.io</a> in an attempt to reconsile everything in one place. I don't even use i3 or fzf to navigate directories anymore, when I was writing this I thought this was soo cool tho :) Have you ever thought: "Maan I wish I could navigate trough my directories faster?" Maybe yes maybe no, but I sure did. I am always trying to maximize my desktop setup efficiency. This is the reason that I am using i3 window manager coupled with zshell and neovim. This settup has been a life saver honestly and very fun to use. The small problem</h3> I noticed that every time I wanted to open up a project directory it would be the same old sameold: Type in cd</code> then try to remember where the directory I'm looking for is. Maybe Documents? Maybe Projects? Who knows? We will have to try them all. Eventualy you find it and its all good, you wasted a couple of seconds and who cares? This is what the classic experience looked like: I did it like this for years until I stumbled upon this interesting tool called the fuzzy finder or fzf. This tool is just so powerfull and fast. What it essentialy does is given some input of lines it filters out the one line that matches the given query the most. Could this be used to traverse the directory tree faster? The answer is yes. How to set it up</h3> So firstly install the tool if you already don't have it on our system. If using apt it is gonna be: sudo apt install fzf`</code></pre> Secondly, if you try and just type in "fzf</code>" in your terminal, you will notice that it tries to find files and not directories. The solution is that you pass to it only directories using the find</code> command. The full command is: find . -type d -print </code></pre> to print out all directories going from current directory. Putting it all together</h3> Full command you should be using to go to desired directory is cd $(find . -type d -print | fzf)</code></pre> Since it is a long command i sugest making an alias to it. Something like "fd</code>" (find directory) works for me. To make an alias for zshell edit the "~/.zshrc</code>" file. For bash it is "~/.bashrc</code>". Add this line at the end of the file: alias fd="cd \$(find . -type d -print | fzf)"</code></pre> The forward slash before the "$</code>" sign is very important. If you type it in withought the forward slash, the command is going to execute just once every time you open up your shell. This is the end result: Lets build #1 - Matrix rain mihna123 — Thu, 29 May 2025 00:00:00 +0000 Note from [2026-07-15]. This is a blog imported from my old blog site mihna123.github.io</a> in an attempt to reconsile everything in one place. Have you ever thought to yourself: "How the hell do I make that damn matrix rain animation thing in JavaScript"? You probably have not, but anyways, I need this letter falling down animation for a million user app landing page that I am building right now. Since this should be a relatively easy thing to make I decided to make it a tutorial to hopefully help you if you want to build something similar. The research</h3> Bu surfing the web I have found a couple websites for reference: https://matrix.logic-wire.de/</a></li> https://www.quenq.com/matrix/index.html</a></li> https://codepen.io/tommyho/pen/NWZRvwj</a></li> </ul> It seems that all these examples use the canvas element to animate the letters. We will go this way as well. Initialising the project</h3> First things first, go to your project folder and create html css and js files with touch index.html script.js style.css`</code></pre> After this paste this boilerplate into the html and css:  <!DOCTYPE html> <html> <head> <title>Matrix rain project</title> <link rel="stylesheet" href="style.css" /> </head> <body> <canvas class="m-rain" width="1380" height="668"> Your browser does not support the canvas element. </canvas> <script src="script.js" type="module" defer /> </body> </html></code></pre>/* style.css */ html, body { padding: 0px; margin: 0px; } canvas { border: 3px solid black; }</code></pre> We just have a canvas element that indicates wether the browser supports such element. We will do most of our work inside the "script.js</code>" file. Working with the canvas element</h3> In order for us to draw something to the canvas element we will have to get the 2d canvas context. This object has all the methods we need to draw anything we want. // script.js /** @type {HTMLCanvasElement | null} */ const canvas = document.querySelector("canvas.m-rain"); // Set width and height to window canvas.style.width = `${window.innerWidth}px`; canvas.style.height = `${window.innerHeight}px`; // Get the canvas context const ctx = canvas.getContext("2d"); // Paint the entire canvas black ctx.fillRect(0, 0, canvas.width, canvas.height); </code></pre>Rendering text</h3> As we will need to render a lot of text on the screen, lets try to just render the good old "Hello world!". The method to do so is "fillText()</code>". // script.js // ...the code from before // Set the fill style so the text is not black ctx.fillStyle = "white"; // Make the font bigger ctx.font = "34px sans"; ctx.fillText("Hello world!", 100, 100); </code></pre> This will basically tell the canvas to render the "Hello world!" string at coordinates (100, 100); This is how the page should look like right now: Making things move</h3> Okay so we now know how to render some text, but this is now why we came here, we want to make some matrix rain god damnit! Let's animate some letters right now. Firstly we will some variables to keep track of all the letter positions, font sizes and so on... // script.js // Letter that we want to animate const letter = "O"; /** @type {[Number,Number][]} * This is where we will store the x and y axis for our falling letter */ const letterPositions = []; const fontSize = 8; </code></pre> Then we will want a function that spawns the letter at a random position above our canvas: //script.js function randomSpawn() { // Random x const x = Math.round(Math.random() * canvas.width); // Above the canvas const y = -10; letterPositions.push([x, y]); // Keep the max letter count up to 500 for performance if (letterPositions.length > 500) { letterPositions.shift(); } } </code></pre> Okay now we have our variables and a method that spawns a new letter into our array. The last thing that we need for now is a "tick()</code>" method that would act as like a render method. The "tick()</code>" needs to refresh the screen, then draw all the letters from the array and then nudge the letters down a bit. I came up with something like so: // script.js function tick() { // We refresh the page with a black that has a little transparency for a nice effect ctx.fillStyle = "#0000000a"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Set up the white font ctx.fillStyle = "white"; ctx.font = `${fontSize}px sans`; // For every letter draw it to the screen for (const pos of letterPositions) { ctx.fillText(letter, pos[0], ++pos[1]); } } </code></pre> Finnaly put both the "tick()</code>" and "randomSpawn()</code>" inside an interval. You can play around with the time values for different effects. //script.js setInterval(tick, 40); setInterval(randomSpawn, 100); </code></pre> Your page should look something like this: Its kinda mesmerizing huh? I caugth myself staring at this screen for way too long dude. The finishing touches</h3> It may not seem like it, but we are actually done. I sugest that you try and do the rest alone, since it is a nice exercise. The finished product should look like this: If you want to see the code here it is aswell: //script.js /** @type {HTMLCanvasElement | null}*/ const canvas = document.querySelector("canvas.m-rain"); canvas.style.width = `${window.innerWidth}px`; canvas.style.height = `${window.innerHeight}px`; const ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, canvas.width, canvas.height); const letters = "马吾伊艾哦儿屁艾勒艾诶娜迪艾弗吉尺艾杰艾艾西吉比艾开"; /** @type {[Number, Number, Number][]} */ const letterPositions = []; const fontSize = 18; const numOfColumns = 20; const maxLetters = 500; function randomSpawn() { const x = Math.round(Math.random() * canvas.width); const y = -10; const s = Math.floor(Math.random() * 25 + 5); letterPositions.push([x, y, s]); if (letterPositions.length > maxLetters) { letterPositions.shift(); } } function tick() { ctx.fillStyle = "#0000002a"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "green"; for (const pos of letterPositions) { ctx.font = `${pos[2]}px sans`; ctx.fillText( letters.split("")[Math.floor(Math.random() * letters.length)], pos[0], pos[1], ); pos[1] += pos[2]; } } setInterval(tick, 50); setInterval(randomSpawn, 5); </code></pre> Project overview #1 - Pixelator 2.0 mihna123 — Fri, 07 Mar 2025 00:00:00 +0000 Note from [2026-07-15]. This is a blog imported from my old blog site mihna123.github.io</a> in an attempt to reconsile everything in one place. Pixelator is a free online editor for animated sprites and pixel art heavily inspired by piskelapp.com</a>. You can check out the demo at mihna123.github.io/pixelator-2.0</a> This is a passion project of mine. I used to make some games back in the day and I used tools like Pixelator a lot. The past couple of weeks have been a little bit uneventful soo I started building. The tech stack is quite simple as the only dependency that I used was tailwindcss. This was a mistake in retrospective, tailwind is great when you are working with components (like React or Angular), but when you need to repeat the same old w-full</code> a million times it gets kinda old. My html is pretty ugly too if you take a look at it: <button data-tool="bucket" title="Bucket tool" class="tool-button w-10 h-10 flex justify-center items-center bg-..."> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" ...> <path fill="currentColor" fill-rule="evenodd" d="M11.773 7.412c-.064.064-.27.249-1.017-.027c..." clip-rule="evenodd" /> </svg> </button> ... and the same button a million times over</code></pre> But I must say that I learned a lot about buffers, jsdoc</code> and the canvas</code> element. Features</h2> Here are the features (so far): Pen tool</h3> Good old pen tool, comes in 4 different brush sizes and all the colors you can imagine! Line tool</h3> Makes it easy to draw straight lines, duh Rectangle tool</h3> You can even draw a rectangle of your choice! Be carefull tho, it is a little bit buggy (if you can fix it I would be gratefull) Bucket tool</h3> So you don't have to manualy fill in all those sprites. Eraser tool</h3> You will need this one Frame manipulation</h3> Add, copy, delete and move frames as you wish! You can see the animation on the right preview screen. Exporting</h3> You can export your beautiful sprite to a png format! Source</h2> You can contribute and find source on Github</a>

The end result</h3>
Feels good when you finish a project like this. Play the game on github pages</a> or check out the result below and if you want the full source code, go to the github link</a>.</p>
</p>

Pen tool</h3>
Good old pen tool, comes in 4 different brush sizes and all the colors you can imagine!</p>
</p>

Line tool</h3>
Makes it easy to draw straight lines, duh</p>
</p>

Rectangle tool</h3>
You can even draw a rectangle of your choice! Be carefull tho, it is a little bit buggy (if you can fix it I would be gratefull)</em></p>
</p>

Eraser tool</h3>
You will need this one</p>
</p>

Frame manipulation</h3>
Add, copy, delete and move frames as you wish! You can see the animation on the right preview screen.</p>
</p>

Exporting</h3>
You can export your beautiful sprite to a png format!</p>

Source</h2>
You can contribute and find source on Github</a></p>

Social Media Is Demonic. Stop Feeding It!

Minimalist comments engine for personal blogs

Lets build #2 - Conway's game of life

Better way of navigating directories in Linux

Lets build #1 - Matrix rain

Project overview #1 - Pixelator 2.0

Social Media Is Demonic. Stop Feeding It!

What can you do?</h2> It is rather simple. Couple of stuff I recomend is:</p>

Minimalist comments engine for personal blogs

How did I build it</h3> It is just a very simple api done in "next.js</code>". Here is the whole code:</p>

Lets build #2 - Conway's game of life

The game</h3> Soo the game is initialy a large grid composed of cells. These cells can eather be dead or alive based on some rules. If they are alive the cell is colored black, when dead it is white.</p> The rules are as follows:</p>

The end result</h3> Feels good when you finish a project like this. Play the game on github pages</a> or check out the result below and if you want the full source code, go to the github link</a>.</p> </p>

Better way of navigating directories in Linux

Lets build #1 - Matrix rain

Project overview #1 - Pixelator 2.0

Pen tool</h3> Good old pen tool, comes in 4 different brush sizes and all the colors you can imagine!</p> </p>

Line tool</h3> Makes it easy to draw straight lines, duh</p> </p>

Rectangle tool</h3> You can even draw a rectangle of your choice! Be carefull tho, it is a little bit buggy (if you can fix it I would be gratefull)</em></p> </p>

Eraser tool</h3> You will need this one</p> </p>

Frame manipulation</h3> Add, copy, delete and move frames as you wish! You can see the animation on the right preview screen.</p> </p>

Exporting</h3> You can export your beautiful sprite to a png format!</p>

Source</h2> You can contribute and find source on Github</a></p>

The end result</h3>
Feels good when you finish a project like this. Play the game on github pages</a> or check out the result below and if you want the full source code, go to the github link</a>.</p>
</p>

Pen tool</h3>
Good old pen tool, comes in 4 different brush sizes and all the colors you can imagine!</p>
</p>

Line tool</h3>
Makes it easy to draw straight lines, duh</p>
</p>

Rectangle tool</h3>
You can even draw a rectangle of your choice! Be carefull tho, it is a little bit buggy (if you can fix it I would be gratefull)</em></p>
</p>

Eraser tool</h3>
You will need this one</p>
</p>

Frame manipulation</h3>
Add, copy, delete and move frames as you wish! You can see the animation on the right preview screen.</p>
</p>

Exporting</h3>
You can export your beautiful sprite to a png format!</p>

Source</h2>
You can contribute and find source on Github</a></p>