Recently my wife and I goofed around and made an animal-based phonetic alphabet after she heard me Alpha-Bravo-Charlie-ing serial numbers over the phone to AppleCare recently. Wanting to take this joke one step further, I thought it'd be fun to make a site out of it. Even better, I finally had a low-complexity concept to work with, giving me the perfect opportunity to test drive the hyped SolidJS framework that recently hit 1.0 and has looked very intriguing.

As I don't love just blindly copying starters (I am a professional JS tooling nerd after all), I poked around on their site looking for the ideal way to get rollinng and found that Vite was their recommended bundler. I'd previously tried to use it for a simple React project and ran into a few annoying ES5 vs ES Module build issues, but Solid and its ecosystem are ESM from the beginning so everything worked smoothly. Solid is really neat, and seems to bring a lot of similar build-time-optimization ideas as Svelte while leaning into the niceties of JSX and other React concepts instead of (what I think of as) old-school handlebars-y templatinng systems. The reactivity aspect of it definitely was a little magic on the surface, but I think a lot of people feel the same way about hooks and I'm sure after working with it you get used to its patterns. And it was great that it worked flawlessly with TypeScript. I'm definnitely intrigued enough to want to try something bigger with it to really dig into its higher-level concepts, especially once they pin down some of the broader ecosystem offerings like solid-start.

This also presented a chance to try out TailwindCSS via the excellent WindiCSS framework since it was the most popular style recommendation (it's pretty popular everyhwere at this point). While this was my first time using Tailwind, I've used atomic/functional CSS setups before and this mostly felt like that. Honestly, I don't really feel more productive with them than I do using CSS-in-JS solutions like styled-componnets, since I ultimately feel like I'm writing all my own styles either way (and I'm very comfortable slinging some CSS). I did however like Windi's tooling: it's pretty slick how it can extract only the class declarations you used (even finding them in class string constructor functions), and leave behind all the unused parts of the rest of Tailwind. That approach pairs rarely nicely with Solid's minimalist approach as well, generating a tiny app bundle.

And of course, this is all served via Netlify because it's so convenient and works so well. One day I'll try out the other new competitors out there (especially if the rumors about CloudFlare's managed Postgres come true!).

Check it out at abc.risto.io.