# Верстальщик

## Общие вопросы

1. Расскажите о своём участии в последнем (желательно, крупном) проекте
1. Опишите задачи, которые приходилось решать
2. Какие технологиии использовали?
3. С какими трудностями сталкивались и как их преодолевали

2. Как работают браузеры? (Начиная от нажатия пользователем клавиши *<Enter>* после ввода адреса Интернет-ресурса, заканчивая предоставлением браузером готовой страницы)
> ***Ответ*** (можно не сосредотачиваться на деталях сетевого взаимодействия):
>
> * DNS resolve
> * Resource request via HTTP/(1.1 or 2.0)
> * Parsing HTML from the response (tokenization and DOM-tree building)
> * Parsing CSS from the response (or external requests)
> * Building the Render-tree (only visual DOM elements are included)
> * Layouting (positioning)
> * Painting (fill the screen with pixels)
> * Composing (layer ordering)
>
> https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

## HTML

1. Зачем нужна семантическая вёрстка?
> ***Ответ***:
>
> для упрощения понимания кода страницы людьми, роботами и спец. устройствами/технологими, которые используются людьми с ограниченными возможностями

2. Можно ли сверстать форму со встроенной валидацией, не используя при этом JS? Если да, то приведите примеры тэго/атрибутов и их значений, при помощи которых это можно сделать?

## CSS

1. Расскажите о каких `@media`-запросах, кроме `@media only screen and (min/max-width: ...px)`, вы знаете?
> ***Возможные ответ(ы):***
>
> * `@media print`
> * `@media (orientation: portrait/landscape)`
> * `@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { ... }`

2. Как в CSS можно определить, поддерживает ли браузер ту или иную его (CSS) возможность/свойство/etc?

> ***Ответ:***
>
> `@supports`

3. Зачем использовать CSS-препроцессоры? Какие из них вы знаете, с какими работали? Чем их можно заменить?
> ***Ответ:***
>
> * Для расширения возможностей CSS: гибкое наследование, модульность, генерация кода на основе какой-либо логики, etc.
> * SASS, LESS, Stylus
> * PostCSS

4. Чем отличается единица измерения `rem` от `em`?
> ***Ответ:***
>
> REM as in Root EM. While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size.

5. Расскажите значение селектора ~
> ***Ответ:***
>
> x ~ y - будут выбраны все элементы y идущие за x

6. Перечислите все значения свойства box-sizing. В чем из различия?
> ***Ответ:***
>
> **content-box** - Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
> **border-box** - Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
> **padding-box** - Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

7. Какие бывают значения у свойства position? В чем их отличия?
> ***Ответ:***
>
> **absolute** - Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет.
> **fixed** - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
> **relative** - Положение элемента устанавливается относительно его исходного места.
> **static** - Элементы отображаются как обычно.
> **sticky** - Это сочетание относительного и фиксированного позиционирования.

8. Можно ли сделать "резиновый" шрифт, не прибегая к помощи JS?
> ***Ответ:***
>
> https://css-tricks.com/viewport-sized-typography/

9. Приведите пример организации кода при использовании препроцессоров. Каким еще способом можно организовать модульность (в рамках SPA, например)?
> ***Ответ:***
>
> * > How you decide to split them up is up to you, but it can be useful to separate files by component. For example, you can have all your button styles in a file called *_buttons.scss* or all your header-specific styles in a file called *_header.scss*. Then, in your main file, say *_app.scss*, you can import those files by writing `@import 'buttons'`
> * CSS Modules

10. Расскажите про БЭМ?

11. Прижмите футер при помощи Flexbox: https://jsbin.com/bepekiputa/edit?html,css,output
> ***Ответ:***
>
> ```css
> html {
> height: 100%;
> }
> body {
> min-height: 100%;
> height: 100%;
> display: flex;
> flex-direction: column;
> }
> main {
> /* flex: 1; would be enough but IE has different defaults (surprise!) */
> flex: 1 0 auto;
> }
> ```

12. Отцентрируйте блок с текстом по горизонтали и вертикали при помощи Flexbox: https://jsbin.com/jitadudoqu/edit?html,css,output
> ***Ответ:***
>
> ```css
> body {
> display: flex;
> justify-content: center;
> align-items: center;
> height: 100vh;
> }
> ```

## Производительность

1. Расскажите о том, как можно ускорить загрузки странцы? (Абстрагировано от технологий серверной части)
> ***Ответ:***
>
> * минифицировать всё, что можно
> * использовать GZip
> * использовать спрайты и прогрессивные форматы для изображений
> * использовать domain sharding для статических ресурсов, если их много
> * использовать Critical Path CSS и фоновая дозагрузка стилей через `rel="preload" as="style"`
> * использовать Code Splitting и загружать только то, что нужно
> * использовать `async` и `defer` для скриптов

2. Почему загрузку скриптов опускают вниз страницы, а стилей — поднимают вверх?
> ***Ответ:***
>
> * чтобы загрузка и исполнение скрипта не блокировало парсинг html страницы
> * чтобы избежать https://en.wikipedia.org/wiki/Flash_of_unstyled_content

3. Какие меры можно предпринять, чтобы страница была производительней уже после загрузки, во время работы с ней пользователя?
> ***Ответ:***
>
> * оптимизация JS, отвечающего за визуализацию, через `requestAnimationFrame()`
> * вынесение "тяжелого" JS-кода в веб-воркеры
> * снижение сложности CSS-селекторов
> * оптимизация чтения стилей и внесения в них изменений (*сначала считать все нужное, затем - внести изменения во все нужное*)
> * оптимизация перерисовок (*вынесение анимируемых элементов в отдельные слои [композитные], манипуляция только свойствами `opacity` и `transform`*)
> * оптимизация обработчиков пользовательского ввода (*debounce*)

https://developers.google.com/web/fundamentals/performance/why-performance-matters
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

#### Based on:

https://github.com/h5bp/Front-end-Developer-Interview-Questions
https://github.com/yangshun/front-end-interview-handbook