10 quotes HolyJS 2017 Moscow



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

    Therefore, now that we have collected audience ratings and identified the reports that we liked most, we decided not to write another retelling of the event, but to share small fragments of these reports. We took 10 of those who received ratings above 4.2 from the audience, and in each they found a place that was interesting, even in isolation 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, write your first shader




    “Question to the audience: how many languages ​​are well supported on the web? [Voice from the audience: “Not a single one!”] Well, the languages ​​in the browser. Three? Let's assume that four, because I can name HTML, CSS, JS and SVG. People say “three,” but SVG can also be considered a declarative language ... However, in reality there are more. There is a dead VRML, we do not consider it. And there is GLSL.

    And GLSL is a very special language. Especially for the web. Because all the rest - JavaScript, CSS, HTML - originated on the web, and from web pages they continued their victorious march on 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 here’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 on. That is, GLSL is a universal thing. This is the thing behind all the crazy special effects in computer games. ”



    Vitaliy Fridman - New Adventures in Responsive Web Design




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

    True, if someone wants to download this picture for themselves ... 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, this can achieve great results. Compress a large picture by one megabyte, although the result will be identical. I thought, now someone will get up and say, “But what about the rendering, the browser has to impose filters.” This is actually not a problem, because 27 milliseconds versus 23 milliseconds - well, honestly, not so scary. And filters are supported everywhere except Internet Explorer. ”



    Alexander Korotaev - Heroes of Might and Magic game 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 intuitively clear to anyone, many thousands of maps have already been made.

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

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



    Vitaliy Slobodin - Headless browsers: what, how and why




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

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

    Naturally, a logical question arises: if he doesn’t have an interface with buttons and buttons at all, how to manage it? It's simple: every headless browser must have a software interface. ”



    Alexey Bogachuk - Security: vulnerabilities in your application




    End of the report: “Thank you! Here is a link to the presentation ... Ah, no, guys, how can you, you did not listen to me. Are you starting to take a picture of this link? Do not click or click on unfamiliar links! Here is the real link . Thanks again"



    Nikolay Matvienko - Troubleshooting Node.js applications under the hood





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

    At first, tools like DTrace, Instruments (the shell of the same DTrace on macOS), perf on Linux - all these are system profilers, and they appeared long before the advent of Node.js, and are still used today.

    The first stage with the advent of Node.js - Node-oriented tools appear. Here it is worth highlighting node inspector, node-memwatch, node-heapdump. This period I call "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 next 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 development vector.

    Node is already used in production by large companies like Amazon, Netflix and Alibaba, and there is a need for effective tools for production. And from 2017, I conditionally single out the third stage: now everything is focused on the quality and improvement of the trace 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 overlays. That is, you will think that your animation will come in 16 milliseconds, which approximately 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 can deal with this problem, and it is called requestAnimationFrame. This is a function that ensures that callback works at a convenient time for the browser scheduler. However, I want to note that it can also work at unequal intervals. If you want to use requestAnimationFrame, I highly recommend looking at which browsers you are targeting. ”



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




    “I’ve been in the front-end for six years and to begin with I’ll give as an example a couple of projects I know about parsers.

    Aircraft. Everyone probably knows about Aviasales. Somewhere in 2012, we also sawed “our air sales”, then it was mainstream, there were many such projects. And the data there became outdated extremely quickly. You couldn’t parse the airline’s website once and then show people your cache content. You had to instantly parse, because prices were falling, they were transferring something somewhere. <...>

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



    Roman Dvornov - Unit Testing with Screenshots: Breaking the Sound Barrier




    “There is a Yandex Gemini tool - 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 conducted a simple test from readme, copied it 100 times, and got this result: 100 images with a resolution of 282x200 are checked for about two minutes. This seems to be a short time, but in fact it is very large, and you will see this later. As a result, they began to do their own thing, and this will be described in the report. <...>

    We have such numbers: if we compare two screenshots of 800x600 and they are equal, the comparison generally takes about 0 milliseconds. If the screenshots are slightly different and you need to find the number of pixels that differ, then it takes about 100 milliseconds. Updating screenshots - getting a picture when we only initialize the test base - takes about 25 milliseconds per screenshot. ”



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




    Leah Veru finished the conference with Keynote on regular expressions, and her presentation was interactive: from time to time she said “write such and such regularity”, gave a minute or two, and with the help of her site regexplained.com, everyone could post their options on Twitter. Then Leah showed them and announced the correct one (and later calculated which of the participants as a whole turned out to be the most accurate).

    Therefore, in her case, instead of quoting, we propose to do the same. If you want to see how good it will turn out for you, detect two minutes and open the spoiler.

    Hidden text


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

    Hidden text

    The fourth example is completely correct, but Leah clarified that in life it’s not always worth pursuing absolute accuracy: if you try to write “a completely correct regularity for checking an email address”, it will turn out to be monstrous, but still it will not protect you from entering completely correct This is not an existing address.

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

    And you’ll better understand if you personally want to be in St. Petersburg HolyJS in May - and we, for our part, 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: it belongs to Kaspersky Lab, which was present at the conference with a stand.


    Also popular now: