Cherry Hau
Creating a flexible page in which I can add all of my future projects.
My project page was a matter of great consideration, as while it would be simple now, it would need to grow to fit all my future work. This meant that I wanted to make it flexible, and easy to add more projects to.
I decided to research ways to host data that I could reference in my webpages. I knew that I needed this file to be able to hold multi-dimensional arrays, with data types of strings and bools. I found that a possible choice for this was to create a JSON file. This allowed me to create an associative array of all my projects, and within each, to store strings of data for the title and subtitle to name a few, as well as an indexed array of tags and image links.
Originally, I had used indexed arrays for both, but quickly found it was difficult to understand which project I was referencing with numbers - and that was with only a few projects. Instead, using an associative array for the projects meant that I could reference projects by using a string as a key, while still using integers to reference images and tags which did not require string keys. This made it a lot easier to understand what I was doing when referencing the JSON.
After creating this, I needed to pull the values into my HTML file. The Mozilla Docs achieved this by using JavaScript, using the XMLHttpRequest function. This allowed me to convert my JSON variables to JavaScript variables which I could then reference and write to my HTML document.
I did this by iterating through the projects in the array and using jQuery append to write each project to the HTML container.
This worked well, but as JavaScript took a moment to load, lazy-loading listeners were not correctly added to project images, leaving them showing their placeholder images.
This along with other problems with writing to HTML from JavaScript, I decided to look for alternative methods of referencing my data. This led me to find a new file type, PHP.
This could be written much like a regular HTML file, but with additional features by using PHP tags. By using the PHP json_decode function, I could pull the variables from my JSON directly into PHP and write to the HTML without waiting for page load.
This eliminated the problems of the time that JavaScript took to load, as I could use the PHP to write the variables directly into the HTML. Once again, I did this by iterating through the project array and using PHP’s echo to write each project to the project container.
One issue with PHP is that it needs to run on a web server, so I had to upload my files to test any changes. This was less of an issue using WinSCP however, as it made synchronising changes very quick and painless.