I'm a dad of two wonderkid Italian brats.
A 9yo voracious reader and creative writer, with quite a mathematical mind and a 6yo artist (in the last 12 months we probably killed more trees using paper for his doodles, drawings and paintings than a Swedish furniture company — bad joke: they are really good taking care of replanting, they don't deserve it, but you know, to give you a sense of it...)
Anyway, given their energetic approach to things, my significant other and I had some troubles getting them to behave, I guess as any other parent (if not sucks to be you: adolescensce will hit hard), until when she came up with a gamification strategy to keep challenged to get better.
The idea is simple: they'd get 3 stars every morning which they'd lose when misbehaving. Probably we won't win a pedagogy Nobel prize, but it did make the trick for us.
Of course their results are tied to small prizes they care about, such as playing computer, getting an afternoon snack at a cafè with mum or watching movies.
We used to keep track of it on a chalkboard painted in the kitchen, but
- It's way too analog
- We can't get an over time overview
- When we are out we need to remember to update it
The project
I started playing with the idea of having a way handling their stars on the go. And I tried to involve them in the process as much as I could (at least in defining the user interface).
To start with I wanted to have an appealing imagery, with some animation and maybe sounds. Something funny to research with the kids.
Living far away from their grandparents, they are quite used to Skype them and they love to send them funny emojis, hence I started there.
EmojiOne is a great resource, plus it's released under Attribution 4.0 International (CC BY 4.0) which means I could use their assets as long as I provided the credits for them.
Next up was to add Animate.css and possibly audio clips for the actions of adding and removing a star.
While I was looking at it the younger one was taking care of animation and the older was asking me stuff about the code 🔥🚒
The theme
During development I figured I could make it even more engaging for them theming it with Star Wars (they love it!). I picked a freeware font matching the Star Wars style and I made it happen.
The title itself originated from an unused domain of mine, OBK.IT, but it gets funny if you think about Vader saying it to his kids.
I also used an amazing set of free Star Wars icons assigning them to kids name
import convertString from 'convert-string'
import digitalRoot from 'digital-root'
function stringToDigit (string) {
const stringToNumArray = convertString.stringToBytes(string) //an array of numbers
const numericString = parseInt(stringToNumArray.join(''), 10) //joined the array
return digitalRoot(numericString) //added up the digits recursively until 1 is left
}
//[...]
<img
className={style.icon}
src={`/assets/svg/icons/${ stringToDigit(name) }.svg`}
/>
Also, the audio:
The technical choices
After the kids lost interest, 5 seconds after we settled the theme, I was left alone thinking about what I wanted to learn developing this pet project.
A couple of things I was always curious to work with were Firebase, a no-backend solution I only scratched the surface of, and MobX the (not so) new kid on the block of architectural approaches in react-land.
I decide to go for both, which wasn't the smartest idea ever (more to come on the topic).
I searched for some integration of the two, but everything I seemed to find was relying on an old version of MobX. Truth to be told, I also wanted to play with the integration myself, so I dropped the search quite quickly.
I started developing what I thought was a decent solution but what I ended up with was too spaghetti code for my taste.
I did a few iteration of refactoring, first of all staring to embrace the MobX way of having multiple stores and I ended up with solution reasonable enough, for the moment.
function setStars (kidName, value) {
setDbStars(kidName, view.day, value) //update firebase
view.setKid(kidName, value) //update current view store
graph.updateGraph(kidName, value, view.day) //update graph view
}
This is the function meant to update the kids stars, and gets invoked to add or remove a star. As you can see it ends up updating the Firebase database as well as 2 different stores (yes, the argument order is different, it bugs me too).
Firebase provides event driven bindings on database events and now I know that I should have subscribed to those, to update the stores, rather than invoking the changes myself: I would have had one source of truth and no need to remember what to update as every single store would have subscribed to their own needed bits.
On top of having them to play well together, both Firebase and MobX have a learning curve: Firebase needs some care in structuring the data in order to have easy access to it; MobX seems like magic, but, for the same reason, when something doesn't behave as you expect it might take a bit to figure out.
On the bright side I had authentication basically for free as Firebase makes it really easy to work with and the documentation is quite straightforward and apparently (once I fix the store update) I should be able to get offline too.
Another tech choice
The other bit of tech I was willing to look at was CSS Modules. When I first encountered the idea I was really really skeptical, trust me really.
In 2016 I had the chance to listen to this talk by Mark Dalgleish and I have to admit he kind of got me, but I never had the chance to form my own proper idea.
Embedded iFrame
The result of my investigation is that I really like them, that most of the objections about it being CSS in JS are quite superficial (it's encapsulated CSS, JS doesn't have to do anything with it, besides consuming it: CSS Modules exports a class name, not the class styles, no style gets inlined) and they solve many of the problems of a modular system. They might not be ideal in every project, but they surely are a huge improvement in certain situations.
Next steps
Having mentioned offline, the first things coming to mind are Service Workers and Progressive Web Apps. The first I played and experimented with a bit, the latter less so, but they should both be at reach in terms of further development.
Beside that, and the refactoring of the data flow I mentioned before, putting Firebase at the center, I want to play with theming: Star Wars is surely spot on, but why can't I have a switch turning it into an 8-bit hearth based system?
Something like the one you can find on Sirlisko's website
The Code
Obey Kids: https://github.com/cedmax/obey-kids