Technology Tales

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.

The New CSS Reset

A new CSS reset approach leverages modern CSS features such as the unset and revert keywords, the all property and the :where() and :not() pseudo-classes to systematically remove default browser styles from most HTML elements while preserving the display property and exceptions like iframe, canvas and image elements.

It allows selective restoration of default styles for specific elements through the all: revert declaration, ensuring greater control over styling without relying on browser defaults. The reset includes additional rules to address common layout and interaction issues, such as adjusting box-sizing, removing list markers and handling text input and form element behaviours, with support across major modern browsers.

Minify HTML in your static website (Hugo or Jekyll)

Minifying HTML generated by static site generators such as Hugo or Jekyll reduces file sise and improves download and parsing speeds by removing unnecessary whitespace and redundant code. This can be achieved using the tdewolff/minify command-line tool, which allows users to process HTML files either directly through the minify command or via the find utility to locate and modify files recursively.

For Hugo versions 0.47 and above, the --minify flag simplifies the process during site generation, while older versions require manual minification of files in the public directory. Similarly, Jekyll-generated sites can be minified by processing HTML files in the _site folder using the same methods. The approach ensures consistent performance improvements across both platforms by compacting code without altering functional elements, making it a practical solution for optimising static websites.

Unminify

A free browser-based tool is available for expanding minified code back into a human-readable format, supporting languages including JavaScript, TypeScript, CSS, HTML, XML and JSON. Minification is the process of stripping out comments, whitespace and other elements that aid human readability but are unnecessary for a computer to execute the code, resulting in smaller file sizes and faster load times.

The tool processes everything locally within the user's browser, meaning no code is sent to an external server, which is useful when working with private or proprietary projects. Users can paste a code snippet or upload a file, adjust the indentation size to their preference, and then download or copy the expanded result. It is worth noting that the tool cannot restore a minified file to its exact original state, as any notes or comments included by the original developer would have been discarded during the minification process and cannot be recovered.

SameSite cookies

The HTTP Set-Cookie response header allows a server to send cookies to a user agent, which can then return them to the server in subsequent requests. Frontend JavaScript is blocked from accessing this header, and when using the Fetch or XMLHttpRequest APIs with CORS, browsers will ignore any cookies in the server response unless the request includes credentials.

The header supports a range of optional attributes, including Domain, which controls which hosts receive the cookie, Expires and Max-Age, which determine how long the cookie persists, HttpOnly, which prevents JavaScript from reading the cookie, Secure, which restricts the cookie to HTTPS connections, Path, which limits the cookie to specific URL paths, SameSite, which governs whether the cookie is sent with cross-site requests, and Partitioned, which stores the cookie in isolated storage.

Cookies without an expiry attribute are treated as session cookies and are discarded when the browser closes, though many browsers restore session cookies when restarting. Certain name prefixes such as __Secure-, __Host-, __Http- and __Host-Http- impose additional security restrictions, requiring HTTPS origins, specific attributes and in some cases the absence of a Domain value, though these restrictions only apply in browsers that support the prefix system.

How to add Isso comments to your site

Isso is a self-hosted, open-source commenting system that gives site owners full control over their data, free from trackers and data mining, making it a privacy-conscious alternative to services such as Disqus. Running on Ubuntu 18.04, it requires Python 3, Pip, SQLite and Apache, and is installed via Pip under a dedicated user account to improve security.

Configuration involves setting up a server-side file that defines the database path, moderation options, rate limiting, SMTP details for email notifications and a hashed password for admin access, with Isso listening locally on port 8080. A systemd service file is used to manage the process, enabling it to start automatically and restart upon failure. Apache is configured as a reverse proxy, routing traffic from a subdomain through to the local Isso instance, with SSL handled via Certbot and Let's Encrypt certificates.

On the client side, a short embed script and a corresponding section element are added to the relevant page template, along with optional custom CSS in the head of the page. Upgrading Isso is straightforward, requiring only a Pip upgrade command followed by a service restart.

HTML5 Website Templates

Free HTML5 website templates are available for personal or commercial use under a Creative Commons Attribution 3.0 licence, requiring a link to the original design or a £15 donation to remove it. These templates are responsive, standards-compliant and optimised for fast loading, with the Elements template serving as an example of a mobile-friendly design.

They incorporate modern HTML5 features such as semantic tags and multimedia elements, aligning with current web development practices that prioritise mobile compatibility due to search engine indexing trends. Hosting options are compatible with most shared providers, though more advanced needs may require dedicated servers. The templates are provided without additional design services and users are directed to external resources for further guidance on topics like cybersecurity, website speed and marketing strategies.

Build a Search Bar for Your Hugo Blog With a JSON Index and Some Vanilla JS

A developer outgrew simple browser search on their Hugo blog as it grew into a personal knowledge base, since the standard blog list page only displays post titles rather than searchable content. To solve this without relying on external search services or large JavaScript frameworks, they implemented a lightweight client-side search bar using only vanilla JavaScript.

The solution works by generating a JSON index at build time, which contains each post's title, publish date and plain content. When a user enables the search bar and begins typing, a keyup event triggers a filtering function that compares the query against the uppercased index fields, then re-renders both the post count and the post list dynamically. The feature also supports an optional regex mode for more advanced querying.

Configuration is handled through the Hugo config file, where search can be toggled on or off and JSON output can optionally be minified. The JavaScript is imported conditionally based on those settings and is fingerprinted for cache-busting purposes.

Style hover, focus, and active states differently

Styling hover, focus and active states distinctly in CSS enhances accessibility and user experience by providing clear visual feedback for different interactions. Hover states typically indicate mouse-over actions with subtle changes like background colour, while focus states are crucial for keyboard navigation, requiring more prominent cues such as outlines or animations to ensure visibility. Active states, triggered by mouse clicks or key presses, should reflect immediate interaction, such as a button being pressed. A recommended approach combines hover and active styles for mouse users and separate focus styles for keyboard users, though browser inconsistencies, particularly in Safari and Firefox, may require additional JavaScript to ensure focus is applied correctly. This method ensures users receive consistent feedback regardless of their interaction method, improving overall usability for both mouse and keyboard navigators.