Nostalgia driven web design - iameven.com

I've "recently" updated alander.org, and by "updated" I probably mean re-designed, and by "design", I'm not so sure...

Brutalism

A screen shot of the new alander.org, click for full version

I thought I was being somewhat original, inspired by the ghost of HTML past, but it actually appears to be a trend, and I'm just following along.

It started with Ole sending me a link to gifcities, the web archives project to collect and store GIF animation commonly found on Geocities, a free website editor and hosting platform, eventually bought and closed down by Yahoo. I decided to take freely from this source, unsure about any copy right infringement (and too lazy/inspired to check), to recreate a typical site of that era, 'cause I think they're quite fun. I just wanted to do some HTML, CSS and create most of the design with GIFs.

Feel-good

It is a great feeling to do some small edits and immediately see the changes quickly come together to form a website. Without all the build configuration and setup I'm used to doing for larger projects at work and home. Just a live reloading server, text editor and browser.

Spending at most an hour to collect the GIFSs, everything else went pretty quickly, and I had the text and most of the site done in another hour. I downloaded several versions of every graphic, because I had the idea to randomize all of these, but in the end decided to keep it simple.

What makes the modern web?

But there are some good parts in between all these, and large JavaScript sites, while sometimes slow, do bring applications without needing to install anything instantly to the user. One of the other good things is the connectedness of it all. Not necessarily in the "Internet of Things" way, but access to data through more or less open APIs.

An easy way to sink some more hours into it

I started with Instagram, because I'm somewhat active there (I sometimes post within a month), public, and it turned out to be really easy. There is a path, /media, on the profile page which gives access to the users latest posts as a json file. The node server I decided to run this on has a setInterval on every 24 hours to collect from https://www.instagram.com/deificx/media/ and store to a rethinkdb database. Ideally I should save the images locally but decided to lean on Instagram's CDN for now.

Requiring some more work was the Steam integration, to get my latest gaming habits, I needed an API key, and, in my case, installing a module to speak with the API. But it does more or less the same thing as the Instagram integration. Games played within the two last weeks is one of the things to grab, so I do. And it's a fun thing to have. I decided to store this as a document which I update in rethink and not as separate rows.

I use the same table to store a document on my github data. Similar to Instagram they have a public feed to get, an atom one, which means the only tricky part here was the XML parsing.

I find the mix between brutal design and the modern web to be funny. Maybe because it's unexpected. Maybe because Geocities didn't allow for server side programming/scripting and JavaScript being pretty limited at the time. Maybe it's me-being-silly.

There was room for some interactive elements way back, brought to life through frames and Perl script running as services on someones server somewhere, surprisingly often for free, bringing among other things shout boxes.

Shoutbox

Not being able to help myself, bringing in even more modern, I created this one using React in typescript. React is one of those new ways to do things that just makes sense once you get used to XML like syntax in your JavaScript files. And typescript tries to bring some sanity into the JavaScript world by enforcing types. It's also handy as an alternative to babel-js to transpile ES6 (the most recent version of JavaScript) with JSX (the XML like syntax) to ES5 (supported by Internet Explorer 9 or newer), or even ES3 if you absolutely want to.

This brought me right back into configuration land, webpack and that whole shebang. It didn't hinder me too much, but I had to setup webpack to build two outputs of my shout box. One to be loaded by NodeJS, server side, and one that the browser can use.

This way I got the initial server side render to get a working website if you don't have JavaScript enabled, then enhancing it if you do.

To start with, I decided to setup google authentication to post, but maybe a reCAPTCHA would suffice. It does give me a proper user to track which means I shouldn't see any Spam and I also get proper user names, which is nice, but maybe not in the spirit of shout boxes.

Visitor counter

No nostalgia site would be complete without displaying publicly the amount of clients connecting to the server. Queue the visitor counter, usually somewhere in the footer of the site, using graphics instead of text to proudly exclaim a completely useless number to anyone except maybe the owner of the page. The hardest thing with this one turned out to be finding the graphics, as every search turned up a service which you can install on your site. These still existing sort of surprised me. The other hard part was having the client IP forwarded to the docker container so that I could use a reverse lookup to map where the visitors are from. Not surprisingly, most hits are from web crawlers, spiders and other bots. But they at least do boost that visitor number.

Let's talk about storage

Go me, choosing a technology where the company behind it was bought, and the future of the project uncertain. But rethinkdb is just like mongo, a simple document store, which I happen to find much easier to use. You simply insert a JavaScript Object, if it contains an "id" key, you can retrieve it by that value, if it doesn't, one is created for you which you can use to retrieve the object.

And that's more or less all there is to it. It does contain a live change watcher which I of course had to use in my Shoutbox. Every time a client connects a web socket connection is set up, and if there happens to be changes to the shouts this should instantly reflected to all the active clients. I suspect that this rarely will be seen. It is however how new posts also appear to the user posting.

← 2017 Lynx →