loading html from external files
so i want to break down my home page into smaller chunks of html while still displaying it all on the same page, and i'm going to use javascript to do it.
im sure lots or people have done this before and many will do it again, but this is my version.
why?
- smaller files are more manageable and more easily-updatable
- i'll be able to use snippets of code (like my button wall and unsorted links feed) on multiple pages without duplicating the content
other ways to do it
- server-side scripting using a language like PHP or
PERLPython (not available on static hosting providers like Neocities.) - server-side includes, available on Nekoweb and other hosts, but sadly not Neocities.
<iframe>. a pure-html solution, but not really because i'd still have to use javascript to control the size (if i want to avoid having loads of those scrolly boxes all over the place.)- static site generation (i.e. automating the build of your web site before you upload it.) i'm not using one, though, so probably won't do it this way.
- use JavaScript templates, as (excellently) described by petrapixel. yeah, i could do that but this is content not extra navigation and it seems weird to have it all wrapped up in code.
so what im going to do is:
- move the content to smaller, stand-alone html files.
- load the html files using javascript
fetch(im already using it for my updates feed which is XML, but the technique should work the same for HTML) - insert the loaded html code into a div on the page wherever i need it.
considerations
- simple configuration: makes sense to try and make it as easy as possible to add to new pages.
- non-javascript fallback: as with anything js-powered, there needs to be some sort of alternative if the visitor has javascript turned off or the code fails at runtime for some reason.
- it would be cool if the master snippet pages were actually visitable (if not necessarily pretty) by their direct url. because, you know, that can act as the no-js fallback.