Rewriting the Neil Rogers Website in Svelte
One of the other websites that I maintain is neilrogers.org, which I discussed a little bit in the 2014 post My Tribute to Radio’s Neil Rogers. You don’t need to read that post. The short version is that after a popular radio personality died and then his web guy died, I knew that his fans were at risk of losing history.
So I stepped forward to build up a website and audio archive to preserve that history. I worked with an older man named John in Florida. He was great with audio restorations. Along the way, I taught him enough WordPress that we were able to build out a 3,000-page website.
Then in 2017, John died. Since then I’ve been managing this website alone. Unlike this blog or INeedCoffee, neilrogers.org doesn’t really publish new content. It serves as a historical archive. But WordPress always demands attention, even if you don’t post anything new. You constantly have to update the CMS, themes, plugins, and widgets. If you don’t, you risk getting hacked. Even if you do stay on top of all the updates, bots are hammering WordPress sites like crazy. I’ve had to go to great lengths to defend my sites against bots. And I know in another year, I’ll be patching up the next threat.
I wanted the site to be more maintainable and secure, so I decided to condense the entire site down to just 5 static HTML pages. The audio lives on YouTube, Archive, and OneDrive. We have a show spreadsheet on Google Docs and images are on a dedicated Flickr account. Prior to the rewrite, we had a page for every show, which turned out to be unmaintainable after John passed. The few true blogs the site hosted were migrated to Medium.
The audio page
Initially, I rewrote the site in Gatsby/React. It took about a month to learn enough to code the site. But it had one big problem, the soundboard page, which was originally coded in jQuery was crashing mobile devices. Seems React likes to create a huge DOM which worked fine on browsers, but not on mobile.
After spending another week trying to get the soundboard working on mobile, I restarted the entire project with the Svelte/Sapper framework. What took me weeks to learn in Gatsby took hours in Svelte. And the soundboard ran perfectly on mobile.
I’m not saying Svelte is better than React, but it is easier to learn and was the better option for my needs.
The new site is super fast and uses lazy loading on the images (they load only when they come into view). I use MVP.css as the minimalist CSS framework. And because the pages are generated static HTML, there is nothing for bots to hit.
Now I have one fewer WordPress sites and it feels great. The site is backed up on GitHub. If you want to learn a tech skill during the lock down, check out Svelte. There are videos on YouTube and Udemy.
If you have a GitHub account, I’d appreciate it if you could give the Simple Soundboard Svelte repo a star. ⭐😎
2022 Update: When Svelte dumped support for Sapper while they began developing Svelte Kit, I recoded the site using Gatsby 3 and then Gatsby 4. Once Svelte Kit if officially released (not BETA), I will use it for a different web site.
Originally published at https://criticalmas.org on July 20, 2020.
