For a while I’ve been wanting to update my website, but I’m really not a designer and I knew any attempts to improve on what I already had would be a haphazard mess.
I was looking for a new job as a React developer and really wanted to hone my skills, so I thought what better way than to build a new site in React?
As for design… why not pay homage to one of the most influential operating systems of my youth: Windows 9x. And for fun, why not make it all fit on a floppy disk.
The rise of retro nostalgia
Windows 9x is the loose name for the operating systems from Windows 95 through ME. They were pretty shoddily built on top of MS-DOS and kinda sucked. But they were revolutionary at the time, and we didn’t know better.
The design aesthetic, particularly in the Windows 98 era was something to behold.
when UI design was interesting: never forget pic.twitter.com/xjtF42I2Rv
— Jon Gold (@jongold) August 16, 2019
In present day, retro tech is really making a comeback. One of my favourite examples of this is Paul Verbeek-Mast’s horrible excellent website which was kind of an inspiration for me through my design process.
But there are plenty of other amazing examples of retro nostalgia including the gorgeous poolside.fm streaming radio, and this fun game concept:
OSを起動して、ロードバーをフルにするとマシンがアップグレードするだけ。
でもやっちゃう。 pic.twitter.com/1YenQzXrt4— 寺島壽久/ゲームキャスト管理人 (@gamecast_blog) August 17, 2019
I spoke about this stuff at the October QueerJS meetup in Amsterdam.
So far @AshKyd s talk is one big blast from the past, reminding us how the web looked like in the 90s pic.twitter.com/YC0nLxjhFd
— QueerJS (@QueerJS) October 2, 2019
It’s running on a floppy disk you guyz
Ultimately the entire site is designed to fit on a 3.5″ floppy disk, attached to a Raspberry Pi running nginx, sitting on the shelf under my TV.
That means the entire site is 1.44 mb (or less) at any given time, and served to you straight from the ’90s.
The site is using Hexo to render out the static content, which includes a bunch of custom theming to make the data hook together nicely.
It’s also using Netlify for builds and Cloudflare as a CDN, so chances are you’ll never actually have to wait for the magnetic drive to spin up. But you never know! I get a little thrill out of that.
Update: this is back on Netlify while I’m at Fronteers Conference since I don’t have time to put the pi back together.
React & open source
This site was largely built with Preact (A fast 3kB alternative to React with the same modern API). The content is built with Hexo then progressively enhanced, so you can disable javascript (with the skip link for accessibility, or in the Start menu just for kicks) and the site still mostly works.
The interface is inspired by the more nostalgic bits of Windows 98 and ME, which were my operating system of choice in my more formative years.
If I’m honest, this was a terrible choice because the (p)react lifting state/render model is not great for large applications like this, and I led myself into an architecture that’s super inefficient and hard to maintain. But at this point I dont care, it’s working pretty well.
The UI components and some of the apps have been released on Github as a library called ui95. It’s a bit rough but you can use the library to create your own sites, apps, or just as a learning tool. Interestingly Artur Bień has been working on a parallel component library of Windows 95 styled components as well, so that’s probably worth a check-out too.
Some apps were built by third parties, including Paint and originally I was planning on including Webamp but it was too big to fit in my size budget. You can check each app for license information.
Where to from here?
Not sure. I’d like to post more on my blog and maybe find a local computer group.
But in seriousness, this was a fun project and I learned a lot putting it together. I hope you get some inspiration out of it and bring back a little of the whimsy in the retro web.