Haven't we been here before?

By Oscar Kelk • 5 minutes to read

Created


You're not looking at the first version of this website; you're actually looking at the fourth. I chose to make this version 3 days ago when starting over seemed like the best option. I didn't hate version 3, but the problem arises when you can't even make up for its lack of function with a good appearance!

Each previous version has been made with a different language, or framework, or environment.

Where did we come from?

Version 1

It is best to go back to the beginning (seemingly 2014?), with version 1

Version 1 of oscarkelk.com's home page, featuring an array of raw hyperlinks

Version 1

The whole website was made with ASP.NET, coded in Visual Basic, and was not pretty. I don't think I knew what CSS was, but I also can't imagine myself even considering being involved with it, if I did know. I was proficient in copying and modifying what had already been made, but when it came to understanding how the site worked, I needed much help.

You probably wouldn't know what to expect clicking on one of the hyperlinks in this great amassment. While "My Game" was a game that I made, so was "Hotel Game", "Hotel 3", and "Jail Escape". "Quiz Page" was a collection of easy fun quizzes, "Credits" was probably a bit of self-acknowledgement. "More Information" and "Web browser" obviously weren't memorable enough for me to remember.

Version 2

By 4 years later the old one was a bit too old. And it looked awful! I wanted to start again.

Version 2 of oscarkelk.com's home page, with material design

Version 2

It was time for version 2, made with React JS. This fancy JavaScript library provided all. And take a look at the very fancy "Material Design", why ever write CSS when you can utilise someone else's?

But there isn't a great lot to say about this version. You'd press on the home button to be welcomed by a greeting message to my friends. There was a password implementation at some point, which checked your raw password against a raw string in the site's JavaScript.

Version 3

So I wasn't really into Version 2 any more. But what I was into was Python! I made everything using Python, from scripts to games to "bots" for messaging applications. And so you can imagine how nice it was to hear that Django is web development, in Python.

Version 3 of oscarkelk.com's home page, with its green buttons and featured picture taken in Hahndorf, SA

Version 3

So I made something that was a bit more mine. I made the pages and even figured out how to write my own CSS (though it was consistently frustrating). I made a page for projects, individual pages inside that, and a little photography showcase. I didn't use JavaScript or write anything back-end, but this was enough. So this website was fine for 2 or 3 years, but I really did want to go further.

Inspiration 

In May this year, a friend and I collaborated to make a website encompassing various other projects we had made. We used no framework, everything was HTML, CSS, JavaScript, and (eventually) PHP. So I was a bit inspired, and I thought "why can't I make something like this for oscarkelk.com?". That's why you won't see React JS, or Django, or anything else fancy and powerful here. After all, I don't actually expect anyone to visit the website, I make it for my own enjoyment!

Something to see

Each page needed to look nice, and convey whatever I wanted it to. I also decided to provide a dark mode on this website from the start, which I'll get back to later.

I made a template, which looked a little like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>« Oscar Kelk</title>
  <link rel="stylesheet" href="/assets/css/dark-mode.css">
  <link rel="stylesheet" href="/assets/css/site-wide.css">
 <script src="/assets/js/dark-mode.js"></script>
</head>
<body>
  <header>
   <h1></h1>
  </header>
 <main></main>
 <footer></footer>
</body>
</html>

You'll see that it's left blank in areas, to be filled in. I utilise HTML5's semantic tags and have separate stylesheets/scripts for dark mode and such.
Each page uses the Rubik font and has meta tags for mobile viewports.

The Rubik font, displayed on Google Fonts

Rubik Font

It was pretty important to me that the website is usable on mobile devices. It should be easy in theory, but don't forget that CSS was made for computers, in the 90s, something like 10 years before anyone would consider browsing the web on a phone. The fact that my website just about happens to function fine on phones is good for me. I can't imagine writing 3 different media queries for the same CSS rule.

Overall, it won't be a problem until any more items are added to the navigation bar.

The mobile viewport of the oscarkelk.com home page

The homepage viewed on a mobile device

Dark mode

Dark mode is something that becomes more and more common. I don't act as the dark mode preacher that some do, but I certainly understand why it's so popular. You can try out the dark mode on my site with the button that looks like this:

dark_mode

The dark mode was originally made with JavaScript. I mean, it still is, but not all of it any more.

document.body.classList.add("dark-mode"); // Add dark mode class
document.body.classList.remove("light-mode"); // Remove light mode class

This snippet adds a dark mode class to the page body instead of the previous light mode one. CSS rules defined in dark-mode.css have a few variables for the rest of the website to use in changing its background, text, and even images.

But there is a bit of a problem with this.
When the page loads, and your preference is looked at, the screen is temporarily light before dark. You can imagine this would be quite painful if it was late at night, and you were going from page to page, being flashed at each time. JavaScript is ran after the page is rendered, meaning I had to input the dark-mode class before you even see it.

The whole point of PHP is that it parses the code before delivering an HTML page, so it's perfect. You have a cookie stored with your preference (try and find it if you've pressed the toggle button!), and that gets read before the page is shown to you.

Behind the scenes

PHP (PHP: Hypertext Processor), is used for two main reasons:

  1. The aforementioned dark mode
  2. These posts

These posts are all stored in a MySQL database. Each one has fields for title, author, content (the HTML itself), etc.
When you load the /posts/ page, the 5 latest posts are brought to you, and any more are placed on a new page.
Each post has comments, which are stored in another table, possessing an ID number which corresponds with a post.

Upcoming

Here's what I have planned:

If you find any bugs throughout the website, or have a suggestion of some other sort, please contact me.


Viewed 82 times

Comments

New Comment