Brute forcing CSSBattles has never been so simple
Have you ever wanted to conquer CSSBattles with lightning speed and precision? Imagine finishing a CSSBattle in less than 20 seconds, leaving your competition in awe. Here is my journey of developing a tool called Pixelator, which allows you to convert any image into CSS box-shadow art and dominate CSSBattles effortlessly.
If you’ve never done a one-on-one CSSBattle I would highly recommend it. There is no better way to reach new heights of bragging rights than to beat your fellow programmer in a speed CSSBattle. CSSBattles the site only measures your performance in fewest lines and accuracy. In a one-on-one CSS battle, the only thing that really matters is how fast you can react 100% accuracy.
When facing off against someone, the concept of using the fewest lines goes out the window (unless two participants reach 100% accuracy simultaneously, which seems a bit far-fetched). Therefore, employing more sustainable styling patterns patterns like positioning elements correctly with "flex" to construct segments will only slow you down and expose you to issues like unpredictable element widths, which will move you further away from the goal of 100% accuracy (not ideal!).
Let me share a story. In my last CSSBattle, I managed to reach the final battle. I had been too proud to rely on absolute positioning. Whenever it was necessary, I preferred to use relative positioning to maintain bragging rights for clean code. However, this turned out to be my fatal flaw. In the final round, we were tasked with create this image.
and in my “too proud” wisdom, I thought, 'Hey, let's use flex to construct the keys' (disregarding the fact that I definitely used absolute positioning for the black keys). Unfortunately, this strategy led to my defeat by just a few seconds because my opponent had been using absolute positioning from the very beginning.
After this embarrassing defeat I vowed to come up with a way to win any CSS battle in seconds! Using as many lines of code as I needed to do so... and really just wanted an excuse to learn about CSS box-shadow art in the process.
At that time, I had recently stumbled upon this CodePen by JT1: Burger Fries Box-Shadow Pixel Art
Upon inspecting how it was achieved, I noticed that it involved layering box-shadows, offset from a starting point, to create pixel art.
This gave me a fantastic idea for solving my speed CSS-ing challenges. If I could generate enough box shadows to achieve a high resolution suitable for the CSSBattles validator, I would be able to produce solutions almost instantly – a way to brute force the challenges.
The plan to win all CSSBattles once and for all was as follows:
Setting aside the fact that using CSS box-shadows in this manner would produce a heap of jagged edges that would cost points, and that converting a highly efficiently compressed image into 'CSS art' would consume significantly more space than the original format, I got to work.
To generate the correct pixels for a given area, you need to sample the pixels that make up the aggregate pixel output. Thankfully, there are tools built into the browser that handle this task for us (Thanks web standards!). Introducing Canvas and its trusty companion, 'drawImage'.
Creating a canvas element of the desired output size and overlaying an image on it would address the sampling process. Since the pixels of a canvas can be interpreted as RGB values, this neatly resolved my sampling problem.
Introducing Pixelator! A tool that converts any image into pixel art!
But that's not all, with it you can:
So I put it to the test and it was (partially) successful!
Unfortunately there's an upper limit to the number of characters you can have in a submission. However reducing the pixels per pixel did give me 82.5%, success!
Want to complete CSSBattles in less than 20 seconds with > 80% accuracy? Pixelator is your answer. Convert any image into CSS and paste it anywhere! Visit (Pixelator)[https://pixelator.bengineer.dev/] today and start transforming your images into CSS box-shadow art!