Like many people, we're all in on the Wordle
craze. However, one of us is much better at it than the other (Matt), which makes the other person crabby (Kait). Immediately after almost not solving her first Wordle, Kait got to work on a plan to build a quick Wordle solver tool in Figma.
This tool was a great opportunity to try out simple.css and get to use Remix!
Some interesting parts of this project are:
A small project scope
To be frank, we are usually strapped for time and needed this project to be able to fit into a few kiddo nap times over a long weekend. In order to do this we opted for a simple interface with text inputs. Next time we have more free time we'd love to consider adding the following:
- Update the UI to post each guessed word, and flag each letter as Green/Yellow/Black
- Use Remix as more than just a SPA renderer and get updates via form submissions (maybe the whole UI could be SSR and we could deliver a zero-js app).
Accessibility was a big issue for this interface because we realized that the color interface for Wordle doesn't have accessible web contrast for the colored tiles. For V1 we chose to not use white text on a yellow background (for Present letters) or white text over light gray background (for absent letters). However, for recognizability we did use white over green for the correct letters so that it did resemble the game. If we have time to go back for a version 2 we would solve for these issues.
Light theme/dark theme (always)
Kait is always on and on about themes, and since the UI for this is relatively simple we used simple.css
to set up a light theme / dark theme. The theme will match whatever is set for your OS.
Smol footprint (but could it be smaller?)
In order to make the package size as small as possible, we realized we didn't need a whole npm library for word aggregation. Instead, we:
- Imported the wordlist-english library
- Grabbed all of the 5-character-long English words
- Stored them locally
- Removed the library
It could be argued, ”why use React?”. But we'd like to highlight that we were able to move quick with react and actually ship *something*. Even if it's a bigger .js bundle than necessary.
Keeping Wordle fun
Part of the euphoria of wordle is being stumped, thinking that a solution is impossible, and then rising from the ashes like the wordle phoenix that you are, on guess #6. This solver isn't for everyone, but even if you're against solvers (like Matt), replaying and seeing all of the guesses you had at every stage can give new life to each game.
Super easy continuous integration via Remix/Github/Netlify
has come a long way since its inception. We're blown away with how easy it is to make a remix app that deploys any changes to the master branch.
The steps were as follows:
- Run `npm init remix`
- Select netlify in the cli dialog
- Push the repo to github
- Connect netlify to the github repo
- You're done! 🎉