I'm messing around with D3 and Svelte to make morpheme graphs. It's a fun playground to see how different morphemes are connected by a base word.

Anyone have tips for getting good performance when you have lots of nodes that can be re-arranged?

Just a flash card that's printed upside down. So you can tape it to the wall and when you flip it up, it shows the answer correctly.

I just added Google OAuth to our site. Supabase helped make it easier, but the process felt convoluted, especially getting approval from Google.

Regardless, it was a good learning experience. I also added a local storage hint so you can see which you used, because I always forget.

We release our flashcard tool today. This was the first thing we've added that really tracks progress in a reading skill. I hooked it into our Supabase postgres to track progress on each card, so we can implement space-repetition learning. Sveltekit made it easy to let users create decks.

The hardest part is showing words that have the split digraph (also called silent e). I got help with a clever CSS trick in @joshwcomeau.com's Discord to add the lines between the two boxes to show that the letters are connected.

Our most popular feature by far is our Word Mapper. You can look up words in our Mongo database and see how we've broken it into its letters and sounds.

It's the simplest of our tools because it's just a web form with use:enhance. (thanks Sveltekit)

When we mount the page, we check if we received data from load. If we didn't, then we check Local Storage (again verifying data), if nothing is there, we initialize it and put in a default.

We use a store for each page's menus, and so far we aren't near the limit of local storage, but we'll see.

For shared URLs, we The URLs encode the settings and then read them in Sveltekit's load function for the page, doing some validity checks, which are passed in on the data prop. We assume if you visit via a shared URL, we'll overwrite Local Storage state.
Example:
phonicsandstuff.com/sound-letter...

The critical point is the correspondence mapping. It lets us distinguish between 'read' and 'read'. :)

I read the book yesterday.
I will read the book tomorrow.

With these mappings, we can cut the data in lots of fun ways, which I'll cover in future posts.

I used Mongo DB (after struggling and failing with mysql). Each word is broken down into its correspondences, a unique letter-sound pairing. We also track a few other things that let us do sorting and include them in games.

The core of our site is the Word List Builder. @phonicsandstuff.com had words in a spreadsheet for years and finally the sorts and functions took several minutes to complete.

I offered to turn it into a database and website. The initial site was in React and moved to Sveltekit when it hit 1.0.