Jump to navigation
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...
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.
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?
- Large websites, images in mega byte sizes, and scripts as well
- Custom fonts, bringing even more of that delicious load time
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.
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.
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.
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.
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
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.