Web Features Game

Inspiration

I've never heard of the Baseline project even though I try to follow new browser APIs and features. I've seen the MDN browser table many times, so when I read about this Hackathon I thought - great, I'll find a tool that has yet to integrate it and add it. My first thought was a Pycharm plugin and it took some research to see it was already integrated directly into the IDE. That made me build the awesome-web-dev-baseline repo so that I could see what exists. I was sure this will be the way to go and prepared to look for less well known tools, so I spent some time researching and updating that repo until I was satisfied.

While doing unrelated things, as always, the idea of a game popped into my head. At first I didn't take it seriously since this is a bit out of the left field for this hackathon. I talked to a friend and we agreed it is not a good idea. As a lark I asked my vibe server Claude to create a game with the simplest prompt (typo included):

download this npm repo: https://www.npmjs.com/package/web-features,
understnad the various features it has and create a web game
that tests user on which feature has which status (baseline 
2024, full-available, etc)

I had little faith in the result, but surprisingly it one shot a game, and shockingly, that game turned out fun and educational, leading me to learn a lot more about the features themselves then I expected.

What it does

This is a quiz game that uses Baseline data to measure user's knowledge of web features. It has two question types:

1. Shows you a feature and asks what is its maturity (multiple choice).
2. Shows you two features and you need to choose the newer one.

How we built it

Lately I've been exploring using Claude Agent to write initial code and then integrating it and polishing it with hand written code. I started with the prompt above and then changed some of Claude's weird decisions - for example it started out with its own server, while I preferred to use Django so that backend features can be added. I then thought of another question type - which is newer. This turned out even more interesting to me. Then I spent some time on the educational side adding links to MDN - each feature links to MDN search of the features as the Baseline data doesn't have a link back to MDN, and this worked well enough. Then I spent some time polishing the UI and UX, matching colors to the Baseline logo. Then added a summary screen and more small changes and fixes.

Challenges we ran into

Main challenge was to overcome my initial doubt of this idea and actually explore it.

Accomplishments that we're proud of

I'm proud of finding a fun creative twist on the requirements of this hackathon. I'm very happy of how the game is not only fun but also taught me about new features and surprised me with which features come first.

What we learned

Most importantly, through playing the game I learned a lot of surprising facts about early web features and which came first, and about new web features that I have not heard about (I've talked to a few frontend developer friends and no one new about popover for example) Technically - I've learned and am learning a lot about working with AI agents and how to prompt them better and also their weak points.

What's next for Web Features Game

1. I am thinking of new question types, especially ones that facilitate learning new features or recognizing them from code or even screenshot of live use.
2. Add natural game features such as stats, leaderboards and challenging friends. Which feature do the least people know about?

Built With

• javascript
• python