From Zero to Svelte: writing Units in Svelte and SvelteKit
A few days ago I published units, a simple CSS units converter written in javascript. When I started working on it a few weeks ago, I had just two main objectives:
- building a CSS units converter closer to my tastes compared to what's already available online;
- finding a framework that would let me develop my ideas quickly enough to not get bored with them.
First point is rather straightforward: most online css converters around are rather clumsy, not particularly appealing, and more often than not full to the brim with ads and spyware. Jury is still out if units is any less clumsier than the alternatives , but at least I can assure you there are no obnoxious ads or tracking cookies outside of a single google tag. I can reasonably guarantee that it will stay like this for the foreseeable future.
Second one is… a bit tricky to explain.
Thanks to a combination of ADHD, having a full-time job, and me definitely NOT being a so-called 10x developer (more like, 0.75x) I was looking for a platform that would check the following boxes for my personal projects:
- Quick to iterate;
- Manageable to work with in small time chunks;
- Reuse my current dev skills as much as possible (probably the hardest requirement to match)
- Modern, still supported and with a large community behind it.
I wasn't too focused on the specifics of the platform - this was mostly an exercise in getting out of the pit of Wordpress Development Hell, which takes the most of my Dev Work Hours™ and sanity. Some other candidates included Swift (neat language and extremely solid UI options for desktop and mobile, but too far exotic compared to my current skills to be able to quickly build anything outside of a few demos), Laravel (amazing, full fledged platform for basically anything web-related, definitely an overkill for the scope I had in mind) and Next.js/React (whose previous exposure I had trough Wordpress Gutenberg Blocks truly made me grow a distaste for the entire ecosystem).
On the other hand, Svelte and SvelteKit came out from this trial surprisingly close to my idea of “perfect“ platform: moving into it is extremely straightforward for anyone with basic experience with modern javascript, and the reactive libraries and additions to the language for state management felt like an actual semplification of the development process, rather than additional constrictions around vertical abstractions like Redux or MobX. Also - I know this is considered controversial is some developer circles - the decision to store a full component (style, code and UI) inside a single .svelte file is a godsend if your ADHD causes you to constantly lose your plot jumping from one file to another.
There's quite a bit more to Svelte than this, of course. A more in-depth analysis of Svelte and Sveltekit this 2023 blog post by Claudio Holanda fully matches my experience with the framework, expressing it way better than I possibly could.
So, here’s a few tidbits on writing Units: from idea to completion it took roughly 40 hours, spanning around 4-6 weeks, usually spending no more than 2 hours per day (often way less), including learning Svelte and SvelteKit. The UI was built using Tailwind and Flowbite, both of which I had already sone experience with. After a quick comparison between hosting solutions available specifically for sveltekit, the choice fell on Cloudflare Pages and their generous free tier.
Within the extremely narrow set of self-imposed requirements I had come with Svelte performed admirably. Sure, a better developer than me would’ve fared better and faster with something a lot more clever like Elixir/Phoenix or Elm (but I’m definitely not that developer), and some of the alternatives I’ve tested deserve another chance (Swift especially), but in the meantime, I’m quite confident that Svelte will be my first pick for any web-based project in the future.
