Ryan
@ryan.phonicsandstuff.com
phonicsandstuff.com developer | svelte / sveltekit | knows more about phonics than any web developer should
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?
Anyone have tips for getting good performance when you have lots of nodes that can be re-arranged?
November 4, 2025 at 3:17 AM
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?
Anyone have tips for getting good performance when you have lots of nodes that can be re-arranged?
I'm a few lessons in and already learning new, useful patterns. Excited to get more done tomorrow!
I’ve gotten a few questions from folks who are potentially interested in my new animations course, but want to test it out first, to see what my teaching style is like.
Well, good news! I’ve just published a couple lessons from “Whimsical Animations”. 🎉
Check it out:
Well, good news! I’ve just published a couple lessons from “Whimsical Animations”. 🎉
Check it out:
Introduction • Whimsical Animations
Welcome, prospective student! This small collection of lessons is designed to give you a feel for my teaching style, and the way the content is structured. I hope it helps give you a sense of what the...
courses.joshwcomeau.com
September 27, 2025 at 3:22 AM
I'm a few lessons in and already learning new, useful patterns. Excited to get more done tomorrow!
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.
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.
Morpheme Mix - Phonics & Stuff
Play a daily puzzle where you mix morphemes to make words!
phonicsandstuff.com
July 1, 2025 at 8:03 PM
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.
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.
Reposted by Ryan
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...
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...
April 18, 2025 at 3:49 PM
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...
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...
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.
I'm excited for the future of Svelte.
As of @svelte.dev 5.25 you can temporarily override a derived value, which is very handy for optimistic UI
• demo svelte.dev/playground/3...
• docs svelte.dev/docs/svelte/...
• demo svelte.dev/playground/3...
• docs svelte.dev/docs/svelte/...
March 21, 2025 at 11:10 PM
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.
I'm excited for the future of Svelte.
@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!
🎉 Introducing my upcoming third course, Whimsical Animations!
This course will teach you how to build top-tier animations and interactions using a variety of techniques. ✨
You can join the waitlist on the course’s brand-new site, which is the most ridiculous thing I’ve built in quite some time:
This course will teach you how to build top-tier animations and interactions using a variety of techniques. ✨
You can join the waitlist on the course’s brand-new site, which is the most ridiculous thing I’ve built in quite some time:
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
whimsy.joshwcomeau.com
February 25, 2025 at 2:23 AM
@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!
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.
So instead it's a bunch of Svelte 5 state runes and animation frames. It was a lot of fun figuring it all out.
We just made a new fun tool! Teaching students how to write letters correctly is critical, so we made some simple animations for use in classrooms or at home.
Come try it out and let us know what you think!
phonicsandstuff.com/handwriting
Come try it out and let us know what you think!
phonicsandstuff.com/handwriting
February 2, 2025 at 11:29 PM
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.
So instead it's a bunch of Svelte 5 state runes and animation frames. It was a lot of fun figuring it all out.
It's the easy little things that can make all the difference.
One perk of a fast, no-frills #flashcards app is how easy it is to fit learning into small moments with my child.
For example, while waiting for my youngest to put on her shoes, we can go through a few cards. Those little moments really add up.
phonicspig.com
For example, while waiting for my youngest to put on her shoes, we can go through a few cards. Those little moments really add up.
phonicspig.com
Phonics Pig
A Fun Way to Learn to Read, Together!
phonicspig.com
January 26, 2025 at 6:01 AM
It's the easy little things that can make all the difference.
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.
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.
January 18, 2025 at 6:41 PM
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.
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.
December 15, 2024 at 10:10 PM
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.
@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.
The reason I chose Svelte for our site was because of @tolin.ski's high praise.
Check out this awesome video from @syntax.fm showcasing the new #Svelte 5 features while building a simple task management app! 🚀✨
Svelte 5: In Action | Build A Tasks App
YouTube video by Syntax
youtu.be
December 10, 2024 at 4:29 AM
@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.
The reason I chose Svelte for our site was because of @tolin.ski's high praise.
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.
Just found the toggle between "font-elegant" and "font-boring" on the @svelte.dev docs 🤣
I'm on board with elegant any day of the week, serifs rule
I'm on board with elegant any day of the week, serifs rule
December 10, 2024 at 4:21 AM
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.
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.
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.
December 7, 2024 at 6:45 PM
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.
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.
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)
It's the simplest of our tools because it's just a web form with use:enhance. (thanks Sveltekit)
December 6, 2024 at 3:08 AM
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)
It's the simplest of our tools because it's just a web form with use:enhance. (thanks Sveltekit)
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.
His CSS course is how I actually learned to use CSS properly.
One of my favourite UI patterns is using `backdrop-filter` to create a “frosted glass” effect.
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
When I see this effect in the wild, though, it’s almost never as lush and realistic as it could be. There’s an important optimization that nobody makes.
✨ I share the secret sauce in my brand-new post:
Next-level frosted glass with backdrop-filter • Josh W. Comeau
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most reali...
joshwcomeau.com
December 5, 2024 at 4:21 AM
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.
His CSS course is how I actually learned to use CSS properly.
I appreciate any scenario to avoid $effect. I'm still scarred from using it in React.
Use bind:this on an html element to bind a dom element to an object property.
I use this solution for my rich text editor built with Svelte and it allows me to replace an $effect. Tightly link the dom element to my tree so that I can easily move the cursor to it after updating with tick().
#svelte
I use this solution for my rich text editor built with Svelte and it allows me to replace an $effect. Tightly link the dom element to my tree so that I can easily move the cursor to it after updating with tick().
#svelte
December 4, 2024 at 3:43 AM
I appreciate any scenario to avoid $effect. I'm still scarred from using it in React.
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.
I also like that I was able to easily roll my own auto poster via their API and a cron job.
So much this. Bluesky loves links. As @hankgreen.bsky.social says "people click on stuff and they leave the site, they leave! and they read articles!". I love how excited we all are about the open web. Our timeline is healing. Click on the video, and enjoy it on hankschannel! youtu.be/D4ghgVq9z4M
Twitter (and Threads) Have Made a HUGE Mistake
YouTube video by hankschannel
youtu.be
December 1, 2024 at 1:24 PM
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.
I also like that I was able to easily roll my own auto poster via their API and a cron job.
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!
If people have a better way to do this, let me know!
November 29, 2024 at 5:28 PM
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!
If people have a better way to do this, let me know!
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.
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.
November 26, 2024 at 12:00 AM
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.
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.
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.
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.
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.
phonicsandstuff.com
November 25, 2024 at 3:22 AM
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.
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.