Like in the previous post about the Alpine.js this one is a quicky about a tool I created for my language learning blog kolmesanaa.

Clozemaster Study Goals

I use Clozemaster to do my daily Russian language vocabulary practice. I am running through the "Fluency Fast Track" word list that has 19,991 items to study. The goal I've set myself is to have at least started all words on that list by the end of this year. I've used Alfred - Productivity App for macOS to calculate a daily target but it has not been perfectly good. This assumes that every day is the same, and this is markedly not true. Specifically for me, I have more time to study on Saturdays and I would like to have a double the normal quota for that day.

Clozemaster Study Goals Calculated

Let's calculate some examples: Total target is 19,991. I've already started 5,366 words on that list. There are 327 days left of 2022 (as of Sunday the 13th of February) and there are 46 Saturdays still this year. This gets us to 327 + 46 gross days. We get the daily quota with calculation (19,991 - 5366) / (327 + 46) which gives us daily new word quota of 39, 78 Saturdays. I felt like this kind of relatively simple logic would work nicely as an Alpine.js web tool.

Persistence with Alpine.js

Before diving into code I will highlight two things. First, how to persist Alpine models to localStorage. To do this we need to install Persist plugin of the Alpine.js and after that using it will be almost trivial. If we convert the example from the last time to persist the number of button clicks, it will only change very little:

<div x-data="{count: $persist(0)}">
    <button x-on:click="count = count + 1">Add</button>
    <div x-text="count"></div>
</div>

Now if you keep on clicking we will remember how many times we did it for the next time you visit the page:

Eleventy Partials

Another adjustment I made was to create an Eleventy partial to be included in the templates to make sure Alpine.js plugins and the core are included and in the right order. That code is available in blogtimokooladev/alpinetags.html at master · timokoola/blogtimokooladev.

See it in Action

You can view the initial code I did for this tool at

See the Pen Clozemaster Counter by Timo Koola (@tkoola) on CodePen.

and the final version of the tool is live at kolmesanaa.link Clozemaster tool