iiinova — where your digital self keeps evolving

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

Reposted by Ryan

Jake Archibald @jakearchibald.com · 29/06/2026

There's an ideal set of sizing constraints for custom <select>, but the CSS is a bit tricky. Here's how to make it work, and a tour of new CSS features along the way. jakearchibald.com/2026/goldilo...

jakearchibald.com

The Goldilocks customizable select height

The 'ideal' sizing is more complicated than you think…

1331055

Ryan @ryan.phonicsandstuff.com · 27/04/2026

I was in early access and already found this to be an amazing course. Can't wait to dive in now that it's finished.

241

Ryan @ryan.phonicsandstuff.com · 27/04/2026

Clearly, I need to up my game on the interactive elements on our site.

010

Ryan @ryan.phonicsandstuff.com · 21/03/2026

My bracket is looking pretty rough, but still loving this whole thing. madcss.com/bracket/dr-s...

madcss.com

dr-starchildren's Bracket | March Mad CSS

Check out dr-starchildren's bracket picks!

000

Ryan @ryan.phonicsandstuff.com · 24/02/2026

@joshwcomeau.com manages to produce the most insightful, enjoyable posts about what the web can truly do.

1142

Ryan @ryan.phonicsandstuff.com · 12/01/2026

Julia is the real brains behind our site. I just make pretty web pages with her data.

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 · 27/09/2025

I'm a few lessons in and already learning new, useful patterns. Excited to get more done tomorrow!

020

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

phonicsandstuff.com/puzzles/morp... This was fun to build. Some of the svelte animations are still a bit janky though. Has anyone tried combining slide and flip? Since the content of the element changes it creates gaps before they move together. Probably a limitation of flex box.

phonicsandstuff.com

Morpheme Mix - Phonics & Stuff

Play a daily puzzle where you mix morphemes to make words!

010

Reposted by Ryan

Julia Shayto @phonicsandstuff.com · 18/04/2025

Addition Worksheet Creator Create addition facts worksheets from 0 to 10. Why does a phonics website have math worksheets? Because we do phonics AND stuff. The stuff includes math! phonicsandstuff.com/worksheets/m...

011

Ryan @ryan.phonicsandstuff.com · 21/03/2025

The runes stuff took a bit to fully arrive and converting was a bit of a pain, but I've loved all the improvements that keep coming now. I'm excited for the future of Svelte.

020

Ryan @ryan.phonicsandstuff.com · 25/02/2025

@joshwcomeau.com's CSS course is still one of the best courses I've bought. I skipped the React one because I moved to Svelte, but am looking forward to his new one!

140

Ryan @ryan.phonicsandstuff.com · 02/02/2025

This was the first time I'd dabbled into SVG animations. I tried to do them with CSS originally, but kept running challenges. So instead it's a bunch of Svelte 5 state runes and animation frames. It was a lot of fun figuring it all out.

030

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

It's the easy little things that can make all the difference.

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 · 10/01/2025

I love all the games @neal.fun makes. I spent a long time on absurd trolley problems. Let's see how many hours I'm about to lose.

000

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 · 10/12/2024

@syntax.fm is hands down the best web dev podcast. I like the move into video too because sometimes you need to see the code. The reason I chose Svelte for our site was because of @tolin.ski's high praise.

0162

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

I'm a big fan of the choice to pick a serif too. We opted to use a serif font for our articles because it does seem classier.

010

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

Migrating to Svelte 5 has been a chore. I had several dependencies that used 'svelte/internal'. This error is a pain: Error: Your application, or one of its dependencies, imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5.

000

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 · 05/12/2024

I always appreciate Josh's posts because they're filled with great visuals, practical examples and written very clearly. His CSS course is how I actually learned to use CSS properly.

110

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

I appreciate any scenario to avoid $effect. I'm still scarred from using it in React.

000

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

Bluesky does feel more like the open web. The incentives to not wall people in are why I've enjoyed it thus far. I also like that I was able to easily roll my own auto poster via their API and a cron job.

020

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

We want people to be able to share the settings for our games and tools, or save their own settings. To account for all the options, we have two ways of initializing state using Sveltekit features: shared URL and Local Storage stores. If people have a better way to do this, let me know!

100

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

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

Hello Bluesky! I'm the main developer on phonicsandstuff.com. I'll be posting fun tidbits about the site's technical back end. Our stack is a big jumble of things, but currently we have Sveltekit, Mongo DB, and Supabase in the mix. Sounds insane? Well, I'm just making it up as I go.

phonicsandstuff.com

Phonics & Stuff

Phonics & Stuff is dedicated to providing high-quality resources for learning and teaching phonics. Explore our games for learners or our sophisticated tools to create customized phonics lessons.

170