Changelog

My focus during 2023 was meant to be SQL & Python, but it ended up being mostly JavaScript, and then of course, like everyone else, I got a bit distracted by Generative AI. In this article you'll find links to all the resources I used.

Go to article

There's quite a lot of manual effort required to create a static website (including a lot of copying & pasting of HTML), and I'm not a fan of repetitive tasks, so I decided to create some Web Components to replace the common elements that appear on every page. So far I have created Web Components for following page elements:

• Global navigation
• Table of contents
• Feedback footer
• Share buttons
• Image popups/modals

This post took a while to write, mainly because I had to go through all my photos from the trip and select the best ones (and then add descriptions and Alt text). I also had to follow a few tutorials to get the gallery working the way I wanted.

Go to article

There are 75 entries in the Changelog to date, so this page presented me with the perfect opportunity to try and build some filters.

I used my fledgling JavaScript "skills" to build a simple filter that would show/hide entries based on their category. My version did work, but it was pretty basic, so when Kevin Powell released his video on building filters I decided to rebuild my version using his code as a starting point. One advantage of using Kevin's code is that it includes some nice View Transitions (which required a single line of JavaScript!), although at the moment these are not supported on Firefox or Safari.

I also took this opportunity to update the Expand/Collapse buttons and replace the text with icons. I still have to update the code so that the currently selected option is clearly displayed to the user (as it does for the filters).

Some instructions on how to implement simple View Transitions, including a couple of animated GIFs to show the results. To view the effects, you'll have to enable a feature flag in Chrome.

Go to article

I recently learnt about a new typography CSS feature which will be coming to browsers soon i.e. test-wrap: balance. In this article I demonstrate the effect of enabling 'text-wrap: balance' for titles and headings across onlyrss.org.

Go to article

In addition to the existing Twitter, LinkedIn, and Email sharing icons, I've also added icons for Reddit and Facebook. As usual, these are optimised inline SVGs.

I recently created my first HTML tables for my Learning Log 2022 article. In this article I share the HTML & CSS for an updated version of the table that displays the percentage progress alongside the progress bar.

Go to article

This is an updated version of the infographic that I wrote about a few weeks ago. This version is standalone and has been optimised to make better use of large displays.

View infographic

This infographic (the whole webpage) is very lean, requiring just 31 kB to be transferred to the browser. The only resources loaded by the browser are the HTML file, and 2 fonts (both of which have been subset, with one containing just a single glyph). All the airline tailfin SVGs are inline in the HTML, and the stylesheet has been minified and included in the head of the HTML.

I put Air India's recent record breaking order of Airbus and Boeing aircraft into context by comparing the quantity of aircraft ordered alongside their current fleet via a simple isotype chart.

Go to article

I used the HTML <mark> element for the first time today, and added a little custom CSS to give it more of a hand-drawn highlighter-pen effect.

I wanted to highlight some data values within a paragraph, and a highlighter-pen effect seemed like a good idea. I like the idea of visually highlighting values within an article, especially when they are key to the story.

The first image below shows the original table design used in my Learning Log 2022 article. The bars/lines at the bottom of each row are meant to indicate the progress against the task, but it's far too subtle.

The new design (second image below) adds a 3rd column which includes a more traditional progress indicator. The value that indicates the progress is defined as an attribute in the HTML, I'll probably write an article about how this was built at a later date.

The result of my second attempt at creating a data visualisation using just HTML & CSS (and a little JavaScript).

I spent longer on this article than any other, specifically the infographic. I'd pretty much completed the infographic using inline-SVGs and then realised it would have been better using a Unicode glyph, so I started again.

I also learnt more creating this page than any other single page on the website, take a look at the 'What I learnt' section in the article for details.

Go to article

The results of my first attempts at creating data visualisations using just HTML & CSS.

I thought that creating charts with just HTML & CSS was going to be much harder than it actually was, and although it took me a while to build the 2 charts in the article, I'm confident that when I build my next data visualisation I'll be much quicker.

This was also my first real opportunity to make extensive use CSS of Flexbox.

Go to article

In order to reduce the load time of the homepage on mobile devices, and to reduce the amount of scrolling that's required to view the list of articles, I've removed the images from the cards on the homepage. To do this I used display: none; so that the images are hidden, and I combined this with loading="lazy", to ensure that the images are not loaded by the browser.

When I first added an avatar to the article bylines (just 2 days ago) I opted to hide the avatar on mobile displays as there simply wasn't enough width on the byline row to show the avatar, copy, and sharing icons.

I then decided that this was lazy, so I came up with a solution that simply switches the byline from a CSS flex row (on wide displays), to a CSS flex column (on narrow displays). This (along with a couple of other small tweaks) gives the result shown below on mobile displays:

An article describing my 2022 learning goals, and the resources I used to achieve them.

This was my first experience creating HTML tables.

Go to article

The Lensa AI avatar app is all the rage at the moment, so of course I had to give it a go. And much to my surprise, amoung the 50 images it created were some really good ones, one of which I've chosen as my new avatar for all my various networks/apps.

I also decided to add it to the byline on all my articles, it's a little vain (and pointless, as I'm the only author), but it does break up the pages a little (which are often just text). It's a .webp, and has been compressed to within an inch of its life, so comes in at 3 KB, not bad for a 200x200 px image.

It's not shown on mobile devices when in portrait mode, I did this as the byline row was wider than the viewport, so the easiest solution was to simply drop the avatar.

“Now where exactly did I leave my slippers?”

My previous Changelog update was about moving the article sharing options from the bottom of article pages to the top, and changing them from text to SVG icons. Initially the SVGs were linked to the page via IMG tags, but I decided to use inline SVGs so I could better target their attributes (fill etc.) via CSS. I also changed the email icon so it better matches the style of the Twitter and LinkedIn icons. Each uses a cut-out, so the shadow can be seen through the icon on hover. This can be seen in the GIF below:

A colleague suggested that I move my article sharing links from the bottom of the page to the top. In a perfect world people would read an article before deciding to share it, but we don't live in a perfect world (Trump, Putin, Brexit, the US date format), so I decided to implement his suggestion.

I also took the opportunity to replace the old text links with SVG icons (total file size of icons = 996 Bytes).

Normally I'd "inline" my SVGs in the HTML, but as these sharing icons are used on every article page I decided to link out to them via <img src="…", this has a downside I was not aware of. With inline elements you can use CSS to directly affect the SVG's paths, e.g. fill, stroke, opacity etc. When linking out to the SVG files you cannot do this. To achieve the “fade to colour” effect shown below I had to resort to the use of CSS Filters.

Added SVG icons for Mastodon and YouTube. Also updated the icons' container to Flex. It's now always a single row, and fills the available width.

The entire icon row uses inline SVG elements, and only takes up 9KB uncompressed—so <3KB after text compression.

The cards used on the homepage were created before I really knew how to use CSS Flex properly, and they were far from ideal—changing the format of the text on the cards used to break the layout. I rebuilt them from the ground up using CSS Flex. Now the design is far better and won't break due to the cards' contents.

I also changed the date format and added a “misc” tag to all cards that didn't fit nicely into any of the existing categories.

An article describing the results of my experiment with restoring old family photos using AI restoration tools i.e. Palette.fm and GFP-GAN.

Go to article

They have some simple sharing links on the bottom of all article pages on the Nielsen Norman Group (NN/g) website. I thought it would be a good feature for OnlyRSS.org.

I've pretty much copied their solution, but along the way I learnt how the sharing URL has to be structured such that after being clicked, the user is taken to the social network (Twitter or LinkedIn) and the article title and link are available and ready to be easily shared.

If you combine this with OpenGraph metadata in each article, it makes for a very effective sharing experience, as you can see in the Twitter example below.

I've been working my way through all the Nielsen Norman Group (NN/g) UX articles related to unstructured content. They suggest including an article summary at the top of each page (not unlike an abstract in a scientific paper).

The aim of an article is not to be read, the aim is the transfer of knowledge, and if that can be achieved with a simple summary, then that's good with me—I'm not going to fill a page with fluff and keep the reader guessing so they have to scroll past a hundred ads before they find what they are looking for!

With some help from Stackoverlow, I managed to update my circuits app to work the way I wanted i.e. using nested arrays for similar exercises. I added a progress update to the “My first JavaScript app” article to describe the changes.

View the updates.

Previously I replaced all straight double quotes with the opening and closing curly versions. This change was similar, but this time I replaced straight single quotes (including apostrophes). To understand why I did this, head over to the ‘straight and curly quotes’ page at practicaltypography.com.

I recently completed the new GitHub Skills courses, including the one on GitHub Actions. I had already been using Actions to deploy all code to my host (via FTP) after a Push to Master, but I wanted to see if I could add some automated testing as part of the same process.

I thought a basic HTML validator would be useful, and found Proof HTML in the Actions marketplace. In order to implement it in series with the existing FTP deployment action, I had to get to grips with Actions (i.e. running a job only after the previous job was successful) and YAML (indentation!). Anyway, with a little help from a very patient friend, I got there in the end. Now, when I push to Master, before the website is deployed, the HTML is checked for errors.

An article describing my first attempt at using JavaScript. An app that randomly selects a number of home-gym circuit training exercises.

Go to article

I recently added app screenshots to my site’s manifest file, so that users would be better informed about the app before deciding to install. This post describes how I did it and what I learnt.

Go to article

I read a blog post describing how easy it is to host your website on GitHub Pages, so thought I would try it out to see how it worked. Turned out it worked pretty well (well, after I updated a load of paths, turns out I never really understood the differences between, "/", "./" and "../" very well).

I’ve done a little testing, and it seems that GitHub Pages is consistently faster than my current host. For example, the load time for this Changelog page on GitHub is 32 ms–37 ms, with my current host it’s 55 ms–74 ms.

Other differences I’ve noticed between GitHub Pages compared to my current host; they have a fixed cache max-age = 10 mins, and don’t yet support Brotli compression. Also, GitHub Pages is free! I do host a couple of small websites alongside OnlyRSS, so it’s not as simple as me moving to GitHub Pages and not having to pay for my current hosting, but I do suspect that GitHub Pages will become the primary host for OnlyRSS, all that remains is for me to point the domain to it.

Here’s a link to the GitHub Pages hosted version.

Five days ago I implemented the auto-labelling and numbering for all figures across OnlyRSS.org. This article describes how I did it using just CSS & HTML.

Go to article

I use a specific style for links used in article bodies, i.e. links are followed by a "°" symbol, which is either red (external links) or blue (internal links). This was working fine in paragraphs, but not in lists or fig captions. This was because I was simply using:

p a {…}

I wanted to apply the same style to lists and fig captions, but rather than repeating the same CSS for all three, I used—for the fist time—the ::where CSS Selector. So I now have:

::where(p, li, figcaption) a {…}

I suspect I’ll be using this selector a lot going forward.

I added the PWA shortcuts (aka jump list) a few days ago, but didn’t give each shortcut their own icon. Adding individual icons makes the PWA appear a little more "native", and less like a web page in disguise! I’m not very happy with the current icons I’ve created, so will probably update them soon.

I read a very useful article over at smashingmagazine.com today titled “Lesser-Known And Underused CSS Features In 2022”, it contained a section on CSS Counters. I learnt that Counters can keep track of the number of specific HTML tags e.g. <figcaption>, and then display the current count in the page. I used this to automatically add “Figure #” before each figure caption. This is useful for those times when I decide to slot a new figure into a page, as I wouldn’t then need to renumber all the following figures.

The introduction of the global navigation bar back in April greatly improved the site navigation, but, users still had to scroll to the top of a page in order to navigate to a new page. Fixing the nav bar to the top of the viewport has removed this pain point (at the expense of a small amount of screen real estate).

Updated the app description, and added app screenshots to the manifest.json. When a visitor to OnlyRSS.org is prompted to install the app on Android, they now have the option to view some in-app screenshots prior to performing the install.

After install, if they long-press on the app icon on Android, or right-click on the app icon on the Windows taskbar, they will now see shortcuts for Articles, RSS, Changelog, and About pages.

Strictly speaking, Alt text for images is not required if you’re using the <figcaption> element, as this element will contain a description of the image which will be read out by screen readers. And as all my images have a <figcaption>, I’d not been using Alt text. But, after giving this some thought I’d come to the conclusion that Alt text is required in most cases even when <figcaption> is used.

A typical figure caption for a chart might be ‘Figure 1. Chart showing the change in price of oil over time’. But, it’s not a complete description of what’s happening on the chart, it doesn’t need to be, that’s the purpose of the chart! The Alt text I’ve added for my images tries to describe the content of the image in words, rather than a simple statement about what the image is.

FOUT can be an issue for many websites, but it wasn’t a particular problem on OnlyRSS until I added the global nav bar. The size of the ‘buttons’ on the nav bar are determined by the size of the button names e.g. RSS, About, and Changelog. When the page is first loaded these button names are displayed using the fallback font (while the primary font is loaded), this resulted in a noticeable movement of the nav bar buttons that was very distracting.

This was solved by switching the font used on the nav bar from font-display: swap to font-display: block. The result is that the nav bar font is essentially invisible until the primary font has loaded, this seems to have fixed the issue.

Before I discovered the solution above, I’d also downloaded all the fonts from Google and hosted them locally, although this didn’t fix the issue, there are other reasons to do this, but I think that will be the subject of a future article.

As the site has grown to include a few pages i.e. RSS, Changelog, About (separate to the articles), the navigation required a bit of an upgrade from the single home-button. This first version is a simple top nav bar, with the home button on the left, and buttons for the dedicated pages on the right. They are separated by a single empty span element that has its flex set to 1, this pushes the various buttons to the far-left and -right.

The <details> and <summary> HTML elements are what’s used to create these Changelog entries, but, I’ve also started to use them in articles to hide images until requested by the reader.

On article pages, I used the pseudo-element ::after to append the content "close" or "open" to the <summary> text. I used details[open] summary::after{ } to target the summary element only when the detail element was open, the result was an open/close toggle built with just HTML & CSS.

This article describes how I used the <details> and <summary> HTML elements in combination with the lazyloading image attribute to hide and delay the loading of images until they are requested by users. I did this to make the default load state of the page shorter and more concise, and to improve page load performance.

Go to article

The RSS link on the homepage used to open the RSS feed, for users unfamiliar with RSS this might have been confusing. The link now opens a ‘subscribe’ page which includes the RSS feed URL and instructions on how to subscribe via Feedly and Inoreader.

I created 2 animated GIFs (each ≈300kB) showing the subscription process in Feedly and Inoreader, but I didn’t want these to have a negative effect on the page load performance (the GIFs are not essential for the page), so I hid them in the <detail> element and set the image attribute ‘loading="lazy"’ (usually used to delay the loading of images that are below the fold), to my surprise this worked, and the images only load when the user interacts with the <detail> element.

Go to article

This is a bit controversial. Hyperlinks are meant to be blue and underlined. Many websites obviously don’t follow this guideline, and instead use a colour, or an underline, but they’re typically using one or the other. If an article contains many links, I find the existing options a bit distracting (see any page on Wikipedia as an example), especially if I’m not actually going to click on any of the links. So, I’ve adopted the link style used by Matthew Butterick in his online book Butterick’s Practical Typography (he uses it for external links only, I’m using it for internal and external links.) I’ve used a red circle for external links, and blue for internal. On-hover, the linked text will also change to the appropriate colour.

This isn’t a rhetorical question. There doesn’t appear to be an agreed answer online for this. Today I moved all the article <header> elements and placed them within the <article> elements. Previously they had been above.

The HTML Article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable e.g., a forum post, a magazine or newspaper article

The HTML Header element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

I’ve decided that if the Header is meant to contain introductory content, and often the h1, then it’s essential for the article to which it belongs, and as the <article> content is meant to be self-contained (i.e. suitable for redistribution) then (at least for my use case) the <header> should be in the <article>.

Previously the page outline (the visual outline I mean i.e. the border and drop-shadow) was represented by a <main> with a specific CSS Class applied. This has now been replaced by <article>, i.e. I’ve got rid of another CSS Class and replaced it with a semantic HTML element, which is a positive as far as I’m concerned.

I’ve tried my best to avoid non-semantic HTML elements where possible i.e. <div> and <span>. The homepage uses a few <div> elements (to create the cards), and this page uses <span> (for the tags), apart from that the whole site uses semantic HTML tags. I’ve avoided the use of CSS IDs altogether, and have only defined a few CSS Classes.

I was using a few <div> elements for the related articles that appear at the bottom of a couple of articles, but there is a specific HTML element designed to show related content i.e. the <aside> element. Here’s the description of the aside element from W3C Schools, The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element.

This was a bit of a rabbit-hole for me. I downloaded a few social media icons from the web in SVG format, and created some of my own in Figma. I then had to work out the correct Viewbox size etc. I wanted the icons to appear outlined with a white fill, but then have the fill fade to their brand colours on-hover. This took a bit of CSS work to get right. Basically, the SVG is inline with the HTML and includes the fill colour. The CSS then overrides this and sets the fill to transparent. On-hover the transparency is then removed (via a 0.9s transition) to reveal the fill colour. Doing it this way means that the CSS is generic and works for all the icons—it removes the need for a CSS Class or ID per icon.

The SVG icons and the required CSS take up 12kB of space, which when compressed for transfer to the browser comes to around 2kB. Not bad (IMHO) for 8 coloured icons that can be scaled to any size. If these 8 icons were PNGs or GIFs they would each have to be loaded after the HTML and CSS. The inline SVG solution means they are loaded with/in the HTML.

In case it’s not obvious from the description above…yes, I am quite proud of myself. 😀

This actually took me a little while to figure out. Had to wrap the date/description in a <span>, (the tags already use <span>) then I set the first span in the Changelog summary to flex:1, I did this using the first-of-type CSS selector i.e. ‘summary span:first-of-type {flex: 1}’. The other <spans> (used by the tags) would default to flex:0. The result of which is that the date/description expands to fill the row and pushes the tags to the far right.

Previously, I’d moved the Google font code i.e. @import (which itself linked to a stylesheet) from the CSS and into the head of the HTML, therefore removing a “chain” when loading the page. This time I moved the links to the Latin version of the fonts directly into the HTML head. It removes another “chain”, and page load speed for most pages is now around 30-50 ms. Without actually minifying the CSS and moving it into the HTML head, there’s not much else I can do now to improve page performance.

One of the reasons for creating this website is to learn HTML and CSS, so I thought it might make sense to list the changes and explain what I’ve learnt along the way. This changelog makes use of the <details> and <summary> HTML tags (combined with a little CSS, you end up with these little ‘expandable’ sections, no JS required.)

The original About page used a 2-column layout that didn’t work well on mobile, for the sake of simplicity I decided to use the standard article page style/CSS.

Go to article

I don’t think anyone is going to be cloning my repository anytime soon, but having it public just makes things a little simpler, and allows me to see better analytics related to my own commits.

This took a bit of research. When looking at the load order of page elements, I noticed that most of the page was waiting for the fonts to load, and this was not starting until after the CSS had loaded. By moving the font import into the HTML, the font load can start in parallel with the CSS, resulting in a faster page load.

Created new PWA icons, added the required apple-touch-icons, added a maskable icon, changed the display type in the manifest from minimal-ui to standalone, and added a theme-color in the HTML <head>.

These changes greatly improve the PWA user experience, especially on iOS devices. OnlyRSS.org now gets a 100% PWA score via the open-source Lighthouse tool.

OK, this one needs some explaining, especially as one of my stated aims for building OnlyRSS is as a learning experience.

Analytics are great for measuring success (especially if success is defined by the number of page views), or for trying to write “better” content (by measuring the popularity of existing content, and creating more of the same). But, my aim is not to write articles that will result in a large number of page views, or to create a blog that will become popular. My sole aim is to learn HTML and CSS, and maybe create articles that at least one other person on the internet will find useful. The analytics were interesting, but they weren’t free, and the cost was actually quite high, and it was not being paid by me, it was being paid by the site’s visitors. The cost was a reduction in user experience.

Basically, the page load times were dominated by the JS required for the analytics. Removing the analytics resulted in far better performance, i.e. much faster load times. So I made the decision to remove the analytics and give visitors a better experience.

This required some research, mostly to determine which images would benefit and which would not. Essentially this image attribute won’t load an image until the browser thinks that the user is actually going to view it, i.e. it looks at a user’s scrolling behaviour, and loads the image just before the user gets to the specific section of the page. Although all images on my site are optimised to be as small as possible, there’s still no need to load an image at the bottom of the page if the user is never going to see it.

This required a lot of research and some testing to get it right (tip: .webp images are NOT supported!), enough that I’ll probably create a post about this topic. Basically, if I add an article link to Twitter, LinkedIn or Facebook, they will contain a specific title, description and image and will typically be displayed in some form of card design.

There are many HTML tags that are underused (IMHO), and <abbr> is probably one of them. It allows you to show the full text on hover for an abbreviation, e.g., IMHO.

I made a few tweaks to the CSS, so on hover the cursor changes to the help-pointer, and on mobile you can tap the abbreviation, and it is then shown in-line in full after the abbreviation.

While building Cirium Profiles, we came up with a neat solution to help mitigate one of the issues with stacked bar charts. This article describes what we did, and why.

Go to article

My articles cover various subjects, some of which could be placed into groups, so I defined a style (not finished) for the display of ‘related articles’ which will appear at the end of some articles.

Placed all article images into the HTML figure tag. Removed the ‘alt’ attribute from images, as this was no longer required—assuming the <figcaption> includes a full description of the image.

Also changed the accent colour of the site from red to blue, because everybody knows that blue is the best colour.

Did some research regarding browser support and the modern image format of .webp. Decided to replace all images that would benefit from it to the new format in order to improve page load performance.

Prior to this the mobile version of the site was terrible, it so bad that mobile browsers kept requesting users to use their ‘reader’ view. This required me to learn how to use Media Queries and to add the viewport tag into the HTML head.

This was a big change for the site, removing all individual styles (one per article) and settling on a single style. Prior to this each article had its own style—this was on purpose, as it gave me the reason I needed to practice CSS. It also allowed me to put into practice what I learnt from reading 3 typography books over the previous couple of weeks.

A PWA version of OnlyRSS.org is not really needed by anyone. This was more a case of "can it be done?". I’m also considering turning one of my web products into a PWA for my users, so this was an interesting learning experience for me.

Got interested in how paragraphs are separated (in print and on the web), worked out how it’s quite easy to implement in CSS with some specific CSS selectors, so decided to share what I had learned.

Go to article

This was my first attempt at using CSS for something other than basic page typography, and it was a difficult learning experience—and it still doesn’t work correctly on Safari!

Go to article

This was an RSS only article, so no article page on the site. Since graduating (25 years ago) my MSc friends and I share our ‘top tens’ at the end of each year. This year I thought I’d share it with my (very small quantity of) RSS subscribers.

A short article describing why I believe every Product Manager should build a website. This was the first article where I used the <blockquote> HTML tag.

Go to article

An article describing my experience and tips after rowing 15 million meters over 8 years. For some odd reason this ended up in hacker news, which resulted in this article getting over 1,300 pageviews in a week!

Go to article

Not a big need for this change, other than the fact that I wanted to see how easy it would be to makes "cards" in CSS, and also, cards are obviously the cool thing these days. I had to get my head around CSS Flexbox.

All the details of the Chart Picker I built using Excalidraw, which can be found on GitHub. Investigated and used a few 3rd party tools to compress .svg files.

Go to article

Left aligned the date, right aligned other article details. Had to learn how to use CSS float—and learnt that you have to remember to clear the float!

Originally all the files for an article were in a specific article folder. I changed this so there’s now separate folders for posts, images, styles, etc.

An article explaining what RSS is and how it can be useful. I learnt how to use the <code> HTML element.

Go to article

An article describing Excalidraw and why it’s a great tool for prototyping.

Go to article

An article describing my work-from-home hardware setup, and why I believe the hardware is worth investing in.

Go to article

A description of the routine I fell into while working from home during the COVID-19 pandemic.

Go to article

My post describing how to take advantage of Windows Virtual Desktops when shifting between tasks.

Go to article