10 quotes HolyJS 2017 Moscow

About how the HolyJS 2017 conference was held in Moscow, they have already been told several times: Yevgeny Gusev described everything as a member of the Program Committee at Habré , viewer impressions appeared on Noveo's blog, and we ourselves also mentioned Moscow reports in the announcement of HolyJS 2018 Piter.

Therefore, now that we have collected the audience ratings and identified the reports we liked, we decided not to write another retelling of the event, but to share small fragments of these reports. They took 10 of those who received ratings above 4.2 from the audience, and in each they found them in a place that was interesting even apart from the context. Most often, the fragment is taken from the introduction, but we think that you can still learn new things - and just feel the atmosphere of the conference.
')

Denis Radin - UI components on pixel shaders, we write your first shader

“Question to the audience: how many languages ​​are well supported on the web? [A voice from the audience: “None!”] Well, languages ​​in the browser. Three? Let's assume four, because I can call HTML, CSS, JS and SVG. People say “three,” but SVG, too, can be considered a declarative language ... But in fact there are more of them. There is a dead VRML, we do not consider it. And there's GLSL.

And GLSL is a very special language. Especially for the web. Because everyone else — JavaScript, CSS, HTML — was born on the web, and from the web pages they continued their victorious march across other platforms (for example, they started using WebView on mobile phones). But GLSL is special: it originated in the world of computer graphics, in C ++, and came to the web from there. And that's what's great about GLSL: if you learned it once, you can use it on all platforms. On Unity, on Swift, on Java and so on and so forth. That is, GLSL is a universal thing. This is the thing behind all the crazy special effects in computer games. ”

---

Vitaly Friedman - New Adventures in Responsive Web Design

“Here is another technique from The Contrast Swap Technique. If we have a picture, and we need to reduce its size, we will think about which parts are well compressed? Contrast, for example. But what if you significantly reduce the contrast and then draw it with CSS and filters, increase it again?

True, if someone wants to download this picture itself ... Well, why? Maybe we should not? For such cases there is a wonderful method: disable image downloading. And besides, if you have licensed images or stock photo, then you don’t even need to draw a logo on top of them, because who needs such a picture?

And, in fact, so you can achieve great results. Compress a large picture of one megabyte, although the result will be identical. I thought, now someone will come up and say, “But what about rendering, the browser has to impose filters”. This is not really a problem, because 27 milliseconds versus 23 milliseconds - well, honestly, not so bad. And filters are supported everywhere except Internet Explorer. ”

---

Alexander Korotaev - Game "Heroes of Might and Magic" in the browser: long, difficult and unbearably interesting

“When you open a map in this editor, you see an excellent visual interface for editing any buildings, objects, you can edit anything, it is intuitive to anyone, many thousands of maps have already been done.

But if you want to read it as a developer, you will see that it is just a binary code that is difficult to read. I started meditating on this code, found some poor specifications on how it works and what is inside it, and even over time began to read it. Literally two weeks I look at him, and I start to see some patterns!

Then I realized that something was wrong with me, started digging and found out that normal guys still read it in the editors with support for templates. Templates have already been written for the cards that allow them to be parsed in the 010 Editor , and they open in it, just like in a browser. In fact, you see something similar to DevTools, you can point at some section of code, and it will be highlighted, it will show what is inside there. This is much more convenient than what I tried to work with before. ”

---

Vitaly Slobodin - Headless browsers: what, how and why

“When you ask a person how a headless browser works -“ Well, probably, he has some kind of window, virtual framebuffer or something else ... ”

Here, probably, it is possible to divide browsers into two types. The first is the “real” headless, he doesn’t need a framebuffer or anything like that, he does everything in memory. You don't need a Linux X server or anything. And there are those who draw everything in a virtual framebuffer. Due to the fact that you do not need to draw and display anything, the “real” works faster and consumes much less memory.

Naturally, a logical question arises: if he does not have an interface with buttons and molds at all, how can he be controlled? It's simple: every headless browser should have a software interface. ”

---

Alexey Bogachuk - Security: vulnerabilities of your application

Completion of the report: “Thank you! Here's a link to the presentation ... Ay, no, guys, how can you, you did not listen to me. Do you start fotkat this link? Do not click or click on unfamiliar links! Here is the real link . Thanks again"

---

Nikolai Matvienko - Troubleshooting Node.js Applications Under the Hood

“To understand where we are in diagnostics now, I propose to turn to history.

First, there were such tools as DTrace, Instruments (the shell of the same DTrace on macOS), perf on Linux - these are all system profilers, and they appeared long before the appearance of Node.js itself, and are used to this day.

The first stage with the advent of Node.js - Node-oriented tools appear. Here it is worth to highlight node inspector, node-memwatch, node-heapdump. This period I call the “time of troubles.” You remember, there was a split in the community, io.js separated from Node.js, the community did not have a common understanding of where to go and what to choose.

But from 2015 Node.js and io.js (fork, which developed more rapidly) are merging again. We get Node.js version 4.x Argon, and the community has a clear vector of development.

Node is already used in production by large companies like Amazon, Netflix and Alibaba, and there is a need for efficient production tools. And starting from 2017, I conditionally single out the third stage: now everything is focused on the quality and improvement of the tracing of the internal parts of Node.js itself ”.

---

Alexey Taktarov - Animations in the world of states

“We cannot use setTimeout for animation. Because setTimeout will not guarantee that your function will actually work in the specified period of time. This can lead to effects such as frame blending. That is, you will think that your animation will come in 16 milliseconds, which roughly corresponds to 60 frames per second, but in fact it will work more, and this debt will accumulate and accumulate.

Fortunately, the browser has a modern API that allows you to deal with this problem, and it is called requestAnimationFrame. This is a function that ensures that the callback will work at a convenient time for the browser scheduler. At the same time I want to note that it can also work at irregular intervals. If you want to use requestAnimationFrame, I highly recommend looking at which browsers you are targeting. ”

---

Egor Malkevich - (- We steal--) We extract data from the Internet

“I’ve been in the frontend for six years and, to begin with, I’ll give as an example a couple of projects that I know of that are related to parsers.

Aircraft. Everyone probably knows about Aviasales. Somewhere in 2012, we also sawed “our own aviation sales”, then it was mainstream, there were a lot of such projects. And the data there became outdated extremely quickly. You could not once parse the airline's website and then show people your content from the cache. You had to instantly parse, because prices fell, something was transferred somewhere. <...>

Cars. Everyone knows "outbid", who buy cars cheaper, sell more expensive. <...> Now they have moved, like brokers, into high-frequency trading. There are many sites that allow simple users to sell a car. And “outbid” want to see your car faster than everyone else. They started writing parsers that scan the page, find new interesting machines and get in touch with you quickly, perhaps automatically. ”

---

Roman Dvornov - Unit-testing with screenshots: breaking the sound barrier

“There is a Gemini tool from Yandex - a good thing, but it looks like a spaceship, because it is very difficult to start, configure, you have to write a lot of code. This may not be a problem, but the problem for me personally was that I ran a simple test from the readme, copied it 100 times, and got this result: 100 images with a resolution of 282x200 are checked for about two minutes. It seems to be a short time, but in fact it is very large, and you will see for yourself later. As a result, they began to make their own, and this will be discussed in the report. <...>

We got the following figures: if we compare two 800x600 screenshots and they are equal, the comparison takes about 0 milliseconds in general. If the screenshots are slightly different and you need to find the number of pixels that are different, then it takes about 100 milliseconds. Updating screenshots - getting the picture when we just initialize the test database - takes about 25 milliseconds per screen. "

---

Lea Verou - / Reg (exp) {2} lained /: Demystifying Regular Expressions

Lia Vera ended the conference with keynote about regular expressions, and her presentation was interactive: from time to time she said “write such a regular schedule”, gave a minute or two, and with the help of her site regexplained.com anyone could post their variations on Twitter. Then Leah showed them and read out the correct one (and later she calculated which of the participants as a whole turned out to be the most accurate).

Therefore, in her case, instead of a quote, we propose to do the same. If you want to see how well you’ll get, mark two minutes and open the spoiler.


And when you're done, look under the second spoiler with the answer:


If you want to compare your regular expression with the variants of the audience (and watch the video with a raccoon on a bicycle), you can open the broadcast at the appropriate moment and see how Leah opens up their options. So even more imbued with the atmosphere of the event.

And you better understand whether you personally want to be in May at St. Petersburg HolyJS - and for our part, we remind you that it has already been announced .

And if you read this entire post to find out where the character came from in the first photo, we inform you that it belongs to Kaspersky Lab, which was present at the conference with a stand.