Объясните, как this работает в JavaScript.

Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.

Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.

#вопросы_по_javascript

Как вы реализуете макет, который использует нестандартные шрифты?

Буду подключать шрифты с помощью @font-face для каждого font-weight.

#вопросы_по_css

Расскажите о различия padding и margin?

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

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

#вопросы_по_html

Расскажите об Ajax как можно более подробно

Ajax - технология обращения к серверу без перезагрузки страницы.
За счёт этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Использовать XML не обязательно, под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.

Элементы интерфейса
AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.

Динамическая подгрузка данных
Например, дерево, которое при раскрытии узла запрашивает данные у сервера.

Живой поиск
Классический пример использования AJAX, взятый на вооружение современными поисковыми системами.

Обычно для обмена данными используются форматы:
JSON - для отправки и получения структурированных данных, объектов.
XML - если сервер почему-то работает в формате XML, то можно использовать и его.
HTML/текст - можно и просто загрузить с сервера код HTML или текст для показа на странице.

#вопросы_по_javascript

В чём разница между строчным и блочно-строчным элементом?

block
- Начинается с новой строки родительского элемента и занимает всю строку.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.

inline-block
- Размер зависит от контента.
- Можно задавать ширину и высоту.
- Можно выровнять с помощью vertical-align.
- Margins и paddings работают со всех сторон.

inline
- Размер зависит от контента.
- Ширину и высоту задавать нельзя.
- Можно выровнять только по горизонтали. Место, которое занимает элемент по вертикали, зависит от line-height.
- Ведёт себя как блочный элемент, если задать вертикальные margins и paddings.

#вопросы_по_css

Какие бывают значения у свойства background-size? Расскажите о каждом из них.

auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

#вопросы_по_html

Что такое цикл событий (event loop)? В чём разница между стеком вызовов (call stack) и очередью событий (task queue)?

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

Если стек вызовов пуст и в очереди задач есть callback-функции, то функция удаляется из очереди и помещается с стек вызовов для выполнения.

Stack - "первым пришел, последним вышел" или "последним пришел, первым вышел", что то же самое.
Queue - "первым пришел, первым ушел".

#вопросы_по_javascript

Можете ли вы привести пример свойства @media, отличного от screen?

Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевые браузеры, устройства Брайля, телевизоры и так далее.

all - Подходит для всех устройств.
print - Для принтеров.
screen - Предназначен в первую очередь для цветных компьютерных экранов.
speech - Предназначен для синтезаторов речи.

#вопросы_по_css

Чем отличается article от section?

article
Элемент article задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.

section
Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег section внутрь другого.

#вопросы_по_html

Объясните разницу при использовании foo в function foo() {} и var foo = function() {}.

Первое - объявление функции, а второе - функциональное выражение.

Ключевое отличие состоит в том, что тело функции при объявлении поднимается наверх, а тело функциональных выражения - нет (они имеют такое же поведение поднятия, что и переменные).

#вопросы_по_javascript

Объясните, что такое плавающие элементы (floats) и как они работают.

При применении этого свойства происходит следующее:
1) Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float.
2) Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3) Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4) Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

#вопросы_по_css

Что такое БЭМ?

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

#вопросы_по_html

В чем разница между .call и .apply?

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

function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

#вопросы_по_javascript

Что делает * { box-sizing: border-box; }? В чём его преимущества?

По умолчанию все элементы имеют box-sizing: content-box. Размеры блока рассчитываются из размеров контента.

box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт. Высота будет состоять из: высота контента + вертикальные padding'и + ширина вертикальных border. Ширина будет состоять из: ширина контента + горизонтальные padding'и + ширина горизонтальных border.

#вопросы_по_css