Site Commentary

Developer commentary detailing the development and design of my website.

Introduction #

I’m excited to announce that I have made some significant updates to my website. In this article, I will discuss the revamped site’s design choices, development approach, and technical aspects.

By sharing my thoughts and development decisions, I aim to offer valuable insights to fellow developers and help them understand the site’s functionalities, inspiring ideas for their own websites.

Transparency #

I have described the features of each page and element, transparently detailing the usage of supplementary technologies like JavaScript and LocalStorage and how I have implemented them to align with my development philosophy.

Previous article #

I recommend reading my previous article on this site’s development for those who have yet to do so. It provides a comprehensive overview of the technologies used in building the site, including functions of the HUGO static site generator and its significance in its development.

Pages #

Homepage #

The homepage, designed with simplicity and user-friendliness in mind, is one of the most straightforward pages on the website. It uses a range statement to display a list of the latest articles on the site, along with their titles and publication dates. The page is responsive, adapting to smaller screens, and serves as a fit, welcoming first page for the visitor.

About me #

This page is just a simple Markdown file.

Contact #

The contact page, a testament to the site’s interactive yet static design, begins as a basic Markdown file but goes on to incorporate custom HTML, CSS, and JavaScript. It features an interactive contact card grid, where each card offers a different contact option and reveals additional information in a pop-up when clicked.

The contact cards are styled to resemble business cards, and their data is parsed from a JSON file that includes names, descriptions, icons, and colours.

Clicking a card triggers a pop-up displaying the contact details, usually featuring CSS-styled SVG QR codes that align with the site’s theme and design.

The site still functions statically using HUGO with no backend. JSON data is parsed and processed at build time, eliminating the need for server-side processing.

Articles #

The articles page, a showcase of the site’s static functionality, displays a list of all articles on the site. The articles are sorted in descending order and grouped by year, also in descending order, which makes them easy to browse chronologically. HUGO performs all the necessary logic, including loops and rules, at build time. As a result, the site remains completely static, with no need for any client-side or server-side processing.

Tags #

The tags page displays a grid of all the tags used by articles. If you click on a specific tag, a list of articles associated with that tag will appear. This display works by looping through all the tags and displaying their details in the form of a grid item.

Search #

The search page features a search box to help find any article on the site by typing in a text query. Here’s how it works: all articles, including their title, description, summary, and searchKeywords, are loaded in but are hidden. When you enter a query into the search box, if matching articles are found, relevant pieces of them are dynamically unhidden, appearing as search results below the search box. The displayed articles are dynamically updated as the search query changes. If no article matches the query, a message is displayed indicating that no results are found.

The search method is based on the article’s title, description, summary, and searchKeywords. While most of these attributes are visible elsewhere on the site, searchKeywords are invisible and are only used by the search feature. searchKeywords are words loosely associated with the article; if your query is close to matching a keyword, the article it is associated with will be in the search results.

The method of searching using JavaScript was inspired by Luke Smith’s website based.cooking, a website that follows a similar reasoned and minimal development philosophy. This inspiration connects us to a larger locale of developers who value simplicity and minimalism in their work.

The search function utilises minimal JavaScript (about 50 lines), which aligns with the site’s development philosophy.

Article Content #

Article content pages are primarily Markdown files. However, at the top of each article, you will find some additional information about the article, such as the title, description, and metadata. You will also see the table of contents (ToC) and tags displayed using the HTML element details/summary by clicking it.

Although it may not seem like it, no JavaScript is used here. Everything is built with static HTML and CSS, taking advantage of CSS transitions for a smooth shift between collapsed and expanded.

404 Page #

I made the 404 error page a more useful one by incorporating the articlesLatest.html element from the homepage. This allows visitors to easily access the latest articles even if they land on a page that would otherwise not exist.

Elements #

Header #

The header prominently features a set of icons used throughout the site. The header buttons are designed to be user-friendly, informative, and pleasant to click. On smaller screens, the header adapts and appears differently, taking on a more mobile-app-like appearance and providing larger touch targets.

Footer #

Aside from the theme selector, the footer is nice and simplistic, utilising CSS’s space-between style rule. As for the theme selector, it is a menu consisting of descriptive icons used to switch between different site-wide themes. When you click on the palette icon, the theme menu appears. There, you can choose between a light or dark theme. Alternatively, you can use the eraser button to reset your selection and revert to your browser’s default theme.

The theme system is the only part of the website that uses LocalStorage. LocalStorage is not used unless you manually choose to use the theme selector, and if you do, the data stored in LocalStorage is limited to the theme selection. The theme menu uses simple and minimal JavaScript to show and hide the menu and swap stylesheets.

Use of client-side technologies #

I’ve compiled a list detailing the usage of client-side technologies like JavaScript and LocalStorage for transparency, as sites often misuse these to track visitors.

JavaScript #

LocalStorage #