A glorious demo gallery

A grid of 6 demos are shown. Each demo has a preview image and a title.

I added a demo gallery to my website. A place to showcase some of my frontend adventures. I also added a dedicated RSS feed at https://www.roboleary.net/feeds/demos.xml. 🤗

Why did you do this?

The primary motivation was to create a beautiful showcase for my demos. Hosting demos in other places comes with compromises. Below are the specific motivations.

Accesible to everyone

I wanted to make accessibility a priority. I noticed that the previews in the most demo galleries are not descriptive. It is either an image that that has nondescript alt text; or it is an iframe with a nondescript title. Putting demos on my own website creates the opportunity to be more inclusive, and to provide a better browsing experience for more people.

Create a wonderful browsing experience

I would like to be able to see a beautiful preview card for each demo and be able to browse demos quickly. Larger images with a 1:1 aspect ratio strike the right chord for me.

A page from my demo gallery. It shows 6 demos in a grid with a preview image of aspect ratio 1:1, and a title.

Also, I want the default view of my demos to show the result prominently. The result pane of my demos are given approxmiately 90% of the viewport and are close to the aspect ratio of the device. You can switch to another tabbed pane to view the code and read information about the demo.

Stranger Things title animation on roboleary.net. The title bar takes up about 10% of the viewport. The result pane showing the demo in an iframe takes up about 90% of the viewport.
My Strangers Things title animation demo on my website. The result pane occupies approx 90% of the viewport.

I would like performance to be excellent in order to be able browse through demos efficiently. To constrast the performance of my gallery with demo platforms such as JSFiddle and Codepen:

The point of this short comparison is not to dunk on demo platforms. I just want to highlight how different approaches led to different outcomes. My starting point is that I typically just view the demos that I browse. That’s why I chose to make the demos in my gallery read-only for now. Editing powers come at a significant price.

Have content under my own roof

I want to put more content under my own roof. I want the things I put out in the world to be aligned with my values. Generally, this is not possible with platforms. User experience tends to deteriorate over time to meet financial goals.

Create a workflow for builing and publishing

I wanted to create a workflow for building and publishing demos. I want to minimise the effort in organising and publishing my content. There are a few things that make it easier for me to do this:

Subscribe to the RSS feed

You can subscribe to the demos feed at https://www.roboleary.net/feeds/demos.xml. This is what you will see in a RSS reader:

The demos feed is open in the Liferea RSS reader. It shows 22 unread items. The first item is selected which has the headline 'North by Northwest title animation'. In the details pane, it shows a screenshot of the demo accompanied by summary text of the demo, and a link to view the demo.

Each entry in the feed shows a preview image, a link to the demo, and a description.

Final thoughts

I’m happy to have a new home for my demos. I think that the user experience is great – the accessibility and the performance is at a high level. It looks decent. I hope to iterate on the appearance soon when I give my website a refresh. It opens up more possibilities going forward. If you any thoughts or feedback of a constructive nature, let me know!

Thanks for reading! 🙏

Tagged