New year, new website

Published on by Andy Bell

This site has some brand new, very shiny shoes, so here’s a little post about how and why I put it together.

Only last year, I launched Piccalilli as we know it today and that site had worked great so far. It did, however, provide some scalability issues (mainly my own-doing). To address those and my sudden dislike of the look-and-feel (designers, eh?), I decided to tackle it all at once with an ambitious re-design and re-platforming project.

Those of you who are Piccalilli Members will already be pretty clued up about what I did to make this happen and I’ll keep the real nitty-gritty details for those folks, but regardless, join me in a journey from Eleventy to Next JS.

Wait a minute: did you say Next JS?

You’re damn right I did. A big problem I had with the old site was the mechanism I used to authenticate and deliver premium content worked fine in a flat setup: user buys course then takes that course. The difference now is that I have a members system with upcoming premium tutorials and mini-courses. This means any one user can have various and importantly, fragmented access to content on the site.

To make my life easier, I knew I needed some back-end on the site and initially, I started getting back into WordPress. I love WordPress and have spent a lot of my career working with it, so felt pretty confident that it would do the job. It integrates nicely with Memberful, too, who power my membership system for me.

After prototyping with WordPress (rather successfully) for a while, I stumbled upon Next JS again, on the off-chance and realised with its getServerSideProps facility, I could have most of the site as an SSG and the authenticated areas as SSR. This meant I could keep the majority of my content exactly how it was already—in markdown files.

I’ve worked with Next JS in the past for clients and really liked it. I wouldn’t really even consider working with something like Gatsby, as a comparison, because Next is so much maturer and importantly, gives me more control (especially with the output). Two things sealed the deal for me to dig in an use it for Piccalilli were:

  1. Turning client-side React code off is frictionless
  2. Netlify have a great setup for Next: next-on-netlify

No client-side React code?

Yup! You can disable client-side JavaScript with Next JS on any page if you add this code:

js
export const config = {
  unstable_runtimeJS: false
};

With this config set and when the site is fully built and not in development mode: it ships absolutely no client-side React code. This is a very big deal for me because although the majority of people that visit and use Piccalilli are developers, I have absolutely no interest in presenting the same page twice—once from the server and then again, hydrated and re-rendered on the client. It’s a complete waste of everyone’s time and extremely fragile. Shipping hundreds of kb of JavaScript on a page would very likely keep me up at night too.

Instead of client-side React: I use web components to lightly sprinkle bits of functionality around the site. In fact, the FYI boxes you see on articles and tutorials are perfect examples of this:

If When the web component JavaScript fails in some environments (it will: trust me), it’s all good because HTML is an incredibly smart programming language and will just render the box as a standard element. Sure, there’s no extra styling, but importantly: it’s not broken for users. This is progressive enhancement in action, pals.

All of this combined puts me in a different Jamstack world than I was in before with the Eleventy version of Piccalilli. I’ll still always favour Eleventy for most website stuff—heck I wrote a whole course on it—but when things get a bit complex, I’ll happily use Next JS as an alternative, ongoing. It’s nice to have solid choices.

Visual design stuff

Like I said at the start, I started to really resent the design of the last version of Piccalilli. The main problem was that I bodged it in the first place. I just wanted to get something live and at the time, the world was just about to be hit hard with a global pandemic, so time was very much of the essence. I very quickly churned out a look-and-feel that did the job, but I wanted to invest some real time into design discovery this time.

For those into typography, I’m using Notulen Serif Display for headings and Atkinson Hyperlegible as the body font (accessibility for the win). I’m using a system mono stack for code and I’m really happy with how the typography has come together.

Because I rushed the site design and build last time around, the CSS was awful. Sure, I used CUBE CSS principles, but for some reason, I tried to do everything with vanilla CSS partials, rather than Sass. Vanilla CSS is fantastic—don’t get me wrong—but I find long-term maintenance a lot easier in a Sass project, personally.

The new site digs very much into Sass, Gorko and of course, CUBE CSS. I’m really happy with the CSS codebase now, and I’m confident it will happily power the visuals of this site for a long time and enable me to make changes a lot easier than before.

Better content discovery

Another design focus of this project was making content easier to find. The old site had a decent category system, but they weren’t given much prominence.

For this new site, I’ve integrated categories much more. At the end of each article, quick tip or tutorial: you’ll get 3 other items recommended to you. These are all related because they share at least one category with item that you’re reading. The hope here is that someone will be able to spend more time learning stuff that’s relevant to them.

I’ve also made discovery from the homepage a lot easier by rendering all the available categories in a nice cluster. I also decided to feature new content front-and-center in an auto-updating section. I hope that will make the user experience for first-time visitors much better.

A work in progress

The site isn’t even remotely finished yet. I’ve got so much to do, but I also really needed to ship it. I want to get on writing content—especially content for the members—so I decided to ship a genuine MVP.

This means there will definitely be bugs. If you do find one, I would really appreciate it if you let me know in an email ([email protected]). That would be really good of you.

I’m going to keep updating and improving things as I go because as Ethan so beautifully wrote, a website is a worry stone. I’m producing a lot of content this year, so inevitably, it’ll require tweaks and changes to the site to facilitate them. Because I’ve used Next JS: the site is very component-driven, so even large-scale updates should be much easier.

Wrapping up

I hope you enjoy this new version of Piccalilli. I’ve certainly enjoyed making it (even though I was pretty burned out lol), and importantly, it’s going support my work so much better.

I’ve really dug in deep to Next JS for this project too, so added to stuff I’ve done in the past, there will inevitably be Next JS and React content incoming on this site.

There’s a lot of other stuff to come this year, too, so sign up to the mailing list to get updates on tutorials, mini-course and of course, this year’s main premium course: Learn CSS From Scratch!

Lastly, I just want to extend a special thanks to Cassidy Williams who has been super helpful with advice, getting this one going. Thanks, Cassidy!

Until next time, take it easy!