Redeveloping my site in Svelte, Sapper and Sanity.IO

4/8/2021 | svelte | process | sanity.io

Every now and then I redevelop my site as an exercise to learn something new. This time it is the turn of Svelte, Sapper and Sanity.io

Now and then I like to redevelop my site using a new technology/idea/process. This time around it was a mixture of wanting to learn Sapper and a desire for wanting a more mobile-friendly editing experience that led me to start the redevelopment.

That, and the fact that every 6 months I look at my website and think "gosh that looks old to me now", but maybe that's more a symptom of not being really any good at design. Something that I am constantly talking about wanting to improve.

So I set off on my re-design/re-development project with 3 goals in mind:

  • Learn SvelteJS
  • Find a mobile-friendly headless CMS
  • Use a design-led process instead of barrelling head-first into CSS and HTML

Design Phase

So I started to design the thing.

I did some "googling" and researched a bunch of developer portfolios and picked bits out from what I liked and didn't like and started to create a "mood board" of sorts.

This is something that's always sat weirdly with me, I've always felt like it's simply copying other's ideas. Upon reflection though, that's probably due to me not doing enough research, and instead of finding multiple sources of inspiration and pulling them together, using a single instance of something I like and wanting to develop something like that, that isn't that. If you can follow that.

So I collated a bunch of things that I decided I liked and set out on designing the various aspects of my site.

I picked a colour scheme using coolors and started on the home page and blog listing.

Having always been someone who believed CSS was so simple to get going that I might as well just start there. I was surprised to see just how much easier it is to start with a proper design tool.

Using Figma , I was very quickly able to drag and drop pieces around so that I can see, without code, what my site would look like at various resolutions.

This may not seem like a world-breaking revelation to anyone reading this, but to this particular code-first developer, it has opened my eyes to the benefits of such a design tool other than just something that a non-developer can use.

Interestingly, my code-first mentality is so ingrained that I had to rip myself away from code to come back to the design tool when working on different pages (the " me " page for instance).

I by no means believe now that I am in any way a designer. This is all very basic. But I would implore any developers out there to just give a design tool a quick once over before diving into any personal work such as this.

SvelteJS/Sapper

Next, I booted up Sapper . Sapper is the Nuxt of the SvelteJS world. It is an application framework that sits atop SvelteJS (a component framework). It gives you all you need out of the box to create applications with SvelteJS

Quick side-bar though before you give it a go. There's a new kid on the block that is very similar but supposedly better called SvelteKit , which is essentially a re-write and re-brand of Sapper. The Svelte team have written a blog post about the differences and benefits of SvelteKit if you'd like to head over there for a read. Remember though: it's currently (at time of writing) in public beta (and only just). However, it is largely the same code structure so is supposedly very easy to migrate from Sapper to SvelteKit .

A bit of History:

If you've read any of my previous blogs or had a conversation with me around frontend development, you'll know that I'm a big Vue fan. My site prior to this was written in VueJS and Vuetify with Gridsome as the Static Site Generator (SSG) and markdown files as my content "database".

Vuetify has become a particular crutch of mine. Every project I start from scratch usually begins with a Vue + Vuetify setup. Whilst I tend to stick by this for more complex dashboard-type UIs, I have realised that this is not the most efficient way of working on brochure/blog-type sites.

So then my redesign became about not relying on Vuetify and pre-built components.

That said, I have no particular interest in writing relatively boiler-plate CSS. So I chose to go with Tailwind as my CSS "framework".

Svelte vs Vue

Whenever a developer touts the use of framework X over framework Y, any "X is better than Y because Z" statement can be loosely translated as "I prefer X over Y because Z but, to be perfectly honest, Y is perfectly alright". Never has this been more true of the discussion between Svelte and Vue.

They're both very similar. But I must say, I prefer Svelte.

I like that I don't need to import and then declare my components.

I like that I don't need a "setup" function or to export prop information other than the declaration.

I believe TypeScript works better with Svelte than it does Vue (even with the composition API, just have a look at typing your props).

And I like how the svelte stores work. Although, admittedly, I also really like the Vue Composition API.

And all of these statements I prefer over JSX, but that's not to say I dislike React.

So all of this essentially boils down to: I would choose Svelte first for a project. If I have a complex dashboard and I want something going quickly then I would likely stick with Vue & Vuetify because I know it best. If I have time to learn a material UI framework for Svelte, or put something more custom together, then I'd pick Svelte. And rarely would I choose React, but purely out of personal preference.

There's a lot to be said for having options and making choices based on individual scenarios isn't there?

Sanity.io

Why are people not talking about Sanity.io more? It is a headless CMS, that you can configure and deploy as code. It has a very generous free-tier, that is per-project not per-organisation/team. And it has a decent mobile experience! What's not to love?

It even has version/edit history.

Sure, it's a little basic at times. And it's not as simple as a "click and drag" type CMS such as Prismic or GraphCMS. But you sacrifice that simplicity to be able to configure it in code and therefore control it in git! You can deploy it as a static site to Netlify, and can easily customise it with React components.

The overall editing experience is super smooth though. It has one of my favourite rich text editors having previously used various CMS' including Prismic, Kentico, Umbraco, Netlify CMS etc. And it's fast.

I find it to be a very nice halfway house between the click and drag builder experience of Prismic and the overly customisable experience of heavy-weights such as Kentico.

I must say, early as it may be in the year, Sanity.io may be my favourite tech find of 2021. It has become my starting point for any project I need that requires user-editability.

In short

I haven't really covered off any code examples here, which was admittedly my original intention. Instead, I've tried to cover my findings from attempting an actual design-led process, with some new technologies and getting a little out of my CSS comfort zone.

If you're interested in the code, it's all available on my public GitHub .