Leveraging the Conventional Website

[Acorn]

I can see the place for (A) Scrolling websites and for (B) Presentations.
Where we have had no real debate is around the (C) Transitions website type.

All three types roll up the pages into one HTML file.

1. This makes the initial payload very large.
2. You also lose control over achieving different Pasteboard backgrounds, without reverting to coding for them.
3. The final killer for me is the crude Xara hash addition to the URL address (#xl_xr_page_<page-filename>) so that every page appears to be just index.htm(l).

I can live with A3 & B3 but the other combinations have no real excuse.

I am proposing an alternative for C1 by using a (D) Conventional website instead.
My argument is that with good design and modest bandwidth speeds, there should be little difference in presentation for a D-site to a C-site.
I could further argue that D1 << C1 as the download of images on other pages is deferred until that page is required.

ASIDE: I will include the following code, without explanation just yet, that appears counter-intuitive as it fetches and preloads all the images of a D-site into cache in one go:

<script>
//Page code (head) ==>
async function main() {

xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;

afile = await fetch(xrfls);

asite = await afile.text();

images = asite.split('\r\n').filter(x => x.search(/\.jpg|\.png|\.webp/) > 0 );

}

main();

function preloadImages(array) {

if (!preloadImages.list) {

preloadImages.list = [];

}

var list = preloadImages.list;

for (var i = 0; i < array.length; i++) {

var img = new Image();

img.onload = function() {

var index = list.indexOf(this);

if (index !== -1) {

// remove image from the array once it's loaded

// for memory consumption reasons

list.splice(index, 1);

}

}

list.push(img);

img.src = array[i];

}

}
</script>

<script>

//Page code (head) ==>

preloadImages(images);
</script>

It is fun running this in the browser dev tools > Application > Frames > Images and watch them all appear.

As a first step, I will only be describing how a page access in the D-site can have a Transition Effect.
Here is an example D-site of two pages: The Ultimate Conventional Website - Step 1.xar.

• Check the simple CSS code in the Website Code (head) - all it does is when a page of the D-site is loaded an Transition is applied to the HTML body Tag.
• On the second page, I have overridden this with a Page code (head) of similar CSS.
• You can experiment with different effects for the entire D-site or specific pages.
• To see what happens, Preview the D-site and click the Navigation Arrows.

This is the very first Step and all it does is run an Effect on page load or paging in. Later, I will call this style pagein.

As I am using Xara's predefined Effects, these require the jQuery Library and another JavaScript file to be loaded; you achieve this by simply having one shape somewhere on your site Sticky.
I made the Navigation Arrows Sticky but you could Stick a Transparent shape if you wanted.

A C-site has more than a pagein effect but we have already achieved an improvement for D1, D2 & D3.
We need a page-out effect, which can be very messy with a D-site but I have a simpler workaround.
The next Steps will involve asynchronous fetches, a page-out Effect mechanism and other triggering features that a C-site offers.

Acorn