Peace to you!
In this series, my first ever on DEV, I'll be breaking down some of the details behind one of my favourite website templates, Peacekeeper! This series is largely aimed at beginners, but anyone can benefit. Plus, your feedback is welcomed, because there's always room to learn and grow!
First, I'd like to start by explaining what Peacekeeper is, beyond what's immediately obvious of course.
This means that though there are multiple source files for each "tab" in the page, there is only one functional "page" from an end-user perspective. Though an end user can view several "sub-pages" (for want of a better term), they never actually need to navigate away from the landing page. This approach has a number of advantages, but also some disadvantages, which you'd have to weigh if you're taking this approach.
I've tried to identify a few below.
- No reloading.
- Faster load times (for most things at least).
- Most necessary resources are already loaded when new content is displayed.
- Potentially easier to manage (from a dev perspective).
- Everything feels self-contained.
- (Optionally) everything can be placed in one HTML file.
- Tabs cannot be accessed via links (this can be worked around).
- Noticeable delay when loading large or complex tabs.
In Peacekeeper, I did not choose this specific approach, but that's on purpose — because seeing as it is a template, I decided to keep to the basics.
All of this will be examined and explored in more detail going forward, and I'm pretty sure the DEV community will it useful!