Holiday: The Canadian Rockies

A gallery of images from my recent trip to the Canadian Rockies—built using my inaugural Web Component.

Introduction

To celebrate our 20th wedding anniversary the wife and I spent two weeks in Canada during late September 2023. We flew into Vancouver and then drove to Whistler, Clearwater, Jasper, Banff, and finished in Calgary. The scenery was breathtaking, and the weather was perfect. The following image gallery is a selection of my favourite photographs from the trip.

Click/tap on an image to enlarge and see a description. Use the filter buttons to limit images to a specific location.

Gallery

Building the gallery

I needed some help with this post. I'd already built filters for the Homepage and Changelog page, so I had that ready to go, but, I wasn't sure I had the CSS skills to get the gallery working the way I wanted. I managed to get close, but not close enough, so I followed an online tutorial.

I wanted the image popups to be a Web Component, so I could easily reuse them in future by simply using a custom HTML tag e.g. <dialog-image>. I also wanted to use the <dialog> element (now that it's supported across the main browsers), which I'd never used before, to serve up the full-sized images. Luckily, a tutorial appeared recently which describes how to do exactly that.

Links to all the resources I used are listed below:

Web Components

Here's a definition of Web Components I just pulled off the web:

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
— WebComponents.org

So basically, developers now have the ability to create their own custom HTML tags, and via JavaScript and CSS, control how they work and look. This is a big deal, and I'm sure it will be a game changer for web development in the future. I'm not going to go into any more detail here, but if you want to learn more, I recommend you check out WebComponents.org.

The image popup Web Component I created for this post was my first Web Component. I then went off on a bit of a "Web Component All The Things" binge, and created 4 more. I targeted article page elements that are common across all articles, and then created a Web Component for each. So far, I've converted the following page elements into reusable Web Components:

I suspect I'll create a few more, and that the amount of copying & pasting I'll be doing in future will be greatly decreased!

Conclusions

I am aware that this article is the modern-day equivalent of a slideshow of holiday snaps, but I don't care. I'm pleased with how the gallery and popups look and am glad I went off on a Web Component creation tangent, as it's going to make my website much easy to maintain in the future.

The page requires just 1.1MB of resources to load, although each thumbnail image selected will trigger the load of the full-sized image (≈150KB each). Even so, I'm pleased with the overall page performance.