hi everybody if you're a web developer or know someone who is there's a very good chance you've heard of caesar's battles see this battle takes the age-old idea of code golfing where you have to solve a programming problem by using as few characters as possible and it takes it to the world of css it's educational it's very fun and it's also very addictive and so let's go behind the scenes and take a look at what makes this battle work how did it get started how to go from a side project to being wildly successful so to answer these questions and more we're going to talk to the one of the creators of caesar's battle kushagar gower 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 kashara how are you

i'm good how are you doing grandpa good good good now living the dream like i like i like to say

so before we go too far to just tell me a little bit about yourself

sure uh 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 i like doing creative stuff like whatever it'd be like creating side projects making games i've been making games uh 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

so you met your developer and i like to ask this all the time what's the first thing you ever remembered coding

well of course like you have uh so in school they teach coding they used to see like used to teach and even now so that's of course was there uh 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 i actually created myself at home while learning all this stuff was actually a game in c and i remember uh in school they didn't uh teach graphics all there was like data structures and a few algorithms and basic programming but then i i on my own learn how to program graphics in c and then i built a game uh if you know there's a very famous game uh out here

called connect it comes on tv so i 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

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

oh all native apis like just import graphic dot edge i think that was the header uh like library and yeah drawing lines and circles animating them with set timeout it was like crazy you know

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

i'm sure i have it somewhere in my old computer

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

well uh css the language has been very close to me ever since i started uh diving into front-end development because it it's something which is at the intersection of programming and uh visual design right and that's where creativity lies you can program stuff visually to make stuff like games for example uh 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 uh know that a life of a front-end developer mostly uh 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 uh 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 uh like i have i maintain a lot a list of long list of projects that i want to do i 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

did you ever you know play the javascript challenges that were very similar back in the day where you had like a challenge and you had to create it in like the least amount of

characters possible was that something that you ever participated in yeah actually like code call thing is uh something i came to know through javascript because code golfing in javascript has been like since long like many years people like actually there's a huge community out there doing golfing and creating such amazing things you can't like even imagine uh can be created in few bytes of js so that's something i always watched i've always tried to learn i'm nowhere like near golfing javascript like these people do but has always been an inspiration and always like amazed me i used to like try out few things like learning java generative things how to do those with javascript and creating graphics with just like uh simple sign and calls and those loops and all

things so yeah that's how i got introduced to golfing and i like thought like why not mix it with css there was nothing out there for css in terms of golfing this was something like a very unique thing that i had to bring out

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

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 uh sat down like okay this is something i'm gonna build uh i i contacted i contacted pusha like ask him like uh 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 uh we set a benchmark for us like one month is something we're gonna work on this whatever we can uh 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 and the idea was that once we have a good playable version we will send it out to few people so we just like uh got uh we created a contact list of people like leaves uh 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 uh technically we didn't do anything apart from this and uh it so happened like uh everyone i i don't remember like uh 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 uh 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 uh 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 uh the initial uh 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 uh 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

so i'm assuming that the the goals you had for your first 30 days 100 days and so on you wildly exceeded them very quickly

oh no no uh 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 uh 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 uh amongst ourselves but then it got to a whole new level it was crazy

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

true very true like uh that's been my motive always with everything i i built it's they're mostly i would say like always there's something which solve my problem uh 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

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

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 uh there was a point when we had a very basic functional uh thing going on it was not pretty uh it was all like messed up uh 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 uh me and kushagra we used to play uh 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 uh i i he his message used to come that uh i i just uh 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 uh get on it like i used to stop working on the game itself and i used to play it until i i used to beat his record then i used to message him hey i take this i i beat your record again so this this two and four used to go on uh 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 uh i mean yeah just just just that thing which was going on uh i i kind of anticipated this like at least people would like it

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

right so uh in very short definition is like you first get some scoring based on the match percentage so as like the more matching you have the more score you get up to a certain level once you have 100 match the only way to increase your score is by reducing the characters so uh both the parameters get taken into account and like uh talking about scoring like the scoring algorithm itself that that was like the most craziest part of developing this game i remember like so it involves a lot of math uh we didn't anticipate it it seemed like a normal thing like we just have a formula that has two parameters two variables and it gives you a number but then it got a lot

complicated for for some reason i i vaguely remember now but that's something we spent a lot of days figuring out they were they were issues like two people getting same score even though their character accounts were different and all those uh feared issues yeah yeah now these are kind of the growing pains that you often get to get more people using it and so you know for the

for the matching itself is it a case where like you're are you taking just a screen capture of that region and it's like you know overlaying on top and seeing how it works or how is it how does that you know approximately gonna work in your case

the image uh the 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 uh 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 uh 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 uh 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 uh that was something also

which was tricky uh 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 uh 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

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

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 uh generate images which are like uh we it it makes sure that they are technically possible to create with css uh with code basically so anti-lazing uh creeps in a lot when you have these very sharp cusps or two colors which are very uh like in contrast overlapping each other so we need to also like keep those things in mind to avoid such issues coming in

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

yeah so basically anything that browser can interpret and render can pass and render but uh there's like one thing different uh different than what we usually uh i mean write as css in the browser is that in css battle you don't get a doctype so because of that the 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 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 uh how people actually golf in css battle

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

no it's totally restricted like uh you even if you write like it won't get executed so our rendering environment like make sure that uh no external assets can be loaded so even if you put an image tag with some src uh no assets are required network is closed basically uh the javascript execution has been stopped in that environment and all those things are restricted it's like just css and html of course

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 i don't have like practical experience with that but i 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 uh paint lights and all so since javascript is disabled or you basically can't get into houdini or i don't see

a uh 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

in fact talking about restrictions i remember one thing that like uh got us crazy for for weeks uh so initially after all the restrictions that we had in place uh we still allow allowed svg to be written in the code right because it's html it's valid html uh it's not css though but html is was allowed so svg was something people were using to build uh like to solve a lot of things and since svg gives you a lot of uh 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 uh 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 uh 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 uh 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

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

that actually works i think i am not 100 sure but uh in most cases certainly like all cases uh even if you are able to pay 64 a particular target and put it in you would have a lot of characters so uh you will get 100 match but then uh the code qualifying aspect so much but i just you know trying to see like what are some tricks that people might have tried to at least get the match first so that makes sense you

click statistics essentially on like what properties we were using the most how many people are using like let's say basically four for example like do you have like data like that you just you know you don't share but you just were like this is kind of cool i never expected these things or these properties to be used quite frequently

well uh we we don't have numbers as such we would love to have them someday uh 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 we occasionally like for auditing purpose and sometimes uh for uh checking uh plagiarism and all those things we do like look at few solutions of the top players and uh 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 uh 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 uh new things that are out there but people don't generally use them in like production world apps uh so that's what we that's something we learn occasionally and also like the usual properties that we use uh there are so many different ways in which they can be used and so many different wage ways in in what they can output that's also something we often come across while while uh 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 uh are using to get such low uh i mean high scores and low code so those are also like uh eye opening like what can be done with css

yeah and so speaking of the css approaches people are using what version of like the css spec or browser version do you 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 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

so we uh the general lure is like we want to stay on the latest stable chrome chromium uh 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 uh ideally want the people to play on and of course like as you said like some people uh do play css battle on canary and 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 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 uh has gone a lot of i would say breaking changes kind of uh things have come come recently so uh whenever we actually like uh 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 uh the transform uh 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 uh uh so one weird work that people found out in css is uh 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 uh used a lot when people found it out that uh 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 it stopped like working so people had to change the solutions yeah all weird

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

yeah totally like uh i 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 uh 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

as well so i think there's like a practical application to this

yeah yeah definitely like of course the gamification uh brings in that addiction and uh inner desire to keep beating the score uh 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 uh if you see like all these top players uh they yeah like apart from getting on the top of the leaderboard it's 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 uh twist the properties they have been using all their life to create something which is like totally different and totally uh unimaginable so i think that's one of the factors uh which keeps

people hooked to this uh i mean code golfing aspect of the game

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

yeah uh so uh of course css battles started out with just a game a concept of a game where you would uh 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 uh 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 uh 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 uh you know it's a repetition kind of thing when you repeatedly uh are able to do something it brings in confidence uh inside you that okay i can use css uh 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 uh gives them like it it's sort of a practice playground for them was for improving their css so that realization basically like uh over the time we

started like thinking about like why not uh have css battle as the place where you can just have fun with css and do everything that you can with css uh we 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 uh further evolve it we want them to like uh 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 uh yeah i

mean so coming back to the point uh the learn thing so when we realized like people actually use it to uh practice css we thought like why not give them a starting point where even like uh people who don't know about css uh 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 i i want to learn css just to play this game and uh such instances like enforced us like uh we have a strong community we have a good place where people are playing uh we can we should idly give them something where they can first learn css uh get to know everything and then of course for practicing for improving that

they can play they can get into the game aspect of css that's how learn came into we spent a good two years we talked about it like in the community okay this is something we are coming up we're coming up with and it uh like it's a very difficult thing to build we realized building a game that teaches you it's not a straight forward problem realize and it took a long two years but yes we finally lost it yeah i know i played with like the you know the the first i think the beginner levels and i you know it was fantastic

like i actually had a lot of fun actually playing with it because you know nice about gamification in general is that your goal isn't just going to learn it's like oh can i you know how do i get this whole thing done is it indirectly though you know the secondary goal you're learning but your primary goal is just to have fun and i think that's like one of the things that you know you see from like students in school and like how people learn in general like sports for example techniques are pretty complicated hard but you know if your goal was like how do i swing a bat you know for like an hour 10 hours a day not going to be very fun but the goal is like how to compete

with the team and like you know play and have different scoring mechanics and like how to avoid getting you know getting like you know out and all that so many things there that indirectly then make it fun and then you happen to learn things aside and carrying that over to learning css which you know at the surface level is not the most fun thing in the world like learn essentially weird english like syntax that doesn't quite sound like english now like weird characters and yet you have to make it you know 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 yeah yeah so of course no actually you know you have all the infrastructure to basically

provide both learn and also golf code golfing for css have you thought about going beyond and actually adding javascript as well to it because you know it's like almost seems in many ways a logical next step is like yeah you have you're the ultimate destination for front-end battle not just for css

yeah actually so fun fact there's actually a site called jsbattle.dev and if you go there right now it would just say uh it's coming soon for now just place yes's battle but yeah it has been on our minds for long uh as soon as like we we just realized the potential of css battle uh within few months we actually bought the domains svg battle and js battle because we finally want to dive into that uh yeah i mean uh the only like uh 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 uh 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 uh 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 uh what could a fun target for a js developer be which they would like to uh achieve so yeah totally on our list we want to get it sometime soon but yeah let's see

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 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 i just signed up to you for the alpha version of js battle yeah

yeah thank you yeah i i i'm attracting weight

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 um

we don't like exactly have a guideline to uh figure out like what we want to distribute and which plan it has mostly been like uh first of all things which really cost us too much to uh like have it out there for example like for example we use firebase as a backend that's the only thing that uh 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 uh contribute a lot to the cost so we try to like provide as much as possible uh in the free plan but then if you find that some feature is uh is taking a lot of uh 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 uh otherwise like we always tend to keep it in free so if it's not that if it's just a luxury uh probably a helpful thing that makes uh makes the players life a little bit easier we tend to put it in the pro plan and even the pricing like i 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 uh stuck to that for like ever since pro plan came in

nice yeah you know because like in many pricing models over the case of like you know what is the 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

yeah that's what makes it uh very difficult too like it's a game first of all it's for a niche community of developers and uh 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 uh 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

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

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 uh he he designed it like from end to end

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 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

uh that's something that i decided early on we are going to go by default dark mode uh because like i liked it he likes it and that was like a quite obvious uh choice nice no that's actually yeah i i i always liked that very unique look it always reminded me of like the more interesting creative things people did many many years ago back when there wasn't this idea of like everything must look like this particular design system or this particular style or make it look like this on a mobile device and and so on

let's speak of mobile devices by the way dc live people using this battle on a mobile device are still very much a desktop big screen experience we do support mobile um like it's responsive you can still code but like we we find that like 95 percent or so people use it on desktop yeah now that it makes sense in many ways and you know also one thing i've been curious about is you've probably seen like this rise of like code assistance like github co-pilot for example where you know a computer basically generates all these things for you do you ever anticipate a computer one day like you know being able to see a visual of what needs to be done in css and then going backwards it's actually generating

all this for you

oh yeah uh i have actually thought of creating this something like this myself i i wanted to like uh 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 uh i i think that's possible uh even now uh 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 uh simple shapes overlapped on each other so i think it should be like possible to detect that uh 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

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

yeah like uh from time to time we like actually brainstorm on where we want to see css battle down the line and uh like i already mentioned uh css battle is something we want to be uh one stop to have like to learn css to read about it to practice it practice it to understand it to 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 uh there are a few like things planned uh for for the short term for the long term

uh uh like one thing for example uh we we right now the game aspect very critically relies on code golfing which is not something everyone finds interesting uh you need to have that sort of uh perspective or like mindset to actually quote golf a lot and get on top of the leaderboard which is uh with time getting a lot difficult with so many players amazing players coming in so what we want to bring in bring in in css battle is uh one to one gaming one to one battles where uh 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 uh it

doesn't have to be actually golfing it could be a time-out uh battle where you where the quickest one quickest one to get hundred percent match uh with right it could be as simple as that because uh 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 uh 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 we have in a plan for short term but eventually as i said like uh 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

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

yeah exactly like that's something we have talked a lot of times like idly uh when the uh apart from the code golfing aspect these game features come in we like actually imagine imagine uh having on-site events where people again like you said uh you know just play play uh 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 uh provided integrated into css battle

by one stop and you are in front of everyone

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

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

nice nice well i think with that you know thank you so much for i know just chatting about his battle also for creating it as well you know it's a lot of fun to just see people using it and do all the great things so so yeah so thank you so much and you know we'll catch up again when js battle comes out you know we should do this one more time

sure thing thanks for inviting me really had fun talking about css battle which is very close to my heart yeah

okay talk to you later

see ya bye you