Suggest improvements or new features for CSSBattle #18
Replies: 29 comments 49 replies
-
|
Badges! or rewards to unlock Different ideas for these badges:
It will add gamification, and also help users to "know" which tricks best solution is using. |
Beta Was this translation helpful? Give feedback.
-
|
wow! This is an excellent idea @iamvdo! It could solve many problems in one shot! CC @kushsolitary |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @iamvdo. These are some very good suggestions. |
Beta Was this translation helpful? Give feedback.
-
|
give me an example of above lines. @iamvdo |
Beta Was this translation helpful? Give feedback.
-
|
While locking the battle leaderboard after battle ends makes sense and we point the glory to whom it belongs, I would like to have a toggle to show the current situation on battle level. As we've seen, even the oldest targets have been improved quite a lot since the battles have ended and the leaderboards would be a lot different now. Obviously especially the Battle 1, since the leaderboard is filled with SVG. This might also give some motivation for new players to do some older battles and compare how they are doing within those targets. (Just a guess though, I've been here since the beginning :D ) |
Beta Was this translation helpful? Give feedback.
-
|
Very nice idea, we'll definitely consider it. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
What about infographics? It might be interesting to create a stats/infographics page without any relation to specific targets. The data can be retrieved from the top 10/20 solutions from each target. For example:
|
Beta Was this translation helpful? Give feedback.
-
|
Personal stats might be interesting as well. You can create fancy profiles not only with rewards but with reach infographics (like gamers have for the Dota 2 for example). It also could include average target solving time and total hours spent on the platform :) |
Beta Was this translation helpful? Give feedback.
-
|
WoW! I like the idea of infographics page - showing stats from top solutions! Let's see what all interesting stuff we can get here. |
Beta Was this translation helpful? Give feedback.
-
|
More ideas
|
Beta Was this translation helpful? Give feedback.
-
|
I'm guilty too for copying and submitting the best solution on open targets, but this has the downside that there aren't shown many unique solutions. Moreover they're so advanced that beginners will have a hard time learning from them. |
Beta Was this translation helpful? Give feedback.
-
|
Why not show all unique solutions of the open targets? That would show way more of the different techniques to learn from. |
Beta Was this translation helpful? Give feedback.
-
|
That would require storing them in a separate DB structure, since the DB used doesn't have any analog to |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
A preview tool, to verify solution as server will "see" it. Same as @alexzaworski's one, but right inside the UI |
Beta Was this translation helpful? Give feedback.
-
|
It also can be a PRO feature because the implementation might cost a bit. |
Beta Was this translation helpful? Give feedback.
-
|
@spalt08 Such a tool gives a direct advantage to the player. So this can't be PRO feature as it will be unfair to the non-PRO players. PRO features should only be luxury :) |
Beta Was this translation helpful? Give feedback.
-
|
If it moves the needle at all I think there's clearly demand for this. It's a really insane advantage for people who are using strategies that rely on it, to an extent I'm not sure how people can compete without it. In the last 30 days there's been 30k invocations on the function that drives previews 😄 which I'm sure is only a few people testing small changes a ton. |
Beta Was this translation helpful? Give feedback.
-
|
Hints when you have 99.9% match. It could be small circles where solution differs, on top of actual image, because sometimes it's hard to know why you won't get 100%, and what to improve. |
Beta Was this translation helpful? Give feedback.
-
|
Oh nice. Thanks for this tip @underdude @Esger. Never used that, but seems like a great option. :) |
Beta Was this translation helpful? Give feedback.
-
|
btw, what about custom plugins for pro version? Community can build advanced preview tools |
Beta Was this translation helpful? Give feedback.
-
Nice trick, I will add this to my custom chrome plugin. Might release that in the near future. Has some other stuff as well. |
Beta Was this translation helpful? Give feedback.
-
|
That's the specific situation where it comes in handy to know where exactly. See #34. |
Beta Was this translation helpful? Give feedback.
-
|
this has been now added to the play screen. |
Beta Was this translation helpful? Give feedback.
-
|
As someone relative new to the CSSBattle. I would love a chart visualizing my global ranking over time. Statistics on the profile page in general are a good idea as others already suggested. I really enjoyed climbing up the leaderboard, too addictive... The Number of open targets for a running battle should be limited to just one during the battle I think. Now everyone just copies and pastes the top solution and the battle is limited to the other targets, there is really no point in optimizing the open targets other than having fun doing so. Keeping the sponsor's logo open is a good idea. |
Beta Was this translation helpful? Give feedback.
-
|
To me, open targets give a fun opportunity to quickly set a new record by finding some minor detail to improve (stray whitespace character, redundant selector, custom property with longer name used less times than one with shorter name, etc.) in the previous top solution. It's a good chance for new players to feel immediately rewarded for learning new optimisation tricks without spending much time to create shapes from scratch, and even for experienced players it's often helpful to skip the "boring" part of getting initial 100% match and start with the "fun" part of code golfing itself. But I'd find it super useful if each open target had a tool to observe its evolution, basically like manually updated pages created by @gunnarbittersmann, but built-in and automated. I believe this is worth adding new DB structure for this, if necessary. |
Beta Was this translation helpful? Give feedback.
-
|
Monthly Leaderboard I was using TryHackMe for some time and it was too addictive with their point system which splits between Monthly and Yearly. It gave equal status to new comers and users who actively participate. |
Beta Was this translation helpful? Give feedback.
-
|
I've solved them all, and uploaded the logic of my solutions to github. Didn't want to upload the compressed versions. So, what I'd suggest is a way, to share your solutions, so others can see them, and leave comments, suggestions. A way to ask the top hackers about their solutions. Basically a way to learn from each other. |
Beta Was this translation helpful? Give feedback.
-
|
If you have a 100% solution you should have access at least to the lower rated solutions. Of course with a different scoring system that could not be an issue. I like the way it works in code wars. |
Beta Was this translation helpful? Give feedback.
-
|
A better SCORING system. Is not too late. It should enforce best practices and now do the opposite, and is tedious as hell. |
Beta Was this translation helpful? Give feedback.
-
|
Slide & Compare whith option to hide de red line and horizontal/vertical slide |
Beta Was this translation helpful? Give feedback.
-
|
You can use shift for horizontal slide/compare |
Beta Was this translation helpful? Give feedback.
-
|
I have a problem with getting a good score on code using mix-blend-mode. It 'seems' to be 100%, but I only get like 80% on it. This is true for #53 for example. So I suggest letting that kind of solution be valid when it 'looks' good, though the hex-code might be ever so slightly different colorwise. Other than that I find this very useful for learning, and lots of fun. Just a bit too addictive, maybe ... :) |
Beta Was this translation helpful? Give feedback.
-
There’s 2 missed opportunities in one single sentence 😜:
|
Beta Was this translation helpful? Give feedback.
-
Yes, it was more like 89%, but still? Here is my code that did not work. |
Beta Was this translation helpful? Give feedback.
-
|
I think it's a Chrome bug (the preview is in an |
Beta Was this translation helpful? Give feedback.
-
|
Wow! Good catch! That explains why it didn't work for sure! I will try it in another browser asap ... :)
|
Beta Was this translation helpful? Give feedback.
-
|
It did the trick! I had to change a few things; but now I could see what was wrong, and find out how to fix that. In Chrome it looked very much like 100%, but obviously was not. The most important part of this was that I was missing 'isolation: isolate' on the container; otherwise the body background was taken into consideration as well ... |
Beta Was this translation helpful? Give feedback.
-
|
When the battle is almost ending, the counter counts down to zero and then after it has ended it starts counting up again, there's no visual feedback that the battle has ended other then the counter going through zero. |
Beta Was this translation helpful? Give feedback.
-
|
This screenshot was taken 1 minute and 23 seconds after the battle ended. |
Beta Was this translation helpful? Give feedback.
-
|
oh shoot! Fixing this... |
Beta Was this translation helpful? Give feedback.
-
|
fixed now! |
Beta Was this translation helpful? Give feedback.
-
|
Some confetti or a checkered flag would be nice too :) |
Beta Was this translation helpful? Give feedback.
-
|
An intended solution after the contest ends! |
Beta Was this translation helpful? Give feedback.
-
|
I would very much appreciate that as well! The 100% solution that shows the 'best' way of solving such problems as the puzzle presents, would be very nice! Another thing might be to show how some of that could be minified, but that is not as important IMO, as the whole purpose of doing this is to gamify learning CSS. |
Beta Was this translation helpful? Give feedback.
-
|
You’re assuming the hosts have solutions to the targets they give us to solve? 🤣 |
Beta Was this translation helpful? Give feedback.
-
|
😂 I mean, they should've tested to see if it was possible at least once right..? lmao |
Beta Was this translation helpful? Give feedback.
-
|
We'll see how it turns out with the CSSBattle Learn part of this ... 😃 |
Beta Was this translation helpful? Give feedback.
-
|
Lol.. 😄 So true... But that's a great idea. Though I'll suggest the perfect solution should only be available when you submit or timeout, so challengers can brainstorm on it first instead of just looking it up and copying it which will defeat it's purpose in the first place. |
Beta Was this translation helpful? Give feedback.
-
|
One Improvement I would love to see is adding IDE keyboard shortcuts (vs code in my case), can be very useful to improve performance and typing speed (Especially in the timed challenges). Maybe something to consider. |
Beta Was this translation helpful? Give feedback.
-
|
How about adding an "Activity Timeline", filtered by friends. So that you get informed if one of them managed to improve a target. For PRO Members: |
Beta Was this translation helpful? Give feedback.
-
|
Hey @Beowolve 👋🏼 We are working on some of the things mentioned here. Stay tuned for some updates. |
Beta Was this translation helpful? Give feedback.
-
|
It's cool we can use the VSCode editor as PRO badgers but the theme colors without are so much nicer and more readable. |
Beta Was this translation helpful? Give feedback.
-
|
I hope CSS Battle can compress code automatically while scoring instead of let the coder do it, so that I can keep my code well formatted and easy to read. I always think the readability is as important as the functionality of a piece of code. Also, I think there could be two or more scoring system, of course which mean more ranks. One is the current one, the shortest code win; the other is a score with readability consideration, include well formatted, well naming points also. Of course, a badge system from @iamvdo is a great alternative of my idea. In the real industry world, functional code that well formatted and easy to read but may be not so efficient are usually much more welcome than extremely efficient codes but nobody (sometimes even the one who wrote it :-P ) understand it in some area are not so performance sensitive. |
Beta Was this translation helpful? Give feedback.
-
|
I suggest a mini measure tool in the target view to let one easily know how many pixels the width, height, diameter, etc of an element, so we can concentrate on the CSS solutions not the measuring. Even a simple cursor's coordination related to the (0, 0) of the image would be much more helpful. |
Beta Was this translation helpful? Give feedback.
-
|
You can do that when you're on a Mac with Command Shift 4 (to make a screenshot from part of your screen) Just measure the area you want and press Escape to not make the screenshot or just release the mouse button if you don't care about screenshots on your desktop :) |
Beta Was this translation helpful? Give feedback.
-
Actually I am doing so when I play CSS battle on my Mac. When I play on my Windows laptop, I am using a tiny tool I developed many years ago. (Btw. You can download it here https://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Programus-Screen-Ruler.shtml ) I developed it for my wife then, now it helps me also. But there’s a bug since Windows vista. So I consider both ways are not easy enough comparing add a coordination of cursor. I think it would not so difficult to implement. Maybe I can develop a chrome extension in the future for this if CSS Battle rejected this request and I am still playing it. |
Beta Was this translation helpful? Give feedback.
-
|
A sort option for “My solutions”: by date (as is currently), by length (characters), and by score (points). Maybe also by match percentage. |
Beta Was this translation helpful? Give feedback.
-
|
It would be cool if the profile page could allow us to add LinkedIn profile/link. That would enable us to expand our professional network, and for the 'available for hire' tag to work better ;) |
Beta Was this translation helpful? Give feedback.
-
|
I still don't see something like "Draft" so that it autosaves the current code even when something was incomplete, or am I missing something? |
Beta Was this translation helpful? Give feedback.
-
|
I would like see all my scores and sort it from lowest to highest so I will work on worst |
Beta Was this translation helpful? Give feedback.
-
|
Some players express disappointment about old records that are not reachable anymore because of backend updates (e.g. 82-char solutions for #30). Wouldn't it be useful to re-evaluate the top scores after each backend update, somewhat like it was done after disallowing the SVG solutions before the 2nd Battle? It can boost some players' interest in rechecking the already-played targets, exploring new ways to solve them, trying to restore the place in the leaderboard or, conversely, to win the new place that seemed unreachable before the update. |
Beta Was this translation helpful? Give feedback.
-
|
It would be very convenient to have '< previous' and 'next >' buttons around the #target dropdown, so one can browse through all the targets and battles directly. These buttons decrease or increase the battle #. Or shortcuts to do that. |
Beta Was this translation helpful? Give feedback.
-
|
I do have an Idea that could help newer players and also make the game in general more interresting. There are now more then 100 targets and it keeps getting more every battle. So new players might get overwhelmed by the big number of targets. I suggest making older battles public every time a new closed target gets added. So that we have 100 closed targets all the time and not more.
Only downside with that, we topplayers can't keep our nice records. But I am ok with that, there are new records to be made anyway 😃. |
Beta Was this translation helpful? Give feedback.
-
|
In the long run that will converge the scores of all active players towards the top. Not sure if that is wanted. |
Beta Was this translation helpful? Give feedback.
-
|
Why would that be? Every new closed target will also create a new leader score there (expect for current battle ;D) |
Beta Was this translation helpful? Give feedback.
-
|
At some point, in the long run, we would have 1000 open targets and 100 closed targets. So overall score would have more and more open targets as its contribution over time. That means same score on open targets, hence very similar overall score, hence the convergence. |
Beta Was this translation helpful? Give feedback.
-
|
Another way to achieve all of your goals is opening al sub top 100 solutions. It will reduce the convergence a bit as well. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
I think you are a little confused about it, the system do a rendering on the server of your code, that system can be different from your so the result can be very different, There is no "hacker bug". To get a result equals (or very similar) to server rendering you can use the cssbattle previewer |
Beta Was this translation helpful? Give feedback.
-
|
[1] Determine which battles are "untouched" by select friends and/or other players. This is to support/complement the idea below... [2] The ability to generate a "competitive/performance report/statistics" against select friends and/or players (for example: when organizing a random CSSBattle contest with other players (e.g. work colleagues) that you haven't added yet as a friend). inputs: |
Beta Was this translation helpful? Give feedback.
-
|
how about the thing I suggested in #336? |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
Hi there,
We are having so much fun seeing everybody play and compete on CSSBattle. This battle has already been played by 1300+ players, which is the highest since our pilot battle. 🎊
We wanted to thank you and ask if you had any improvement or new features suggestions—anything which will make your experience with CSSBattle even better. Let us know here, and we'll start implementing the most upvoted ideas!
Beta Was this translation helpful? Give feedback.
All reactions