20 years
Today my blog turned 20.
First, a bit of context: 20 years on the web is an eternity! In 2002, google.com was around and being used (and usable, unlike today). Most big players were not:
On September 26, 2006, Facebook opened to everyone at least 13 years old with a valid email address.
source: Wikipedia
On October 9, 2006, Google announced that it had acquired YouTube
source: Wikipedia
Your dear Instagram, Snapchat or TikTok are from 2010, 2011 and 2016 respectively.
The pre-blog era
I started playing with HTML in high school in 1998 or 1999 when a small team of students was assembled to create the school’s first website. At the beginning of my studies at EPFL, I then learned a bit of CSS and created my first personal website. It was just plain HTML files, hand-written in Windows Notepad.
Here’s the homepage, with a frameset, which was the shit at the time:
<HTML>
<HEAD>
<META NAME="keywords" CONTENT="Manuel, Hitz, BMX, sex, punk">
<TITLE>Welcome to Manuel's homepage !</TITLE>
<BASE TARGET="center">
</HEAD>
<FRAMESET COLS="150,*,150" BORDER="0" FRAMEBORDER="0" FRAMEBORDER="NO" FRAMESPACING="0">
<FRAMESET ROWS="*,220">
<FRAME NAME="upleft" NORESIZE SCROLLING="AUTO" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="empty.html">
<FRAME NAME="left" NORESIZE SCROLLING="NO" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="left.html">
</FRAMESET>
<FRAME NAME="center" NORESIZE SCROLLING="AUTO" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="mainpage.html">
<FRAMESET ROWS="150,*">
<FRAME NAME="right" NORESIZE SCROLLING="NO" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="right.html">
<FRAME NAME="downright" NORESIZE SCROLLING="AUTO" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="empty.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Sorry, your browser doesn't support frames.
</BODY>
</NOFRAMES>
</HTML>
Let’s all ignore that keywords meta tag.
Here’s the left.html frame, with crazy JavaScript (remember, this is in 2000), and a glorious table layout:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!--
if (document.images) {
blue2on = new Image();
blue2on.src = "bluebuttonon.gif";
blue2off = new Image();
blue2off.src = "bluebuttonoff.gif";
…
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
window.status = "";
}
}
function changePages(menuURL, mainURL) {
parent.upleft.location.href=menuURL;
parent.center.location.href=mainURL;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" FRAME="VOID" HEIGHT="210" WIDTH="140" RULES="NONE">
…
<TR>
<TD HEIGHT="70" WIDTH="70"><A HREF="javascript:changePages('musicmenu.html', 'music.html')" onMouseOver = "imgOn('blue2'); window.status='Music'; return true;" onMouseOut = "imgOff('blue2')"><IMG NAME="blue2" BORDER="0" HEIGHT="70" WIDTH="70" SRC="bluebuttonoff.gif" ALT="Music"></A></TD>
…
</TR>
</TABLE>
</BODY>
</HTML>
The amazing part is that the website still works. It included:
- an “About” page, named “Disclaimer”
- a presentation of all members of my close family, with full names, birthdays, etc. Definitely not something I would do today. A total privacy no-go!
- “The story of my life”, with an obvious “! NOT COMPLETE !” disclaimer
- a section with already outdated lists of my mp3s and CDs
- a list of links to my classes at EPFL, as well as links to websites related to BMX, video games, music. A lot of dead links there!
- a full CMU semester schedule. I didn’t remember I made this.
- a photo album section with pictures of my family, the house where we grew up, the apartment we moved to after my parents’ divorce, some holiday pictures, and shots showing my apartments in Lausanne and Pittsburgh. I think those were the full first two years of me having a digital camera. Again, lots of private pictures I’m not sure I would still share today.
It seems I always liked doing lists, haha! The fact that the archive of this iteration of my personal website has a section about my classes at CMU tells me that it must have been online until this blog went live in 2002. I don’t remember where it was hosted though.
Going through my archive, it seems I had another pre-blog iteration of my website that looked like so:
The PHP blog
Towards the end of my exchange year in the USA in 2001–2002 I found out about blogs. This dude Kevin had a pretty funny one, so I decided I could have one too. Somewhere I found the source code of a blog “engine” written in ASP (not ASP.NET!) and I transcribed the whole thing into PHP, knowing neither ASP, nor PHP, nor having any clue about cookies, sessions, etc. I just learned on-the-fly. The blog was backed by a MySQL database, had an admin section, visitors could comment on the posts etc. The whole shabang.
The blog went live on June 15, 2002 with my first log.
I never had any comment spam issues because the blog engine was home-made and bots weren’t tailored for it. I remember one of the most annoying things being character encoding, before everything became unicode[1]. The first blog engine was just a bunch of PHP files: index.php, editPost.php, deletePost.php, viewComments.php, etc. Later, after getting more fluent in PHP using it at my first job, I re-wrote the whole thing using object-oriented PHP and even threw in some AJAX. This must have been in 2005-ish. Bleeding edge!
var xmlHttp = false;
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
function controller(action, elementId, postParams)
{
if(xmlHttp)
{
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 1) {
// http://www.quirksmode.org/viewport/compatibility.html
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
x = x/2;
y = y/2;
x -= 40; // approx. half box size
y -= 40;
var loadingGif = document.getElementById("manu_loading");
loadingGif.style.top = y+"px";
loadingGif.style.left = x+"px";;
loadingGif.style.display = "block";
} else if (xmlHttp.readyState == 4) {
document.getElementById("manu_loading").style.display = "none";
if (xmlHttp.status == 200) {
if(document.getElementById(elementId))
{
document.getElementById(elementId).innerHTML = xmlHttp.responseText;
}
} else {
alert("There was a problem retrieving the page:\n"+xmlHttp.statusText);
}
xmlHttp.abort(); // reset readyState for IE
}
}
xmlHttp.open("POST", "controller.php", true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send("action="+action+"&"+postParams);
}
return false; // for form submission (?!?!!!!)
}
Notice how the code is very Internet Explorer-centric?
The blog was hosted at manuel.hitz.free.fr and titled “untitled”. So meta. At some point I wanted to get my own domain name. I still had no idea how to name my blog, so I clicked a bunch of times on Wikipedia’s “Random article”. I landed on plot hole and grabbed the plothole.net domain.
The PHP blog had a couple of layouts. I didn’t take screenshots of most of them at the time, and I’m honestly too lazy to try to make the Apache/MySQL/PHP stack work on my laptop.
The static blog
At the end of 2010 I pulled the plug on plothole.net. The last post was about one of my many injuries. Around that time I started using Instagram more, and spent a lot of time on Facebook. I still wrote some articles in 2011, but they were not published online at the time: CA-TX trip because I wanted to keep memories of that awesome time, and Standard Trailboss because I wanted to try out some CSS feature.
By 2014, during my time off looking for a new job, I started to miss having a blog. Thankfully nobody had snatched the plothole.net domain name in the meantime. The comeback posts were My first Mac, and the report for a 2012 trip. I wanted to have something much simpler technically, so I got rid of my PHP blog engine and went for a static site generator. In short, you write in some Markdown flavor, have some templates to stitch together the parts of the page that are repeated (header, footer, etc.), and a bunch of scripts turn everything into HTML files. This makes your website super fast, and in 10 years I will be able to look at my archive with nothing but a web browser. The source Markdown files are versioned on Github. Over time I used several generators: Grunt Assemble, Jekyll, Hexo (never made it online). I had to switch because all of them started to choke on the amount of files to generate. Currenty I’m running Metalsmith, which has the added benefit of being written in JavaScript. Migration from one system to another has always been pretty annoying.
The design hasn’t changed since 2014. Except that I dropped the weird ambigram header logo:
The idea was to have a single column layout, all in greyscale, in the hope it would make the colors in the contents stand out (pictures, graphs, etc.). I once read that we shouldn’t use 100% black and 100% white, so the background color is #fafafa not #fff and the text color is #444 not #000. Very subtle. I think I integrated some concepts from The Elements of Typographic Style, like the recommended character width of a paragraph, but I honestly don’t remember. The homepage also only shows a single article. Simplicity. There is no built-in search, and that’s totally intentional.
Contents
The topics I write about changed over time. The blog started as a daily or weekly journal, simply writing down whatever I had been up to. One big recurring theme was the Army. A couple of weeks after the creation of the blog, I had to do my second compulsory 4 months military service. One way of killing time — there were no smartphones and ubiquitous Internet in 2002 — was to keep a journal. A paper one obviously, that I had to transcribe later on. I also wrote a lot of short posts with links to interesting stuff on the Internet. Before writing this summary, I wanted to find out how many dead links[2] I had in the whole archive. I couldn’t find a simple script that I could run locally (I don’t want to do it via an free online tool). I guess the link rot on plothole.net could easily be in the 80% range.
Another metric I wanted to get a grasp of is how the post length has changed over time. I simply ran ls -l on the Markdown files and dumped the octet size output into a spreadsheet:
Zoomed in on the posts shorter than 10ko:
This methodology has the obvious flaw that it treats everything in the Markdown files equally: actual content, metadata, HTML/JavaScript snippets, etc. It still gives a good overall idea. The 2 outliers (where the length really is content) are the aforementioned CA-TX trip from March 5th 2011 and, still one of my favorites, Bike messenger from March 1st 2015.
After quitting Instagram in 2019, I decided to import all the posts to my blog. The result is a whole series of very short posts between October 2010 and February 2014 that were “artificially” added, as the blog didn’t exist during that time span. I’m still considering doing the same with select Facebook posts. I quit Facebook in 2019 too, and was quite active there for a couple of years. Having my Strava activities, including pictures, on here would be nice too. Somehow automated, as I’m still actively using Strava. During the blog’s 2010–2014 hiatus, and even a bit beyond 2014, I kept a personal journal on Day One. I could import some of that too, or maybe all of it? We’ll see.
So, ignoring the swarm of super short Instagram-imported posts from 2010 to 2014, you can definitely see that I wrote way more in 2002–2008. But again, a lot of those are short posts written with very little time investment. Unlike most recent articles that take many many hours to write and sometimes code, and weeks and months to plan or draft.
Future
For quite some time, my goal for plothole.net has mostly been to be something I can look back to in 10–20 years and have fun reading and remembering. Pretty selfish, eh. It’s much less about other readers than it was in the past, although I much appreciate every single one of you bearing with me. Having an audience (unknown, by choice), however small it is, forces me to keep going and have a decent “quality”. Right now, I’m also trying not to explicitly link plothole.net to any of my few remaining profiles (LinkedIn, Twitter, etc.) and made separate copies of posts referenced in my resume. This effort could very well be in vain…
I haven’t yet run out of posts ideas. What’s mostly keeping me from writing more frequently is just laziness. In recent years, I’d rather jump on my bike after a work day, than spend another couple of hours in front of my computer. Although I do spend a lot of unproductive time on my iPad. So maybe just a lame excuse. Technically, there’s a bunch of tasks I should tackle at some point:
- not use 10 years old CSS for the layout
- have a dark theme
- integrate an image optimization step in the static site generator
- automate the site generation, for example with Github actions, so I’m able to blog from my tablet or phone
- display the (existing) comments on (existing) posts (but not re-add a commenting system!)
And the list goes on.
Anyway. Thanks for reading! For more of my ramblings, have a look at the past or subscribe to the future[3]. Cheers!