Feed

Really hoping this all went off without too much of a hitch, since our launch day of January 1st is also the day we open up submissions for SaberComp 2025... a fact that never goes unnoticed on our Discord server.

I commenced the DNS switch late on December 30th. What would normally be a simple matter of unhooking the domain from SquareSpace and hooking it into Ghost via the Hover dashboard was complicated by the fact that I needed to change the name servers in order to route everything through CloudFlare first.

This is to facilitate some other changes I intend to make that CloudFlare will simplify for me. But 24 hours after the DNS change, we're still facing some issues with caches at various levels of the internet. I'm hoping by sometime tomorrow, the kinks will be worked out, and we'll have a smooth transition into the submission month.

Over the years since taking over the LCC and then later SaberComp website, my involvement in the web world has ebbed and flowed. I initially took control of the domain in 2014, while I was actually working full-time as a web developer, designing and coding WordPress themes for photographers.

The first versions of the LCC site handled by me, ended up as a WordPress site, with a premium theme I purchased and made work for our purposes. After some years, and leaving that WordPress theme development job and going back into visual effects, I fell out of practice on the web front. SquareSpace was really coming into its stride around then (2016 or so), so I moved the whole site over there.

For years I've maintained the site there. A couple years ago I made an effort to try to build out more content on it, but was finding myself limited by the engine we were using, and quite bored with the aesthetic. I could have switched it over to the new engine, which I did on my personal site, but my experience there confirmed I was really outgrowing their platform all together.

Enter Ghost

I've been on the lookout for a possible platform on which to rebuild the SaberComp front-end site, and definitely tried a few that I thought might be promising. But one that kept standing out to me in terms of back-end functionality was Ghost, which is where we are now. The ease of sending out blog posts as newsletters, and having a built-in RSS feed, was rather exciting for SaberComp, since we definitely have a heap of things to notify the community about throughout the year. And I've long been trying to make the website the de facto source of information.

I've also had an itch to get back into web development a bit more on my own, and between my personal site and SaberComp, I have a couple of test beds to really play around. I'll probably still see about developing my own custom Ghost theme for my personal site, but SaberComp was in more dire need of a makeover. So I started auditioning some premium themes; I had a whole group of tabs saved and I basically kept clicking through their demo sites, wondering how I might be able to utilize their various page templates for our site... and always thinking in the back of my mind: "well I can probably throw some custom CSS in there to really muck things up."

"Bright"

The winner, by virtue of me just deciding on a whim to pull the trigger and start building, was a theme called Bright, sold by Spiritix. It had a lot of the design elements that I'm drawn to at the moment, glassy divs, shimmering hover effects, and of course, some glowy bars.

The tricky part at first was figuring out how to control the theme in Ghost's dashboard. It's basically controlled by internal tags. You create a post the way you would a blog or news update, but assign it a special internal tag that the Bright theme then picks up and knows how to display it. There are a whole heap of #landing-col tags that allow me to populate the homepage with pretty much any type of section I could want... within the confines of what the developer built out.

Hacking it up...

The real fun came when I started showing what I was doing to the Council. Initial reactions were all very positive, but of course then the requests and ideas start coming in. And no one else has any inkling of the limitations I'm dealing with. The Call to Action bit is of course very cool, with the glowing bar shining down on the heading, which takes on our accent color. One of the immediate thoughts was "oh we should have those on other sections too!"

This sent me into a late-night binge of scouring the web inspector to see how the heck that glowing bar was even built. Luckily it was all just HTML and CSS. I was able to copy the whole div and paste it into an HMTL block on the welcome section, and then I was able to mess with the styling to make it wider, and give it a custom color. This all ended up being specified inline, right inside some <style> tags on the elements themselves. I am neither proud nor ashamed of this.

The real hard part was trying to figure out how to get it to expand out, as the Call to Action ones do. I finally had an "aha" moment when I was watching the Web Inspector and noticed there was an initial class assigned to the element, that was then removed by JavaScript when it came into view. Since I had initially done and inspect element on the already-visible bar, I never noticed this class. Once I applied that, we were in business. I can now throw one of these little lightsaber bars anywhere I want, and it'll activate on page load (if it's in view) or when it scrolls into view... or at least anywhere on the landing page. I have no reason to expect it'll necessarily work anywhere else.

12/31/25 Edit: Scratch that. Got it to work on the Submission page!

One Last Custom Touch

One thing we've had for many years on the website has been a live countdown. Amazingly, I've been able to use the same countdown service for almost 10 years, which would spit out an HTML block that I could throw into a footer or SquareSpace section.

However, said service finally seems to have taken a turn for the worse. They moved to a new design engine, which was actually much more restrictive than before, and I could no longer access my previous countdowns. So I decided to let ChatGPT take a stab at it. I presented it with the WIP homepage and told it I needed a persistent countdown that sat at the bottom of the page and to style it to match the site.

What you see at the bottom of the page is almost entirely what it came up with. I proceeded to work with it a bit and noodle with the code a little myself, but when I got stuck a few times (my JavaScript skills are very rusty), it was able to help me replace the correct lines with what I needed.

A couple things I particularly like about it:

• The time listed in the lower left is local to the user viewing the page.
• Mousing over said time will show a beautiful tooltip that displays the Pacific time we're counting down to.
• The state of whether the countdown is visible or hidden tracks across your session. As you navigate the site, it'll stay hidden if you've done so, and even through a refresh. Only when opening the site in a new tab will the state reset.

I've been tackling a rebuilding the SaberComp front-end site on a new platform: Ghost. The main things I'm looking to leverage are the built-in newsletter delivery, and the news feed, which should allow us a much more robust way to get the latest news regarding the competitions and general goings on around the community... to the community.

Figured I'd start the feed with something like this. Once we go live, people can go back and check these out :)