Rewriting a Website
So normally, I would generally caution against doing something like rewriting a codebase. Having done it once already (ongoing, technically), it will definitely be harder than you think, it will take longer, and it will slowly drive you insane with how much you don't know about the code you're rewriting. Refactoring is, somehow, a completely different process than this, and I think it ultimately comes to a more satisfactory conclusion than rewriting does. But that's neither here nor there. The lesson is: don't rewrite code.
So I rewrote the site.
In my defense, this site wasn't yet in a place where it would be a hassle to do so. And I doubt it ever really could get to that point without a decent amount of time or effort, neither of which I had already put in. The thing about a static site is it's... well static-ness. There's no business logic or back-end or user-input to have to deal with. It's just a formatted page with a bunch of text. At least for now.
When I first started working on this site, I wanted to kind of keep to the bare minimum when it came to the actual techstack. Stick to HTML, CSS, and JS, with JQuery thrown in to make dealing with the DOM actually bearable. Keep to the 2000s Geocities vibe. Limits can breed creativity, as they say, so perhaps imposing these limits on myself would make me come up with something interesting. So I started writing code, thought of what kind of content I wanted to put on here, actually created some of that content, and then I just kind of left it there for 4 months.
So that was dumb.
Because, I don't actually want to code within these limits. While the Main 3 are perfect for people new to coding, and hobbyists (hello all, I think you're wonderful), they just don't really interest me anymore. And I already work at a place where the techstack is starting to grind on me, so why would I want to place a limit on the thing that's supposed to spark some joy?
So I rewrote the site.
TailwindCSS
Do people actually like writing CSS? If you do, congrats! You are an elevated being, higher than God Himself.
When I first started this site, I wasn't using pure CSS, I actually started with something called spectre.css which is a nice little CSS framework similar to Bootstrap, just not as big. We use Bootstrap at work, so I decided to go with Spectre because it was Similar but also Different. And at work, using frameworks like this is great, because we don't really care about having any kind of Aesthetic or Style, we just want to take away the work of writing our own CSS. Also half of what we're writing is pretty repetitive: here's a form, here's a table, here's a few buttons. They all look the same. Write some HTML, stick a CSS class on it, and move on.
However, I don't like writing CSS, and if you do want to have any sort of Aesthetic while using these frameworks, you're gonna be writing a lot of CSS. To make my site look the way I wanted it to, I had to change the Spectre defaults, and then I started to make a bunch of my own classes and then once I got to that I started thinking what is the point?
I've been hearing a lot about TailwindCSS recently, so I decided to make the switch, and I'm really enjoying it! What's nice about Tailwind is that it doesn't have an Opinion on how your site is supposed to look, all their classes are small, utility based classes which you combine together to create the look you're going for.
As an example, below are two snippets of code from this very site. The first is my site header using Spectre.CSS, the second is using Tailwind.
<div class="container">
<div class="columns">
<div class="column col-10 col-lg-12 col-mx-auto text-center">
<div class="block">
<h1>This is A Website By cordsycords</h1>
<h3>-- under (very slow) construction --</h3>
</div>
</div>
</div>
</div>
<style>
.block {
background-color: #2c2c2c;
padding: 20px;
}
.h1, h1 {
font-size: 2rem;
}
h1, h2, h3, h4, h5, h6 {
color: inherit;
font-family: "Major Mono Display","SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;
font-weight: 500;
line-height: 1.2;
margin-bottom: .5em;
margin-top: 0;
}
</style>
Website header using Spectre.CSS
<div class="bg-neutral-800 mt-5 lg:w-5/6 w-full p-5 text-indigo-200">
<h1 class="font-custom-major-mono lg:text-5xl text-3xl text-center font-normal mb-5"><a href="/">This is A Website By cordsycords</a></h1>
<h2 class="font-custom-major-mono lg:text-4xl text-2xl text-center font-normal mb-5">under (very slow) construction</h2>
</div>
Website header using TailwindCSS
If you'd like to learn about Tailwind you can check out their docs here.
React
Newsflash: websites aren't really written in HTML anymore. Instead we write JavaScript, and then the JS makes the HTML for us. Why? Because programmers are fundamentally lazy creatures, and we want to write the least amount of code as possible. When programming, we want to keep our code "DRY" (Don't Repeat Yourself) instead of "WET" (Write Everything Twice). This helps make our code easier to maintain, read, and reuse. Essentially, if you write a few lines of code that perform a specific function, you want to reuse that function everywhere in your codebase that needs it, instead of rewriting it every time.
This can very easily be applied to HTML. For example, I've decided to include my header as well as a simple tab navigation on every page on this site. To do this with plain-jane HTML I would have to copy and paste the markup for my header and navigation on every single page I create, and that sucks. It inflates my codebase, makes it more difficult to parse through, and if I ever decide that I want to change it I have to copy and paste it all over again, which isn't fun.
Which brings me to React. In it's own words React is a "JavaScript Library for building user interfaces". It is by no means the only one that does that, it's just the one I'm most familiar with. React lets me take snippets of HTML and turn them into Components that I can reuse throughout my code. So, instead of having to copy and paste this:
<header class="flex flex-col items-center mr-1 ml-1 lg:mr-0 lg:ml-0">
<div class="bg-neutral-800 mt-5 lg:w-5/6 w-full p-5 text-indigo-200">
<h1 class="font-custom-major-mono lg:text-5xl text-3xl text-center font-normal mb-5"><a href="/">This is A Website By cordsycords</a></h1>
<h2 class="font-custom-major-mono lg:text-4xl text-2xl text-center font-normal mb-5">under (very slow) construction</h2>
</div>
</header>
<nav class="w-full flex flex-col items-center">
<ul class="lg:w-5/6 w-full mb-5 mt-5 grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1">
<li class="flex-1 font-custom-bit-3 text-3xl text-center block ml-1 lg:first:ml-0 mr-1 lg:last:mr-0 mt-1 mb-1 ">
<a class="p-2 block hover:cursor-pointer bg-neutral-800 hover:bg-neutral-900 text-indigo-200 hover:text-indigo-400 transition-colors duration-300" href="/ttrpgs/">TTRPGs</a>
</li>
<li class="flex-1 font-custom-bit-3 text-3xl text-center block ml-1 lg:first:ml-0 mr-1 lg:last:mr-0 mt-1 mb-1 ">
<a class="p-2 block hover:cursor-pointer bg-neutral-800 hover:bg-neutral-900 text-indigo-200 hover:text-indigo-400 transition-colors duration-300" href="/minis/">MINIS</a>
</li>
<li class="flex-1 font-custom-bit-3 text-3xl text-center block ml-1 lg:first:ml-0 mr-1 lg:last:mr-0 mt-1 mb-1 ">
<a class="p-2 block hover:cursor-pointer bg-neutral-800 hover:bg-neutral-900 text-indigo-200 hover:text-indigo-400 transition-colors duration-300" href="/video-games/">VIDEO GAMES</a>
</li>
<li class="flex-1 font-custom-bit-3 text-3xl text-center block ml-1 lg:first:ml-0 mr-1 lg:last:mr-0 mt-1 mb-1 ">
<a class="p-2 block hover:cursor-pointer bg-neutral-900 text-indigo-400 " href="/programming/">PROGRAMMING</a>
</li>
</ul>
</nav>
All I need is this:
<Header/>
<Navigation/>
The Header and Navigation Components are, in the meanwhile, chilling in their own files. So if I decide to change a style or something, I just change it there, and then it's applied everywhere else on my website.
import * as React from 'react'
import Link from 'next/link'
import Head from 'next/head'
import Script from 'next/script'
export default function Header (): React.ReactElement {
return (
<header className='flex flex-col items-center mr-1 ml-1 lg:mr-0 lg:ml-0'>
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="manifest" href="/site.webmanifest"></link>
<title>webbed site</title>
</Head>
<Script>
<script src="https://kit.fontawesome.com/ba8eb7c808.js" crossOrigin="anonymous"></script>
</Script>
<div className='bg-neutral-800 mt-5 lg:w-5/6 w-full p-5 text-indigo-200'>
<h1 className='font-custom-major-mono lg:text-5xl text-3xl text-center font-normal mb-5'><Link href="/">This is A Website By cordsycords</Link></h1>
<h2 className='font-custom-major-mono lg:text-4xl text-2xl text-center font-normal mb-5'>under (very slow) construction</h2>
</div>
</header>
)
}
Header.tsx
import * as React from 'react'
import MasterNavigationItem from './MasterNavigationItem'
export default function MasterNavigation (): React.ReactElement {
return (
<nav className='w-full flex flex-col items-center'>
<ul className='lg:w-5/6 w-full mb-5 mt-5 grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1'>
<MasterNavigationItem label={'TTRPGs'} href={'/ttrpgs'}/>
<MasterNavigationItem label={'MINIS'} href={'/minis'}/>
<MasterNavigationItem label={'VIDEO GAMES'} href={'/video-games'}/>
<MasterNavigationItem label={'PROGRAMMING'} href={'/programming'}/>
</ul>
</nav>
)
}
Navigation.tsx, which also references *another* Component to generate each individual tab!
As you can imagine, this also makes using TailwindCSS a whole lot easier. Since I can make a Component for anything that I regularly use throughout the site, I don't need to remember all those class names!
However, this is all gobbledygook to a browser. While programmers have moved on, it still requires HTML to function, so we need some to compile our fancy React code into something the browser understands.
Next.js
This is my first time ever using Next.js and I got to say, it's pretty sexy. It's basically what's enabling me to be Completely Extra, and I love it (again, I did not have to do any of this, Main 3 would have worked completely fine).
Next.js takes the gobbledegook you see above and turns it into HTML, while also doing some other fun things behind the scene. Like ~pre-fetching~ which makes my site super snappy. It also allows me to generate pages based on Markdown files instead of HTML, which means I get to write less code! A programmers dream!
TypeScript
Finally, instead of plain-jane JavaScript, I've rewritten everything into TypeScript, which is just JavaScript: Now With Types. It's a very popular choice amongst the Industry these days, and does make writing larger and more complex applications much easier. This probably wasn't very necessary, but I've always wanted to practice.
That's it for now!
- cords