DEV Community: Andrew Burch

SnarkyType is unhinged... (even from a development standpoint)

Andrew Burch — Mon, 05 Jan 2026 20:42:06 +0000

This is my third post about this dumb project.
Before I yap about my life, you need to know the history behind this project.

I grew up in a city that doesn't have typing in its curriculum, so my typing speed was pretty trash. However, because I am a developer, 40 WPM wasn't going to cut it, so I turned to a few typing tutors and Monkeytype, which increased my average WPM to 100.

Two years later, as I was playing around, I suddenly got an idea. Learning to type fast was cool, but it quickly got boring, especially with the repetition. It was at this point that I had an epiphany! I instantly got to work, building this new typing test. I called it SnarkyType.

Eight months of development later, I am starting to feel the repercussions of my project. I over engineered it. I built accounts (I'm a frontend developer) and a whole bunch of overcomplicated things. All of this while having a full time job.

The Project Update

I know you guys (probably all bots 😢) don't really care about me, just my website, So I will give you guys an update as well as an insider beta preview!

Snarkytype is a typing tutor, similar to the likes of Monkeytype and Typing.com, is a typing test. Duh. But, there's a twist. Instead of just results, it includes a roast designed to flame you until you type fast 🔥.

"SnarkyType’s snarky comments stop mid-sentence when Chuck Norris starts typing".
But chances are, you are not Chuck Norris.

SnarkyType uses an advanced AI (what? everyone else is calling their stuff AI!) algorithm to determine how bad your roast is. Most of the roasts are made by our team, but sometimes we call in Grok to help us. When you take a test, your WPM and accuracy are sent to the server (DONT TRY TO CHEAT OR ELSE), and our backend takes care of the fetch and templating for the roast. In case you were wondering, our backend runs on ExpressJS and we do not use cloud computing.

As of now, we have put an indefinite hold on some of the game ideas pitched by us at the beginning, as well as some other stuff we've promised. Sorry! However, we DO have:

The base typing test ⌨
Accounts and user auth 🧑‍🦲
EJS templating engine ⚙
Snarky Feedback 👿
Friend requests and friend system 🧑‍🤝‍🧑
Dashboard and account settings
Public user profiles and routing 😭
Anticheat 🦹
Email signup (I'm too lazy for Google and SSO) ✉
Support. Email us at support@snarkytype.net

There you have it. The latest update. While we don't have an exact release date, we set it at around the end of January 2026. More updates to come!

What do you guys think of my stupid project? Is it good? Bad? I literally vibe coded most of it at 3am (kidding), so it's not going to be the best.

AND NO, I AM NOT GOING TO PUT AN AI CHATBOT ON IT. THE AI CRAZE IS OVER HYPED.

Image Gallery

Image note: UI and functionality subject to change at any time. Don't get too excited!

I've attached a simple, OLD version of the Beta so you guys can take a peek. Your data may be deleted or leaked at any time, as our database infrastructure is developing. Please do not put your real email, name, or age. It's old because I'm not about to show you guys the latest and greatest version, so it nerfed it a bit 😁

SnarkyType - Type fast or get roasted

SnarkyType is the ultimate typing test with a twist — type fast or get roasted!

burchweb.com

SnarkyType, the Snarkier Way to Type gets better?

Andrew Burch — Tue, 28 Oct 2025 12:34:40 +0000

A long time ago, I had AI write me a blog post about my progress on SnarkyType because I never thought that I would finish it. Back then, SnarkyType was in Alpha, so it was kinda boring. But, I have NOT given up, mind you, and here's a BETA check in on what's happening!

@superskibidisigma67 (and everyone else), No. I do not have a release date yet but I hope to get it out by Nov. 13, 2025

Well, y'all are in for a treat, 'cause today, I'm going to show you a behind-the-scenes look at it.

SnarkyType runs on the following frameworks:

NodeJS (cause duh)
ExpressJS (cause I'm a noob at backend)
React (only for dev; I'm not sure if it will be on official release)
SQLite Database

BUT FIRST, If you don't know about SnarkyType yet, then read this first

What Is SnarkyType

SnarkyType is a Snarkier way to learn how to type (and more fun). With a totally legit real not just JSON API AI, you get snarky responses tailored to YOUR WPM. If you type like

this guy, then it will give you kinda nice feedback. Some of my favorites are

My grandma can type faster than you
Look at you, speedy fingers, why don't you take a break and touch grass?
I can type faster on a potato 🥔 <-- aka those $200 computers at costco

I'm sure you guys are already tripping over each other to try it, but there's more.

The Games

SnarkyType has some fun typing games! They actually DON'T roast you! That is because it is more focused on fun than making you cry. DONT ABUSE THIS OR I WILL MAKE IT HAVE ROASTS
Anyway, some of the games include:

Viking Escape - Escape some Vikings in this totally exhilarating 8-bit game where the line between good an evil gets thinner than anyone can ever imagine... (just kidding)
Zombie Apocalypse (name is stupid, y'all give me some ideas in comments) - Multiplayer game where you and others type fast to unalive zombies (like the cat Halloween google doodles but typing)
Other games??? Give me some ideas in the comments!

Now, it's time to look under the hood:

The Insider

Now let's take a look inside the code 👀
Unfortunately, due to security and privacy reasons (I like my code), I cannot show y'all the code behind it, but here's a summary:

app.js - Main file loading/dynamic pages/post-server computing and stuff
server.js - Defines file paths and what ExpressJS uses for serving
/public - Folder of frontend HTML, JS, and CSS files
/Data - Folder of user data (ITS ENCRYPTED AND P455WORDS ARE HASHED)

Let's take a look at how the test actually works:

Uses JS to get key presses and the actual test
HTML file is pretty minimal (mostly blank; JS loads most of content)
CSS is okay. It's a CSS file. Nothing special
Tests are synced to server via POST API /auth
Accounts are loaded via GET API /auth/users

Alright thats it for now. More updates to come!

ChatGPT may provide incorrect information. Double-check it!

Introducing SnarkyType: The Snarkier way to type fast

Andrew Burch — Sun, 08 Jun 2025 21:26:23 +0000

I'MMMM BACKKKK developers! My mystery project is underway! ...And it is literally just Monkeytype but it roasts you if you mess up.

What is SnarkyType?
SnarkyType is a typing test, a chaotic tutor (🚧), and eventually, a collection of typing games (🚧).
Unlike other typing sites that politely suggest you "try again," SnarkyType hurls you into the typing arena and then publicly mocks your pathetic WPM if you type like a grandma 🔥🔥🔥. Even The Rock will cry after experiencing the roasts made by our team and ChatGPT.

🔥 Features:
Minimalistic, customizable typing test (yes, even dark mode because we’re not monsters)

Roasts you for typing slowly — and (totally) praises you if you're fast. But like... sarcastically.

Typing test for beginners… but if you ignore the lessons? Prepare to be verbally suplexed. 💀

Games coming soon™ that’ll make you question your keyboard, your self-worth, and your decision to skip typing class in 6th grade.

Devs who are extremely online and will respond to your bug report at 2am with a meme and no context. Kind of like Andrew in Social Studies back in 1798.

🤷 Why choose SnarkyType?
Look. There are better typing tests out there.
But are they FUNNY? Are they PETTY? Do they have snarky AI feedback that says “wow, nice job, I guess” after you barely hit 50 WPM?
No. They’re too busy being professional and helpful. Ew.

SnarkyType turns learning to type into a game of roast roulette.
Mess up one letter and the snark bot might say:

“Bold of you to attempt words with that level of skill.”

Or if you’re fast:

“Okay showoff, we get it. You have fingers.”

💪 Coming Soon:
A typing tutor that teaches you proper finger placement — or ROASTS you for hunting and pecking like a raccoon trying to unlock an iPhone.

Typing games like:

Speed Mode: Type fast or perish.

Chaos Mode: Words explode. Literally. (Probably.)

PvP Mode: Race against your friends or a bot named Chad with 200 WPM and no soul.

Public profiles and stats so you can shame your friends into practicing.

Achievements that celebrate weird milestones like “typed 1000 words without crying.”

🧠 Summary
SnarkyType is your chaotic best friend that helps you type faster but isn’t afraid to call you out.
It’s Monkeytype, but if Monkeytype was a trash-talking sibling with caffeine addiction and zero chill.

Ready to type?
Start now, or forever type like a confused goose. 🧵
👉 ALPHA VERSION: https://snarkytype-alpha.tiiny.site/

An alpha test of the typing test

UPDATES COMING SOON!

How to make a smooth Dark/Light mode transformation

Andrew Burch — Wed, 22 Jan 2025 13:06:51 +0000

Okay. So you're on a website, but the default is dark mode. However, you like light mode (if you like light mode, then there is something wrong with you 😆). It is 3 AM. You go to the dark/light switch and click the toggle. Suddenly a blinding light flashes before you in the dark room, causing you to go temporarily blind. You hear ringing in your ears and have a seizure. You need to go to the hospital because of it, costing you thousands of dollars because you live in the U.S and you don't have insurance (if you don't live in the U.S, good for you).

That was a dramatization. But it is very annoying when you have to switch themes and you get blinded. I'm here to fix that! Using the latest and greatest CSS technology (not really), I have a super simple way to fix this. A smooth transition! As usual, I will give you the code and I will explain what is happening.

But first, let's actually make a theme switcher. See This Link for how to make a theme switch.
If you already have a theme switch, the only compatible ways with this method are variables (--color:blue;) and the strange method W3 Schools uses here.

Da code:

*{
transition-duration: 1s;
}

The duration time can be changed to your likings. I just used one second for the sake of this tutorial.

Okay, what's happening?
An asterisk, in case you didn't know, is the root selector. This means that every element is affected by this. By changing the transition-duration, the computer knows that when something, anything is changed, it will apply this transition. Simple, right?

Thanks for reading!
Andrew McSillyone

Do you guys think that Stackoverflow is too strict?

Andrew Burch — Thu, 02 Jan 2025 13:48:34 +0000

I have begun to wonder if Stackoverflow is too strict. Almost half of my questions get flagged as not enough detail when I wrote an entire paragraph on it, yet a question a year ago gets approved when it has 20 words. I have begun to use Stackoverflow less because of this. I still use it to read other people's questions to help me, but I don't ask questions anymore.

What do you guys think? Am I just bad at asking questions, or do you guys have the same experience as me? 🤔

This is my opinion about Stackoverflow. Do not take this seriously. If you are a Stackoverflow employee, this is not to shame you or anyone else working at Stackoverflow. 😁

I have a question on back-end stuff. If my file tree is file://files/file.html, when the file is uploaded to the cloud, will it turn into example.com/files ? Thanks for any help.

Andrew Burch — Thu, 19 Dec 2024 20:39:26 +0000

How to make on-scroll animations in JavaScript and CSS

Andrew Burch — Wed, 18 Dec 2024 22:12:34 +0000

Have you seen basically every single cool corporate website, and noticed that text slides up when you scrolled to it? (see Apple's website) Because it is so common, you would think that there would be many answers to this question, right? But, after scrolling through many online tutorials, I couldn't find an appear-on-scroll animation, so I made my own.

The HTML (Dun dun dun!!!)

The HTML is fairly straightforward. Just make an element

<p>Some text</p>
and attach the class id="animate-scroll" to it. Please note that you can change the class at any time, just make sure to change the HTML, CSS, and JS class references too!

The full HTML (note that you can change the element. I used <p> for simplicity reasons.):

<p class="animate-scroll"</p>

The CSS

Now for the CSS. This part is easy. Copy the following code:

.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

What's going on here? The .animate-scroll class declares the animation. This is the code that actually makes the animation. You can make another one, but I made a slide-up fade-in animation because it is the most common one I've seen. The .animate-scroll.visible, however, shows the state of the element when the animation is over. If you change .animate-scroll, you should also change this. For instance, if you are changing size, you should put size:100%; or something. However, if you just want a simple tutorial on how to do this, then don't change anything.

The JavaScript

Copy this simple JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

Woah! That's a lot of code! What's happening! Let's break it down step-by-step.
Firstly, document.addEventListener('DOMContentLoaded', () => is detecting for if the content is loaded. This just runs the "function".
const elements = document.querySelectorAll('.animate-scroll'); This finds the class. Change this too if you are changing the class of the HTML and CSS.
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => This detects if the element is in the viewport. If it isn't, then it will not animate it.
if (entry.isIntersecting) { entry.target.classList.add('visible');} This detects if the animation is over. If it is, then it adds .visible to the CSS. that is why it is there!
threshold: 0.9 This calculates how much of it is on the page before animating it. 0 is as soon as a pixel reaches the page. 1 is when it is about 25% of the way up the page. 2 is about 50%... I like to keep it at about 0.9 for a chance that the user sees the animation without hiding the text for too long.
elements.forEach(element => { observer.observe(element); This just observes the element. It's kind of pointless to explain. Is it on the page??? This handles that.

The final code...

Are you too lazy to read my amazing explanations? Here is all of the code.

HTML:

<p class="animate-scroll">Your text here</p>

CSS:

.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        //The amount of screen displayed before animated. 0 is as soon as it appears on the page. 1 is a bit. 2 is...
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

That's it! I hope you liked this deep dive into this. If you have any questions, comments or just want to talk to the famous guy who wrote this, leave a comment. I would love to see your suggestions!

Thanks for reading, CodeMonster