My almost-three-year-old keeps trying to use my computer, so why not use that as an opportunity to help learn typing, letters, spelling, and pronounciation?
Typed alpha-characters are displayed and spoken. Pressing Enter will speak the written word. Other keypresses are generally ignored for now.
- SolidJS for fast and lightweight reactivity
- Fitty for automatic text fitting
- The not-a-standard
SpeechSynthesisbrowser feature for Text-To-Speech
Note: Chrome has a built-in TTS engine that is better than most defaults: "Google US English" - Deployed to Vercel
I am fully aware that I am mixing Solid's signals and vanilla JS arrays, this was built in 4-6 hours during a holiday, with the majority of that time fixing edgecase bugs to ensure the letters are always spoken correctly, even when deleting typos. If you want to show a better way to implement this, please create a PR!
- Service Worker to cache the site and make it work offline
- Feature detection for if TTS isn't available
- A dev mode to let you choose fonts and TTS voices, saving prefs to local storage
- Single-letter-mode
- Music mode: letters play notes instead
- Spellchecker with a "did you mean X" on submit, ideally with a fancy transition from the submitted text to the correct spelling
- A generative AI / other image search to find an appropriate image, if the object is a standard item (like an apple, house, etc) or an animal (Dog, Cat, horse, penguin, etc), which is then shown during the submission
- A submission history that's easily visible
- Raspberry Pi script to boot directly and fullscreen into the built site
- Wakelock API
In all likelihood, this will never happen, but one can dream!
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
Builds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
You can deploy the dist folder to any static host provider (netlify, surge, now, etc.)