Recoding the RikVerse website: Introduction

tl;dr: Rik takes on a long-overdue project - to rebuild his poetry website from the ground-up using modern, shiny tools and stuff

This is the first in a series of blog posts detailing my journey to rebuild my poetry website - The RikVerse - using Svelte.js, Page.js and Tailwind CSS. Other posts in this series:

1. Introduction to the project
2. Setting up the shiny
3. The client is not the server - 404 errors
4. Building the blog reader
5. Fun with Cookies!
6. The book store bits
7. Sharing is Caring - social media share buttons
8. … And finally: the poems!

The project

At the start of 2020 I decided to tackle a long-neglected project. My poetry website - The RikVerse - was last reviewed and refreshed back in 2012, and was in bad need of an overhaul. The existing site was extensive but, essentially, static - driven by a PHP (5.2!) backend linked to a MySQL database to generate pages displaying my poems and publications.

The urge to update the site to the latest tech had been slowly growing in me over the past couple of years - mainly because the site’s “management console” (I use the term loosely) was entirely local, with deployments happening by uploading files via ftp to the remote (third party) shared server. Database updates - which needed to take place whenever I wrote a new poem or updated an existing one - were entirely MySQL dumps and imports.

I was definitely in need of a learning activity. There were new (to me) frameworks and tools that I wanted to investigate. In particular, I was very keen to play with the Svelte site compiler, alongside its next.js-inspired framework Sapper.

I also wanted to break away from the usual CSS Frameworks - Bootstrap, Foundation, Semantic UI - and get back to something a little simpler.

Finally, I wanted to get away from the idea of needing to use a database in the backend. In fact I was keen to investigate the possibility of getting rid of the backend entirely - serving the entire site out of an AWS S3 bucket would be an awesome longer-term goal!

So … I played around with Sapper in my spare time - and didn’t get on with it. To be fair to the framework, it’s still in early development; I’m certain that it will become a fantastic tool in a year or so. But by the end of 2019 I had decided that Sapper was not a good fit for my new poetry website.

Then, on New Year’s Day, I came across a blog post by a man called Jack Whiting where he detailed his experience of setting up a new project using Svelte, with Page.js for the routing and Tailwind for the CSS (alongside PostCSS preprocessing). Four whole new Shiny Things for me to play with! Of course I had to give it a go …

In all, the redesign and build of the new RikVerse website took just over three weeks. That includes: reading-and-learning-about the new Shiny; battling through design and UX decisions; coding and testing; shifting all my poems, and book details, out of the database and into .js and .json files; and dealing with the ever-wonderful issues that arose when I deployed the build to its production environment.

History of the RikVerse website

My poetry website was the second site I ever built - back at the end of the 20th century. The first iterations of the site were entirely hand-crafted in HTML - because: no CSS or reliable Javascript in those days.

The Wayback Machine tracks the site’s evolution from 2001. Here’s some screenshots:

… What’s not to love about a table layout, huh?

Anyways. Over the years the site evolved. At some point in the early-2000s I rebuilt it from scratch. I transferred all the content into a (quite complex) MySQL database, and used PHP as a templating engine to deliver content to the frontend. Templating in PHP was not a pleasant business back then - Smarty v1 (for instance) wasn’t released until 2005. So I built my own templating system for the site; it was a bit messy, but it worked (and still does!)

Aside - here’s an interesting article by Fabien Potencier, a lead developer on Symphony PHP back in 2009, explaining why using PHP as a templating engine is really NOT a good idea.)

The last major work I did to the site was in 2012. This was almost entirely focussed on making the site look prettier, and adding some rich media - YouTube videos! - to the mix:

So what’s wrong with the current site?

As proud as I am of my work on the site, there is much that - 8 years later - is clearly not Good Enough with it. For a start, the site is loading cookies without first gaining the user’s permission!

Let’s check under the hood:

A 1.09 second load time. jQuery and jQuery-UI. That awful font. The fixed width display that means, for small screen visitors, most of their screen is taken up with navigation links, not poem - the user is visiting this site to read poems, not to admire the snazzy sliding navigation bar!

Also: no social media links. There’s no way for a visitor to easily share this poem with their friends on Facebook or Twitter. And when they do attempt to copy the link into the FB/T “What are you thinking?” box, the link reads like a meaningless jumble of WTF and the site supplies no pretty images to accompany the post/tweet. Horrid!

Also: the donate button doesn’t work. Oh, it works. But nobody - except me, when testing it to make sure it works - ever clicks on the button and donates money. So it doesn’t work.

Redesigning the RikVerse for the 2020s

Still, there’s a lot of things in the old site that I wanted to keep in the new site.

• For instance, when a user visits the landing page, the site displays a randomly selected poem to them. Most poet sites prefer to present the poet’s career and publication successes on their landing pages. My way of thinking is: people visit The RikVerse to read poems, so why make people click-and-search to find them?

• If a poem has additional media - images, audio recordings, videos - associated with it, I want it to be easy for the user to access each media file, but at the same time keep the page display clean - the poem’s words must remain the main focus of the page!

• The site also has an index of all the poems available to read. This is good, but can be massively improved by including some tag filtering functionality to the poems index page.

• Each of my publications (I have 13 of them: 9 poetry chapbooks; 2 sci-fi novels; a book of short stories; and a memoir) has a page on the site. But the pages are not that interesting. I want to make each publication page that book’s keystone page: gather all information and links to that book into one place; allow people to download the books (in various formats) directly from the page; and even let people read the books in-site!

• The ‘Author’ page is bland - but I suppose I have to keep it. I have no idea why people would want to know about me, but “Every ass loves to hear himself bray” … as they say.

• And I want to keep the donate button (in some form), but design it in a way that makes it More Fun To Use. I also want it to be less obtrusive - The RikVerse is about poems; it’s not about me begging strangers for cash!

• There’s also some new stuff that needs to be done. From a practical stance, the navigation needs to be massively simplified. And I need to add in cookie consent … but not in the manner most sites currently do it - because, apparently, they’re doing it all wrong, according to the UK Information Commissioner’s Office.

• Let’s not forget my desire to get rid of the database!

• Finally, I want to repatriate a bunch of poetry-and-writing-related blog posts that I’ve made over the years to an old (and now sad and broken) blogger.com blog. It makes sense to me to keep everything Rik-writing-related in one place.

This is what I came up with - I hope people like it!

I’ll explain how I built the new site in some follow-up blog posts over the next few days.