Introducing CSSBattle — the first CSS code-golfing game

????A lovely community forum of 140+ players and 40+ conversationsProduct developmentWe decided to build and launch CSSBattle in one month, to prevent ourselves from getting into an infinite loop of adding and polishing features.

We made a list of the absolutely necessary items for launch and focused on it.

During the development, we came up with tons of new ideas to implement in the website, which we kept noting down.

I am proud we could resist the urge to work on those exciting ideas and finally launch in one month!Tech StackOur tech stack is pretty standard for today’s product.

We have React (using create-react-app as a starter) on the frontend which is deployed on Zeit Now.

For the backend, we use Firebase.

Since we both primarily have frontend/design experience, Firebase turned out to be an amazing option to easily implement everything we had on our mind while getting best in class scalability and security without managing any server!The scoring algorithmOne of the most interesting things about developing CSSBattle was designing the scoring algorithm.

We sat literally for days discussing and trying out various formulas.

We wanted that a amore visual match should always result in a higher score.

And of course, for the same match percentage, the score should increase with decreasing code bytes.

Also, we wanted a faster score progression towards lower bytes once you are at 100% match, to make it more rewarding for the players who sweat it out with each removed byte.

In the end, we are happy with what we came up with.

Maybe we’ll write a separate post about just the scoring algorithm :)The LaunchWe originally planned the launch for the 5th of April, but we had to launch it a day before.

We had invited many eminent CSS developers to try out CSSBattle before going public.

And “fortunately” Jonathan Snook tweeted about us a day before we planned to launch, sending in a huge stream of developers to the game! And so we decide to prepone our launch :)We started with the announcement on ProductHunt where CSSBattle was the #1 product of the day.

Immediately following it was a Reddit rush.

And then, the massive and really encouraging tweet by Lea Verou:Lea Verou’s tweet about CSSBattleSince then, it has been a crazy ride for us both seeing the community grow, play, learn and compete!.Each day we see players breaking the limits of creativity and imagination with CSS!Come join usWe have a very lovely community of superbly creative and humble developers on Spectrum where you can hang out and learn some CSS Trickery.

So, what are you waiting for?.If you have ever written CSS, play now — https://cssbattle.

dev(We have also seen people wanting to learn CSS just to play this game!)⚠️ Fair warningCSSBattle is highly fun and addictive.

We have seen people losing their sleep, having weird dreams, being late to meet friends, cursing, skipping project deadlines and what not.

Please enter at your own risk!.????Also, we feel it’s our responsibility to highlight that apart from creative approaches, CSSBattle requires you to exploit how CSS (and HTML) is parsed by browsers.

It’s important to understand that the CSS you write here is not the way you would write in a real project.

The tips and tricks you learn while playing here would certainly make you better understand CSS, but always be alert and curious about what’s a hack and what is not.

Have fun CSS-ing!.. More details

Leave a Reply