It’s been a while since I had the time to make something. I’m basically done with my masters degree, but there are several projects and life-stuff in general that needed my attention in the last few weeks/months. Because of that I was really happy when I suddenly had a week, where I had no work, no project appointment, nothing! So… what to do with that time? Make something, of course.

I always wanted to make a URL-shortener, so… I did. Meet Spud, the no bullshit URL-shortener!

Spudboi

Spud is by no means a “production quality” project, but I wanted to make something (or, to be precise, ANYTHING) since it was quite some time since I started and finished a project of and by my own. Also, there’s the problem that my domain is not that short… So any not-so-long URL is basically longer after being “shortened” by Spud… Welp 🤷‍♂️

Spud works with a basic JavaScript “frontend” and some backend php code. I chose php because I’m a sick masochist (and my “server” is a webspace at ionos.de which only runs apache and I can’t just spin up a container). On that note, I’m poor AF and if anyone wants to sponsor a VM for me, just hit me up. I would be VERY grateful!

Anyways…

Spud has a JS frontend which just handles input and creates short URLs. The data (long url, short url, nothing else) is then added to a MariaDB via create.php and retrieved via get.php. Created “Short URLs” are then redirected via rd.php.

For those people screaming “you could have just used one php script to create or get, you don’t need two!": yes, I know. The thing is, I despise php. I HATE this language with a passion. So if I can write two functions in JS to keep me from having to make one elaborate php file, I’m in. Sorry, not sorry.

The short URL is basically just a Math.random() call multiplied with Date.now(). It’s not really sophisticated, but it works for the scope of this project.

function getrandom() {
    var random_string = (Math.random() * Date.now()).toString();
    return random_string;
}

Everything else isn’t really noteworthy, except a really good example of why I don’t particularly like working with JS: How do you hide a element on a page and show it after a specific condition is met?

I tried multiple solutions I stole created based on StackOverflow posts and nothing really felt, well, clean. I mean I’m one to complain! Look at spud.js and you start twitching every time someone mentions “spaghetti”, but let’s just look at the solution I ended up using:

The HTML looks like this (note the inline-style display: none on the container div):

<div id="resultContainer" class="input-group" style="display: none;">
        <input id="resultOutput" type="text" class="form-control">
        <button type="button" class="btn btn-success" onclick="onCopyButtonClick();"><i class="bi bi-clipboard"></i></button>
</div

The JS function to show this container looks like this:

function showUrl(urlObj) {
    //blabla code blabla
    // ...

    //only works when using inline style tag!
    document.getElementById("resultContainer").style.display = "";
}

What this JS does is setting the display property of the div to its default. It’s not, in fact, setting it to none, or null, or empty. I repeat: SETTING A DISPLAY TO <EMPTY-STRING> IS RESETTING THIS DISPLAY TO IT’S DEFAULT VALUE. Who the fuck came up with this shit? But I’m not done yet. The observant reader would have noticed my comment above the JS code. This shit only works when the display property is explicitly declared INLINE. It doesn’t even work when using a stylesheet.

Now I did use this since it was the first thing I found on the internet which actually worked, but I since learned about the hidden attribute in HTML… So hidden = false just does the same thing and actually works… But: hidden overrides some other display attributes and does not work in all cases. So I kept StackOverflows my implementation (partly out of spite) and went on.

Some lessons learned:

  • PHP is a bitch!
  • Inonos only accepts DB-traffic from their own host! You need to set up a local DB for testing (I used XAMPP, since it includes an Apache server and a MariaDB)
  • graphic design is not, in fact, my passion.
  • JavaScript is a hot mess of a language.
  • I have no idea how to effectively structure JS code.
  • It’s me, I’m a hot mess 😏😅

This whole thing was more or less just to keep me from getting rusty working with web-stuff. I will, however, for sure use Blazor or any framework available going forward.

Check out the website at spud.mightypotato.de or the hot hot mess of source code on GitHub.

Thanks for reading 🩳