I want to share a project that took me over a year to complete, if it could be called complete now. Lil Wiki is a tool I built after my now four year old kept asking me to look things up for him. Once I had done so, he'd ask "What's this?" about every picture about five times until I was tired of reading the captions out loud. Somehow, mid-pandemic last year, I managed to build the first prototype of a web app that would look up articles on Wikipedia, get the images, then read the captions out loud. It did exactly the trick and I could give it to my son and feel like he was getting reasonably educational screen time. This week was "inspiration week" in the Wikimedia product department, where I'm now an engineering manager for a new team that will support our Trust and Safety department. I used that time to fix up some blemishes in the user experience, and make it ready for sharing. Specifically, I improved the app by opening a new modal each time a user clicks on a search result, rather than loading the images at the bottom like I'd done before. The tricky part had been getting the close button working, but it went quickly this time. Unfortunately, I can't remember why I was struggling with this feature six months ago. I also added a title to the new page/modal. This turned out to be slightly trickier than I first thought, because I had to pass the result name to the state through an attribute on the DOM element. I got it working after some trial and error.
While I wanted this post to detail all my trials, tribulations, and learnings while building this, it turns out this blurb is what I have the energy for. I felt very accomplished after working on this. Next up will be url parameters for image pages. Wish me luck!
