www.dinosauratlaw.com Best Halloween costume accessory? A website and business cards.
Ryan
Ryan
@ryan.phonicsandstuff.com
phonicsandstuff.com developer | svelte / sveltekit | knows more about phonics than any web developer should
62 followers144 following109 posts
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!
Ryan reposted
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...
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.
🎉 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.
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
My bracket is looking pretty rough, but still loving this whole thing. madcss.com/bracket/dr-s...
@joshwcomeau.com manages to produce the most insightful, enjoyable posts about what the web can truly do.
✨ 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.
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 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:
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.
Ryan reposted
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...
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.
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!
🎉 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.
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
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
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.
@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 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.
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.
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.
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.
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
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 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.
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.
You are up to date.