Haven't we been here before?
By Oscar Kelk • 5 minutes to read
You're not looking at the first version of this website; you're actually looking at the fourth. 3 days ago I scrapped version 3 and started anew. I didn't hate it, but I wanted to make something which looked nicer, more organised.
I'll look at the previous three versions of this website, each with different content, and how I made this one.
Where did we come from?
I'll start at the beginning, with version 1. This version came from 2012.
Version 1 was made with ASP.NET, coded in Visual Basic. You can see that it wasn't made to look pretty!. Maybe CSS would have done it good. But it was made with the Visual Studio website editor - meaning HTML, and whatever else was generated by the program; it wasn't written by me.
So it was mostly something I made for the novelty of 'making a website'. Most of these hyperlinks may not be self-explanatory. "My Game" was a flash game that I made, so was "Hotel Game", "Hotel 3", and "Jail Escape". "Quiz Page" was a collection of easy fun quizzes (all about Harry Potter). "Web browser", I believe, was a web browser that I tried to make for Windows.
4 years later I was tired of version 1. I wanted to start again.
Something to see
Each page needed to look nice, but also be able to support a range of content. From the start I also wanted the website to have a dark mode, which I'll return to later.
First 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, spsace for content 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 majority of internet traffic comes from mobile devices, and so it only makes sense that the website should be usable on them. I recognised mobile responsiveness as a prevalent issue with the website before, so it was and still is essential to oscarkelk.com. For this I use media queries where needed.
This said the navigation bar is an issue - in the scenario that I add more items to it I'll have to rethink that.
You see dark mode becoming more and more common. Many find that bright white backgrounds produce eye strain or use device battery, or simply aren't as attractive. You can try out the dark mode on my site with the button that looks like this:
document.body.classList.add("dark-mode"); // Add dark mode class document.body.classList.remove("light-mode"); // Remove light mode class
But there is a bit of a problem with this.
This is what PHP does, leaving a cookie on your browser with your background preference (try and find it if you've pressed the toggle button!). When you load the page the cookie is read and parsed, the corresponding class is placed in the document body, and you are presented with the background you want.
Behind the scenes
PHP (PHP: Hypertext Processor), is used for two main reasons:
- Dark mode
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 then the rest are distributed among other pages.
Each post has comments, which are stored in another table, possessing an ID number which corresponds with a post.
Here's what I have planned:
- Make the website more accessible ("A11y")
- Be able to update these posts (so I can tick items off this list!)
- Put source code on GitHub
If you find any bugs throughout the website, or have a suggestion of some other sort, please contact me.
Viewed 207 times
next blog post when??
Cool, like to see more of this 'content' in the future.