DEV Community: Reid Burton

What is your most cursed dev practice?

Reid Burton — Thu, 20 Nov 2025 19:37:40 +0000

I was watching a Youtube video where some Minecrafters ranked their playstyles and setups from most normal to absolutely cursed. I got to wondering, what is the most cursed dev practice? Mine is probably that I use tailwindcss in scss, and I do all of my dev on Windows. Feel free to look at my Github and comment on anything that you think is more cursed.

The Hack Club slack is goin' down. 😞

Reid Burton — Thu, 18 Sep 2025 01:42:14 +0000

Salesforce called the HackClub, a nonprofit that gives teens a comunnity and resources to code, and told them that they have two days to either

Increase the amount of money paid for hosting by 400% or
Leave slack.

This is a travesty, as HackClub has used slack for over 11 years! They now have to export and transfer 11 years of work over to a self-hosted Matterhost instance. This is yet another example of megacorporations distancing themself from the people who rely on them. Salesforce just scarred THOUSANDS of slackbot devs for life. Here are some ways you could help if you want to:

NOT use slack, use discord or Matterhost.
Donate here!

Note: this does not reflect the opinions of HackClub.

Hiding hyperlinks

Reid Burton — Mon, 16 Jun 2025 17:07:19 +0000

Today we will be hiding hyperlinks as the title suggests, there are a total of two ways of doing so. I got the idea from this post by @rohan_sharma Let's a go! (note that these methods are ONLY valid in nextjs)

#1, styling a hyperlink with tailwind

This one is the most obvious, and the easiest to use & find. Here is the code:

import Link from "next/link";
import { useRouter } from "next/navigation";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <Link
          href="https://www.google.com"
          className="text-foreground hover:text-foreground decoration-none"
        >
          Google
        </Link>
      </main>
    </div>
  );
}

This takes advantage of tailwind's styling utility, and uses it to make it hard to locate the link if you eyeball it, BUT, an anchor tag will be in the dom explorer, a dead giveaway.

#2, using next/navigation

This one is by far the hardest to detect, it is basically IMPOSSIBLE to find, here is the code:

'use client'

import { useEffect } from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Home() {

  const router = useRouter();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  })

  if (!isMounted) {
    return null; // Prevents rendering until the router is mounted
  }

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <p
          onClick = {() => {
            router.push("https://www.google.com");
          }}
        >
          Google
        </p>
      </main>
    </div>
  );
}

This one takes advantage of the nextjs router. There isn't even an onclick in the dom tree!

Share Nintendo Miis via Flipper Zero

Reid Burton — Sun, 20 Apr 2025 23:54:46 +0000

This tutorial outlines the basics of sharing a Mii via Nfc using A Flipper Zero. The first thing you need is an Nfc dump of an Amiibo like those found in Gioman101/FlipperAmiibo I used the Mario one for my test. This is where the tutorial splits off into two paths, sending and receiving Miis. First, we will start with sending a Mii to someone else.

Sending a Mii

The first thing you need is a Nintendo Switch or 3DS (obvious) and a Flipper Zero. Download your Mii Nfc file and put it into the Nfc folder in the root of the Flipper Sd card (it may not be in the root depending on your fw) then emulate the Amiibo on the Flipper using the built in Nfc app (fw dependent) now for the Nintendo Switch stuff. Go to your system settings, and over to the Amiibo tab, and click "Register Owner and Nickname" and register the Amiibo to the Mii. The first thing you need to is make sure you are emulating the Amiibo and, if the Amiibo is being emulated, hover your flipper over your right joystick, a new screen full of Miis will come up, select the Mii that you want to share. Another thing will come up prompting you to give the Amiibo a nickname. Give it the same nickname as the Mii, and then when prompted hover your Flipper, emulating the Amiibo, over the right joystick. It will say "Registration Complete", that means that it worked, and you can turn off your switch. Now go into qFlipper and go to the nfc folder, you will find a .shd file with the same name as the amiibo that you downloaded. Copy both of those files, and publish them as GitHub Gists, email them, or whatever. The sending bit is now over.

Receiving Amiibos

After receiving an Amiibo, you paste both of the files you received (the .nfc and .shd files) into the nfc folder (again, fw dependent) and go to the nfc app on your Flipper, emulate the Amiibo. Go to the Mii section of your System Settings and go to Edit and Create a Mii, go to the Create New Mii section. Click on "Copy Mii from Amiibo" and, if the Flipper is still emulating the Amiibo, hover the flipper over the right joystick then a thing that says "Copied Mii" will come up. You have now successfully shared a Mii using a Flipper Zero.

I made some Miis, check them out at My Gists

Most absurd programming stories.

Reid Burton — Sat, 19 Apr 2025 16:58:24 +0000

Comment your most absurd programming stories in this thread. Mine is this: A few days ago, I ABSULOUTLEY DESTROYED @samuelmarina/is-odd with this pr. What's your's?

How to make a repos portfolio Next.JS

Reid Burton — Fri, 31 Jan 2025 19:41:39 +0000

If you want to make a simple page that displays your GitHub repos, then is this the tutorial for you! First make a Next.JS project (for faster install times, add the --use-pnpm flag.) Make sure to add tailwind css. Then, open it in your favorite editor, I will be using vscode for this tutorial. after that add the code

"Use Client";

to the top of your file. Then add these imports:

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";

to import the proper things. In the page component add:

const [repos, setRepos] = useState<
    { name: string; description: string; id: number }[]
  >([]);
  const [emojis, setEmojis] = useState<{ [key: string]: string }>({});

So that the title and description can be parsed correctly. Then add a constant named "username" and set it to your username as a string. After which, we fetch the repos & emojis from the GitHub api:

useEffect(() => {
    async function fetchRepos() {
      try {
        const response = await fetch(
          `https://api.github.com/users/${username}/repos`,
        );
        const data = await response.json();
        const formattedRepos = data.map(
          (repo: { name: string; description: string; id: number }) => ({
            name: repo.name || "No name available",
            description: repo.description || "No description available",
            id: repo.id,
          }),
        );
        setRepos(formattedRepos);
      } catch (error) {
        console.error("Error fetching repos:", error);
      }
    }

    async function fetchEmojis() {
      try {
        const response = await fetch("https://api.github.com/emojis");
        const data = await response.json();
        setEmojis(data); // Store emojis as key-value pairs
      } catch (error) {
        console.error("Error fetching emojis:", error);
      }
    }

    fetchRepos();
    fetchEmojis();
  }, []);

And then, add the code that renders the emojis:

const renderWithEmojis = (text: string) => {
    const parts = text.split(/(:\w+:)/g); // Split text by emoji shortcodes
    return parts.map((part, index) => {
      if (
        part.startsWith(":") &&
        part.endsWith(":") &&
        emojis[part.slice(1, -1)]
      ) {
        return (
          <Image
            key={index}
            src={emojis[part.slice(1, -1)]}
            alt={part}
            title={part}
            width={0}
            height={0}
            className="w-[1em] h-[1em] inline"
            loading="eager"
          />
        );
      }
      return <span key={index}>{part}</span>;
    });
  };

And lastly, add this code in the return for the page function:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {repos.map((repo) => (
          <div
            key={repo.id}
            className="border p-4 rounded border-black dark:border-white"
          >
            <h2 className="text-xl">
              <Link href={`https://github.com/${username}/${repo.name}/`}>
                {repo.name}
              </Link>
            </h2>
            <p className="hidden md:block">
              {renderWithEmojis(repo.description)}
            </p>
          </div>
        ))}
      </div>

And you're Done! Now you should have a page that dispays all of your public repos!

Accessing the Windows filesystem from WSL (WSL2)

Reid Burton — Sat, 28 Dec 2024 01:55:20 +0000

We, as programmers, have all been there. We just setup Oh-My-Posh, Oh-My-Zsh, etc. And are too lazy to transfer are Very Phine configuration over to wsl, and just want to type the path. To access the Windows filesystem from inside WSL the path for the drive is /mnt/[DRIVE_YOU_WANT_TO_ACCESS]

Thats it, no config needed!

Animated Account Pictures.

Reid Burton — Wed, 11 Dec 2024 20:50:39 +0000

This is a (very funny and dumb) idea I had when I emailed my homework to the teacher of my beginners

C# class

rimshot I saw that his google account had an animated gif for a logo. So, I tried it, and it worked! I have tried this on several websites. Here is a list of websites I know it works on:

Google
Dev.to

I know, I know. It's a very short list. But you should try uploading cool gifs as your profile pic on all your accounts and commenting the accounts you used them on.