Making This Site

Jul 1, 2024


Last edited on:

Jul 5, 2024

Which framework, bro?


Iā€™ve had quite a time trying to get a website like this put together. I first had the idea to make my own site (specifically as a portfolio piece) around April of 2023. When I set about on the project, I had a hard time picking a framework. My experience in webdev is (thankfully) pretty limited. In the past, Iā€™ve heard jokes/opinions of other people lamenting the abundance of frameworks and then I very suddenly understood their pain.

There are actually too many options. I just wanted a basic static site to put stuff on and say ā€œhereā€™s what Iā€™ve worked onā€. This framework, that framework, you need to use Vue components, React components, JSX, Next.js, Nuxt.js, compile this yourself, etc. COMPONENTS, COMPONENTS!! It was just very overwhelming- especially when you consider that all Iā€™ve known up until that point is old-school HTML, JS, CSS. So, thatā€™s what I ended up opting for.

I tried to make my website with the most basic tools possible: just VSCode + HTML/JS/CSS. Then I realized making it look good and act responsive was way harder than I had guessed (go figure). So, I caved a little bit and used Bootstrap. This library essentially gives you some premade CSS classes to work with. This wasnā€™t a bad decision, it did mostly all I wanted it to do. The problem is I still wound up manually writing way more HTML than I should have. Also, responsive doesnā€™t mean what you think it means unless you are already in the know. Responsive means how well the site adjusts to other devices, display sizes, etc, not the literal millisecond responsiveness of the website. Webdev is filled with terms that donā€™t accurately represent their meaning. Try to guess what ā€œslugā€ means in the context of webdev.

Take a look at this:

<!-- MIR -->
<div class="col-sm-" style="padding: 24px;">
    <div class="card bg-opacity-25 text-bg-dark">
        <div class="card-body d-flex flex-column justify-content-center gap-2">
            <p class="card-title display-6 text-left fw-bold">Madness Interactive Reloaded</p>
            <p class="fs-3 fw-medium">2023</p>
            <p class="fs-6">I worked on various parts of MIR, but more notably:
                improved upon/created
                dev tools and editors, lots of bug fixing, and writing tests and documentation.</p>
            <iframe height="360" src="https://www.youtube.com/embed/9pq9Co8zC2Y"
                title="Madness Interactive Reloaded - Gameplay Trailer" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
    </div>
</div>

This is how the old site displayed contentā€¦ my own little awful manually typed out components. Now, multiply that by all the projects and any other info boxes I wanted to add.

I do think it turned out better than it couldā€™ve if I had chosen not to use Bootstrap, but itā€™s still pretty bad. It was a stark contrast to what Iā€™ve been a bit spoiled by: s&boxā€™s Razor UI. Basically, s&box lets you use Razor in the same way you would when writing an ASP.Net Razor/Blazor, except to make UI for your games. Considering that Iā€™d been using this for about 2 years, I got used to it! So, throughout this whole journey Iā€™m dying to just use Razor so I can interweave C#, HTML, and CSS in the same file to construct a page. Apparently there are some ways, but I still find them a bit overly complicated for my purposes and annoying to set up.

The framework in question:


Today I was determined to use one of these fancy frameworks or tools and make the website properly. I was going to give Hugo another shot, then considered 11ty, but a few people I know really enjoyed using Sveltekit. I wanted to try this one since it seems to receive universal praise. This is actually the second time Iā€™m writing this part of the post since originally, a few days ago, I had made the site using Astro. Astro was really easy to understand, set up and get going with but I wanted just a bit more flexibility. Sveltekit definitely gives you that at the cost of a bit more complexity. So today (July 5th 2024) Iā€™m finishing up the website again after spending the last couple days rewriting the site using Sveltekit and Tailwind. The docs for Sveltekit are ā€œgoodā€ but as usual with a lot of frameworks leave a lot desired in my opinion. The verdict is that I think if you need something that can scale a bit in the range of ā€œrelatively simple needsā€, Astro can definitely work for you.

Why?


The driving motivation this time around is mostly to have my own devblogs. I love devblogs. Iā€™ve read every Factorio Blog, some of them multiple times out of desperation since nothing else comes close. Another one Iā€™ve enjoyed is Clark Kromenakerā€˜s. Heā€™s re-implenting this engine for a heavily data-oriented game called Gabriel Knight 3. Itā€™s really satisfying. I obviously canā€™t list all the ones Iā€™ve read, but it got to the point where I was wishing there were a good aggregator specifically for devblogs. Reddit seems like the obvious answer to this, but I tried that. Maybe I didnā€™t look hard enough.

I especially enjoy the ones that somehow perfectly balance being technical without being as boring as a whitepaper about rocks or something. I can only hope to hit that balance myself, but I want my own devblog too. I started working on a game at the end of May and I want to finish this one. Iā€™ve had a bad habit of tinkering but never finishing stuff. I did finish a game jam project for the first time in November of last year, but Iā€™ll probably give that experience its own post instead.

I want to see what itā€™s like to write devblogs for a game you are actively developing. Maybe having devblogs to look forward to showing off progress on can help maintain motivation as well.

Of course, itā€™s not that simple. Never let this Yahtzee Croshaw image leave your mind: image This has been the first time that proper bugs have actually cropped up unexpectedly in a project of mine because thereā€™s actually enough code at play they can pop up in. So, I guess thatā€™s strangely a good sign.

Anyway, thanks for reading.