Ryan

Ryan

@ryan.phonicsandstuff.com

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

62 followers144 following109 posts

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.

Josh W. Comeau@joshwcomeau.com

🎉 Registration is now open for my latest course, Whimsical Animations! This course will teach you everything you need to know to design and build stunning, creative animations and interactions. It’s time to make the web less generic and boring! 😄

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

Marce@marcebollin.com

I published my first blog post marcebollin.com/feeling-pixels It’s about borrowing properties from the physical world to make digital interactions feel better, and about my experience turning a vintage lamp I really like into a theme toggle for my website

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

Josh W. Comeau@joshwcomeau.com

✨ I just published a new blog post about a nifty lil’ animation technique: sprites! Sprites are used all the time in video games, but they’re less common on the web. We do have the tools to manage it in CSS, but there’s a gotcha. In this post, I share some of the cool use cases I’ve found:

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

Julia Shayto@phonicsandstuff.com

Join us for a virtual event hosted by LearnUp Centers and Phonics & Stuff! I'll be talking about how to use the Phonics & Stuff tools to teach reading. I've broken down 30,000 words so you don't have to! Come learn how this fuels our free games and teaching tools. www.eventbrite.com/e/learnup-sp...

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?

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

Josh W. Comeau@joshwcomeau.com

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:

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.

rich harris@rich-harris.dev

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

@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!

Josh W. Comeau@joshwcomeau.com

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

Julia Shayto@phonicsandstuff.com

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

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 schema evolved as we developed it, but stabilized a few weeks ago. We use a few hardcoded flashcard decks, based on the educational scope and sequence of a few different phonics programs. In the future, we plan to let users make a custom deck, but wanted to get it all working first.

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.

Luca LaValva@lavalva.dev

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

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.

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)

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.

Josh W. Comeau@joshwcomeau.com

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:

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

Axel Briche@axelbriche.bsky.social

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

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.

patak@patak.cat

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

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!

Argh, typos. I do wish Bluesky had an edit option. I meant... For shared URLs, we encode the settings and then read them in Sveltekit's load function for the page

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!

View full thread

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.

This is my cobbled together solution to let users share stuff, while maintaining their local device settings. It feels a bit janky, so would love suggestions to improve it or more efficient ways to implement.

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

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.comPhonics & StuffPhonics & 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.

You are up to date.