Issue 01

Embracing your own platform for blogging

An introduction to my new site and all the magical bits

Jun 24, 2022 · 7 minute read

👋🏼

My name's Chris Gregori - I'm a full stack software engineer specialising in Elixir and React, currently leading a team at Multiverse - the UK's first EdTech unicorn! (Yes, we're hiring, reach out if you're interested in changing education for the better).

This is my new personal site - it's been coming for a while, I initially created it as a Next.js project about a year ago and life (and design fatigue and side project-itis) got in the way until about a week ago when I had a spurt of inspiration. So I scraped 90% of the repository (aside from some static data I had written which was still relevant), upgraded Next to v12.0 and hooked everything up to a new Sanity.io project.

Why Next.js?

Next is a React.js framework. According to the latest Stack Overflow survey it's getting fairly popular - I'm a huge fan personally. It comes out the box with hybrid client, server, and static rendering, route pre-fetching, an image component that does all the hardwork for you, TypeScript support and more out of the box.

With static rendering, it means I can pre-fetch all my content at compile time and render it in the lightest way possible to my readers, so it's as fast as can be. Oh, and I'm hosting it on Vercels edge network (for free!) for world wide distribution.

Personally I think it's the nicest way to get a React project going these days - I'll mention that while I used to specialise in front-end tech, I've been less involved in it recently so feel free to correct me! Remix was also a consideration but I stuck to the devil I knew this time around.

Why / What is Sanity?

Sanity is a CMS (content management system) that puts developers first. If you've ever used or integrated with one before you'll likely find that the structure of the content you have to integrate with is strict and uncomfortable and the flexibility is usually limited. Another issue is it's usually all defined in some external service with no source control or ability to enforce rules and validations as and when you need them.

Sanity does away with that by letting you define all of your objects (think chunks of content) and documents (defined groups of content) in JSON which you control and manage the code for. This means you can create usable pieces, import them into your version of the Sanity editor (Sanity Studio) and deploy it!

It's nuts - in the new world:

  • All of your schema can live in source control
  • It can be as granular as you like with validation, rules and documentation you surface to your users
  • You can create and use community made, open source plugins in your editor
  • You can self host it
  • It's free

I had used Sanity in the last year when we built the Multiverse marketing site (which we won a Webby award for!) from scratch using it with React and Next.js - the development experience was ridiculously nice so I wanted to encorporate some of that into my blogging and personal site.

My previous personal sites had always been more of a manual affair. I had to do something around the realms of:

  • Clone or update the repo depending on where I was accessing it from
  • Re-teach myself how I'd stored the data
  • Write some JS or HTML
  • Commit the code
  • Push the code to source control
  • Re-deploy it manually or FTP it (yes, that's right)

Now with Next.js, Vercel hosting and Sanity, it looks more like this:

  • Access my authorised, hosted Sanity Studio (for free)
  • Change whatever I like in Markdown or alter dedicated fields (with validation!)
  • Hit publish

I've setup webhooks so that everytime I publish from Sanity I trigger a new deployment in Vercel which statically generates all of my content, styling and markup at compile time and hosts it on Vercels edge network globally which means my platform is as performant as can be. Sanity and Next.js also take care of rendering images beautifully with webp, and blured placeholders.

Why not blog on a dedicated platform?

I used to love Medium - it's awesome for a bunch of reasons. The design is beautiful, it's given writers a way to grow an audience without having to do the leg work of a self-hosted blog, it's promoted content is normally quite good, the list goes on.

But over the last few years I'd found myself becoming less and less enamoured with the platform. The introduction of the partner program seems to have bred a culture of writers creating un-original content with spammy titles just to get clicks, it's been YouTube-ified, and that's a real shame.

There's also the controversy that arose when FreeCodeCamp stole everyones content without consent. Yikes.

I've also found that I sometimes wanted more powerful editing features.

Seriously Medium, it's 2022, why do I still have to host code snippets in gists and embed them?

That said, I still like the platform and I'll be cross-posting there too for increased exposure thanks to the power of cannonical URLs.

What's new and funky?

MDX

This is one of my favourite bits - I'm using MDX for my blog posts which means I can write my content in markdown in Sanity and include JSX in the content itself which gets parsed and rendered out to the user. It means I can do things like this and control it all from a markdown file I have hosted on the internet - credit goes to Josh Comeau for the awesome sparkles tutorial.

Since I can render React components (that my code knows about beforehand) I can do some pretty powerful stuff.

Code Sandbox & Preview

Code Snippets with Prism

I've also added code snippets as you'd expect from any decent developer blog. This snippet is how I determine if I should add a sparkly "New" tag next to my blog post listings on the homepage.

const NewTag = ({createdAt}) => {
  const oneWeekAgo = dayjs().subtract(1, 'week')
  const publishedDate = dayjs(createdAt)
  const isNew = publishedDate.isAfter(oneWeekAgo, 'week')

  return isNew && <Sparkles><Tag>New</Tag></Sparkles>
}

Lottie

If you scroll to the end of this blog post (hopefully after reading all of this delightful content), you'll see a lottie animation fire off. How cool.

The keen-eyed amongst you reading on desktop might have also noticed a progress indicator in the top left of the screen signaling how far you are through the post itself. This, and the lottie trigger are tracked using a useEffect hook alongside some magic from framer-motion.

  const { scrollYProgress } = useViewportScroll();
  
  const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1]);
  const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 });
  const lottieRef = useRef();

  useEffect(() => yRange.onChange((v) => {
    if (v >= 1) {
      setTimeout(() => lottieRef.current.play(), 500);
    }
  }), [yRange]);

Cool, what's going to be on here?

I'm going to be blogging a lot more this year I hope and on a vast range of topics, including:

  • Elixir, Phoenix and LiveView
  • Front-end technologies like React, Svelte and Vue
  • CSS tips
  • New language deep dives
  • Architecture and macro-design
  • My opinions on the technical landscape
  • Coding tutorials and code snippets
  • Lots, lots more

I also do a fair bit of photography if that interests you.

How do I keep up?

Lots of ways.

I'm always down for a chat so feel free to reach out!

Enjoyed this content?

Want to learn and master LiveView?

Check out the book I'm writing

The Phoenix LiveView Cookbook
fin

Sign up to my substack to be emailed about new posts