Доброе время суток, уважаемые коллеги. Решил поделиться своим вариантом теста, рожденный несколько лет назад нашим скромным коллективом и несколько раз перелопаченный им же. Тест рабочий и вполне актуальный, если сидеть напротив и слушать ответчика, направляя его мысли в нужную сторону и подсказывая всякие мелочи.

1. Магия

Напишите программу, которая выводит на экран числа от 1 до 100. При том вместо чисел, кратных 3, программа должна выводить слово “Fizz”, а вместо чисел, кратных 5 — слово “Buzz”. Если число кратно 3 и 5, то программа должна выводить слово “FizzBuzz”.

2. HTML

2.1. Содержимое какого элемента можно увидеть в окне браузера?

2.2. Что будет если расположить

 <b> 
в контейнере

<head>

Ваш ответ...?

2.3. Для какого тега элемент
<!doctype html>
выступает родителем?

2.4. Какой тег следует использовать для переноса строки?

2.5. Как создать ссылку, которая открывается в новом окне/вкладке?

2.6. Какие теги используются для создания списков?

2.7. Для чего хороши атрибуты
data-*
Ваш ответ...?

2.8. Как будут располагаться элементы на странице?
<div>div 1</div>
<div>div 2</div>
<span>span 1</span>
<span>span 2</span>
Ваш ответ...?

2.9. Как вставить аудио/видео в html-файл?

2.10. Что не так с этим кодом
<b>Some<i> </b>Text</i>
Ваш ответ...?

2.11. Основные отличия блочной верстки от табличной?

2.12. В чем отличие
<svg>
от
<canvas>
Ваш ответ...?

3. CSS/LESS

3.1. Как скрыть элементы на странице?

3.2. В чем различия свойств «margin» и «padding»?

3.3. Знакомы ли вы с bootstrap или другой фронтенд-библиотекой компонентов?

3.4. Используете ли вы медиа-запросы?

3.5. Какие единицы измерения используются в css?

3.6. Какие существуют способы создания сетки?

3.7. Что делает свойство box-sizing?

3.8. Знакомы ли вы с анимациями?

3.9. Для чего используется Flexbox?

3.9. Как расположить элемент на странице по центру вертикально и горизонтально?

3.10. Каков будет цвет текста в следующем примере?
main.css:

p { color: red; }

index.html:

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <style>
      p#p { color: green; }
    </style>
  </head>
  <body>
    <p id="p" style="color: blue;">
      Some text
    </p>
  </body>
</html>

3.11. Назовите разницу между LESS и CSS?

3.12. Опишите способ создания цикла в LESS?

4. JavaScript

4.1. Какие библиотеки и/или фреймворки вы используете?

4.2. Чем JavaScript отличается от Java?

4.3. В чем заключается разница между cookies, sessionStorage и localStorage?

4.4. Назовите разницу между document load event и document ready event?

4.5. Назовите способы привязки обработчиков событий к объектам.

4.6. В чем разница между == и ===?

4.7. Расскажите про AJAX.

4.8. В чем разница между null и undefined?

4.9. Опишите принцип работы прототипирования в JavaScript.

4.10. Как поменять местами две переменные без использования третьей и арифметических операций?

4.11. В чем отличие .forEach() от .map()?

4.12. Чему будет равно
a
после исполнения следующего кода:

var a; a=!!a;

4.13. Каким способом можно минифицировать код?

4.14. Какое значение будет выведено?

alert('Hello World!'.split('').reverse().join(''));

4.15. Что будет выведено на экран?

var a = 'Hello';
(function () {
var b = 'World!';
alert(a+b);
})();
alert(a+b);

4.16. В чем различие?

var a = function() {}

от

function a()

4.17. Что будет выведено на экран?

function A() {this.b = 'Cde';}
A.prototype = {getB: function() {return this.b}};
var a = new A();
A.prototype.getUpperB = function() {return this.b.toUpperCase(); };
alert(a.getUpperB());

4.18. Что будет выведено в консоль?

function A(a,b) {console.log(arguments);}
A(1,2,3);

4.19. Что выведет на экран данный пример?

alert((function f() {
function f() {return 1;}
return f();
function f() {return 2;}
})());

а если так?

alert((function f() {
function f() {return 1;}
return f();
var f = function () {return 2;}
})());


5. AngularJS

5.1. Чем AngularJs отличается от jQuery?

5.2. Как скрыть элемент при клике на него?

5.3. Опишите структуру Angular-приложения.

5.4. Для каких целей используется конструкция controllerAs?

5.5. Знакомы ли Вы с promise?

5.6. Как передать переменную из одного controller-а в другой?

5.7. Для чего следует использовать controller, а для чего directive?

5.8. В чем отличие между broadcast и emit?

5.9. Что выведет на экран данный пример?

<input type="text" ng-module="name">
<span>{{name}}</span>

а если так?
<input type="text" ng-module="name">
<span>{{::name}}</span>

5.10. Что выведет данный код?

angular.module('app', [])
.controller('SomeController', function() {
console.log($scope);
});

5.1. Что не так с данным кодом?

<span ng-init="name = 'SomeName'">{{::name}}</span>

В чем отличие между ngRoute и io.router?

5.1. Где Вы будете писать конфигурацию приложения?

5.1. Основное отличие между factory, service и provider?

6. Другое

6.1. Есть ли опыт работы с Git, NPM, Bower, Gulp, Webpack?

6.2. Знакомы ли вы с nodejs и Express?

6.3. Какие шаблонизаторы вы используете?

6.4. С какими IDE вы работали?

6.5. Как вы относитесь к PHP, Windows?

6.6. Знаком ли вам Scrum?

Литература для домашнего изучения

1 — angularjs.org (tutorial)

2 — angular UI-router

3 — angular UI-bootstrap

4 — почитать Хабр на тему сервисов ангулара (фабрики, провайдеры, директивы…

!!! вот в таком порядке…

Комментарии (92)


  1. Matisumi
    23.04.2019 15:56
    +4

    Это какая-то шутка?


    1. LFedorov
      23.04.2019 16:01
      +1

      особенно про .json('')


    1. maxzhurkin
      23.04.2019 21:44

      Это тест на умение с одной статьи уйти в (не очень глубокие) минуса. Просто указание этого прямым текстом в тексте статьи исказило бы результаты тестирования


    1. dskozin
      24.04.2019 08:25

      Ошибся парень на 20 дней. Размести он пост 1-го апреля и никто бы не заметил подвоха. Плюсов собрал бы.


      1. Matisumi
        24.04.2019 09:47

        !!! вот в таком порядке…


  1. Peregrinus
    23.04.2019 16:05
    +2

    Судя по вопросам, тест составлялся лет пять назад. AngularJS? Серьезно?

    Ради некоторых сохранил в закладки, буду читать когда грустно:

    Чем JavaScript отличается от Java?

    Как вы относитесь к PHP, Windows?


    1. alexs0ff
      23.04.2019 16:33

      AngularJS? Серьезно?

      Ну так легаси никто не отменял.


      1. Peregrinus
        23.04.2019 16:46

        Для конкретного проекта вполне ок, но тут текст называется «Тест на должность FrontEnd». То есть, как бы, для любого фронтендера.
        Почему тогда какого-нибудь backbone нет или актуального ныне реакта?


    1. daiver19
      23.04.2019 22:53

      Я не очень знаком с этими вашими фронтендами, а что не так с ангулар? Последнее обновлении было чуть больше месяца назад, судя по вики.


      1. Peregrinus
        23.04.2019 23:27

        Первый AngularJS уже не развивается и эти обновления — LTS багфиксы. С 2016 года они развивают другой фреймворк с похожим названием — Angular.
        Вопросы в этом «тесте» именно по AngularJS, который уже легаси.


        1. tuxi
          24.04.2019 10:08

          Судя по статистике поиска вакансий на апвоке, он все еще очень даже ничего и до сих пор пилят и перепиливают на нем.


          1. worldxaker
            24.04.2019 15:51

            легаси никто не отменял. но начинать на нём новый проект не стоит


  1. Urvin
    23.04.2019 16:07

    2.2. Что будет если расположить b в контейнере head

    2.7. Для чего хороши атрибуты data-*

    6.5. Как вы относитесь к PHP, Windows?

    Проверяют ли эти задания какие-то знания, умения или навыки или же дают задел снизить соискателю планку соответствия вакансии и оплаты труда?


  1. newkamikaze
    23.04.2019 16:11

    Формулировки вопросов доставляют. Теперь мечтаю всем рассказать про AJAX. Ну а по факту тихий ужас.


  1. 2morrowMan
    23.04.2019 16:11
    +2

    Тест на должность Браузера…


  1. Desprit
    23.04.2019 16:12

    Простите, а мы кого вообще собеседуем?

    Какой тег следует использовать для переноса строки?

    Опишите структуру Angular-приложения.

    Чем JavaScript отличается от Java?


  1. Aingis
    23.04.2019 16:37
    +2

    Это какой-то тест на экзамен, а не для собеседования. Не на один час. Ещё и вопросы очень странные.

    2.1. Содержимое какого элемента можно увидеть в окне браузера?
    Бессмысленный вопрос. С помощью стиля <style>* {display: block}</style> можно увидеть содержимое любого элемента.
    2.2. Что будет если расположить <b> в контейнере <head>?
    Вопрос намекает, что уже пора бежать.
    2.3. Для какого тега элемент <!doctype html> выступает родителем?
    Если из прошлого пункта ещё не стало понятно, то тут добивает абсолютная неграмотность вопроса. Теги — это разметка конструкциями вида <b> (открывающий тег) и </b> (закрывающий). Они не могут быть родителями по определению.
    4.2. Чем JavaScript отличается от Java?
    Тут, видимо, хотят услышать лекцию. Зачем лектор пойдёт на такое собеседование (а если вдруг и попал, почему ещё остался), история умалчивает.
    4.7. Расскажите про AJAX.

    4.9. Опишите принцип работы прототипирования в JavaScript.
    Может автор хочет бесплатные курсы под видом теста? Узнать ответы, чтобы сбежать из того места, где оказался? Автор, мигни обоими глазами поочередно, если тебя держат насильно!


    1. saluev
      23.04.2019 16:54

      В 2.1, вероятно, имелся в виду элемент <body>.


      1. Spaceoddity
        23.04.2019 17:00

        Т.е. <html> я не увижу?))

        Скрытый текст
        image


    1. tuxi
      24.04.2019 11:04

      <!doctype html> — это директива, грубо говоря это не нода (не данные), а указание парсеру


  1. Perlovich
    23.04.2019 17:11

    2.2. Что будет если расположить b в контейнере head


    Ответ: ревьювер поржет, заскринит и покажет это коллегам. Будет очень стыдно.

    2.4. Какой тег следует использовать для переноса строки?


    Никакой. br сейчас только в каких-нибудь email темплейтах используют. Возможно, именно этого ответа вы и ожидаете.

    2.11. Основные отличия блочной верстки от табличной?


    Табличную верстку перестали использовать лет 10 назад. У вас вопросы ориентированы на джуна. Вряд ли он в глаза видел эту табличную верстку, если только не работал на каком-нибудь legacy.

    4.2. Чем JavaScript отличается от Java?


    «Чем отличаются Swing / String / Spring?» ©


    1. Spaceoddity
      23.04.2019 17:39

      Никакой. br сейчас только в каких-нибудь email темплейтах используют. Возможно, именно этого ответа вы и ожидаете.

      У вас в дизайне
      есть такой заголовок.
      И как вы подобное будете реализовывать?


      1. Perlovich
        23.04.2019 17:52

        Возможно есть какие-то use cases для br. Тэг не запрещен и не deprecated.
        Я полагаю, что случаи оправданного использования не так часты. Я не могу припомнить, когда лично мне последний раз понадобился этот тэг.


      1. Free_ze
        23.04.2019 17:56

        jsfiddle.net/q3okxzf7/1

        .shitty-line::after {
            content: '\a';
            white-space: pre;
        }

        <h3>
            <span class="shitty-line">У вас в дизайне</span>
            <span class="shitty-line">есть такой заголовок.</span>
        </h3>


        1. Spaceoddity
          23.04.2019 21:39

          И к чему этот велосипед? Это семантика такая? Если мне нужно вставить жёсткий разрыв строки — я использую предназначенный для этого тэг.
          Оборачивание же простого куска текста во всякие спаны можно реализовать куда проще — просто загнать в заголовок дивы или параграфы.
          caniuse.com/#search=white-space


          1. Free_ze
            24.04.2019 00:05

            Если мне нужно вставить жёсткий разрыв строки — я использую предназначенный для этого тэг.

            Внешний вид задается стилями, а разметка — для семантической разметки контента.
            Br — отголосок тех бородатых времён, когда стили задавали атрибутами. Он не несет никакого семантического смысла, только визуальный эффект.

            просто загнать в заголовок дивы или параграфы.

            Нельзя оборачивать блочные элементы строчными. Есть лишь одно исключение — «a».


            1. Apathetic
              24.04.2019 00:46

              Нельзя оборачивать блочные элементы строчными
              Говорите про "бородатые времена", а сами вспоминаете уже не актуальные термины...


            1. Spaceoddity
              24.04.2019 05:21

              А мнемоники тоже нельзя использовать (тот же &nbsp;)? Ведь для это существует css.
              А ещё есть куча всякого генерируемого контента (от JS до бэкэнда), где без br никак. А ещё есть уйма разных контент-менеджеров, которым ваше условное «white-space: pre;» ничего не скажет (если они вообще умудрятся найти стиль этого псевдоэлемента). Они просто вбивают контент, и когда надо сделать отбивку строки — лепят br. Про какую «семантику» вы тут вообще ведёте речь?

              www.w3schools.com/tags/tag_hn.asp

              Most browsers will display the element with the following default values:
              h3 { 
                display: block;
                ...
              }
              


              1. Free_ze
                24.04.2019 12:07

                А мнемоники тоже нельзя использовать (тот же  )?

                Можно, ведь это часть контента.

                А ещё есть куча всякого генерируемого контента…
                А ещё есть уйма разных контент-менеджеров...

                Как вы обычно поступаете, зная, что какие-то используемые вами сторонние компоненты работают на костылях? Либо что-то с этим делаете, либо оставляете так, как есть.

                ЗЫ Вообще, вы поставили вопрос о том, как это вообще возможно реализовать перенос в строчных элементах без br, я доказал вам это. Сейчас разговор почему-то пошел в русло обсуждения плюсов и минусов подходов, где я почему-то поставлен на позицию защиты такого решения)


                1. Spaceoddity
                  24.04.2019 14:25

                  Вообще, вы поставили вопрос о том, как это вообще возможно реализовать перенос в строчных элементах без br, я доказал вам это.

                  Про строчные элементы — это ваша отсебятина. Во-первых, заголовки испокон веков были блочными элементами. Во-вторых, ну нет в html5 блочных/строчных — css-live.ru/articles/blochnyx-i-strochnyx-elementov-v-html-bolshe-net.html
                  Но суть не в «блочный/строчный». Я вам могу накидать наверное с пару десятков способов вынужденного переноса, включая всякую экзотику типа:
                  h1{
                   font-family:monospace;
                   max-width:15ch;
                  }
                  

                  Вопрос именно в семантике. В html есть специальный тэг для разрыва строки. Это возможно действительно не очень семантично — перекладывать функцию представления на структуру. Но логика подсказывает, что функцию таргетного редактирования текста лучше всё-таки оставить за html. Псевдоэлементы контента генерируемые css, в таком случае, формально тоже не семантичны. Ну и семантики явно не прибавляет тот факт, что ради одного-единственного переноса строки мы начнём городить огород из html-обёрток. Это ещё более не семантично, поскольку тут структура используется вообще не по назначению.
                  Вообще «семантика» — уже очень «замыленный» термин. Не знаю… Логика, или даже «формальная логика» тут будет более уместно.
                  Лично для меня использование br в каждом конкретном случае — дискуссионный вопрос. Да, даже над такой мелочью порой приходится задумываться, прежде чем писать код. Если я понимаю что контент не будет изменяться и этот перенос именно конкретный элемент дизайна — я оформлю через css. Если же есть вероятность того, что этот контент будет меняться- я поставлю br — тем самым дав понять контент-менеджеру что там изначально есть разрыв строки в соответствии с дизайном. И пусть уже он ломает голову (ну в паре с дизайнером) — как это должно выглядеть.
                  Вообще, для меня тэг br полностью аналогичен текстовому /n. Ну вот экранирует парсер браузера спец.символы ASCII. Приходится использовать тэг.


            1. Kenya
              24.04.2019 11:18

              Нельзя оборачивать блочные элементы строчными.

              Так заголовки же блочные


            1. Druu
              25.04.2019 10:10

              Внешний вид задается стилями, а разметка — для семантической разметки контента.

              Так перевод строки — это часть контента.


              1. Free_ze
                25.04.2019 11:13

                Семантически он не оправдан, это именно дизайн.


                1. Druu
                  25.04.2019 12:30
                  +1

                  Семантически он не оправдан

                  В каком смысле не оправдан? Текст с переводами строк и без переводов строк — это два разных текста.


                  1. Free_ze
                    25.04.2019 13:11

                    В примере заголовок остается цельным предложением, желание дизайнера завернуть текст именно так не делит его на два разных по значению блока, разделение которых стоило бы выделять в разметке. Дизайн изменчив, семантика — нет.
                    Для выделения разных по смыслу наборов предложений текст принято делить на абзацы.


                    1. Druu
                      25.04.2019 15:18

                      В примере заголовок остается цельным предложением, желание дизайнера завернуть текст именно так не делит его на два разных по значению блока

                      Как же не делит? Делит. Именно из-за того что контент содержит перевод строки — так это и должно отображаться. Дизайн тут ни при чем. Это вообще к дизайну не относится. Это сам контент, а не способ его вывода.


                      1. Free_ze
                        25.04.2019 15:24

                        Вы счтаете, что в этом месте нужно было бы обязательно передать \n в JSON API, скажем, для мобильного клиента?


                        1. Druu
                          25.04.2019 15:31

                          Вы счтаете, что в этом месте нужно было бы обязательно передать \n в JSON API, скажем, для мобильного клиента?

                          Так он и передается же, в рамках рассматриваемого кейса. Разве нет?


                          1. Free_ze
                            25.04.2019 16:06

                            Про альтернативные клиенты там ничего не было (=


    1. andreymal
      23.04.2019 20:00

      Никакой. br сейчас только в каких-нибудь email темплейтах используют.

      В вашем комментарии br использован 14 раз


  1. yudinetz
    23.04.2019 17:52
    +3

    Чем отличается Швеция от Швейцарии?


    1. BUY33
      23.04.2019 18:27
      +1

      Как правильно Ирак или Иран?


      1. resetme
        23.04.2019 19:57

        Чем Антарктида лучше чем Атлантида?


        1. Zenitchik
          23.04.2019 20:10

          Ну, это уже из области разумных вопросов.
          Мы же все знаем, чем раки по пять (но вчера) лучше, чем раки сегодня (но по три).


        1. yarosroman
          24.04.2019 06:53

          Артика или Антарктика?


      1. lorc
        23.04.2019 21:41

        В чем разница между уткой?


      1. DarthVictor
        24.04.2019 11:51

        Зависит от контекста. Ирак – страна. Иран – это химический элемент. Например, Иран-238. (с)

        По теме статьи
        image


  1. vdem
    23.04.2019 18:15
    +3

    Такими «тестами» Вы вполне можете отсеять тех, кто более-менее разбирается в предмете. Вернее, они сами себя отсеят, поняв что в подобной конторе нечего ловить.


  1. friday
    23.04.2019 19:18
    +1

    Вы не могли бы сказать название вашей компании? Вопросы вы после этого поста, возможно, и поменяете, но люди-то, их сочинявшие и задававшие, останутся. И хотелось бы обходить стороной людей, считающих такие вопросы актуальными и адекватными.


    1. vmm86
      23.04.2019 22:16

      Вы не могли бы сказать название вашей компании?
      Я полагаю, вот оно.
      В качестве бонуса — портфолио из Инстаграма.-\


  1. kinall
    23.04.2019 22:25
    +1

    2.2. Что будет если расположить <.b.> в контейнере <.head.>?

    «А если я тебя монтировкой по голове стукну, шнурки развяжутся?»


  1. milomory Автор
    23.04.2019 23:26
    +1

    На момент написания теста, большая часть коллектива работала в другой компании, но сути это не меняет, так как правильно сказано было выше, люди в больше степени действительно те же.

    Объяснять что-то большого смысла уже не вижу. Хотя… ладно, скажу пару слов. Суть не в вопросах, а в том, что и как отвечает человек, как он мыслит, какие вопросы задает. По написанным комментариям уже видно, что у каждого из вас есть свое представление о предмете, у кого-то достаточно радикальное причем. Особенно по поводу BR-в и табличной верстки. Бытует мнение, что табличная верстка мол уже некомильфо. Я согласен, в чем-то атавизм, хотя к слову сказать, любой ваш респонсив можно легко укатать в таблицу и пока вы не нажмете на F12, разницы и не заметите. На любой медиа можно сделать свое поведение каждой ячейки со своими отступами, проступами, расположением и тп… «Опись, прОтокол, сдал, принЯл, отпечатки пальцев...» (с). Но кому-то принципиально.

    Собеседование длится в среднем час, может чуть больше.

    Отсев действительно большой. Часто люди приходят, разницы между фигурными и квадратными скобками не знают, а хотят 80… 100…

    Если что, у нас замечательные ребята как фронтендеры, так и бекендеры, я уже не говорю о заказчиках — те вообще классные парни! Да и вообще все у нас хорошо=)

    Комментарии принял. Всем большое спасибо!


    1. Zenitchik
      24.04.2019 00:05

      А всё-таки, что должен ответить человек на вопрос в духе, чем отличается Швеция от швейцарского сыра?


    1. ambientos
      24.04.2019 00:34

      Бытует мнение, что табличная верстка мол уже некомильфо. Я согласен, в чем-то атавизм, хотя к слову сказать, любой ваш респонсив ..

      Занятно, но практического смысла в этом не больше, чем в «рисовании» картинок с помощью css. Вместо этого можно сделать что-то более полезное.


      1. milomory Автор
        24.04.2019 00:52

        Когда проект пишется с нуля, может и никакого. Зависит от поставленной задачи.

        Ни в коем случае не хочу кого-то обидеть, но когда человек заявляет, что есть какая-то принципиальная разница, кажется, скорее всего это не совсем его вывод, выношенный титаническим грузом многолетнего опыта. Это скорее довод, основанный на пустом месте — навязанное обществом такое модное мнение.
        Может я не прав.
        Думаю, когда-нибудь до многих из них может дойдет, а может и нет, что принципиально разницы не так много, как кажется, если не сказать, что ее вовсе нет. Особенно, когда есть конкретный заказчик и конкретные сроки.
        Мы сейчас проект ведем, где до сих пор использую оракл, а заказчики думают не о миграции на посгресс, а как переехать с 11-ой версии на 12-тую.
        Есть масса проектов с древним фронтом, где нужно знать и уметь работать с таблицами. Да, вы не поверите, но иногда приходится снимать розовые очки и даже возможно измазаться в чем-то. А иногда, если очень повезет, в качестве такого очень приятного бонуса, происходят очень приятные модные, молодежные перемены. Вот тогда и можно заказчикам лить в уши, как это все здорово. Никто ж не спорит, здорово, красиво, элегантно. Как грится, в полный рост=)


        1. Fox_exe
          24.04.2019 01:35

          Я, конечно, давно не кодил фронт, но вроде как используют для того, чтобы блок справа сползал под блок слева, когда ширина страницы уменьшается, что критично для мобильных с небольшим экраном. С таблицами такой фокус если и можно провернуть, то какимто диким шаманством…


          1. ambientos
            24.04.2019 03:08

            На самом деле достаточно применить ко всем элементам таблицы display: block. Дальше, думаю, становится понятно. И, на самом деле, такой подход очень нужен, если от таблиц в десктопе не отказаться, а нужно и на мобилках чтобы было хорошо.


        1. ambientos
          24.04.2019 03:03

          Никто не говорит, что таблицы сегодня использовать не надо. Всё ровно наоборот. Но, как я говорил всем лет 10 назад — таблицы должны использоваться для табличных данных, списки — для вывода списков и так далее.
          Но в том ключе, как вы это описали, у меня сразу предстала перед глазами страничка, сверстанная целиком на таблицах, с однопиксельными распорками прозрачными gif'ами. И было это лет 20 назад, и было потому, что по-другому было просто нельзя. Ну не умели браузеры нормально кроссбраузерно рисовать странички без таблиц, по-другому было никак. Но, господи, даже IE6 умел достаточно, чтобы не мучаться с таблицами для построения сеток. Я, надеюсь, у вас проекты не с поддержкой IE5.5?)
          Сегодня, когда уже почти 7(!) лет назад появились флексы, а чуть позже гриды — как, как вообще можно в одном предложении размещать такие понятия как «табличная верстка» и «блочная верстка»?
          В общем, вышеуказанный вопрос, как бы вы не оправдывались, сегодня очень непрофессионально звучит.


          1. Spaceoddity
            24.04.2019 06:04

            Простите, но если вам надо сверстать именно таблицу по своей сути?
            Чем отличается "<table><tr><td>" от "{display:table;} {display:table-row} {display:table-cell}"? Ну да, в случае какой-то сложной логики переформатирования таблицы на разных размерах — дивам проще переопределить display. Но и проще упустить из виду элементы выше по иерархии разметки. Мне нередко приходилось «рефакторить» код а-ля:

            .table{
             display:table;
            }
            .row{
             display:table-row;
            }
            .cell{
             display:table-cell;
            }
            @media (max-width: 1023px) {
             .cell{
              display:block;
             }
            }
            


            И по поводу последних тенденций. Ладно, гриды — они хотя бы действительно позволяют полностью управлять разметкой (хотя по сути это как раз и есть табличная вёрстка, только значительно более гибкая и расширенная).

            Но что не так с этими флексбоксами? С чего вдруг всех на них перепрыгнули? Условные 7 лет назад ситуация была гораздо проще (display:inline-block; display:block;). Сейчас же все поголовно лепят их к месту и не к месту. И от этого появляется куча проблем. Опустим всякие трюки (а-ля :after{width:100%;}). Как по мне флексбоксы хорошо решают задачу вертикального выравнивания (и то не во всех случаях). Ну и собственно задачу гибкого распределения контента по одной(!) оси (т.е. для чего их и задумывали).
            С чего вдруг ими полностью стали заменять блочную вёрстку — загадка. И блин, до смешного доходит — на дворе 2019 год, а в единственном «актуальном браузере» лэйаут разъезжается)) И начинаешь копаться… Оказывается где-то flex-shrink срабатывает, где-то max-width потерялось и т.д. Блин, да сделайте вы это обычными блоками! Тем более что вам гибкость контента и не нужна по сути.


        1. symbix
          24.04.2019 06:19

          принципиально разницы не так много, как кажется, если не сказать, что ее вовсе нет. Особенно, когда есть конкретный заказчик и конкретные сроки.

          О, если бы мне платили по рублю каждый раз, когда я это слышал в оправдание феерического говнокода, я бы был миллионером.


    1. Spaceoddity
      24.04.2019 05:42

      Вы, наверное, всё-таки не застали времена «табличной вёрстки», да? Потому что даже в эпоху IE6 верстать таблицами — было очень утомительным занятием. Одну и ту же простейшую таблицу браузеры по разному отрисовывали. Конечно, когда сейчас все верстают под один Хром — стало попроще)) Но вы заранее провангуете, как у вас поведёт себя конкретная ячейка при переполнении/недостатке контента?
      К тому же таблицы сильно перегружают DOM. И если средних размеров таблицу браузер отрисует ещё довольно быстро, то стоит добавить какую-то анимацию и…


  1. adictive_max
    24.04.2019 03:16
    +1

    Вот чего в подобных «сборниках» всё время не хватает, так это пояснения, спрашивают ли их на полном серьёзе, или а-ля психиатрические тесты вида «чем отличается асфальтовый каток от завтрака?». Хотя потом в комментах обычно выясняется, что таки на полном серьёзе, что печально.


  1. AxisPod
    24.04.2019 07:04

    Ээээ, что это? Зачем это? Это чтобы брать на работу максимально неадекватных сотрудников? Адекватный очень быстро свалит с такими вопросами. Прежде чем собеседовать, надо знать основы психологии или как-то по наитию уметь общаться с людьми.


  1. higgsbison
    24.04.2019 11:02

    Правильнее назвать статью «по каким вопросам можно понять, что работодатель не в себе при собеседовании на должность Frontend».

    Вопросы по верстке или совсем тупые типа

    «2.2. Что будет если расположить <b> в контейнере <head>?» — а что будет, если надеть штаны через голову? Я, честно, не знаю, не пробовал.
    «2.3. Для какого тега элемент <!doctype html> выступает родителем?» — doctype? родителем? Серьезно?
    «3.2. В чем различия свойств «margin» и «padding»?» — этого кто-то может не знать?

    Либо заточены под активную работу с версткой (чем фронт не должен заниматься):

    «3.4. Используете ли вы медиа-запросы?» — нет, блин, я не занимаюсь версткой, я код пишу. Надеюсь, это верный ответ? :)
    «3.8. Знакомы ли вы с анимациями?» — люблю советский мультик про ежика и лошадку и иногда попадаются годные аниме.
    «3.10. Каков будет цвет текста в следующем примере? p { color: red; }»
    неужели красный? Необъяснимо, но факт!

    По JS тоже шедеврально:
    «4.2. Чем JavaScript отличается от Java?» — словом Script в названии? Да это вообще разные языки, как их сравнивать можно? Еще с плюсами сравните, чего нет то?
    «4.7. Расскажите про AJAX.» — добро пожаловать во времена JQuery — да этого понятия уже лет 10 как никто не использует. Есть Fetch API, есть старенький XHR. А есть event loop и средства языка для обеспечения асинхронного выполнения кода: promise, async/await, генераторы

    далее идут скучные вопросы на умение читать чужой, пусть и устаревший код, особо не всматривался, а потом новый заряд жести:

    «6.5. Как вы относитесь к PHP, Windows?» — а как я должен к ним относиться? «А как вы относитесь к Путину? А к Григорию Лепсу? — отлично пообщались за жизнь!»
    «6.6. Знаком ли вам Scrum?» — знаком, но лучше бы его не вспоминать. В одном очень крупном банке красного цвета на втором этапе собеседования за час я это слово раз 30 услышал — ребята вместо того, чтобы писать код, устраивают бесконечные совещания и развешивают стикеры по доске.


    1. tuxi
      24.04.2019 11:11

      «4.7. Расскажите про AJAX.» — добро пожаловать во времена JQuery — да этого понятия уже лет 10 как никто не использует. Есть Fetch API, есть старенький XHR. А есть event loop и средства языка для обеспечения асинхронного выполнения кода: promise, async/await, генераторы

      " у вас нет ни XHR, ни всяких этих jquery и fetch api, кароче у вас js образца начала нулевых. Покажите код в одну, две строки, который выполняет асинхронный запрос к серверу и передает ему данные, например user=A, score=1"
      Я почему-то уверен, что большинство минусующих сходу не приведут свое решение :)


      1. BUY33
        24.04.2019 11:31
        +1

        Покажите дверь с табличкой «Выход».

        Пока на рынке есть выбор, то зачем выбирать места, где надо писать код на js образца начала нулевых? Это ок, только если вы пишете код с этих самых нулевых и ваши пальцы помнят, вам ок поддерживать это и с годами за поддержку этого кода вам будут платить только больше, т.к. желающих всё меньше. В других случаях — в пекло, жизнь слишком коротка, чтобы писать в 2019 году на js образца начала нулевых.


        1. tuxi
          24.04.2019 11:41

          Если я правильно понимаю, смысл тестов — выяснить понимание основ и принципов. Понимание, хотя бы в общих чертах, как устроено «под капотом» иногда экономит «то самое время».


          1. BUY33
            24.04.2019 11:53

            С этим я не спорю. Но можно же так и спросить о принципах работы тех или иных современных фич языка, браузера, платформы и не скатываться к js начала нулевых. Т.е. говорить надо о том, в чем придётся иметь дело на практике, а если меня будут просить написать пару строк на js начала нулевых, то в голове невольно возникает вопрос — «А не придётся ли и в рабочее время писать такой код?». Почему бы не пописать современный код и обсудить как он работает?


          1. Urvin
            24.04.2019 12:12

            Стану ли я от незнания этих утративших связь с реальностью «основ основ» худшим разработчиком в проекте на Angular+Axios?


            1. tuxi
              24.04.2019 12:45

              Все относительно. С точки зрения команды, в которой только вы, нет, не станете.
              С точки зрения команды, где помимо вас, есть другие девелоперы с тем же опытом в Angular+Axios, но которые знают и понимают такие особенности и приемы, станете, просто по причине того, что они станут лучше.


              1. Urvin
                24.04.2019 13:00

                Чем лучше? Как знание неактуальных костылей говорит, что другие разработчики лучше там, где эти практики не должны быть использованы?

                Я вижу в этом вопросе только цель поставить плюсик к ЧСВ интервьюера и заявить соискателю что-то вроде «ты не знаешь знаешь и не можешь претендовать даже на 30000 в этой офигительной ООО»Подорожник". Убедите в обратном.


                1. tuxi
                  24.04.2019 13:12

                  Вы уцепились за частный случай. Какой смысл вас переубеждать?
                  Тут можно провести аналогию с автомобилем. Вы можете годами ездить внутри города на расстояния 5..10 км и совершенно не вникать в суть «как устроен автомобиль». Вам это не надо, у вас через каждые 100 метров автосервисы и пункты шиномонтажа. То есть, все сводится к вопросу: насколько вы фулстек, насколько вы готовы участвовать в сложных и не типовых проектах и насколько быстро вы разбираетесь, из-за чего возникла проблема и насколько быстро вы готовы сами ее решить.


                  1. Urvin
                    24.04.2019 14:08

                    Ну т.е. нормально, что у меня, соискателя на позицию водителя инжекторного грузовика (способного починить оный как минимум до состояния, позволяющего доехать до сервиса) в 2019 году, спрашивают как проехать пустыню Гоби на Кировце с барахлящим трамблером?

                    насколько вы готовы участвовать в сложных и не типовых проектах

                    Настолько сложных и нетиповых, что через месяц планируется изменение автопарка на трактора?
                    Вы самостоятельно собираете грузовик, подходящий для перевозки только ваших товаров, из отработанных в 70-е тракторных запчастей? Поэтому я должен быстро понимать что могло случиться с этой вундервафлей?
                    Вы в 2019 году поддерживаете решение с подъемом ворот автобазы с помощью ковша трактора и не перевели их на самую захудалую ремонтопригодную лебедку?

                    Я люблю себя и ухожу, чтобы радоваться релевантному опыту и развиваться далее у ваших конкурентов. Ведь их интересует скорость доставки и сохранность грузов — то, что водитель должен уметь лучше всего.


                    1. tuxi
                      24.04.2019 14:34

                      Нет, речь идет о том, что на работу возьмут водителя грузовика, который знает и умеет в одиночку в чистом поле снять, разобрать и собрать другую шину на диск и поставить колесо обратно. А водителя, который на собеседовании скажет «зачем мне это знать и уметь делать? есть же грузовые шиномонтажи!» скорей всего на работу не примут, особенно при наличии лучшей альтернативы.


                      1. Urvin
                        24.04.2019 14:57

                        Не, пример с шиной не катит — шина с диском — части современного грузовика. Как AJAX в целом присущ любому фреймворку.
                        Разработчик заявляющий, например «зачем мне знать http-методы запросов», действительно негоден.
                        И разработчик, знающий или предполагающий разницу в axios и $http, действительно в выигрыше.
                        Но не годен ли водитель, не представляющий в сегодня как и чем закручивали спицы в дисках автомобилей начала 20-го века, раз мы берем колесную тематику?
                        Ну и в чистом поле: я не профессионал в монтаже шин или закручиванию спиц, это совершенно иной вид работы. И я не уверен, что бизнесу выгоднее, чтобы я самостоятельно разбирался с возникшей задачей, нежели использовал помощь профессионалов по вызову с телефона (8-800-npm-install) и быстрее бы приступил к доставке груза на заведомо отбалансированном (оттестированном) колесе. Как минимум, в последнем варианте еще не скоро придется соображать, почему на скорости 110 появляются биения на руле и откуда взялся деревянный болт.


                        1. tuxi
                          24.04.2019 15:04

                          И я не уверен, что бизнесу выгоднее, чтобы я самостоятельно разбирался с возникшей задачей
                          Бизнесу как раз выгодно, чтобы у него всегда были варианты: «мы сами разберемся или мы привлечем со стороны». Это гибкость прежде всего. Первый водитель не обязательно сам полезет менять покрышку, но если вызвать сервис не получается по ряду причин, а сдать груз надо было «уже вчера», он заведомо выгодней для бизнеса как работник приносящий прибыль и минимизирующий геморр.


                          1. Urvin
                            24.04.2019 15:12

                            Ок гугл, откуда взялся спицевый диск на выданном мне Ford Transit 2018 года? Давайте поскорее заменим его на отвечающую наилучшему соотношению цена/качество штамповку и навсегда забудем об оплате времени закручивателя спиц по цене водителя, и сорванных сроках доставки?


                            1. tuxi
                              24.04.2019 15:16

                              Неее, на самом авто диски нормальные, спицевый диск вам как запаску по(д)ложили предыдущие разработчики :)))


      1. higgsbison
        24.04.2019 11:59

        Эх, извращаться — так извращаться )). В одну-две строки будет непонятно, вот вам рабочий пример: pastebin.com/YSZwY2qB


      1. DarthVictor
        24.04.2019 12:01

          var s = document.createElement("script");
          s.src = "jsonp_api_get_user_score.php?user=A&score=1&callback=myGlobalCallbackFunction";
          document.body.appendChild(s);
        


        1. tuxi
          24.04.2019 12:36

          угу, типа того, только можно дешевле с тчк зрения ресурсов парсера
          new Image().src = 'http://foo.com/.....?user=A&score=1';


          1. higgsbison
            24.04.2019 13:20

            А как вы потом ответ запроса получите?


            1. tuxi
              24.04.2019 13:39

              В рамках вопроса, такой задачи не ставилось. Но это замечательный повод для продолжения обсуждения, который выводит разговор на тему «почему появился XHR и т.п.».
              Если же есть академический интерес как это реализовать, то можно реализовать «страшный» костыль, который и это решает. Но сейчас, естественно так никто делать не будет.


      1. andreymal
        24.04.2019 12:16

        «3.2. В чем различия свойств «margin» и «padding»?» — этого кто-то может не знать?

        «4.2. Чем JavaScript отличается от Java?»

        Справедливости ради, такие вопросы могут быть полезны тем, что способны отсеять совсем уж ничего не знающих неадекватов.


        Но судя по остальным вопросам, тут действительно самого? работодателя отсеивать надо...


        1. higgsbison
          24.04.2019 12:21

          Я вот лично о Java имею только общие представления и не обязан его знать при собеседовании на должность JS-разработчика. На PHP долгое время писал, и что теперь? Корректнее спросить: «а какие еще языки вы знаете?» «а в чем основные различия?» «расскажите про отличие сильной и слабой типизации, статической и динамической» — причем тут не важно знание теории программирования, тут важно умение рассуждать.


    1. wxmaper
      24.04.2019 13:05

      «3.10. Каков будет цвет текста в следующем примере? p { color: red; }»
      неужели красный? Необъяснимо, но факт!

      Поздравляю, вас не приняли :) Цвет будет синий, вы вопрос-то не дочитали ?\_(?)_/?


      1. higgsbison
        24.04.2019 13:22

        Признаю, неправ, действительно не дочитал ). Ну тогда в целом нормальный вопрос на приоритет инлайн-стилей над подключенными


    1. higgsbison
      24.04.2019 13:23

      3.10 — невнимательно читал, был неправ )


  1. milomory Автор
    24.04.2019 14:48

    И все-таки сколько людей — столько мнений. ЧТД.

    Как я уже упомянул, проекты у нас разные, есть и с допотопным фронтом. Никто такие фронты переписывать никогда не будет. Это нерационально для бизнеса. В большей степени Гос.Сервисы. Есть проекты поновее и совсем новые. Но нет ничего хуже, когда разработчик использует какой-то крутой фрейсворк и никогда не влезал в код этого самого фреймворка. Нет ничего хуже, когда бездумно и неэкономно с точки зрения ЦП подключается вагон и маленькая тележка разных плагинов.

    Никто на собеседовании не повесит человека, если он вдруг не знает, что будет в том-то или ином случае. Нам важно, как человек мыслит. Остальное сами покажем и расскажем.

    Конечно этот тест дается в такой, достаточно шуточной форме. На это и расчет. И вопросы соответствующие, чтобы и «поржать» и расслабиться и в тоже время дает нам понять все то, что нам нужно о человеке понять.

    Тут часто пишут про тупые вопросы типа — чем ява от ява скрипта отличается. Так вот многие думают, что это короткая и длинная форма названия одного и того же языка. А еще многие не знают, где JS выполняется — на клиенте или на сервере… (Шуточки про ноду, пожалуйста, оставьте при себе)

    Ну в общем я рад, что мой пост смог вызвать такое количество эм… эмоций! Да, назовем это так..=)


    1. Urvin
      24.04.2019 14:59

      Так вот многие думают, что это короткая и длинная форма названия одного и того же языка. А еще многие не знают, где JS выполняется — на клиенте или на сервере…

      Вы прежде, чем пригласить соискателя, резюме вообще оцениваете?


      1. wxmaper
        24.04.2019 15:26

        В резюме можно написать что угодно.
        Буквально вчера видел на фрилансе тестовое задание одной из игровых студий, которое выполнял чуть более года назад.
        То есть соискатель (если его можно таковым назвать) оформил резюме, чего-то там написал, прошёл отбор и дошёл до выполнения тестового задания (оно кстати за год вообще не поменялось). Мне сложно представить что будет дальше, если кто-то за него выполнит это задание, ведь затем будет онлайн собеседование по скайпу.


    1. higgsbison
      24.04.2019 16:20

      Никто такие фронты переписывать никогда не будет. Это нерационально для бизнеса. В большей степени Гос.Сервисы.


      Улучшайте код постепенно. Vue.js прекрасно внедряется поэтапно, никто не заставляет вас весь проект сразу на SPA переделывать. React тоже никто не мешает внедрять поэтапно.
      ES6 без всяких вебпаков и бабелей уже давно поддерживается браузерами, используйте!

      Но видя подобные вопросы, у меня как у потенциального соискателя возникает мысль, что к вам идти не стоит ввиду крайней отсталости технологий. Что будет из себя представлять работа? Ковыряние в тоннах плохо написанного legacy? Оно мне надо? На рынке просто дофига хороших вакансий, выбирал 2 месяца назад в итоге из 5 офферов по принципу «где интереснее задачи и свободнее подход к творчеству». К вам просто никто не пойдет.

      Логичнее было бы искать не Frontend-разработчика за большие деньги, а хорошего верстальщика с базовым знанием JS, желающего вырасти во фронта. Но блин, люди, сколько ж можно путать фронтенд и верстку?