Technology Tales

Add Sub Menu in Hugo Website

Hugo, the static site generator, does not natively support nested menu structures, but this can be achieved through a series of manual configuration and file creation steps. The process involves updating the config.toml file to define parent and child menu items using identifiers, names, URL's, weights and parent references, then creating or modifying a menu.html partial to render the nested structure using Hugo's built-in menu functions.

Styling is handled through custom CSS that manages the visibility and positioning of dropdown submenus across different screen sizes, and a JavaScript file is used to handle menu toggle behaviour for mobile views. Posts can be mapped to specific submenu items by applying matching tags in the front matter of each post, which Hugo then associates with the corresponding tag URL defined in the menu configuration. The approach is demonstrated using the Hugo Mainroad theme, so users of other themes may need to adapt the HTML, CSS and JavaScript to suit their particular setup.

Making Google Fonts Faster in 2022

Optimising font loading performance involves a balance between leveraging existing services like Google Fonts and implementing custom solutions for greater control. Strategies include preloading critical resources to ensure fonts are available early, in-lining essential CSS to enable quicker discovery of font requirements and using tools like subfont to automate font subsetting and optimisation. Hosting static assets on a reliable CDN can further enhance delivery speeds, especially for global audiences. While Google Fonts offers optimised variants and benefits from its extensive infrastructure, self-hosting allows for tailored control over file sises and caching strategies.

However, the decision to self-host should weigh the trade-offs between reduced file sises and the potential loss of shared caching benefits, which are no longer widely available due to browser security changes. Testing performance improvements through tools like WebPageTest is crucial to understanding the impact of each choice, ensuring that any adjustments align with the specific needs of the project and its users.

Tips for Customizing Hugo RSS Feed

Customising Hugo's RSS feed involves overriding its default template to tailor content inclusion. By modifying the template file located at layouts/_default/rss.xml, users can adjust the range expression to include all pages, filter by specific sections such as blog, or exclude non-post pages like section indices. Combining these adjustments allows for precise control, ensuring only relevant content appears in the feed. The final template typically includes metadata, item listings with titles, links, publication dates and content, structured to meet standard RSS format requirements while reflecting the site's specific needs.

R Graphical User Interface Comparison

A detailed comparison of nine graphical user interfaces (GUIs) for the R programming language evaluates each across four categories: ease of use, general usability, graphics and analytics. BlueSky Statistics and R-Instat rank closely together overall, though they differ greatly in their approaches and strengths. JASP leads on ease of use alongside Jamovi and BlueSky, while R-Instat tops the general usability and graphics categories, largely due to its extensive data wrangling capabilities and broad range of graph types. R Commander dominates the analytics category, benefiting from decades of development and 42 add-ons covering statistical, machine learning and artificial intelligence methods.

Each GUI has distinct characteristics: Jamovi offers an interactive interface with Bayesian analysis but limited data management; JASP excels at Bayesian methods but cannot display the R code it generates; Rattle focuses narrowly on machine learning; R AnalyticFlow supports flowchart-based workflows but lacks breadth in analysis methods; RKWard combines a point-and-click interface with an advanced development environment; and Deducer, despite an appealing interface, appears to have stalled in development. The comparison is intended to help users select the most appropriate tool for their needs, whether they are students, statisticians or data scientists.

broken-link-checker

This tool identifies broken links in HTML documents by scanning clickable elements, media references and other specified tags, while respecting robots.txt directives and excluding certain link types based on user-defined filters. It offers both command-line and API-based usage, allowing for custom configurations such as defining accepted protocols, setting rate limits and handling HTTP errors through retry mechanisms.

The package provides detailed feedback on each link's status, including reasons for exclusion or failure, and supports advanced features like checking external sites or parsing sitemaps in future updates. Designed for developers and SEO professionals, it operates under an MIT licence and is available as an NPM module, with ongoing improvements aimed at enhancing accuracy and usability in link validation tasks.

Roll Your Own Comment System for a Static Site

After migrating a personal blog from WordPress to Gatsby, the author found that Disqus, the recommended commenting solution, injected numerous scripts and displayed intrusive advertisements. Rather than adopting another third-party solution with similar drawbacks, the author built a custom comment system in a single day using a Node.js and Express API server connected to a PostgreSQL database hosted on Heroku. While the approach required more initial effort than off-the-shelf alternatives, it offered complete design control, no advertising, no injected third-party scripts and minimal spam exposure. 

The system stores comments against article slugs, supports basic reply threading and includes protected endpoints for moderating, editing and deleting entries. The front end, built in React, retrieves and posts comments via standard fetch calls and renders a simple form alongside existing comments. Though the comment system was removed later due to the ongoing effort required to moderate a high-traffic personal blog, the approach is suggested as a worthwhile exercise for those seeking a lightweight, self-hosted solution.

How to Pre-render Comments | Gatsbyjs Guide

Pre-rendering comments on a Gatsby blog can improve search engine visibility by making dynamically loaded content available to crawlers at build time. The process involves creating a backend API route that retrieves all stored comments from a database, then building a custom Gatsby source plugin that fetches those comments and inserts them into Gatsby's data layer as GraphQL nodes. Once available in the data layer, the blog post template can be updated to query both the post content and its associated comments simultaneously.

On the front end, the commenting component is designed to serve the pre-rendered comments when running in a server environment, while switching to live, real-time comments fetched from the API when running in a browser. This is achieved by checking whether the window object is defined, which distinguishes server-side rendering from client-side execution. The end result is a setup where search engines index the pre-rendered comments at build time, while visitors still see up-to-date content when they land on a page. The approach can be verified by running a local build and inspecting the generated HTML files to confirm that comment content is present.

Build a Node.js, Express, & PostgreSQL REST API

Tania Rascia walks through the process of building a REST API using Node.js, Express and PostgreSQL, then deploying it to Heroku. Starting with local PostgreSQL setup, including creating a user, database and table, the process moves on to configuring an Express server with GET and POST endpoints, managing environment variables and establishing a database connection using the node-postgres package. Dependencies such as express, pg, dotenv and cors are covered, along with development tooling via nodemon.

The deployment section details setting up the Heroku CLI, creating an app instance and provisioning a PostgreSQL add-on before pushing the project live. The walkthrough concludes with a series of production recommendations, covering HTTP header security and compression via helmet and compression, CORS restriction to specific domains, rate limiting through express-rate-limit, input validation using express-validator and basic API key authorisation to restrict unauthorised endpoint access.

A new comments system for my static Jekyll site

A web developer who prioritises privacy and sustainability replaced the third-party Disqus commenting system on his Jekyll-based, GitHub-hosted blog with a lightweight custom solution built on the GitHub Issues API. Disqus had been loading numerous assets and trackers from major technology companies, which conflicted with his concerns about online privacy and the environmental cost of excessive JavaScript loading. The new system works by linking each blog post to a corresponding GitHub issue, so readers click a link to leave a comment on the repository, and those comments are then fetched via the API and rendered on the page using vanilla JavaScript.

The implementation requires only a small HTML file containing a script that requests comments from the API and builds each comment element individually, displaying the user avatar, a link to their profile, the comment content and the date. Optional OAuth credentials can be added to the API request URL to increase the rate limit, and a per-page parameter can be appended to ensure more than the default 30 comments are retrieved. The main limitation is that readers must have a GitHub account in order to participate, and a similar third-party tool called Utterances offers comparable functionality with additional features for those who prefer a ready-made solution.

Rem in CSS: Understanding and Using rem Units

In CSS, rem stands for root em and represents a unit of measurement relative to the font size of the root HTML element, which defaults to 16px in most browsers. Unlike em units, which are relative to the font size of their parent element and can produce compounding results when nested, rem units always reference the root element, making them more predictable and consistent.

A common technique involves setting the root font size to 62.5%, which simplifies calculations by making 1rem equivalent to 10px, though some developers caution against this approach as it requires explicitly redefining all font sizes. Note that rem units are not limited to font sizing and can be applied to properties such as width, height, padding and margin, making them useful for building scalable, responsive layouts. When used within media queries, rem units behave consistently by referencing the browser's default font size rather than any declared root font size, meaning breakpoints remain stable regardless of styling changes.

A particularly notable benefit of using rem units is that they respect user-defined browser font size preferences, which improves readability and the overall browsing experience for those who require larger or smaller type. Major frameworks such as Bootstrap 4 and Material Design have adopted rem units for sizing, reflecting their broad practical value in modern front-end development.