This particular webpage is different from the main one in that almost all components are dynamically loaded rather than just being static data on an html file. This webpage is modularized to make it easier for me to add, remove, and edit my list of projects.

To accomplish this, I used a lightweight templating framework called HandlebarsJS. The idea is, instead of having all my data stored in the HTML file, I would instead store it in a .json file, called projects.json

I have two HTML files, one main HTML file (index.html), and a panel template (projectviewer.html).

My main html file would contain all the necessary header tags, some div tags to identify where each thing goes, and all the required scripts for loading the page.

My template file would have all the required HTML tags for a project panel, but with all the data missing. In its place, is Handlebarjs code, to identify what kind of data should be put there.

My main handlebar.js script (handle_it.js), has a loop, where for each project in the .json file, it would fill out a panel with the appropriate data, and append it to the main document.

One of the most frustrating issues I had, was when my Handlebars.compile function would refuse to fill out the data in the panel.

I eventually figured out that it was because the script was being executed too early. Since my page was dynamically loaded by javascript scripts, the panel that contains the handlebars template didn't finish loading before the handlebars script executed, so handlebars had nowhere to put the data in the first place.

I solved this issue in two ways. The first way I did it was, instead of dynamically loading my Handlebars template, I simply included the template in my main html file (I made a new file called oneFile.html). But, I was not satisfied with this result, since I wanted the whole page to be as dynamic and modular as possible. Instead what I did here, was that I would put all my loading scripts into a single document.ready function, to make sure they are loaded in order. You can see my loading script here: suchdynamic.js