# Interview with CSSBattle's Kushagra Gour by [kirupa](https://www.kirupa.com/me/index.htm) | filed under [Interviews with Creative People](https://www.kirupa.com/podcast/index.htm) [Kushagra Gour](https://cssbattle.dev) breaks down why CSSBattle resonates with frontend developers by sitting right at the intersection of coding, design, and play. He covers the product's origin, the mechanics behind scoring, the realities of browser support, the pull of competition, and how gamified learning turned a clever idea into a lasting community product. Watch the interview: https://www.youtube.com/watch?v=aUNOxlQfGyM A conversation with **Kushagra Gour** | 50m ## About this conversation CSSBattle is one of those products that seems obvious only after someone builds it well, and this interview captures why. Kushagra Gour describes CSS as a medium where programming and visual design overlap, which makes it the perfect foundation for a game-like challenge platform. That starting point immediately gives the episode appeal for frontend developers who like both elegant code and clever interfaces. The origin story is strong because it is grounded in genuine interest instead of manufactured startup logic. Kushagra and his collaborator built around something they already enjoyed, and that customer-zero instinct runs through the entire conversation. Early traction did not come from a giant launch plan. It came from the fact that the core interaction was fun, legible, and satisfying enough that people wanted to keep testing themselves against it. The middle of the episode gets into the mechanics that make the product stick. Kushagra explains the balance between visual match and code golf, along with the tradeoffs created by browser versions and CSS support. He also talks about the kinds of patterns the team notices in player behavior, the energy around leaderboard culture, and why gamification works so well when the learning goal is tightly connected to the game itself. Later, the conversation opens into roadmap and product strategy. There is discussion around expansion beyond CSS, paid features, visual identity, and what AI code assistants might mean for the experience in the future. What comes through most clearly is that CSSBattle succeeds not just because it teaches people something useful, but because it understands how developers like to explore, compete, and improve. ## What you'll hear about - CSSBattle works because CSS naturally connects visual thinking with code. - Being your own first customer can sharpen a product before anyone else sees it. - Scoring is compelling because it rewards both correctness and elegance. - Browser support is a product concern, not just a technical footnote. - Gamification lands best when it reinforces the skill being learned. - A strong visual identity can make a technical product feel more memorable. ## Jump to a topic - [0:40](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=40s) **Meet Kushagra**: Kushagra introduces himself as a frontend developer with a strong pull toward side projects and creative work. - [3:30](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=210s) **Why CSSBattle clicked as an idea**: He explains how a love of CSS and code golf came together in one unusually sticky product concept. - [7:30](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=450s) **Launching and surviving the early days**: The conversation moves through the first release, the work behind it, and what happened once real players showed up. - [12:01](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=721s) **Realizing it had real traction**: Kushagra shares the point where CSSBattle started to feel bigger than a fun side experiment. - [14:00](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=840s) **How scoring actually works**: This section breaks down the mix of visual accuracy and character count that shapes competition on the site. - [23:08](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1388s) **What player behavior teaches the product**: They discuss usage patterns, browser realities, and the kinds of CSS surprises the platform keeps surfacing. - [28:15](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1695s) **Community love and competitive energy**: The episode pauses on the signs that players are deeply invested in the platform and its evolving challenges. - [30:20](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1820s) **Turning learning into a game**: Kushagra explains why teaching and play reinforce each other so naturally in CSSBattle's format. - [38:18](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2298s) **Paid plans and product scope**: The conversation shifts into pricing, premium features, and the choices involved in expanding the platform. - [41:05](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2465s) **Design taste, AI tools, and the future**: The final stretch connects CSSBattle's visual identity with questions about AI-assisted coding and where the product could go next. ## To learn more - [Kushagra's CSSBattle](https://cssbattle.dev) ## Transcript The automatically generated captions have been organized by speaker, lightly edited for clarity, and broken into paragraphs for readability. Names and wording may still contain errors. ### [0:00](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=0s) - Kirupa Hi everybody. If you're a web developer, or know someone who is, there's a very good chance you've heard of CSSBattle. CSSBattle takes the age-old idea of code golfing—where you have to solve a programming problem by using as few characters as possible—and takes it to the world of CSS. It's educational, it's very fun, and it's also very addictive. So let's go behind the scenes and take a look at what makes CSSBattle work. How did it get started? How did it go from a side project to being wildly successful? To answer those questions and more, we're going to talk to one of the creators of CSSBattle, Kushagra Gour. So sit back, relax, grab a drink. This is going to be fun, it's going to be informative, so let's get started. All right, hi Kushagra, how are you? ### [0:43](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=43s) - Kushagra Gour I'm good. How are you doing, Kirupa? ### [0:47](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=47s) - Kirupa Good, good, good. Living the dream, like I like to say. So before we go too far, tell me a little bit about yourself. ### [0:53](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=53s) - Kushagra Gour Sure,. So by profession I'm a front-end developer. I lead the front-end team at a company called push-out here in india. But I like to call myself a creative person because I like doing creative stuff, like whatever it'd be, like creating side projects, making games- I've been making games, ever since I started coding, making music on piano or maybe sketching stuff, like every creative stuff out there. I like to do it. So, yeah, that's like a summary. You shot somebody of me. ### [1:25](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=85s) - Kirupa So you met your developer and I like to ask this all the time: what's the first thing you ever remembered coding? ### [1:34](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=94s) - Kushagra Gour Well, of course, like you have. So in school they teach coding. They used to see, like used to teach, and even now, so that's, of course, was there. They used to teach. I think they start with c in school, so that's, of course, like we were learning and I was coding programs. But, like, the first thing that I actually created myself at home while learning all this stuff was actually a game in c, and I remember, in school they didn't teach graphics. All there was like data structures and a few algorithms and basic programming. But then I on my own, learn how to program graphics in c and then I built a game, if you know, there's a very famous game out here called connect. It comes on tv. So I made a clone of that in c and I was so thrilled and so like shocked to see it working in front of me. I was running around my house distributing like sweets to everyone. I could find that's how you like celebrate when you do something. So, yeah, that that's something I always remember. ### [2:41](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=161s) - Kirupa Creating graphics and c is like not the easiest thing because it's pretty low level language. Do you remember using a graphics library for that? Were you just actually calling native apis on the os directly? ### [2:52](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=172s) - Kushagra Gour Oh, all native apis, like just import graphic dot edge- I think that was the header. Like library and yeah, drawing lines and circles, animating them with set timeout. It was like crazy, you know. ### [3:04](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=184s) - Kirupa At some point. If you ever have an archive that somewhere, you should share it, just so that you know. People are like: oh, this is like. You know, we make front end web work now, but back then it was all like you know, see, and those kind of things, right. ### [3:16](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=196s) - Kushagra Gour I'm sure I have it somewhere in my old computer. ### [3:20](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=200s) - Kirupa Yeah, no, that's. That's awesome. It's always fun to see, like, where everyone begins, you know, as part of becoming, you know all- interested in this world of technology and programming and so on. So, speaking of which sees this battle, you know it's probably one of the more addictive sites. I'm not an active player, but I do watch the leaderboards. I see the challenges that come across. So tell me more about how. What was the idea behind scissors battle? How did you get started? ### [3:45](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=225s) - Kushagra Gour Well, css, the language, has been very close to me ever since I started diving into front-end development because it's something which is at the intersection of programming and visual design. Right, and that's where creativity lies. You can program stuff visually to make stuff like games, for example. So see, ss is something I have always loved working with, diving deep, understanding the concept. It's also weird language, as we know, so it's always fun to understand the unique concepts that language has. So, yeah, that the love for css has had always been there and, as a front-end developer, you would like know that a life of a front-end developer mostly is about getting a design, pixels and then converting it with html and css into a functional stuff. So that always was there at the back of my mind and that this is something we do so, like just out of out of that usual process that we used to follow at day job, I always thought, like, why not transform this into a game where you get like simple images and you write css? That's what I love as a language. You just use css and build that image and later, like while working and more thinking about the idea, how to make it more fun. That's where the code golfing aspect aspect came in into that. So, yeah, like I have, I maintain a lot a list of long list of projects that I want to do. I don't get time to like chance to work on all of those, but this is one of the thing that was on my top of my list and had been there for like four or five years until I actually got time to start this project and, yeah, that's how like it was incubated. ### [5:28](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=328s) - Kirupa Did you ever, you know, play the JavaScript challenges that were very similar back in the day, where you had a challenge and you had to create it in the least amount of characters possible? Was that something that you ever participated in? ### [5:39](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=339s) - Kushagra Gour Yeah, actually, code golfing is something I came to know through JavaScript, because code golfing in JavaScript has been around for many years. There's a huge community out there doing golfing and creating such amazing things that you can't even imagine can be created in so few bytes of JS. So that's something I always watched, always tried to learn from. I'm nowhere near golfing JavaScript like these people do, but it has always been an inspiration and always amazed me. I used to try out a few things, like learning generative ideas and how to do those with JavaScript, and creating graphics with just simple sine and cosine calls and loops and all those things. So yeah, that's how I got introduced to golfing, and I thought, why not mix it with CSS? There was nothing out there for CSS in terms of golfing. This felt like a very unique thing that I had to bring out. ### [6:40](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=400s) - Kirupa Yeah, no, after that I'm probably d getting too far here. But speaking of code golfing, since you mentioned, you did some graphics in c. There were some examples back in that, let's say, probably like 10, 15 years ago, of like probably c or c plus plus apps where it's only about 10, 20 lines of code, but it used some like native library that's on, like, I guess, a windows machine that, like it creates a very 3d visualizations of like, you know, like geometric shapes that were not just shapes but actually like connected with, like various lines and planes to create this really like you know, almost like psychedelic effects, I know, almost like a win-app skin, but just more with like just 20, 23 lines of code. As that's what it kind of reminded me of. You don't you remember those many chats, or am I just? Oh, yeah, definitely cool, yeah, so you know, getting back to the css battle a bit more on it. So what were your first couple of days? Like you know, so you built it. You know you had an idea of like you want to bring the code golfing idea to css. So, you know, so you launched it. So what were your next steps from there? You know how did you go from just launching it to getting the first people to use it. ### [7:42](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=462s) - Kushagra Gour Okay, yeah, so the initial days were very crazy, like the actual development. So css battle is made by me and a friend of mine, which just like happened to be the same name. We call it like making css battles. So, yeah, like I always had this idea, when I actually sat down like, okay, this is something I'm gonna build, I contacted, I contacted pusha, like ask him like, do you wanna work on this? And of course he agreed- he's also a css free, just like me. Of course he agreed to that and, we set a benchmark for us. Like one month is something we're gonna work on this. Whatever we can build in that time, that is what we launch. We are just not gonna drag it forever. So, yeah, worked on it, got to a decent state and the idea was that once we have a good, playable version, we will send it out to few people. So we just like got we created a contact list of people like leaves, jonathan, snook and everyone we could find the css community, and we mail them this initial version, ask them just to play it, try out what you feel and like give us feedback. So that's what our launch was, technically we didn't do anything apart from this and it so happened, like everyone- I don't remember like someone like not liking this, everyone we send out the mail to, they actually got addicted. It was not like just like fun, but it was kind of addiction for them and they played all night. They were. I remember leah tweeting out that I had to cancel a meeting with my friend because I'm playing cs's battle and it was so addictive and so, yeah, I mean people liked it. Jonathan snoop was the first person, I think he he just tweeted it out and it went like crazy in the community. Everyone was like playing it. That's how we like started getting our initial users. After the people who we sent mail to, yeah, I mean, people played and the initial, I would say that the thing that got more people into this it was just the tweets that people were making about their addiction. This is so addictive I can't do this. This is so addictive I have taken work from home just to play this from my own. So these were the tweets that just caught us, the initial users, organically. That's how it went. ### [10:16](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=616s) - Kirupa So I'm assuming that the goals you had for your first 30 days, 100 days and so on, you wildly exceeded them very quickly. ### [10:24](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=624s) - Kushagra Gour Oh, no, no,. Like it was far away from my, from my expectations. Like it went crazy. We were like shocked every day to see like what kind of things people were doing. That was also like really shocking. I mean, very soon we had like people who were breaking records one after the another. So that was one thing that that kept shocking us for like it still shocks us, like what people can do with such little code and css and, of course, like the level of addiction that we anticipated because we were also playing amongst ourselves. But then it got to a whole new level. It was crazy. ### [11:03](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=663s) - Kirupa Yeah, now that's actually great to hear because, you know, one of the things that I've always found in, like you know, successful products like this is that in many ways there's a problem that you personally had, like you wanted to build something that would, because you enjoyed golfing it. You wanted to build this really for yourself, and so in some ways would be fair to say that you were like your first customer and we were like, if I can feel like this is a good product, there's a good chance others will like it as well. Is that a fair assessment? ### [11:29](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=689s) - Kushagra Gour True, very true, like, that's been my motive always with everything I built. It's they're mostly, I would say, like always there's something which solve my problem. That of course, like has an advantage that I would be solving my problems. So I built something which actually solves the problem. And the second benefit that you get out of it: if, if you release it, if you happen to release it in public and nobody in the world gives a about it and uses that, you would at least use that product right, you won't be disappointed. So, yeah, that that's always something I follow. ### [12:00](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=720s) - Kirupa That's true. No, that is. That is great to see. So. So when did you figure out that you had a hit product, like you know? At what point were you like: okay, this is not just, like you know, one of my many hobbies that I proved proved out it's valid, it's good, but it's actually something much bigger than what I ever imagined, right. ### [12:18](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=738s) - Kushagra Gour Oh yeah. So, like in my mind, when I had this, like theoretically it sounded cool. That's why I like actually pursued it. But, there was a point when we had a very basic functional thing going on. It was not pretty it was all like messed up visually, but then you had an image. You could write code, submit it, get a scope, that's all was there in the product. And I remember, me and kushagra, we used to play during the nights while working, like we were just working implementing some future, and then we used to randomly play on a particular level and I, he. His message used to come that I just beat your score by one, one character. And that's a very big motivation in this game. Like, when somebody beats your record, you tend to like think on a whole new level. I don't know why, but when somebody beats a record, you tend to like you have more chances of beating it again. So I used to like get on it. Like I used to stop working on the game itself and I used to play it until I used to beat his record. Then I used to message him: hey, I take this, I beat your record again. So this two and four used to go on, for long hours and used to enjoy so much while, like, while developing the game, used to play it and enjoy so much. I think that's that's when we realized like this is gonna be addictive, like I can't stop playing it myself while building it, and, I mean, yeah, just just just that thing which was going on. I kind of anticipated this, like at least people would like it. ### [13:59](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=839s) - Kirupa Yeah, and so you mentioned scoring. So how does scoring exactly work? Is it just based on characters? Is it both characters and output? Like making sure that output matches what the initial challenge is. ### [14:11](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=851s) - Kushagra Gour Right. So, in a very short definition, you first get some scoring based on the match percentage. The more matching you have, the more score you get, up to a certain level. Once you have a 100 match, the only way to increase your score is by reducing the characters. So both parameters get taken into account. Talking about scoring, the scoring algorithm itself was one of the craziest parts of developing this game. It involved a lot of math, which we didn't anticipate. It seemed like a normal thing, like we would just have a formula with two parameters and it would give you a number. But then it got a lot more complicated. There were issues like two people getting the same score even though their character counts were different, and all those weird issues. ### [15:18](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=918s) - Kirupa Yeah, now these are kind of the growing pains that you often get as more people start using it. So for the matching itself, is it a case where you're taking just a screen capture of that region and overlaying it on top and seeing how it works, or approximately how is that going to work in your case? ### [15:36](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=936s) - Kushagra Gour The image, the code that people submit that's actually used to generate an image, first of all, so we get one image out of the user's code and then, of course, we have one image that was being used to, like as a reference right, the target image. So once we have these two images, we actually do make pixel matching, which is like one to one pixel matching. That gives us a percentage of pixels that are matching. But then there's a few quirks here and there that are also taken into account. For example, the biggest one is anti-aliasing. So we need to also consider about anti raising, because otherwise, like, there's hardly an image that can be replicated hundred percent. So, that was something also which was tricky, because there are a few parameters that we had to tweak just to the right amount so that it's not very trivial to just approximate the image and it's also not very difficult to have it like match pixel by pixel, even on the borders of things. So, yeah, but that's how it works. ### [16:42](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1002s) - Kirupa Yeah, now that's really cool. I was always curious to know, like exactly because it is a hard problem. You know what you mentioned. It's like a classic problem like: how do you overlay two images? There's transparency involved. You know independent anti-aliasing. How does that work, I think? I think a lot of the examples you have were more solid colors where there wasn't much transparency. But I can totally imagine at one point, when you do come up with a challenge where that is involved, you're gonna you're gonna go to a lot of fun places, especially because a lot of our browsers deal with transparency very differently. So it's almost like what I might see and what you see in the in the background might be very, very different, but that's really, really, really cool. ### [17:16](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1036s) - Kushagra Gour Yeah, and realizing is also, in fact, like one of the things that we need to keep in mind while building these target images. So there are a few guidelines that we have made for ourselves that generate images which are like we it. It makes sure that they are technically possible to create with css, with code, basically. So anti-lazing creeps in a lot when you have these very sharp cusps, or two colors which are very like in contrast, overlapping each other. So we need to also, like, keep those things in mind to avoid such issues coming in. ### [17:54](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1074s) - Kirupa Targets. Are there any limits to like what kind of css people can provide, or it's pretty much anything that runs in the browser, totally valid. ### [18:03](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1083s) - Kushagra Gour Yeah, so basically anything that browser can interpret and render can pass and render. But there's like one thing different, different than what we usually- I mean- write as css in the browser is that in css battle you don't get a doctype. So because of that, the basic, the code that gets rendered is without a doctype and you get offered a lot of works with along with that. So browser without a doctype doesn't need a closing style type, for example, so that that that basically gives you a lot of opportunities to gold for your code more and reduce characters and basically ignore all these unnecessities like the closing style tag. The units, after a lot of numbers, like margins, can be straightforward and as 13.15, you don't have to put pixels. So doctype is a big thing that affects, how people actually golf in css battle. ### [19:04](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1144s) - Kirupa Okay so, but can I also put javascript in there? Not that it would, because it probably loads the character count, or are you limiting it to only rendering whatever goes within the style tag, which would make the javascript not work? ### [19:15](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1155s) - Kushagra Gour No, it's totally restricted. Like, you, even if you write like, it won't get executed. So our rendering environment like make sure that, no external assets can be loaded. So, even if you put an image tag with some src, no assets are required. Network is closed, basically. The javascript execution has been stopped in that environment and all those things are restricted. It's like just css and html, of course. ### [19:42](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1182s) - Kirupa Nice, nice, and you know where I'm also kind of going with this also is that you might have seen, like you know, css, houdini, where you can do a lot more programmatic things within css. Is that something that is supported or is it something that, because of the way you have to, right now, at least enable houdini capabilities, it wouldn't be something you could use? Well, not right now. I don't have like practical experience with that, but I am guessing, like you can write, you first have to write some javascript to enable a particular css or something like new custom css properties and all those things like, paint lights and all. So, since javascript is disabled, or you basically can't get into houdini, or I don't see a opportunity for houdini, houdini getting integrated in css. But gotcha, yeah, now that that makes that sense, because I totally imagine some things can be very, very easy to do at some point because you know you have a lot more primitive capabilities you can do, as opposed to like more complicated shapes than you might just do using raw css. So well, yeah, that's actually really you know that makes a lot of sense. ### [20:48](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1248s) - Kushagra Gour In fact, talking about restrictions, I remember one thing that, like got us crazy for for weeks: so initially, after all the restrictions that we had in place, we still allow- allowed svg to be written in the code, right, because it's html, it's valid html. It's not css, though, but html is- was allowed. So svg was something people were using to build like to solve a lot of things, and since svg gives you a lot of exclusive capabilities, some targets were, like, written with half the amount of svg characters compared to css, so that started a whole new debate. Like people, people were finding out that svgs are allowed in this, and there was one type of people who were saying, like svg is not css. Others were saying, like svg is still html and it's about html and css, why shouldn't be allowed? It was a like a battle going on, a different battle sort of going on in the community, and we finally took a decision that, okay, svg is not what we want people to write while creating these targets, we solely want to focus on css, and then we decided to, like restrict svg also and again, like it came in with the decision, came in with a lot of things like. We had to adjust all the past scores that players had with svg, passing those and fixing those, but that was fun. ### [22:17](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1337s) - Kirupa You know? Speaking of that, what are your thoughts on like base64 encoded images that basically you know, take a gif and code it and just make it like a secure background image source or, you know, content source, right? ### [22:31](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1351s) - Kushagra Gour That actually works, I think. I'm not 100 percent sure, but in most cases—certainly almost all cases—even if you are able to encode a particular target in base 64 and put it in, you would have a lot of characters. So you will get a 100 match, but then the code-golfing aspect, not so much. ### [22:59](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1379s) - Kirupa But I'm just trying to see what are some tricks people might have tried to at least get the match first. So that makes sense. Do you collect statistics on what properties people are using the most, or have data that makes you think, this is kind of cool, I never expected these things or these properties to be used so frequently? ### [23:24](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1404s) - Kushagra Gour Well, we don't have numbers as such. We would love to have them someday. Probably have them publicly on the website. Some people have even suggested, like why not have a stats page where you show that the most used property on css battle and so on. So, yeah, that's something we want to, but right now we don't. But we occasionally like for auditing purpose and sometimes for checking plagiarism and all those things we do like look at few solutions of the top players and every time we such we see such solutions, they like completely blow our mind. Most of the time it's very hard to like decipher those codes. It's very difficult to understand, like how a particular like three, four lines of code can actually build that target image, which is like a whole complex shapes on top of each other, so that that generally gives us a lot of insight into new things that are out there, but people don't generally use them in like production world apps.. So that's what we- that's something we learn occasionally- and also like the usual properties that we use, there are so many different ways in which they can be used and so many different wage ways in what they can output. That's also something we often come across while while seeing these solutions. So it's an amazing experience, like a learning experience, whenever we check out these solutions and like it's not just like we checking the solutions. So we, sometime back, we also brought in a concept called open targets. So open targets are basically levels in which all the top solutions are open. So, of course, like everyone can go on these open targets and see the solution that the top players are are using to get such low - I mean high scores and low code. So those are also like eye opening, like what can be done with css. ### [25:27](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1527s) - Kirupa Yeah, and so, speaking of the css approaches people are using, what version of like the css spec or browser version do you know, enforce, like someone like chrome canary, for example, might have access to more css properties and capabilities. Then someone might be on like chrome's table, I think, for example, the most recent example is like the has selector, which, like frequent canary had but regular ones did not. Not that you would use it because it's verbose, but how do you have like a pin version that you expect everyone to code against? ### [25:57](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1557s) - Kushagra Gour So we the general lure is like we want to stay on the latest stable chrome chromium out there, but like we don't have an automated process to have it updated automatically as soon as from your landsat. But yeah, the stable version is what we ideally want the people to play on and, of course, like, as you said, like some people do play css battle on canary and often they forget that they are on canary and the system is on a stable version, they tend to use a property which is not out there and they come back to us like saying, hey, my solution is hundred percent on my side, but it's not giving me a better score. So we just like remind them: okay, please don't play on, kennedy, get on the stable version to trade. I just have to wait a month until you know that becomes stable and then they can still get it. Yeah, I mean, yeah, that has happened a lot like css recently. I don't know. Has gone a lot of, I would say, breaking changes, kind of things have come come recently. So, whenever we actually like get on the next stable version and people have been waiting for so long, it's actually a kind of celebration. People actually wait. Okay, this is the day the stable version is going to land up in css, yes and right. When it comes, we're going to submit our new solutions to get the amazing scores. Just for example, like: the transform, individual properties, like translate recently landed up in chrome and people were really excited about it. Like I'll. I'll just go back to all my 100 previous solutions: remove all the transform and change it to translate. So, yeah, it's fun. It has been like disasters also, for example,. So one weird work that people found out in css is css variables, the custom properties. You can actually create a custom property with no name, so hyphen, hyphen, nothing, you can just put a value after it. It. It was like used a lot when people found it out that saved a lot of characters but then recently chromium stopped accepting a variable, a custom property, without a name, so everything out there which had this thing stopped rendering in chrome it stopped like working, so people had to change the solutions. Yeah, all weird. ### [28:13](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1693s) - Kirupa Things keep happening. I think it's extremely exciting that you built something people love so much that they actually wait until a new version of chromium is updated onto this battle. The moment it happens. They actually update it because when you think about it, you know everyone's days are busy. They have like a billion things they're doing that they're able to, like you know, spend that much time mentally and physically to do something on it. It's just another, you know, testament to like having built a product that people love. ### [28:39](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1719s) - Kushagra Gour Yeah, totally like. I still like. It has been over three years and I still feel so amazed seeing the level of addiction that people have for css battle. There are people playing it every day for us and breaking records every day- especially the top players like concierge's battle. Oh yeah, I can't like imagine devoting so much time to a game myself. Yeah, but the nice thing is that as part of it, I'm almost certain that they're also learning new techniques in css that they can use in more wearable scenarios. ### [29:18](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1758s) - Kirupa As well. So I think there's like a practical application to this. ### [29:23](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1763s) - Kushagra Gour Yeah, yeah, definitely. Like, of course, the gamification brings in that addiction and inner desire to keep beating the score, because there are other strong players out there. So you want to get on the top of the leaderboard. That's, of course, there. But if you see, like, all these top players, they yeah like, apart from getting on the top of the leaderboard, it's the learning part, it's the pushing the boundaries thing that like keeps them hooked to the game. They want to see, like how they can twist the properties they have been using all their life to create something which is like totally different and totally unimaginable. So I think that's one of the factors which keeps people hooked to this- I mean code golfing aspect of the game. ### [30:15](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1815s) - Kirupa Yeah, no, I think that's actually, you know, really pretty exciting overall that you know you're able to do all of this and so you know. That segues nicely to my next question on gamification. Is you recently launched learn you know, with teaching people css in a more interactive, fun way? So what was the thinking behind? You know your approach there. ### [30:34](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=1834s) - Kushagra Gour Yeah, so, of course, css battles started out with just a game, a concept of a game, where you would write code to code golf and create images. It started out with that, but there has been a lot of learnings: seeing people play it, seeing people like, seeing how they play it, what kind of things they do on css battle, for what motifs they play on css battle. So one thing that we realize, an important thing, was we- we designed it as a game where you can code golf and get on the top of leaderboard, ideally like that's what our intention was like- people would play to get on the top of leaderboard. But we realized we actually did a poll also which confirmed this- but we realized that a lot of people- majority of them, in fact- play css battle to improve their css skills and gain more confidence. Because when you are you know it's a repetition kind of thing. When you repeatedly are able to do something, it brings in confidence inside you that, okay, I can use css, all the properties out there and css, I can use them to do whatever you shoot at me, right? So that that's something like people have been finding css metal helpful, for it gives them confidence and gives them like it's sort of a practice playground for them- was for improving their css. So that realization, basically, like over the time, we started like thinking about, like why not have css battle as the place where you can just have fun with css and do everything that you can with css? We ideally want someone to come to css battle to learn css. We want them to practice their whatever. They learn the knowledge they got. They should ideally be able to practice it, practice it and improve it, further evolve it. We want them to like, read- like in the future, possibly we want them to read articles about css and know everything that's coming, latest trendy stuff about css, on css. But so ideally, like this is something like we want css battle to evolve into a place where you can do everything about css. So, yeah, I mean. So, coming back to the point, the learn thing, so when we realized like people actually use it to practice css, we thought, like why not give them a starting point where even like people who don't know about css- they have been few instances where people have tuted like this- looks like such an amazing game, looks so interesting, but I don't know css. I want to learn css, just to play this game and such instances like enforced us, like, we have a strong community, we have a good place where people are playing, we can. We should ideally give them something where they can first learn CSS, get to know everything, and then, of course, practice it, improve it, and further evolve it. That's how Learn came in. We spent a good two years on it. We talked about it in the community—okay, this is something we're coming up with—and realized that building a game that teaches you is not a straightforward problem. It took a long two years, but yes, we finally launched it. ### [34:13](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2053s) - Kirupa Yeah, I played with the first, beginner levels, and it was fantastic. I actually had a lot of fun playing with it, because what's nice about gamification in general is that your goal isn't just to learn. It's, "How do I get this whole thing done?" Indirectly, though, your secondary goal is learning, but your primary goal is just to have fun. I think that's one of the things you see from students in school and how people learn in general. Sports, for example, involve techniques that are pretty complicated and hard. If your goal were just, "How do I swing a bat for an hour, 10 hours a day?" it wouldn't be very fun. But the goal is how to compete with the team, play, have different scoring mechanics, and avoid getting out and all that. So many things there indirectly make it fun, and then you happen to learn things on the side. Carrying that over to learning CSS, which at the surface level is not the most fun thing in the world, you learn essentially weird English-like syntax that doesn't quite sound like English, with weird characters. And yet you have to make it look like something you're trying to visualize. It's a visual thing at the end of the day, so I think that's pretty exciting. Of course, you actually have all the infrastructure to basically provide both learning and also code golfing for CSS. Have you thought about going beyond that and actually adding JavaScript as well? In many ways, it seems like a logical next step. You could become the ultimate destination for front-end battle, not just for CSS. ### [35:46](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2146s) - Kushagra Gour Yeah, actually so fun fact, there's actually a site called jsbattledev and if you go there right now, it would just say, it's coming soon. For now, just place yes's battle. But yeah, it has been on our minds for long. As soon as, like we just realized the potential of css battle. Within few months, we actually bought the domains svg battle and js battle because we finally want to dive into that. Yeah, I mean, the only like, tricky part here is, like, with css, it has been very clear that you write code to generate the images, to recreate those images. But for svg, still, like, it's kind of straightforward, like we would want to you to write just svg to create those images, but with js it gets a little tricky. Because the community, first of all, like it's a little different compared to the ui developers and the css developers, designers, who are the majority players on css battle. Js developers don't generally tend to create visual stuff. They want to most probably like work on the functional aspects of javascript. So if you, if you, want them to write javascript, they would ideally want to generate some outcome which is not necessarily a visual thing, right? So that's, that's where we are kind of like brainstorming: what could a fun target for a js developer be which they would like to achieve? So, yeah, totally on our list. We want to get it sometime soon, but yeah, let's see. ### [37:27](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2247s) - Kirupa Nice, yeah, because I can always imagine, like you know, maybe limited canvas elements. You have a canvas element and you basically write javascript to create visuals in many ways and then you like, where does webgl fit into all of this and all that, which is a whole fun spot? And it's. It's. Oh wait, no, that's cute. I'm glad that you own the domains for all these things because, you know, when did the js version of it coming up? Because I'm not a big css person. I use it as part of what I do, but for me, javascript's the one I like you know, really like always excited about and you know I'm interested in. So, like I can't wait for jay's battle one day to come out. So I can, you know, use that and spend a lot of hours like just fiddling with, like character optimization and apis and so on. Right, I just signed up to you for the alpha version of js battle, yeah. ### [38:11](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2291s) - Kushagra Gour Yeah, thank you. I'm attracting weight. ### [38:14](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2294s) - Kirupa So you know, I want to shift a little bit, just talk a little bit more about just. You know your approach for designing and building, you know items and so you have a pro plan. So tell me more about how you decided to, you know, determine the pricing for your pro plan and what features will be available for pro users that won't be available for the free users.. ### [38:34](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2314s) - Kushagra Gour We don't like exactly have a guideline to figure out, like what we want to distribute and which plan. It has mostly been like first of all, things which really cost us too much to like have it out there, for example. Like, for example, we use firebase as a backend. That's the only thing that right now costs us in terms of a tech stack. So a few things tend to take up a majority part of our costing and few features. Basically, what I'm talking about is they. They contribute a lot to the cost. So we try to like provide as much as possible in the free plan. But then if you find that some feature is taking a lot of like majority of our cost and also it is just a luxury, it should not be like something we keep in mind always. It should not be critical to the game aspect. It should not be required to play the game otherwise, like, we always tend to keep it in free. So if it's not that, if it's just a luxury, probably a helpful thing that makes makes the players life a little bit easier. We tend to put it in the pro plan and even the pricing like I don't think like we have experimented a lot with it, but we just like came up with an initial number and we have, stuck to that for like ever since pro plan came in. ### [40:06](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2406s) - Kirupa Nice. Yeah, you know, because, like in many pricing models over the case of, like, you know what is the? You know, if we didn't have the solution, how much of people pay someone else essentially to solve this, it would be a traditional method for solving this. In this case, it's more of a game and so it's like, okay, given that people enjoy playing this, what is the amount they're willing to pay for that enjoyment? I think, in some ways. ### [40:27](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2427s) - Kushagra Gour Yeah, that's what makes it very difficult too, like it's a game. First of all, it's for a niche community of developers and when is like the last developer based game that you saw where people would pay money just for enjoyment, like you said? But, yeah, that that's a challenge that we like love solving, giving that extras or something to the players which they would like to pay for and make their life more more enjoyable in css. But yeah. ### [40:59](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2459s) - Kirupa Nice and you know we mentioned a little bit of a tech stack. You know it's built on firebase, but let's talk about the design side of it as well. You know you mentioned you're a developer, but there's definitely a very strong design aesthetic to the entire site. It has a very bold color scheme that you know. It's very opinionated. Very nice use of iconography and their transitions when you hover over things. You know it's definitely thoughtfully designed, so it's definitely a design element to it. And so are you the designer behind all of this, or, you know, is the other kushagra the designer? ### [41:28](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2488s) - Kushagra Gour Oh yes, it's the other channel, like all the design that you see, the lovely user experience. That's all designed by kushagra. So he, he's a professional, like professional designer. He, he designed it like from end to end. ### [41:43](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2503s) - Kirupa Yeah, it's very nicely done, like I even went to like I'm running first launched. It always had, like this black and gray theme, you know, which is very nice, and you know, I think the accent colors have changed over there and it was like red at some point. It was like you know. Then it does the yellow, which I think is really cool, and so, yeah, no, I always found that to be one thing that differentiates it, because when you look across at this day, you know across all websites for the most part, they all have this bland look. It's like they take a template type color scheme or use a color generator like let's make it be these four colors everywhere. It's so rare to see something actually have a very unique kind of an experience there, and especially the dark color is great because the focus is on the visuals that people are creating, just like a traditional design tool where you want to have, you know, most of the focus being the artboard. I think this actually that suits it very, very nicely in terms of what you all have built. ### [42:32](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2552s) - Kushagra Gour That's something that I decided early on. We were going to go with default dark mode because I liked it, he likes it, and that was quite an obvious choice. ### [42:44](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2564s) - Kirupa Nice. No, that's actually—yeah, I always liked that very unique look. It always reminded me of the more interesting, creative things people did many years ago, back when there wasn't this idea that everything must look like this particular design system or this particular style. Let's speak of mobile devices, by the way. Do you find people using CSSBattle on a mobile device, or is it still very much a desktop, big-screen experience? ### [43:11](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2591s) - Kushagra Gour We do support mobile. It's responsive, you can still code, but we find that about 95 percent or so of people use it on desktop. ### [43:22](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2602s) - Kirupa Yeah, now that makes sense in many ways. Also, one thing I've been curious about is this rise of code assistants like GitHub Copilot, where a computer basically generates all these things for you. Do you ever anticipate a computer one day being able to see a visual of what needs to be done in CSS and then, going backwards, actually generate all this for you? ### [43:47](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2627s) - Kushagra Gour Oh, yeah, I have actually thought of creating this, something like this, myself. I wanted to like write something like a chrome extension which you can just like enable- click of a button. It gets you the code in the editor, in css battle to create that levels image. I think that's possible. Even now, you can actually detect what shapes are there, because we don't like mostly have complex shapes, even though few targets do, but then there are a lot of targets which have, simple shapes overlapped on each other. So I think it should be like possible to detect that and have something that writes code for you, at least get you a base version that gives you more of the approximate shapes with same colors and all those things. Then, of course, like few tweaks here and there, and like you should be able to get 100 match. That should be interesting to see. ### [44:48](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2688s) - Kirupa Yeah, that'll be pretty cool to think about. You know, the future of this, my hold. Well, you know, I think we covered a lot of ground here, everything from like kind of how it got started to what you know what what makes interesting and so on, and so you know I want to keep you for too long here beyond it. But my last question for you really is: you know what, where do you see yourself five years from now in terms of like? You talk a little bit about svg balance battle, but you know, is there anything you know? You see yourself like looking at his balance, saying that you know, here's something that's gonna really need to do at some point to be like the thing that really matches what my expectations were. ### [45:23](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2723s) - Kushagra Gour Yeah, like, from time to time, we like actually brainstorm on where we want to see css battle down the line and like I already mentioned, css battle is something we want to be one stop to have like to learn css, to read about it, to practice it, practice it, to understand it to probably even use it for your production level work. Maybe you, for example, like just I, want to store my css snippets or tokens or whatever. So we want it to be a central place where people can just like land up and have fun with css. That's what the motive is. And there are a few like things planned for for the short term. For the long term, like one thing, for example: we, right now, the game aspect very critically relies on code golfing, which is not something everyone finds interesting. You need to have that sort of perspective or like mindset, to actually quote: golf a lot and get on top of the leaderboard, which is with time getting a lot difficult with so many players, amazing players coming in. So what we want to bring in, bring in css battle is one to one gaming, one to one battles where just like usual games you have on mobile or desktops, you can just like, pass on a link to your friend or maybe just play with a random player or out there on on the internet, and, it doesn't have to be actually golfing. It could be a time-out battle where you where the quickest one, quickest one to get hundred percent match with right. It could be as simple as that because, we think that that will unlock our gamification, the whole fun aspect, to a lot of players out there, even those who don't want to code golf, who don't want to get into that aspect. They just want to write plain css, actual readable css, to get it like 100 match. They would have a lot of fun with this, these kind of features. So, yeah, this, these are something like we have in a plan for short term, but eventually, as I said, like, one stop for css, because I feel like it's you know, every now and then, like some people fall on youtube. You see this battle that you know compete with, like you know, their best friend, they record the whole thing and so on. I can totally imagine this. ### [47:54](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2874s) - Kirupa Takes on a whole new life of its own once you have it more officially supported, where I can see a lot more of these activities and maybe even have the option for that to be live streamed or recorded as well, so that way what they're playing can be, you know, viewed by many people like a traditional, like you know big game. Like you know what are the games that people play these days. They're like huge, like league of legends or something like that. You know, you can totally imagine a stadium of people, just like you know, crowding in to see like this battle happening. ### [48:19](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2899s) - Kushagra Gour Yeah, exactly like. That's something we have talked a lot of times, like idly when the - apart from the code golfing aspect, these game features come in. We like actually imagine imagine having on-site events where people- again, like you said, you know, just play, play games like tekken and all where there are two players, street fighters, like games where they're actually two players. You can see them fighting, you can see their lives, their progress, but it's so fun to like actually seeing two players in front of you, which which has been evident from the youtube videos that people have put out there like mentioned. So, yeah, that that's something like we want to take to the next level, provided integrated into css: battle by one stop and you are in front of everyone. ### [49:08](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2948s) - Kirupa Yeah, that'd be so cool. And you know also, imagine like you're at like some web builder conference and during lunch time, you know, instead of it just being like silence or whatever, just have like two people on stage like competing and it's like projected across all the screens and it's like a good intermission kind of activity and you can have people you know sign up for it, just like you know a traditional game. Back then, when you actually went to like a you know like a computer, like you know club or something, and actually named down on like a list of numbers and they just, you know, choose the latter and everything from there, like that's gonna be actually a lot of really cool things there. ### [49:41](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2981s) - Kushagra Gour Exactly, totally like. Like we still like get so excited sometimes I just want to stop working on whatever I am. I just get onto it and implement it. It's so exciting in our minds. ### [49:52](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=2992s) - Kirupa Nice, nice. Well, I think with that, thank you so much—not just for chatting about CSSBattle, but also for creating it as well. It's a lot of fun to see people using it and doing all these great things. So yeah, thank you so much, and we'll catch up again when JSBattle comes out. We should do this one more time. ### [50:11](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=3011s) - Kushagra Gour Sure thing. Thanks for inviting me. I really had fun talking about CSSBattle, which is very close to my heart. ### [50:18](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=3018s) - Kirupa Okay, talk to you later. ### [50:21](https://www.youtube.com/watch?v=aUNOxlQfGyM&t=3021s) - Kushagra Gour See ya. Bye. [Browse all Interviews with Creative People](https://www.kirupa.com/podcast/index.htm).