📜 ⬆️ ⬇️

10K Apart. My answer

Together with the others I will tell my story about how I wrote the 10kB application and sent two works to the competition. Let's start in order ...
Perhaps the most difficult thing is to come up with an interesting idea.
Initially, I wanted to create an application, not a game. Initially, I wanted to do something that I can use later (at least as software, if not as an application).
The first idea was TODO - stickers with a couple of interesting features, but due to the huge number of TODO applications I didn’t do this (from a height of 20kB of written code - it’s not a fact that all the conceived features would fit in 10kB).
So the first application:

Css3 customization.

Then I wanted to use canvas for the controller. First of all, I wanted to create a rotating controller.

Without canvas it is not easy. The controller should control something) And with this something became a div. The next canvas controller was a slider (after all, no one likes that the controller consists of more than one DOM element ..).

Most of all, I was certainly fiddling with the color bar ...

Actually, I cheated a little. Some applications consist entirely of a controller for color selection. I can not focus the controller on the color value. The color is chosen unilaterally - so I saved kilobytes ...
Because in canvas, it is not possible to control the drawn "shapes" controllers respond to the mousemove event, and when clicked, they retain their position. It turned out pretty funny (at least in my opinion). The control is comfortable: nothing jumps / is highlighted / dragged.
When everything was ready, I decided to work on the design of the page. As a result, a turned-up rectangle appeared on the background of the controllers, and I made the retractable style bar as it were sticking out from the side.
After the publication, I began to look at other works, and my attention was attracted by the feeder 10k.aneventapart.com/Entry/127 and I wanted to do something useful ..)

The second application of steel

Special bookmarks.

I planned to make bookmarks, with the ability to search through pages, assuming that the search engine api has such a function. But later it turned out that there is none ... nevertheless, there is a search function on the domain. In general, all this became irrelevant then when the application is fun 11k).
Folders in the form of rotated blocks, I submitted as soon as I decided to make bookmarks.

And I made the bookmarks like this:

It was possible to make a chromium and fox bookmark parser files. In Mozilla, you can work with files locally. In chrome just copying text. Bookmarks are moved by drag and drop. You can search using regular expressions. Matches are highlighted.

In general, with the Internet search, and a little more finishing some functionality (for example, tying up synchronization with some bookmarking services), I will use this application myself :), and during the competition I have improved my writing skills for js code.
For js compression I used closure-compiler.appspot.com/home
For compression, css is the first css constrictor available.
But I didn’t like to shorten the names of the classes and methods of the object ... but it’s necessary ... It didn’t put quotes in tags, I tried to shorten everything I could.


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

All Articles