A fresh new website

I’ve been publishing blog posts on a WordPress-themed website for many years. With this new site, I’m returning to my roots—building websites in Joomla. It also includes new features designed to enhance the user experience. Take a look and let me know what you think!

I used Wordpress for many years together with a popular purchsed theme that I customized to fit my needs. That worked fine, but recently, I started to change my views and decided to overhaul the site completely. I went back to using Joomla. It's not the most user friendly content management system, but I know the system very well and how to implement designs and work with the quarks.

This article gives some insight on what I did for the new design and what I wanted to achieve with it.

W3C Validated HTML5 

Apart from my passion for the Microsoft Cloud, I've always been into web design and a bit of development. One of the major objectives for each new site was to fully comply with the W3C HTML standards, which could be validated using the W3C HTML Validator Service. This was not possible with the purchased WordPress theme I used for this blog site.

So, by using Joomla 5 and a custom design, I could achieve this goal—well, for the core parts anyway. I'm using some extensions that do not yet validate in the W3C HTML Validator. I've started to build my own extensions to do so and am transitioning from the third-party extensions that were not (fully) compliant.

Clean and simple

I wanted the new site to look clean and simple with focus on content while the design remains supportive with just the right amount of contrast between all elements and components.
For the article listings, I used a Bootstrap Card group pattern that ensures equal height of all the cards.
The site has a simple main menu which is responsive to support typical screen sizes. Mobile first was definitely part of the design. Also, the search form expands to the entire width of the screen while darkening/blurring the main content to keep focus on the task at hand.

To keep the content tight with various screen widths, I used text-truncation where required and possible. Also, the article introtexts on the cards, have a maximum length of 128 characters.

Dark mode

Another wish was to support both light and dark mode on the site. So, I used Bootstrap 5 as the foundation of the design and leveraged the new 5.x version capabilities to support dark mode. The site should appear in your prefered dark or light apperance based on your preferences. In the left footer section, you can use the 3 option-buttons to switch between light-, dark- or prefered modes.

Code highlighting

I've always been a big fan of sharing code snippets on my blog. The Wordpress plugin I used before was fine, but nothing more then that. For the new website, I did some research on how code hightlighting and -copying was done on other web sites and what would be the most flexible way to implement this.

I chose Prism.js as the framework for code highlighting. It is a super lightweight javascript library that works with plugins to e.g. recognize the language of the code snippet, show line-numbers, a toolbar options including a copy-to-clipboard function and dark- and light themes that I could use together with the Bootstrap capabilities.

I think the styling took the most time to get it right. A nice non-instrusive toolbar showing the language and a icon-based copy-button that would confirm copying to the clipboard when clicked.

function handleRssClick(button) {
    const icon = button.querySelector('i');
    const url = button.getAttribute('data-url');

    // Copy URL to clipboard
    navigator.clipboard.writeText(url).then(() => {
        // Change icon and title
        icon.classList.remove('bi-rss-fill');
        icon.classList.add('bi-check-square-fill');

        // Create and display the "Copied" label
        const copiedLabel = document.createElement('span');
        copiedLabel.textContent = 'Copied';
        copiedLabel.classList.add('rssfeed-copied-label');
        button.appendChild(copiedLabel);

        setTimeout(() => {
            icon.classList.remove('bi-check-lg');
            icon.classList.add('bi-rss-fill');
            button.removeChild(copiedLabel);
        }, 1200);
    });
}

 For the content editor in the backend, I wrote an extension that exposes a button. When clicked, a modal window opens where the code language can be selected, the snippet can be pasted and options can be chosen for line numbers and high lighting certain lines. It's basic, but it works great.

Anchor links

What I really like about the Microsoft Learn website, is the ability to link directly to specific paragraphs in an article. To also support this on the new website, I wrote a Joomla plugin extension that would get all the h2-h5 links in the article and transform these into anchorlinks. And once published, the anchorlinks are part of the page-cache, so super fast.

When you now hover over a paragraph header of a blog post on the site, a hyperlink icon () appears. When right-clicking the header, you can copy the entire anchorlink.

Table of contents

To provide some navigation for longer articles, I created a table of contents (toc) extension using PHP and JavaScript, that injects a collapsed "On this page"-element containing links using the existing anchors on the page.

This particular post also contains it. Only when the article has less then 3 headings, the toc is not rendered.

Homepage modules

To provide different navigation options on the homepage, I created so called overrides for the standard Joomla Categories and popular tags module.

Photo content

As with the previous site, all photo content was shot by me personally on my Holidays or any situation that came with a photo oppertunity.
When looking at all the cards in the Blog section, it shows a nice grid of these photos.

Search Engine optimization

After copying over all content from the previous site, I'm still optimizing for search (seo) and replacing e.g. traditional image formats for webp to improve speed while maintaining quality.

Conclusion

I've made a lot of changes to the site, which I hope are appreciated. Fun fact is the use of Github Copilot that really came through in being more productive in css, js, html and writing Joomla extensions in PHP. I recently moved to a paid plan as I really think it it worth it.

Please let me know if you like the new design. Happy browsing!