Find the differences
30 days
I was hearing rumors about a new and exciting Javascript framework that checks all the important boxes:
- simple & lightweight
- super fast
- has familiar syntax
- uses signals
So I thought - what's a better way to learn about it, then to use it to make an oldschool puzzle game - Find the difference?
The game
Find the difference is a visual game where the goal is to find and mark all differences between two images.
I used to play it all the time as a kid... but not online. I would find it in those crossword magazines and mark all the differences with a pen. Then I would check the results on the last page of the magazine.
I knew that playing such a game in digital form wouldn't feel the same. However, I was hoping that maybe the digital form can also have some benefits and perhaps introduce some new aspects to the game... which it did.
I created some additional rules in order to give the player more of a challenge:
Time limit
You have 3 minutes to find all differences!Difficulty
Depending on how far your guess was from the actual difference, you get a certain amount of points.Mistakes
Clicking on a part of the image which is not different counts as a mistake. Three mistakes and you're out!
Images
Diffinder features a library of 12 hand picked (mostly AI generated) images. All images were taken from Pixabay and you can find the sources here.
I modified each image and saved the difference data in JSON files. Each file contains data about difference coordinates, image paths, difficulty level, etc. It looks something like this:
1{ 2 "id": 1, 3 "name": "Cabin house", 4 "image-left": "cabin-house-1.webp", 5 "image-right": "cabin-house-2.webp", 6 "difficulty": "easy", 7 "differences": [ 8 { 9 "x": 207, 10 "y": 114 11 }, 12 { 13 "x": 776, 14 "y": 453 15 } 16 ] 17}
My thoughts on SolidJS
Overall, a very solid framework! š
All jokes aside, the developer experience while working with SolidJS was enjoyable. After initially reading the docs, I rarely found myself going back and looking for answers. This signals that the framework is predictable and easy to use, which is always a good thing.
-
The syntax feels familiar - anyone who's worked with Typescript and JSX will fit right it. It feels like a bridge between vanilla Javascript and React.
-
The requirements for this project were very simple and straightforward, so it was unlikely that I was going to run into trouble. If this was an otherwise enterprise level web application, I probably wouldn't go with SolidJS because I don't know how it would scale and if community support is good enough.
ā¢Ā Signals are awesome! They single-handedly solve some of the biggest problems in React and other frontend frameworks, such as state management, reactivity and performance. They also work with plain old Javascript, making them framework independent. This means that you don't have to worry about the React rules of hooks, for example.
I recently read a YouTube comment about React hooks. It said something along the lines of:
The dependency array in React is a framework leak.
It makes the developer worry about something that should've been handled by the framework.
... and I agree 100%. Frameworks like SolidJS and Svelte have already solved this, and apparently, React is jumping on the wagon as well, according to Andrew Clark.