The third set in the School of Interface Development Yandex. Analysis of introductory tasks and useful tips

It remains quite a bit before the end of the recruitment to the third School of interface developers, which this time will be held in Moscow. The emphasis in it will be placed on the practice in the form of mini-hackathons. We already tried it last year in Minsk and Yekaterinburg . Students will be divided into teams, and already implement the project in teams. In addition to writing the code itself, you will need to be able to make decisions, deal with the controversial issues that have arisen, and break the whole development process into logical iterations. The guys from Yandex, who will work individually with each team, will help in this. Classes will begin on September 7th.

For three years now, our colleagues have been composing assignments, checking jobs and giving lectures at the School. In addition, they are faced with real work tasks every day, developing service interfaces that are visited by millions of people with different devices and different browsers.

The entrance test to the School is also very practical. We will finish accepting applications on August 16 at 23:59. While there is still time to cope with the tasks, we asked our teachers to help future students a little and, using the example of last year’s questionnaire, explain which logic should guide them in solving the proposed tasks and tell them what they pay attention to when checking them.
')


This year, the structure of tasks is built by analogy with those proposed last year - so that we can draw attention to different aspects of development. The first task is to know the layout, the second is related to the optimization of the JS code, and the third is testing the ability to learn and apply something new. This time, applicants will need to deal with Audio.API and write the player. Under the cat you will find not only tasks, but also generally useful recommendations for both beginners and experienced front-tenders.

Exercise 1

The author of the task and analysis is Oleg Olegbl4 Mokhov. In Yandex he manages the development of interfaces for several services, and outside Yandex he organizes the conferences FrontTalks , EkbJS and ChellyJS and reads a special course on the development of interfaces in UrFu.

Roll up a pop-up window (popup) - an element that is displayed on top of the contents of a web page. It should always be in its center, while the size of the content may vary. Offer the maximum number of solutions and explain what each of them has advantages and disadvantages.

Decision

I believe that every layout designer should solve this problem at least once in his life, and after that he should start collecting solutions for this task.

Of course, the solution to this task can be found in the Internet for five minutes conditional. And it may, for example, be like this: css-tricks.com/centering-css-complete-guide . Therefore, the implementation was important, in addition to the number of solutions, to also provide an explanation of where it is worth using. For example, we intentionally did not write that the dimensions of an element can be specified, and in some solutions this is acceptable. We also paid attention to such things as CodeStyle, the naming of classes or id'shnikov elements, the use of semantic tags and the layout layout in general (assembly, splitting into files).

Let's look at possible solutions. First let us know the width of the element. Then there are such options:

1. margin-left and margin-right in auto. This is perhaps the most common use of recession mathematics of block elements.
2. In the same piggy bank solution with the job position: absolute; left: 50%; margin-left: <half width>. And this is the second most popular way to deal with it.
3. Modification of the first option for position: absolute blocks. In this decision, it is important to set not only automatic margins, but also left: 0; right: 0;

Solutions to center the element vertically with a given height are not very interesting to consider, since this is most likely a variation of the solutions horizontally. Therefore, further solutions for elements with unknown width and height:

1. Put an element inside a table cell for which middle alignment is specified. Perhaps earlier, when there was IE6, it was the most bulletproof way.
2. Take advantage of javascript. And that, too, is quite a decision.
3. More modern solution. Set the inline-block display element and the parent to align the text in the center (text-align: center). And for vertical centering the pseudo-element :: before set the height to 100%, width 0, line-height 100% and vertical-align: middle.
4. More modern solutions are the use of the CSS calc function.
5. Or the peculiarities of the fact that the transform, given as a percentage, is calculated from the size of the element.
6. And finally, flexboxes, and they can also be centered differently, because there are align-items, there is justify-content, and you can also change the direction of output of flex-blocks through flex-direction.

Finally, the third, my favorite group of solutions, are those that are found by chance or vice versa thanks to many years of research. These include the following.

Method Studio Lebedev . It was invented by Vladimir Tokmakov, and in 2008 it was practically the only way to solve the set task for an element with an arbitrary width.

Two more solutions were thrown to me by the students of the first SRI in Yekaterinburg.

The way Julia Gorshkova . She came up with the following: put an element in the middle cell of a table with three cells and stretched 100%, and set the width of the right and left columns to 50%. Knowing that the tables always try to fill the free space as much as possible, you can make the element burst the middle cell to the size you need.

Leonid Solomein way . This is my favorite option - you just need to put an item in .

But there is the most progressive way, which, unfortunately, is not supported by any browser yet. As soon as this changes, all 12 of these decisions will sink into oblivion. This is using position: center.

Task 2

The author of the task and analysis is Maxim KidsKilla Grishaev. In Yandex, he develops Elements for Firefox.

There is a page with “equalizers” - containers of arbitrary sizes (squares 100px, 200px and 300px) are filled with columns 2px wide (set by parameter).

Every second columns are given a random height within the size of the container. Further, using the animation, the height of the columns returns to the middle of the container. The implementation is in the file: github.com/yandex-shri-minsk-2014/jade-task . The source code is slow and causes the browser to freeze. We need to improve it so that the animation becomes smooth. It is not necessary to change the layout, but you can do it if it helps to solve the problem. Performance in IE below 8 is not required. It is advisable to add in addition to the animation of "recession" also an animation of "growth". If possible, issue as a jQuery plugin or write without jQuery.

Decision

The topic of code optimization is very broad. There are many criteria that are worth paying attention to when evaluating the quality of a code, but several important ones can be highlighted:

• the presence of errors in behavior;
• readability, code uniformity;
• ease of understanding relationships;
• work speed;
• the presence of "bikes" when you can use ready-made working solutions.

The main problem in the task code was that with the specified addition of a callback to the animation, it is called as many times as the number of elements found by the selector. As a result, upon completion of the animation, many more run_equalizer are hung on the element, which erupts in memory like an avalanche, and the tab freezes very quickly. Also, in the above code, there was no caching, which only aggravated the problem. However, it is quite easy to notice, and in the end almost everyone coped with it. Therefore, in order to consider the problem solved, it is enough to correct the error with callbacks and add caching of elements.

But there were other ways to improve the code and impress the judges.

• Bring the naming of variables to a single style. It is very difficult to read the code, where there are no uniform rules of registration.
• Break the code into smaller methods. It is much easier to read a small, logically integral method, 5-10 lines long, than a “spaghetti code”.
• Reduce the number of timers. Working with animations of a set of elements, it is logical to use some kind of common animator with a single timer, which in one iteration will update everything at once.
• Run the code as early as possible . The code used the window.onload event, but it would be much more logical to use the DOMContentLoaded event or simply place an animation call under the block.
• Optimize CSS . The task animates the span (display: inline-block). It is tied to the size of the font, line, and other environments and affects the reflow / repaint of the entire page. Absolute animated elements will give a performance boost.
• Checkout code as an independent module. The word module in this context can be interpreted quite broadly: it could be a jQuery plugin or a separate “class”. For example, it is not immediately clear what the arguments mean when the function is called: setEqualizer('#eq_1 .equalizer', 1000, 2); . However, this is much better: $('#eq_1 .equalizer').equalizer({itemWidth: 2, animationDuration: 1000}) . Or like this: new Equalizer('#eq_1 .equalizer').setItemWidth(2).setAnimationDuration(1000).start() .
• Apply technology, more adapted to the animation: css, canvas, and even WebGL.

Working with the code, we spend much more time reading it than writing. Therefore, the ease of its reading and understanding is a very important parameter that must be taken into account when interacting with code.

Task 3 _*

The author of the assignment and analysis is Ilya Dovban. Ilya leads a group of search interfaces in the Minsk office of Yandex.

* More and more different technologies are becoming available in the browser, thereby expanding the potential tool of the front-end. Obviously, no skills are enough to confidently understand the development of interfaces, three-dimensional graphics, sound modification, calculations of large amounts of data. And, of course, all at once it is not necessary as a result. But a modern front-end developer should be able to sort out a new area and master unusual tools as soon as the need arises. This was the third (for an asterisk) introductory task.

Using d3.js, make an interactive visualization of an arbitrary array of points that smoothly and unevenly change color from red to yellow and back, are in Brownian motion and run away from the cursor.

Decision

The task, formulated in a rather laconic way, at first glance seems simple, but contains a very large scope for improving and polishing its solution. Let's get started

First of all, you should deal with what d3.js is . The first visit to the official library website shows that this is not just another wrapper over WebGL for 3d-graphics (what the name could hint at), but a very large set of tools for visualizing and animating various types of data. Well, not only the library turned out to be fundamentally new here, but the entire subject area as well. So the option to quickly review the API documentation of a new, but conceptually the same MVC framework will not work. We'll have to start by reading the tutorials.

From the introductory part it became clear that the library operates with data sets. In our case it will be a set of points, each of which is known for its color and coordinates. Yes, and since we are making a prototype about “working out the library,” it’s better to start using its capabilities to the maximum. For example, d3.range instead of creating an array of points manually:

  var dots = d3.range(1000); d3.select('svg').selectAll('circle') .enter().append('circle'); 

Immediately check that our points are normally displayed on the svg-canvas.

Now you can animate. The same lessons on the site, exactly like other articles about animation, speak of two quite important things:

• the animation should be built based on the timer events, and the changes should be calculated based on the elapsed time;
• complex animation should be decomposed into “layers”, in each of which one characteristic changes.

And for that, and for another in d3.js there are helper functions, and we will use them.

What they pay attention to when checking

Yevgeny FTDeBUGgeR Shpilevsky - Head of Interface Development for Application Search Services in the Minsk Office of Yandex.

When checking the task, I first of all paid attention to the accuracy of the code: the consistency of the code-style, the naming of variables, functions and CSS selectors. At the same time, in those tasks where the subject was initially offered a low-quality code, this was especially important. If a person is disciplined, then writing neat code is simple. On the other hand, in order to clean up after others, you need to have a little perfectionist living in you who will not let you finish until everything is done as it should.

If the subject uses the modern capabilities of the browser to complete the task, then this is certainly a plus. But if he has not provided for polyfiles or folbacks to support all the declared browsers, then this is twice minus. You can not grab at everything new, even if it greatly simplifies your life. If your user suffers - you do something wrong.

When checking the JS code, it was important for me to see the quality code, both in terms of structure and algorithmic side. In general, I proceeded from the same principles that guide the code review. Would I like to see this code in my repository? Am I ready to support him? As a result, the most merciless selection. The downside was the mixing of paradigms and violation of the principles of DRY and KISS, errors identified by WebStorm / jshint, inconsistency of logic and approaches. A major mistake was the presence of errors in the developer tools console.

Using the BEM methodology was a plus when checking CSS. Also, the number and conciseness of the solutions found were a plus. I put the minuses only for the use of complex selectors and selectors by identifier.

In the optimization task, the main metric of success for me was the number of frames per second: 60 — excellent, 30 — good, and everything below is bad. I also put a minus, if a fan started working on my laptop, after starting the task, even if there was a necessary smoothness.

And I will tell you a little about how I approached the task verification. Usually I started it from launching the work sent in the browser in order to assess what the person did and whether he coped with the task. I was a little upset when the submitted works did not work in my favorite Safari (usually there were not enough necessary prefixes for styles). Therefore, first wish: if you plan to show your work to someone else, then do not be lazy to check it in two or three popular browsers beforehand.

I was pleasantly surprised that someone along with the repository applied ready-made examples on jsfiddle.net, and this made it a bit easier to check tasks. After the first impression of the tasks, it was time to look into the code and evaluate the implementation itself.

I paid the main attention to the solution, the rest to the design: organization of the files, observance of the code-style. According to good practices and style code is difficult to answer something. It seems, it is possible to distinguish work with DOM here: caching of elements, etc. (second, third task), but above colleagues already reflected these points. In fact, if you comply with the code-style - is already good.

Separately, I would like to add comments to each task:

The job on the layout . Many tried to solve this problem only with CSS and HTML, and even used selectors for page fragments (: target) to open windows. However, the wording of the task does not limit the use of JavaScript to open and center the window. I agree that using JavaScript to solve layout problems is not very good, but if you demonstrate your knowledge and evaluate your solutions, then this is definitely a plus.

The task of improving the code . I got the impression that very few people investigated the source code and tried to understand what was the cause of the brakes (and nobody really bothered to write about the result of their research). Someone, seeing the “alien” code on jQuery, rewrote it completely (even refused to use the library), trying to correct the flaws in the code. In my opinion, to properly source the source code and fix it would be better than rewriting it completely. This is more profitable in time, and will give an understanding of the problem, which will save you from future mistakes.

The task about the "unknown" technology: d3.js It was voluminous and creative. On the one hand, it is interesting to see how the guys master new intruments, but on the other, who knows what the Brownian movement is :) Unfortunately, not everyone completed the task, and I would like the guys not to postpone filling out the questionnaire now.

Classes at the School will begin on September 7 at the Moscow office of Yandex. Theoretical study and analysis of materials will take place on weekdays from 18:00 to 20:00, and on Saturdays there will be practice in the form of hackathons. Education is free.