Site Revamp

Friday, 15th November 2024

Just look at the difference in the screenshots above! Amazing! Ah ok I admit it, this is a load of work I did where everything looks exactly the same and most people won't even notice the change. Eh well.

But, I have revamped the site quite significantly, in the way it functions.

This all started last week when I did a blog entry about using an XMLHttpRequest and document.write to create a sort of "template" system for your site, so that you don't have to duplicate your navbar and layout across multiple files, thus making it easier to develop your site.

I do already have a solution for this called Static Ultra. But after writing that blog entry I just... really appreciated the simplicity of it. It got me wondering if I could make the development of my own site simpler, and how I would do it. Cut a long story short I ended up re-coding most of my site. Anyways, here's the things that have changed.

Proper responsive design

Before, I effectively had two layouts in one. One for mobile, and one for desktop. I used JavaScript to detect the window size and switch to the appropriate layout, moving the important page elements into it in the process. But that's not true responsive design, it's more like adaptive design. Now I'm using proper CSS media queries and adjusting elements. JavaScript is now ONLY used for the hamburger menu on mobile. The CSS is a lot simpler both as a result and because I tried to simplify it in general. So that's nice.

XMLHttpRequest + document.write()

Warning: If you don't like synchronous XMLHttpRequests or document.write(), you're not gonna like this lol. xD

The way the site now works is basically the same as the tutorial linked above with a few extras. The template/theme, navbar, and basically everything that's common to all pages are all in index.html.

At the start of the HTML, in the head section, I get the URL, read the value of the ?page=XXX parameter, and then do a synchronous XMLHttp for that individual page.html and store it. Later, in the body section, I document.write() the loaded page out in the HTML at the right place.

If a user visits one of those pages directly, that page redirects to the ?page=XXX variant. The nice thing about this, is I can use that page to do the social media meta tags for the content.

Simpler JavaScript

I've got into a new pattern of organising my JavaScript which I've applied to everything on my main site. I'll just demonstrate it with some code:


	// Create a namespace for script
	var someScript = {}

	// Init script. Called below so script triggers when loaded
	someScript.init = function()
	{
		// Make a shorter local variable for accessing someScript
		var o = someScript;

		// Declare some variables (properties) in someScript
		o.someString = "Some String";
		o.someInt = 27;
		o.someFloat = 1.23;
		o.someButton = document.querySelector( ".someButton" );

		// Add event lister to some button
		o.someButton.addEventListener( "click", o.onSomeButtonClick );
	}

	// Function which alert()s the variable values
	someScript.sayHello = function()
	{
		var o = someScript;

		alert( "Hi, someString=" + o.someString + ", someInt=" + o.someInt + ", someFloat=" + o.someFloat );
	}

	// Called when some button click. Call sayHello
	someScript.onSomeButtonClick = function()
	{
		var o = someScript;

		o.sayHello();
	}

	someScript.init();

So the above demonstrates basically namespacing your JS for more organised code. My previous approach was usually to use a class per script, but I like this way better.

RIP Static Ultra?

Nah. Static Ultra still does everything it says on the tin and it did me proud for a long time.

I'm also not even certain I'm 100% happy with this new way of doing things. There are some drawbacks to it. One example being sometimes you get a blank screen for a brief moment when you visit a new page due to the XMLHttpRequest being synchronous. Static Ultra's way of doing things doesn't have this problem.

One thing is for sure, I plan to follow up the previously mentioned tutorial with some more tutorials, explaining how it all works.

I may even incorporate this stuff into a new version of Static Ultra at some point.

So if you're considering using Static Ultra, I'd still recommend it, but you may want to hang on for the tutorials instead.

Why Do all This?

Ah I just enjoy it. Trying new ways of site building etc. That's what Neocities is all about, right?