Building The Silly Home website with SvelteKit

Picking the right infrastructure

At the beginning, I used WordPress to build my website. It was sufficient at the time as I was only using it to share content and write blog posts about The Silly Home. This worked well for a few months and the theme Neve made it quite easy to build a decent looking website. In particular, the blog was easy to use and the formatting made for a consistent looking site with good usability. All in all, not much work for a decent result.

The main drawback with WordPress was the lack of flexibility. As part of my product vision, I want a user to be able to sign up to the service, view their device’s accuracy and model metrics . With this longer vision in mind, it made me start to consider an alternative solution to building a robust website/webapp. For this to work, the solution must be able to create a login system and a data visualization component.

Web development was never my forte so I was initially apprehensive to either pay someone to build it for me or build it myself. In the end, I wanted more control and wanted to learn the skill so decided to attack it myself. Luckily I had some awesome help from Janice to do all the web UX/UI designing.

When choosing the web development framework to user, the key characteristics I was looking for was ease of use and quick implementation. Throughout my research I relied heavily on forums and blog posts to guide my decision on the final infrastructure to use.

Here were a few options for frontend and backend.

Front End

• JavaScript framework
• • React
  • Angular
  • Sveltejs

Back End

• NodeJs
• Python framework
• • Flask
  • Django
• PHP
• • Larvael
• Sveltekit

Database

• MongoDB
• Firebase
• Supabase

For me, the main decision was to either go with Python Approach with Flask or Javascript with Sveltekit.

I have experience with Python so initially Flask seemed like the way to go. However upon further analysis and testing, I picked SvelteKit. The reason I ended up using Sveltekit is because of the community! Svelte itself is the most loved frontend framework. SvelteKit is still in Beta meaning new features, leverages new technologies and won’t be tied down to the past. I also picked up Supabase (open source with a free hosting plan) along the way as my authentication and DB.

Web development journey

After picking the framework, the actual coding began. I split the task into two main sections which can be deployed independently. First is the website including home, about us, blog and contact us pages. This is essentially replicating what I already had with WordPress. Secondly, I want to build the accompanying webapp with authentication and a basic dashboard. This will be the UI of The Silly Home.

From Figma to Website

I built the website based on a Figma file. The Figma design really helped as I can switch off my creative brain and just implement it as is. However, even for a simple website, I found there was quite a lot of things to think about in order to make the site function properly. There are many ways to do the same thing and it’s not clear cut on which is better. Here is a summary of a few bits and bobs that I learnt.

Flex-boxes: Just placing content on a page, I initially started with using absolute margins and paddings to fit everything together. This was very tedious and the html code got bloated from the additional tags. For me I ended up using flex-boxes for almost everything. They provided an easy way to abstract out how to place the content. I imagined all the content as boxes within boxes to put them in the right place.

CSS units: The various units like px, rem, vh and %. Each has their purpose and I now find being consistent in what you use what for is more important as you can then mass replace them. Now I’ve designated the following - px > absolute sizes, margins & padding - vw / vh and % > flexbox responsive sizing. I must say the difference between px and rem still confuses me and although a few posts I read suggested to use rem as the preferred unit, they do not convert well with iOS devices.

CSS hierarchy: There are 3 ways to place CSS code. Global > Local > Inline. Used Global from style definitions, Local for component definitions, and inline to control colour/size/margins.

Responsive design: There’s 2 dimensions, a continuously responsive design with vh / vw or % and switching to an alternate format. The first is easy to adopt but the second actually requires a totally different design and a lot of time. Now I understand why getting things mobile ready is not so easy.

How is SvelteKit?

On SvelteKit itself, I found it very intuitive and nice to use. The split between server and client is clear - especially with the latest +page +page.server naming. The routing, endpoints and form actions design also makes it easy to build a full stack site.

I would say that there is less code examples and documentation due to the fact its still in beta and things are still changing. This meant that some of the examples I found were outdated and needed to be adapted for it to function. I found the below resources very useful:

https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog

https://joyofcode.xyz/

https://www.youtube.com/playlist?list=PLLnpHn493BHF-Onm1MQgKC1psvW-rJuYi

With it getting more stable, I’m confident it’ll become the de-facto framework to use.

Overall, I am having much more fun building the site than I imagined. Seeing it go from a design to a working website is quite satisfying!