first svelte app - 05-02-20

Corona Quarantine has been hard on all of us. To fight the boredom I started collecting online events. Now I’m sharing them via an app I built, /corona_cal. Take a look. The events mostly centre around my interest in art, gaming, and technology.

Tech

I’m in the process of learning Python and Svelte currently in my side projects. Corona Cal fits fits this stack perfectly. I did the backend layer in python and the frontend in Svelte. Also was a chance to try SasS content management vendor, Airtable. The stack is really growing on me. Even found myself enjoying more object oriented patterns in python.

Python

The backend is dead simple flask API. It acts as a middle man between the frontend client and the Airtable API. It takes in requests on /v1/events calls the Airtable API, caches the result in redis for 30sec, and return JSON. I’ve been making lots of small apps with Flask in the last months and had a lot of fun. Even been using tenpureto to reduce the boilerplate of setting them up. Using my template I can go from empty dir to python app running in my Kubernetes cluster in about an hour. Svelte was also quick to get working.

Svelte

React, Vue, Elm, ReasonML, PureScript, … now Svelte. JavaScript has all the fun. Svelte is like Elm in that it is a compiled “language / framework” that targets JavaScript. Where Elm is all about functional typed goodness Svelte is more of a remix of how HTML, CSS, and plain JavaScript are laid out + opinionated way of handling state and dynamic html. In Svelte you author components similar to how you do in react except instead of JSX you simply write .svelte files that contain styles, logic, and markup. It is quite smooth to use.

Here is a quick demo I made just for this post:

with code here

Airtable

I heard about Airtable a few years ago. Was pitched like a fun excel sheet with bunch of extra features that is easily accessible as an API. So far it has delivered on this. I simply created a table for my events and added the columns I needed. That was it!

cal airtable page

cal airtable page

One feature I found particularly helpful was the different views one can have on the same table. After Corona started I started only caring about Online events so I created a view that filters for just location == “online” and that was that.

Conclusion

Python + Flask for the backend and Svelte is a powerful combo. Looking forward to making more with the tools. Until then stay healthy.

tags: [tech] [python] [svelte] [airtable]