Rebuilding a throwback ’96 website with modern web technologies

By: Nick Berens / geek & creative @ wisnet / July 21, 2021

The story of wisnet96.com

and how I learned a modern tech stack cuz I thought it’d be funny.

It’s 2021 and The Geeks & Creatives of wisnet are celebrating 25 years of building websites! To help commemorate, the team asked me to rebuild the original wisnet.com website from 1996. You can view the original on the Wayback Machine

And yes, it was absolutely amazing. Designed and built by our founder Rick Kolstad!

Into Development

As I was setting up my development environment to start coding the project, it got me thinking about how far internet technology, and the tools we use to build it, have come. From the code editors like Homesite to programming languages like ColdFusion.

That’s the point where I thought “Hey, it would be kinda funny to rebuild a website from 1996 using modern web technologies!”

Our team has been moving more and more towards JavaScript-powered applications, so I figured this would be a great way to level up. 

Below are some of the core tools we use and that I used to create wisnet96.com. Fair warning, it’s littered with industry jargon.

Vue.js

Vue.js (pronounced view) is a progressive JavaScript framework that allows us to quickly develop single-page applications (SPAs) that are easily maintained while using its components and reactive features, such as reactive interfaces and data binding.

You can think of core Vue components as Lego bricks that are composed to create the user interface of your application. A Vue component will listen and react to the data of your application and adjust its state or appearance accordingly. This data-based approach leads to scalable and more maintainable code unlike older JavaScript solutions like JQuery (I’ll always love you JQuery) that manipulated the DOM directly and had a tendency to lead to codebases that didn’t scale well and were prone to bugs.

So I built out wisnet96.com using Vue.js components (which was clearly overkill seeing as how it was such a simple site). I showed the project to my teammate, Michael, and he agreed it was pretty funny and then asked where the content was coming from. I had simply hard-coded the content into the Vue components. He suggested taking it a step further and getting the data using WordPress as a headless CMS.

Headless CMS?

Basically this means using a content management system such as WordPress only to fetch data. Typically with WordPress, the UI templates and data all live in the WordPress environment and you can’t have one without the other.

The beauty of a headless CMS approach is that your frontend and backend are completely independent of each other, so the data coming from WordPress could be consumed by several independent frontends.

You could have an iOS app, an Android app, and a web app all getting their data from a single source. So if you update some content in your WordPress CMS, that new content will be updated in your iOS app, Android app, and web app. There’s no more need to update the same content in 3 different codebases!

Vue can certainly handle consuming that data from WordPress, but as always the Vue community has a better way! Enter Nuxt.

Nuxt.js

Nuxt.js is a frontend meta-framework built upon Vue.js that offers great development features such as server side rendering, automatically generated routes, improved meta tags managing, and SEO improvement.

SEO has always been an issue when dealing with single page applications that need to be indexed by Google. With Nuxt, you can enable Static mode. During the build step, Nuxt fetches all your API calls (in this case from our headless WordPress install) and outputs the results into completely static files with proper meta tags so Google can properly index your site. 

Since the pages are all rendered into static HTML pages, your site is going to load incredibly fast. In a traditionally-rendered website, when a request is made to get a page, the server must first assemble the page from a database before it can return the page. With a page already rendered during the build step by Nuxt, that data already exists, so on a page request there’s nothing more to do but serve up a static HTML file. It doesn’t get faster than that!

Ok, putting the project into Nuxt and setting WordPress as a headless CMS was complete. Now where to host it?

Netlify.com

Netlify is an “intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.”

We use Git for version control at wisnet. With Netlify, the GitHub repository for your app is connected to your Netlify account. So when you push to your repo, Netlify automatically pulls in your updates and triggers the build defined in our Nuxt app. 

Since the end result of that build is nothing but static HTML files, Netlify now distributes your app across their global CDN Edge network. Which means if someone in Japan requests a page from your app, that page will be served from their nearest data center.

So I got Netlify set up and ready to host wisnet96.com. One of my favorite features on Netlify is that on every build, they create a deploy preview URL for that particular commit which they save indefinitely, so you have a complete history and preview of all the changes that have been made to your app! Here’s an early deploy preview of the wisnet96 site

Project Complete?

Nope!

On the original wisnet site from 1996, there was a “Make a Page” feature. Enter in your business information, a logo, and some other options, and it would create your own website! Pretty sweet for 1996. 

“Make a Page” feature from wisnet.com in 1996.

I was discussing wisnet96 with my teammates Joe and Michael. Joe jokingly said we should bring back the Make a Page feature. Michael and I decided this would indeed be funny and proceeded to build out this feature in the wisnet96 revival project.

The idea being that our clients, or anyone for that matter, could help us celebrate 25 years of wisnet and get their own throwback 90s-styled website to share on social media and such.

Then the wheels fell off

While researching the wonderfully absurd world of 90s website design for the templates that would be used for the Make a Page submissions, I kept coming across images of the old Windows 95 operating system and started feeling pretty nostalgic. So yep, I decided it would be pretty great to build a Windows 95-inspired website where you can not only view the original wisnet site from 1996 in an IE-inspired “browser” but also submit and view the Make a Page submissions, all in a Windows 95 desktop-style environment. 

Sounds reasonable for a project that was supposed to take about 4 hours right? Well about 289 hours later (mostly nights and weekends, so calm down, Joe), wisnet96.com was finally finished in all its ridiculous glory.

It’s a Wrap!

This was easily the most fun I’ve had working on a project, and I feel so fortunate to work with a team that encourages and gives you space to explore and play. The project is all sorts of silly, but I learned so much about modern web development tools and technologies. 

After completing this project, I really believe wisnet is on the right development path and will be able to better serve our partners by providing them with solutions to their needs that are more secure, scalable, and performant than ever!