iiinova — where your digital self keeps evolving

Ryan

@ryan.phonicsandstuff.com

61 followers 144 following 109 posts

phonicsandstuff.com developer | svelte / sveltekit | knows more about phonics than any web developer should

Posts Replies Media

Ryan @ryan.phonicsandstuff.com · 29/07/2026

We turned one of our internal tools into a new feature! phonicsandstuff.com/morpheme-puz... We make daily puzzles. I made a simple internal site to help create them. Maybe other people want to make puzzles too! We even added a submission option, so you could be featured as a puzzle maker!

Morpheme puzzle maker screenshot.
1. add words or morphemes
2. Review your puzzle
3. Save the puzzle if you're a member

000

Ryan @ryan.phonicsandstuff.com · 04/11/2025

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?

Morpheme graph for the base 'struct'. The word deconstructionist is selected.

Morpheme graph for the base 'struct'. The morpheme 'un' is selected, which shows all words using it.

030

Ryan @ryan.phonicsandstuff.com · 26/01/2025

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.

Flip flash card that is taped to the wall. When flipped up it shows the answer.

110

Ryan @ryan.phonicsandstuff.com · 18/01/2025

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.

Login Page with a hint about which login you used last.

020

Ryan @ryan.phonicsandstuff.com · 15/12/2024

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.

Screenshot of flashcard tool. A flashcard with the word map and a picture of a map. Buttons to rate the card as hard, medium, or easy.

120

Ryan @ryan.phonicsandstuff.com · 06/12/2024

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.

Letter sound mapping for pine
p i-e n
/p/ /ī/ /n/

CSS screen shot:
.se,
.connected {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
gap: 8px 4px;
place-items: center;
position: relative;
--characters: 1;
}

.connected::after {
content: '';
position: absolute;
width: 67%;
height: 100%;
top: calc(var(--highlight-elevation) * -1);
left: 0;
right: 0;
margin-inline: auto;
border: 2px solid black;
border-bottom: none;
}

010

Ryan @ryan.phonicsandstuff.com · 06/12/2024

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)

Letter sound mapping for the word phonics
ph o n i c s
/f/ /ŏ/ /n/ /ĭ/ /k/ /s/

100

Ryan @ryan.phonicsandstuff.com · 29/11/2024

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.

Mount function to check if URL had parameters or if there is local storage.

100

Ryan @ryan.phonicsandstuff.com · 29/11/2024

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...

Javascript code for a sveltekit load function.

210

Ryan @ryan.phonicsandstuff.com · 25/11/2024

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.

Mongo DB entry for the word 'read' and 'read'
word: read
corrList: array ["r", "ea", "d"]
letters: 4
syllables: 1
phonemes: 3
freq: 338
type: CVC

word: read
corrList: array ["r", "ea2", "d"]
letters: 4
syllables: 1
phonemes: 3
freq: 339
type: CVC

010

Ryan @ryan.phonicsandstuff.com · 25/11/2024

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.

Mongo DB entry for the word 'and'
word: and
corrList: array ["a", "n", "d"]
letters: 3
syllables: 1
phonemes: 3
freq: 5
spelling: 1
worksheet: 1
type: VCC

Mongo DB entry for the word 'that'
word: that
corrList: array ["th1", "a", "t"]
letters: 4
syllables: 1
phonemes: 3
freq: 10
spelling: 1
type: VCC

110

Ryan @ryan.phonicsandstuff.com · 25/11/2024

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.

Word List Builder for phonicsandstuff.com. It shows several letters to select, which will then show words that match the letters.

120