📜 ⬆️ ⬇️

How we squeezed the balls

Yesterday night we laid out a decision-making ball to participate in 10K Apart , a competition for the best web application up to 10KB using only client technologies.
Decision-making ball

And if some of them were engaged in the compression of the code with the help of PNG , then we solved the inverse problem - we compressed PNG with the help of js code.

1. The story with the ball and the result

On Sunday evening, I needed an online ball from the movie “Route 60”. Not finding the right option, wrote my primitive ball. After thinking about whether to post it on the Internet, I slightly finished the look and laid it out. I wrote a small post on Habr and suddenly I liked the ball a lot.
The next day, I moved the balloon to another hosting and registered a separate domain for it.
It would seem that this is all over, but ...

2. Offer to participate in the competition

On Monday morning, we talked to bazilxp and he offered to participate in the 10K Apart contest. Naturally, I knew about this competition, but I did not have the desire to participate, nor the time for this. I replied that he could take the ball and take part himself. bazilxp promised to spend the evening squeezing the ball.

3. Task

The next day it turned out that everything is not as simple as we had supposed. The original version of the ball occupied 45 Kb, of which the main part (38 Kb) is a picture with a ball, 5 Kb is a picture with a translucent blue triangle (which is in the center) and the rest is html, js css. How can I reduce the size of all this?

Half ball

4. Picture with a ball - 38 Kb, PNG

The picture everywhere used gradient fill and, of course, I would like to reduce its size without loss of quality .
At this time, they stopped tormenting the ball.

5. The problem with the blue triangle - 5.5 Kb, PNG

In our opinion, when viewing, the illusion should have been created that the text was written on a blue triangle inside the ball. Accordingly, when changing the text, the blue triangle with letters should disappear smoothly, and then smoothly appear with new text.
Perhaps the easiest solution was to remove the blue triangle altogether, but after thinking about it, we discarded this option.

At this point we had:
  1. picture with a half of a ball and a half of a blue triangle, 9.7 Kb
  2. html + js + css, 4.5 Kb (the code on js has grown greatly due to drawing on the canvas element)

I will not describe how we compressed html / js / css - these methods are known to all. Unfortunately, they did not help us: after all that occurred to us, the total file size was 11,300 bytes.

It was decided to draw the ball completely with JavaScript hands on the canvas element.

6. Drawing

After the end of the working day, I sat in a coffee house, opened the tutorial and began to draw. bazilxp did the same at home (by the way, he sits in China and his time zone is different by +6 hours).
Drawing the “eight” at the top of the ball and calculating the JavaScript coordinates for the gradient that blurs the edges of the blue triangle turned out to be the most difficult for us (I had to remember trigonometry, which I haven’t done for 5 years).
As a result, after about 5 hours (by 23 hours in Moscow) we had a ready-made, wherever possible, tested page, which almost completely repeated the original page with the ball. At the same time, the size of all files, including css and favicon.ico, even without code compression, was 7.65 KB. I went home, and bazilxp - to register our ball for participation in the competition.

You can observe the result (as well as support our ball by voting) on the ball page on the contest website.

That's how it was. I still do not know what will come of it. Many great applications participate in the contest and I don’t count on the victory. But this is not very important. Regardless of the results of the competition, there was a feeling that we did a big, complex and beautiful thing. And the main thing - we both got great pleasure from the process.

Thanks for attention.

Shl. Finally, screenshots of the drawing steps with the ball:

Ball drawing steps

UPD: I will write immediately about SVG, because Questions about this have already started

Now I also think that SVG is less laborious, but the morning before yesterday, unfortunately, I did not know anything at all about the canvas or SVG.

We grabbed the first thing that came to hand.

In any case, I do not think that we have wasted time, because Got experience. It is very important for me.

UPD2: About gray background
Such a picture is observed on Mac and Safari under Windows.

Themselves to blame: forgot to fill the canvas background by default.

Unfortunately, now it's too late to change something.

Source: https://habr.com/ru/post/102583/

All Articles