We act according to the old scheme : I look for 10 reports in a row for you (available for free on YouTube), I make a short description of the content so that you can throw out the uninteresting. In addition, from sites I collect links to slides and descriptions. The resulting sort and give in order to increase the rating - that is, at the bottom will be the coolest report. Ratings are not likes on YouTube, but their own evaluation system, it is cooler than likes.

Previous parts:

• Heisenbug 2017 Moscow (Testing)
• JBreak 2017 (Java)
• JPoint 2017 (Java)

This time the object of the survey will be HolyJS 2017 Moscow - the well-known JavaScript conference, the fourth in a row. More than 600 JS developers gathered under one roof in order to discuss the present and future of the JavaScript community with world experts: Douglas Crockford, Lea Verou, Martin Splitt, and so on.

Caution traffic! In this post there is a huge number of pictures - slides and screenshots from a video in 720p format.

Disclaimer : All descriptions are my personal opinion. Everything written is the fruit of my sick imagination, and not the distorted quotes of the speakers (this warning is written so that the speakers will not beat me).

10. Unit testing with screenshots: breaking the sound barrier

Speaker : Roman Dvornov; rating : 4.31 ± 0.11. Link to the presentation .

Roman is the head of Avito front-end development. The author basis.js, maintainer CSSO, CSSTree, Component Inspector, etc.

It is fashionable to test the layout recourse with screenshots, this will not surprise anyone. Avito has long wanted to introduce this type of testing in their home, but all the time they were confused by the questions of ease of support and application. More worried about performance. I wanted a solution that is easy to use and quick to use. Ready solutions did not fit, I had to write my own.

The report describes what came of it, what tasks were solved, and how they achieved it so that testing with screenshots practically did not affect the total time for passing the tests. This is a really deep technical report on 149 slides, which deservedly received its hardcore category.

For starters, here is one of the final report slides:

And everything slows you down, right? Want to know how to do it right? Watch the video!

9. Troubleshooting Node.js Applications Under the Hood

Speaker : Nikolay Matvienko; rating : 4.35 ± 0.07. Link to the presentation .

Since the advent of Node.js, application diagnostics have been improved in several stages, from debugging applications to deep performance analysis. Modern diagnostic tools depend on upgrading versions of the V8 engine. As a result, most tools do not support the latest, faster versions of Node.js. The report discusses strategies for using tools such as core dump debuggers, flame graphs, GC and Event Loop tracers to help find and fix performance problems, production errors, and memory leaks at different levels of analysis.

The report begins with our place in the historical process:

And Noda's place in full-scale architecture:

Companies that are using Noda now lose thousands of dollars per minute in the event of a malfunction (there is a schedule), and the report shows how to debug such critical things with concrete examples.

Debugging applications in production, how so? Nikolai is deeply immersed in the topic and illustrates all this with specific examples. The examples are multi-step, and if you start to show all the slides with steps, they simply do not fit in the habrotopic. Therefore, I will take and extract an arbitrary slide from the middle!

Nikolai raises such hot topics as debugging Express on production, talks about the debugging algorithm in the staging / production-environment, and so on.

Then there is a whole large section about the search for leaks in the memory. We are talking about all sorts of tools, interconnection of CPU and Memory, the number of garbage collections on Scavenge and MarkSweepCompact, the trace of Scavenge GC and much more.

And here there are beautiful illustrations on flamegraphs!

Conclusions . The report explores a topic in which few people have a normal examination. You can't buy a book on Amazon about it, but you will be able to figure it out for months on your own. In general, this is such a rich report that literally every second is important, and it is useless to build a squeeze. If you are too lazy to watch the video, then you can at least watch the presentation .

8. Headless browsers: what, how and why

Speaker : Vitaly Slobodin; rating : 4.35 ± 0.07. (Presentation unpublished)

This is a report from the former developer of PhantomJS, and that says it all :-) He single-handedly released version 2.0.0 for 3 platforms.

Headless browsers have long been an indispensable tool for developers. With their help, you can test the code, check the quality and compliance of the layout and more. But the problem is that the developers know little about how their tool works and works. The report dives into these important details.

The outline of the report is approximately as follows:

When Vitaly conducted interviews on Angulyar and asked to write a mini-angular in a few dozen lines, no one could cope with this. This is one of the reasons why Vitaly believes that developers do not understand how their tools work, and proposes to expand our knowledge.

It explains how a headless browser differs from a regular browser. For example, a headless browser can be run on a bare GNU / Linux server. Here is how it works:

You can use a headless browser for different things:

• Testing
• Automation
• Continuous integration
• Network monitoring
• Security audit

Existing headless projects are discussed: PhantomJS (Webkit), SlimerJS (Firefox Gecko), TrifleJS (IE Trident), Headless Chrome (Chromium), Puppeteer (Chromium, Headless Chrome), Headless Mozilla Firefox. Safari and Edge are bad.

Vitali chooses Puppeteer.

And that's why it's cool:

We have two ways of embedding using headless Chromium:

And this is how it works inside:

These are not just slides - everything is discussed in detail.

Here are the tools we can pick up from DevTools:

In this report, Vitali plunges into the Chrome DevTools Protocol.

It discusses the most important ideas such as isolation of sessions, virtual timers, work with network requests and so on. Even WebGL delivered!

All this is demonstrated by living examples. For example, virtual timers are demonstrated on accelerating animation in an external way.

It would seem that everything is already very good, but there are still problems.

For example, the text is different everywhere! Therefore, screenshots have to compare with the standards only on the same platform.

The most popular feature that cannot be implemented in headless mode is Flash. Just because it needs a window handle in a real operating system - and where can I get it without a window manager!

And a bunch of problems:

The report concludes with a short motivating speech that the world will be captured not by robots, but by browsers :-)

Conclusions . For me personally, this is the main report of the conference. Yes, what Friedman did received the highest marks. But here in my life I often met and will meet parsing tasks, and everything that Vitaly says is directly applicable to everyday life. In particular, I was alarmed and worried about his words about WebDriver at the very end of the report, about the slow development and obsolescence. Because now I am very strongly tied to it and do not quite know how to work directly with the DevTools protocol from Java on the backend - you need to urgently understand this topic. Yes, I can collect and slightly change the Chromium and get manual control in it to different subsystems, but the patterns themselves of using it in this mode are, for the time being, a deep mystery that is still worth digging and digging.

7. Animations in the world of states

Speaker : Alexey Taktarov; rating : 4.44 ± 0.08. (Presentation unpublished)

We have already learned how to build clean interfaces and write “undo-redo” in a few lines. But what about animation? They are often bypassed, and they do not always fit into the (state) DOM approach. There are great solutions like React Motion, but what if you need to do complex animations or work with Canvas using the physics engine?

In this report, Alexey describes how he works with animations in React-applications, compares several approaches (D3, React-Motion, “dirty components”) and illustrates this with many interactive demos. It also tells about the "launch" of animation in Redux-applications.

This report is a part of the research, the purpose of which is to arrive at a pure and declarative way of defining animations in React applications.

This is a rather colorful and clearly stated story, when viewing which you can relax and enjoy. For example, it begins with 10 volumes on architecture.

These principles can be found in the design of the things we use. Rams had 12 rules, but they come from the previous three.

And we, as developers, should also do aesthetically pleasing things. In our case, these are nice animations.

(The report will include demos based on React, but some of them can be used in any applications.)

The perfect animation is smooth and runs at regular intervals. And it would be naive to think that such things are done with the help of setTimeout in the browser, because it does not guarantee the triggering at the right time interval, which will lead to the imposition of frames. And the requestAnimationFrame is fine.

All things discussed are illustrated by short clear examples and pronounced in a voice:

But this code rests on another misconception: it does not take into account that the animation slows down, and the example needs to be improved. You need to add frame skipping by adding a delta to the formula.

Next comes a cool live demo with divas that move like birds (there are three laws, you can turn them on and off). All this does not slow down due to the characteristic structure of the code and will-change: transform .

From here we proceed to the idea that an application is a chain of states. But for us as developers at React, this is not obvious, because this mechanism is hidden, we have an Immutable UI.

What can be done here? First of all, CSS transitions, and they work out of the box in React - just write transform: translate right in the code. But such animations will be a bit unnatural. To this you can add React Motion , and everything will become much more pleasant! Internally, he uses the function-as-a-prop pattern and makes animations manually, like a physics engine in games.

Alexey advises not to use React Motion everywhere, because for some cases it is not suitable:

• Spring animations are not limited in time.
• Difficult with sequential animations
• High performance?

But you can do "dirty" animation. For example, using componentDidMount() .

But there is a problem with the fact that usually all sorts of dialog boxes are drawn by some flag, and you will not be able to animate their closing. No flag - no item in the house - nothing to animate. Therefore, you need to write a wrapper that will help to do this. This is done using a trick called Ghost Children. But the code will not be very pleasant and will be similar to the state machine. Fortunately, for us it is all written. For example, there is a cool helper react-transition-group@2.0 .

Using such dirty animations, it is possible to build very difficult components.

It is not always necessary, so you can resort to the trick with the interception of responsibility. You can work with this trick. For example, with physics.

It sounds simple, but in practice it is not always convenient to animate. You can resort to different tricks, for example, use a P-controller.

Here it is important to adhere to the golden rule:

But this rule also works in the other direction: you can only use the state and its change to trigger animations. And you can even use direct access to components (for example, via ref) or PubSub, but this will not work with Time Travel.

It is convenient to use the pattern in Redux-applications, where the global state is the only way to communicate. For this, Alexey even zaopensorsil redux-actuator . There is a live demo of how it works.

As for very complicated things, you can, for example, manually flip. But beautifully declarative it can not look.

In general, the picture is as follows:

And we consider a set of related reports that are worth a look.

Conclusions . Overall, this is a very cool talk, giving initial ideas on how to make good animations in your React / Redux applications. It will be very useful for those who have no idea how to take on this insanely difficult task.

6. Get data from the Internet

Speaker : Egor Malkevich; rating : 4.46 ± 0.09. Link to the presentation .

This report is an incredible tour of the depths of the Internet in search of data. Egor talks about both the easiest ways to steal data from the site, and the most complex and highly obscure at first glance.

The report begins with a conversation about mainstream data: plane tickets, cars, videos and TV shows. For example, in Minsk an average of 30-60 advertisements for the sale of a car are laid out per day, you can use special websites manually - or you can write your own small parser that will search for them. Or, for example, Instagram - the API was closed there, but we can write our own.

The code of some basic primitive parser is considered:

But this method does not work ... or it works, but it is bad.

PhantomJS dies, and is almost dead, so you need to use Headless Chrome. There are several libraries for it, most of all stars are Puppeteer.

Based on this, you can already do some things, for example, search for Bitcoin-enthusiasts emails on GitHub:

You can log in using cookies (specific code is considered), you can download files.

Or you can write your adblock to speed up the loading of scripts:

Puppeteer and Request.js are compared, all in the form of code and with tests. We consider the acceleration of the work of Puppeteer by creating a pool of browsers and other cunning hacks. For example, there are good examples of how to download audio and video for free.

A separate section is devoted to the discussion of the use of site maps. Open graph-scraper, sitemapper, web-auto-extractor are discussed, live demos are shown. It tells how in 5 minutes to make an analogue of Yandex video :-)

Full parser building workflow looks like this:

One of the most important things is the proxy, which allows you to peel requests in a row and not be afraid that we will punch sites. For example, this superagent-proxy, auto-proxy, you can open the Tor Browser through Node.js.

Another question is how to set up a queue. There is a Bull ( npm install bull ), it works with radishes. In the queue, you can create a process and push there. If you need to work with the schedule (“once in 4 am”), you can use node-schedule.

Big whales work differently, they buy content, and here is the scheme:

In general, the Internet looks like this:

Finally, the issues of protecting content from such methods of accessing information, such as honeypots, as well as the issues of hacking such protection are considered.

In this report, an insane amount of living examples and code - for which, in fact, it makes sense to watch it all. All examples from the report are in the open source, the link is closer to the end of the video.

Conclusions . For me personally, a person engaged in working with a large amount of content and parsing, this report turned out to be very useful. And despite the fact that I use a Java backend for parsing, even in it the basic ideas from this report are still applicable and give good food for thought.

5. UI components on pixel shaders, we write your first shader

Speaker : Denis Radin; rating : 4.56 ± 0.09. (Presentation unpublished)

If someone thought that this is a report about JavaScript, then no - this is a report about pixel shaders! :-) And this is not even a report, but a workshop in which viewers can participate by pulling out laptops and writing their first pixel shader (we, the viewers on YouTube, can also!).

At one time, shaders turned the world of gaming graphics and became the technology behind all visual effects in computer games. Now they are ready to shake the web. Shaders are small programs in C-like GLSL (OpenGL Shading Language), which allow you to describe the state of vertices (vertex shaders) or pixels (pixel shaders) in the context of OpenGL (or WebGL) using mathematical functions. GLSL is compiled and executed on a GPU with unprecedented HTML / CSS performance. As a rule, shaders are used to develop games and computer graphics, and using them in UI components is unfairly bypassed. This report covers the experience of using GLSL in developing web applications.

Denis Radin - a well-known figure in the JS-community, organizes several conferences in Amsterdam:

In addition, he is working in Evolution Gaming on three-dimensional games that they do with React, Redux and WebGL.

The web uses several languages, but GLSL is special because I was born not just on the web, but in the world of computer graphics and C ++, and came to the web from there. If you learn GLSL, you can use it not only on the web, but anywhere (eg in Unity), this is a universal thing. You can even mine cryptocurrency!

Pipeline evolution: over the years, vertex and pixel shaders have been added:

It meets the specifications of WebGL, runs on Canvas, is highly optimized and runs on the GPU, and can be executed in parallel. This is a language with strict typing, sharpened by mathematics (there are built-in all sorts of mathematical functions).

Examples in the report are accompanied by a demonstration in the browser, the benefit there you can do this:

An example of how a spinner with a background-position was rewritten into more correct technologies that do not load the processor:

The first attempt - CSS GPU tranformations and opacity. But for each spinner you need to produce copy-paste, and, taking into account decompression, it weighs 30 megabytes in video memory.

Then begins the workshop part of the report, it is proposed to get a laptop and start writing a pixel shader. To do this, open the repository by the link and install the Refined Github browser extension.

Then you need to open for debugging. http://editor.thebookofshaders.com . By the way, in some incomprehensible way on some Internet providers, he was on the forbidden list. I didn’t see anything forbidden on this site, most likely this is a mistake, and you yourself know how blocking sites are solved by ordinary users in Russia :-) However, who didn’t open it - you can clone it with GitHub and run locally (although this will require additional manipulations).

The meaning of the workshop is revealed here in these commits on GitHub:

All code examples are explained in detail:

And at the end we get a ready spinning spinner.

Further, it is recommended to read http://thebookofshaders.com (a good free book about writing shaders), and the questions start - very sensible, and as much as 20 minutes long.

Conclusions . I also wrote my first shader and highly recommend this report as a good smoothie introduction to the topic. To ordinary people, shaders seem to be something very complex and requiring knowledge of hard materiel. Perhaps this is true, but this report allows you to immerse yourself in the problem in a milder way. You no longer need to shout "Mom, give me back" when they offer you the opportunity to use a simple shader.

4. The game "Heroes of Might and Magic" in the browser: long, difficult and unbearably interesting

Speaker : Alexander Korotaev; rating : 4.59 ± 0.07. Link to the presentation , and one more - a more beautiful option

This is the story of the formation of a programmer through the development of a "dream game". The report opens the window to the world of fans of their business and points the right way to the development of large games in the browser. Alexander talks about the personal experience of war with productivity, about finding the right path, about solving urgent problems and about incredible discoveries in the world of JS.

The report discusses useful case studies of the JS game developer: techniques for efficient data storage, drawing the UI on the Canvas, and ways to approach the parsing of binary files.

Every 2 weeks, a clone of Heroes appears on GitHub, but none of these developers seeks to complete the task to the end and does not even try to team up with like-minded people.

Alexander set the following tasks:

1. Do something, jump above your head;
2. Do something interesting;
3. Stop playing Heroes :-)
4. Make it beautiful .

It tells what exactly the game consists of:

• Data model (characters, map, state storage)
• Game loop (game loop)
• Input processing (various manipulators)
• Renderer

It shows how all this looks in the code, and there is a story about the beginning of development.

At first, it was just a rendering of a green field, and then the data, algorithms, etc. began to spin.

Then the story goes within the framework of the following questions (and the rakes collected along the way of their solution):

• Parsing maps
• Map drawing
• Drawing objects
• Data storage
• UI on Canvas
• Mechanics work

In general, this is a comprehensive game development report, not only fascinating, but also filled with technical details that can be useful in practice.

To roughly describe the scale of the problem: maps are binary, so you can use homm3tools, or you can write your own converter.

Real applications began, the number of objects began to grow, and everything began to slow down. It was necessary to solve problems with optimization, including such specific ones as the smooth movement of the map (peeped from Yandex maps). From this question, we gradually move to what kind of data slows down - and, in fact, the map consists of tiles. To solve this problem, all means were put to use.

It was necessary to sink even to such things as bitwise shifts manually to speed up the braking division:

Next comes a whole block of purely practical information for people who work with Canvas. For example, the author talks about evolution, which led him to reinvent the ideas of react-canvas.

This is followed by a detailed discussion of the mechanics of work, including such things as an algorithm for finding the path or updating objects in the drawing tree when animating motion:

And finally, the answer to the main question of the universe of life and in general:

For those who want to see the result - inside the report there is a link to the finished game. I am not writing a link here so that you have the motivation to watch the entire video.

Conclusions . This is one of the coolest igrostroitelnye reports. Often we see people who work in One Big Game Company, who have touched a small piece of the renderer or tests there and talk only about them, honestly warning: we understand only this, how the whole game works - we have no idea. Here we have a person who not only does this not for money but fan, but also knows everything: architecture, and implementation details, and the history of the project, and interesting technical solutions. Yes, this is a small demo project, but in a sense it is a mirror of everything happening in the browser world. It was very interesting.

3. Security: your application's vulnerabilities

Speaker : Alexey Bogachuk; rating : 4.60 ± 0.05. Link to the presentation .

We, with the permission of the author, turned this report into an article and published it as a separate habrapost . Join the discussion!

2. New Adventures in Responsive Web Design

Speaker : Vitaly Friedman; rating : 4.68 ± 0.05. Link to the presentation .

Vitaly Friedman has two reports at this conference: regular and keyout. Both of them did not just hit the top, but were at the very top. Now let's discuss the keyout.

An interesting detail: Vitali can speak several languages. Therefore, he reads this report in Russian, and the next in English. This looks unusual for those who have visited both (or those who watch the entire HolyJS playlist), because different languages ​​use different vocabulary and expressive language techniques.

Recall keyout is a report that sets the tone and spirit of the conference. Well, I asked so asked!

The point is that we have a bunch of nishtyakov in our hands - HTTP / 2, Service Workers, Responsive Images, Flexbox, SVG, Font Loading API - but we still suffer from responsive design. It seems that I want to use them all at the same time, but there is no time for that. Vitali is a prominent specialist who can do well and relatively quickly, and shares his magic here in this report.

Pay attention to the slides . They are made so well that they can easily be printed on good paper with a good color printer and get a cool little book. The site itself, which Vitaly often talks about, that is, Smashing Magazine , looks even cooler. Even if you do not specialize in the frontend, you can open the Smashing Magazine website and see how well and lovingly the UI looks cool and how pleasant it is to use it.

All slides are designed in the style of Stranger Things and are divided into levels from 1 to 5. The first level is the easiest, farther things go.

Interestingly, hardcore is usually expected from programming, but not from visual frontend design. This story proves the opposite: absolutely not every person will be able to climb into such jungle and get out of them.

The structure of the levels is as follows:

1. Compression
2. Images
3. Web fonts
4. HTTP / 2
5. Resource Hints

Between them there is a secret bonus level! About him, I will not tell you anything, look for yourself :-)

About the other levels you need to say a few words.

The report begins about text compression methods. Gzip, LZ77, all that. What presets do we have? What about Zopfli and Brotli? Yes, it can be 8 times slower, but the result is worth it.

This question smoothly turns into an extreme level of image optimization (for example, on a beautiful landing page with a bunch of images), because most users can easily download six images with one megabyte page.

Using a set of interesting techniques, you can shove 40 pictures from the main page into 450 kilobytes, and so on. Can I remove the contrast in the picture, and then return it with CSS filters? Have you ever thought about such hacks? A number of diverse techniques are discussed, the only one in common between them is that they reduce the size of the picture.

The next part is about fonts and difficulties with them:

Subsetting is not the only way to work with fonts. For example, CSS FontLoading API and not only. This is a big, fat and important part of the report. We are talking about absolutely insane details that you can put yourself in the service. It seems that Vitali has eaten more than one dog on all these features of the fonts.

The section on HTTP / 2 begins with such an unobvious observation that when you switch to it, you can become no faster, but on the contrary - much slower. It happened originally with Smashing Magazine, and they began to study what was wrong in all this?

For example, the case may be stupid in packet loss:

Or, for example, the deployment strategy for HTTP / 1 and HTTP / 2 should be different:

In general, a lot of nuances, after which we turn to the very hellish hardcore - Resource Hints. They allow you not only to do things that previously could not be done in any way, but also to go to a very special new level of hacks in the web interface.

. , - . «, », , , . , , .

1. Big Bang Redesign: Smashing Magazine's 2017 Relaunch, a Case Study

: ; : 4,68 ± 0,08. Link to the presentation .

, HolyJS 2017 Moscow — .

, :

, :

, JS . . , , . , , , — , , .

:

• Design
• Front-End
• Back-End
• Todos

: - ? ?

, , . .

- . , , ..

. , , 98% , — .

, - . , MailChimp - . « — . , !».

— Tijuana Flats:

( ).

.

, - . — .

— . «, — ». , — .

Smashing Magazine 66% . , eCommerce. .

, !

, , .

, , , , - . SM , .

68 . : .

: air/shots, , . ( ).

, , .

-, . - :

:

, , , , :

. React PREACT — , React .

, Media Queries, . Fluid Sizing. , : , .

:

font-size calc CSS. , .

, :

, , . , BEM/SMCSS.

, .

, - , . — , . , , ? ! .

. — , . , , ( calc media queries). , JS-, , , , : , , , , — , .

Minute advertising. As you probably know, we do conferences. The nearest JavaScript conference is HolyJS 2018 Piter , which will be held May 19-20, 2018 in St. Petersburg. , ( — ), -, . In short, come in, we are waiting for you.