Directory of RSS feeds
Statistics

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Lessons CSSbattle

Css-live - Severstal your world! 22.04.2019 at 23:29

Community that speaks the languages of HTML, CSS and JavaScript

At the beginning of a captivating and informative online game for web designers — CSSbattle.dev. Your humble servant managed to "get stuck" in it almost from the beginning (and even a couple of times some time to be at the very top:). It was an interesting and enlightening experience which I would like to share.

have designed and implemented this game two friends-namesakes from India, pretender Kushagra Gur and designer Kushagra Agarwal. The genre of joke competition called "code golf": as in Golf it is necessary to roll the ball in the hole in minimum number of strokes, so here it is necessary to solve a task using minimal amount of code. Here is the challenge — to reproduce the 12 simple geometric drawings, and code — any (CSS, HTML...), in addition to scripts and links to external resources. Cross-browser compatibility, adaptability and the more validity is not needed: only Chrome, only the fixed size of 400×300. So many "forbidden" in everyday life such as the lack of doktayp, unclosed tags/quotes, custom properties, etc. permissible and often help. Players do not see each other's code, only the results and guessing what the trick helped a more successful rival to gain another character-the other, puts game excitement.

here is the home page of the game

the Authors proudly call their first game in the world so a contest for CSS, and is very similar to the truth (Yes, there was once upon a time css1k, but it was more of a "creative competition"). And among the participants observed stars such as Leah Faith himself Eric Meyer!

I'm not going to say much about the tricks of the particular tasks ("targets", i.e. "goals" or "targets") of the game: this has already been written (primarily on the author's forum), some participants did and posted their solutions in opencores, but I will not "spoil". I would like to share the overall, "high-level" considerations.

1. Not optimal, but it works better than optimum, but "almost working"

the estimation Algorithm results in the game in the first place evaluates the coincidence of the result with the task, and then the brevity of the solution. The most compact code will get more than 600 points, if the difference sample exceeds 0.1% (it is estimated this difference by the number of pixels the difference of their colors, etc. — the authors do not disclose). In my opinion, it is a useful reminder: even where the purpose of optimization, it is not necessary to pursue the optimization prematurely. First you need to get to work.

the Authors clearly adhere to the same rules and in the development of the game itself: many improvements have been added after launch, and not just "cosmetic" — in particular, modified the algorithm comparison (he was too picky, so the number of jobs was almost "impassable"). And to improve the working solution can be infinite, because...

2. There is no limit to perfection

After another record result often seems that here he is, an absolute limit beyond which progress is impossible. However, the records are still constantly updated. "The end" on specific solutions does not mean that there are no other ways, perhaps much more effective.

For me this was highlighted in the exercise No. 9 ("Tesseract"): I've been secretly proud of his decision in 145 characters (for the sake of it I even had "to uncover the secret weapon" time IE6:), but Vyacheslav Popov, the current champion, found the option in the 144, and I had to break down to changing a couple of properties in the decision to shrink it to 143 (incidentally also winning in flexibility). But just a day, one James Whitehead easily reduced to the result of the body > p selector *>* selects all except html and *+* ("lobotomirovanny owl", with the light hand of Haydon Pickering) — only body (as the next neighbor after head).

Even the default browser styles that are sometimes so enraged that we are ready not looking to "kill" them the first available under the hand racetam-normalism, sometimes in very handy! For example, in one of the shortest solutions to the first task (simple square 200×200 in the corner), these are obtained from 200px 2in (i.e., 192px, because in current CSS pixels. and the absolute units are related by a constant ratio) and default 8-pixel margin away from the body.

6. Superfluous knowledge does not happen in CSS

In daily practice we use a small part of CSS, but about the rest at best know that it's there (just ideally can quickly find the MDN). At least I have so. But exercise seems to help CSSbattle "inventory" of knowledge: what, how did not previously reach the hands, would be useful?

for Example, the units of measurement CSS. Usually we use px, em, Yes, occasionally vw/vh. But these units a whole bunch, and sometimes you can win a byte-different, just replacing one for another (Alex Zaworski was so excited about it that took the trouble to write a script calculator such replacements). And exotic unit q ("quarter-millimeter") at all the miracle she is the only single letter. And it is very close to the pixel. In fairness, even shorter recording pixels dimensionless number that is valid for multiple old properties for one of the standards for a non-standard mode (but not sure, and don't try this in production!). And interest: also only one character, and the space after it is not needed.

the same with flowers: did you know that the transparent color can now be set 5 symbols #0000?

Yet in everyday practice we often underestimate the reduced properties. For example, background: can immediately recall without a crib, all its subproperties, and in what order they are written? I can't. But in one such reduction can be set background picture (including the gradient), and its size and method of placement, including spacing around... and in one property there can be any number of such abbreviations! Of course, to develop a yet more convenient to write subproperties separately, but nothing prevents to merge them into a shrink with minification during Assembly. Users and search engines will thank you for saved traffic.

by the Way, the gradients are also missing the little known secrets:

beyond the usual linear and radial, they are even and conical; in the form of a radial you can set not only the key word, circle/ellipse, but an indication of the radius; for a single zone can now be set from two control points — the beginning and the end; you can control the "smooth" color transition, clearly indicating the position of the middle... and that's just what I'll have time to learn the game:). And judging by the latest record of Vincent de Oliveira (unsurpassed expert in an inline context, by the way), I learned far about not all (actually useful sometimes to remind myself that I don't know CSS).

And my "secret weapon" from item 2 was not so secret. I was talking about non-standard property zoom: old-timers remember him in the taming IE6-7, but it works in WebKit/Blink. Usually one property with a compound value like box-shadow or background, benefits from several individual properties, but very short properties there are exceptions to this rule: zoom:.5; shorter than the incremental scale(.5) to transform. Active member of the Rasmus, Floa expressed on the forum entertaining the idea of that zoom can become a kind of substitute for the viewBox to HTML, and also to save the bytes, reducing the size, etc. to single integers. I myself visited this idea, but I had dismissed it as hopeless... but in vain, as it turned out:)

So don't be afraid to learn new things and remember old! Because in the end...

7. CSS is fun and exciting!

I Hope, however, that regular readers of our site I do not doubt:)

Let your CSS"weapons" never "rust" and will always be ready to bring victory over the tasks of any complexity. And I wish you a sleek, compact code that solves the problem 100%!