This Very Website
Motivation
Among all of the projects that I have worked on, I have somehow been able to avoid learning anything about websites. I perform the occasional inspect element to avoid a paywall but other than that I have been completely naive to the complexities of creating, maintaining and hosting a website.
While I could continue in my ignorance as I have no real need for a website, I have dedicated some time to learning the basics of web technologies. This seems like a reasonable place as any to document some of the things I have learned.
Learning
After some searching I was led to the MDN Web Docs at the recommendation of a helpful reddit post, specifically the MDN Learning Area section. I have typically preferred lectures over written media for learning but this documentation is well structured and provides just enough information for the reader to understand and the basics and know how to learn more.
The guide has three introductory sections on HTML CSS, and JavaScript followed by more in-depth sections on specific topics like accessibility and the tools available for more complex web development. I completed the first three sections over the course of a couple weeks and I found the topics quite engaging. There is quite a tight bond between the HTML and CSS of the page and I found it extremely interesting how they combine to create the static and dynamic components of a webpage. There is far less HTML involved in the complicated layouts and responsiveness than I expected but it is made up for with CSS. For Example, the CSS of this website makes up roughly 40% of the code(by lines), even considering my verbose and likely repetitive CSS. This was quite the revelation to me but it becomes apparent looking at the layers of inherited and overwritten CSS properties.
This is all before even covering JavaScript and the abilities that it gives to manipulate the website. I am not terribly interested in delving into the full capabilities at this time but I do find even the basic DOM functionality intriguing. If/when I decide to develop my website further this is the area that I will likely focus my efforts as it seems to be the way to enable the more advanced features of a webpage.
Beyond the MDN Web Docs, I spent many an hour googling how to correctly apply CSS and predictably how to centre a div. It was inspiring to see all of the unique patterns and interactions that people have embedded into their pages but I've decided against fully embracing objects flying across the screen. Another part of HTML/CSS programming that I found interesting is that if there is some component that you want from someone else's page, you can just copy it directly from the source and embed it in your own page. If even that is too difficult, you can likely find some tutorial covering how to make it from scratch. In the spirit of keeping this site my own I have only implemented features and components that I wrote myself and I am more proud of this site for it. I don't think this is any great achievement but it is what I am capable of and if I feel the need to add more features in the future then it will be a good motivation to further my understanding instead of just knowing enough to paste in someone else's work.
Result
The result of my web adventures should be clear, while humble, I consider it quite the success. I don't consider myself a designer but I think that the structure is intuitive and navigation is clear. The colour palette could use some work but overall the aesthetics are pleasing to me and they remain pleasing on a variety of screen sizes and shapes.
Photography
I enjoy taking the occasional photo - apparently I am particularly inspired by golf courses - so I decided to dedicate a page on this website to the display of some of my favourite photos. Nothing here is worthy of publishing but noone can stop me from putting it on my own site and it gave a good opportunity to play with images and create a very simple CMS.
One of the most important things about the photography page for me is that it will provide the full resolution image while on a large display while maintaining visibility on a small one. This is just a basic tenet of responsive design but it is a critical aspect of the photography page as I expect most viewers of the page to be on a mobile device. To this end, I set the photos to display a maximum width of 100% but also limited the maximum size to the width and height of the viewport. This gives the maximum size possible but will ensure that the user will always be able to frame an image to completely fit on the screen. I believe that this is the best balance of displaying the full size of the image and maintaining readability.
Soon after creating the photography page I discovered how much of a hassle it is to manually update the HTML of the page each time I wanted to add a photograph. I used my new found JavaScript skills to create a small script within the page to read the contents of a .json file as seen below.
fetch("/photography/photolist.json")
.then( (response) => response.json())
.then( (data) => {
generatePhotos(data.photos);
})
.catch( (error) => {
console.error(error);
failedRetrieval();
});
function failedRetrieval() {
document.querySelector("div.content > p").innerHTML
= "The photos did not load.";
}
function generatePhotos(photos) {
console.log("File read.");
const content = document.querySelector("body");
var photograph, caption;
for (const photo in photos) {
// Create and format image, append to body
photograph = document.createElement("img");
photograph.src = photos[photo].src;
photograph.alt = photos[photo].alt;
content.appendChild(photograph);
// Create caption
caption = document.createElement("h4");
caption.innerHTML = photos[photo].caption;
content.appendChild(caption);
}
const hr = document.createElement("hr");
hr.classList.add("fade");
content.appendChild(hr);
}
The short script above will read a JSON file with the format shown below. This allows me to simply update the JSON file with the relevant fields and it will be loaded along with the other images when the webpage is requested.
{
"photos": [{
"src": "/photography/photos/0001.jpeg",
"alt": "Photo 1",
"caption": "Photo 1",
"identifier": 1
}, {
"src": "/photography/photos/0002.jpeg",
"alt": "Photo 2",
"caption": "Photo 2",
"identifier": 2
}, {
...
}]
}
I am not sure how absolutely impressive it is but I am definitely thankful for the ability to generate the HTML without having to write it all myself. The next issue is that it also isn't necessarily that convenient to manually edit the .json file...
This is the perfect opportunity to run away from web development and instead get confused by pointers. In a tale as old as time I decided to save minutes fiddling with JSON by taking a few hours to write a CMS to add, remove, and edit the photo items in the JSON file. Hopefully it is justifiable in the long run but if not, it was enjoyable to write.
The program reads the existing JSON file and then requests an action from the user: add photo, remove photo, edit photo, list photos, or quit the program. The parsing of the .json file is done using the cJSON library. This library also provides a plethora of functions for modifying and eventually writing the JSON object once it has been parsed.
The available actions of the CMS are displayed as in the menu below, then there are further opportunities for selection depending on the selected action. Add, remove, and edit ask for some combination of the photo ientifier, src, alt, and caption while the 'List Photos' option simply lists the photos present in the JSON structure. All of the actions are made to a JSON structure in memory and when the user is finished they can 'Write and Quit' or 'Quit Without Saving'.
Please choose an option:
[ a ] - Add Photo
[ r ] - Remove Photo
[ e ] - Edit Photo
[ l ] - List Photos
[ s ] - Write and Quit
[ q ] - Quit Without Saving
Input:
The listing of photos is as below, the other paths are significantly less interesting.
------------------------------------------
Photos in 'photolist.json':
Identifier: 1
Caption: Photo 1
alt: Photo 1
src: /photography/photos/0001.jpeg
Identifier: 2
Caption: Photo 2
alt: Photo 2
src: /photography/photos/0002.jpeg
Identifier: 3
Caption: Photo 3
alt: Photo 3
src: /photography/photos/0003.jpeg
------------------------------------------
The version of this program as of writing this article(2022-08-05) is included below. It is worth noting that while this tool is not fragile, it has been designed with the consideration that I will be the only user so there is minimal input verification or filtering. There also aren't many considerations for failing gracefully but at the end of the day the data isn't written until it is explicitly requested so loss of data is unlikely.
In summary, I enjoyed writing this tool, I am very thankful for the JSON library, and I hope to take enough photos to make the development of the tool worth it. I think I will actually revisit this tool in the future to make it more robust and potentially include a couple other functions such as reordering of the photos or refactoring the indices as with enough photos added and removed they may get out of hand.
Upgrades, People, Upgrades
As previously mentioned, one area where I would like to improve on this project is the solidifying of the photography CMS. This is an area of interest for me and the possible inputs of the CMS are of limited enough scope that I believe I could make it bulletproof. It currently will reject any invalid inputs for the menus and there aren't any obvious buffer overflow risks but fixed input buffer sizes could eventually become a limitation and there is very little checking if the calls to the cJSON library were succesful.
The website also has some areas that could use some improvement. The most noticable component to me are the elements that are common to each page. I implemented these into each page individually as I was built the website but later found more efficient mechanisms that allow you to share these elements across multiple pages. The simplest implementation of this that I have found is to use iframes but there are alternate methods like using JavaScript, jQuery or even server side includes.
If I feel inspired to further develop this website I will likely invest some time into learning a web framework. That is an entire world that I have peered into but just enough to see how much more powerful and complex it is. It is a worthwhile venture when I upgrade this website in the future but I'm sure it will take a while to learn as I don't think I have even fully grasped the concept yet.
Beyond these technical upgrades, there are always things to improve about the design and layout of the website. I will likely update these elements at a leisurely pace and hopefully develop a better colour scheme.
Conclusion
I have completed my task of learning the very basics of HTML, CSS, and JavaScript and at this point I am satisfied with the humble result. I think I have succeeded in gaining a functional knowledge of the very basics and more importantly I now know what I don't know. There are additional sections in the MDN Web Docs further covering client-side and server-side frameworks, I think that this will be the the area in which I focus any future investigation as they seem necessary for the implementation of more complex websites.