Объясните разницу при использовании 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

Что вы знаете о весе селекторов? Каковы значения веса?

Если условно, есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов.

Вес селекторов (по убыванию. 1) - самый высокий приоритет):
1) style=""
2) #id
3) .class
4) [attr=value]
5) LI
6) *

Селектор с наивысшим приоритетом будет преобладать, независимо от порядка, в котором появляются правила CSS.

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

Объясните делегирование событий

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

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

Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.

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

Расскажите о стилизации SVG

Стилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства отличаются по названию. Fill вместо background-color, stroke вместо border и т.д.

Изображение в формате SVG можно стилизовать в SVG-разметке, а также в CSS файлах. Если вы используете SVG-спрайты, то стилизовать svg можно только в разметке. Также не получится динамически изменить свойства SVG js-ом.

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

Что такое float?

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

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

Для чего используются статические члены класса?

Члены статических классов (свойства/методы) не привязаны к конкретному экземпляру класса и имеют одинаковое значение вне зависимости от того, какой экземпляр ссылается на них. Статические свойства обычно являются конфигурационными переменными, а статические методы обычно являются чисто служебными функциями, которые не зависят от состояния экземпляра.

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

Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?

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

Отзывчивая верстка начинается с верстки десктопной версии сайта. Затем она адаптируется для меньших экранов.

Mobile-first начинается с верстки версии сайта для мобильных устройств.

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

Объясните МЕТА-тег?

В основном он используется веб-браузерами и поисковыми системами для поиска ключевых слов. Тег meta предоставляет информацию о документе HTML. Метаданные - это данные о данных. Он используется для хранения таких сведений, как срок действия страницы, автор страницы, список ключевых слов, описание страницы.

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

Расскажите, как работает прототипное наследование

Прототипом объекта А называется объект B, свойства и методы которого доступны для объекта A как собственные.

- У любого объекта есть прототип, на который указывает его свойство proto и который также является объектом.
- У любой функции есть ассоциированный с ней объект, на который в контексте функции указывает свойство prototype. В него как в контейнер обычно складывают свойства и методы для работы с определенным классом объектов.
- Такой контейнер автоматически становится прототипом объектов, создаваемых функциями-конструкторами
- Для редактирования прототипной ссылки объекта используют метод Object.create() - он перезаписывает объект заново и выставляет в нем ссылку на нужный прототип.
- Ссылки связанных друг с другом объектов образуют прототипную цепочку, которая лежит в основе прототипного наследования. Ярким примером такого наследования является цепочка узлов DOM модели.

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

Объясните, что такое псевдоэлементы и для чего они нужны

Псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позводяет стилизовать определенную часть выбранного элемента. Они могут использоваться для украшения (:first-line, :first-letter) или для добавления элементов к разметке (вместе c content: ...) без изменения HTML.

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

Перечислите особенности HTML5

1. Положения для расширения интерфейса программирования приложений (API) JavaScript, который включает кэширование, геолокацию, хранилище, перетаскивание и многое другое.
2. Обновленный список элементов управления формой: время, url, календарь, электронная почта, дата, поиск.
3. Улучшенная поддержка графики, видео и аудио данных с помощью тегов внедрения, таких как video, canvas и audio.
4. Обновлены семантические теги, включая main, aside, section, nav, header, article и footer.

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

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

React и Redux:
- React Devtools
- Redux Devtools

JavaScript:
- Chrome Devtools
- Отладка при помощи старого доброго console.log

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

В каком случае предпочтительнее использовать translate() вместо абсолютного позиционирования и наоборот? И почему?

Для анимации лучше использовать CSS анимацию. Браузер хорошо ее оптимизирует. У translate() большая частота кадров за счет более быстрого рендеринга.

Анимация с помощью абсолютного позиционирования для движения использует пиксельную сетку, поэтому могут наблюдаться скачки. Translate() же использует субпиксельную интерполяцию.

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

Что такое размер viewport?

Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

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

Промисамы (promises) и их полифилы

Промис — это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причину, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполенного значения или причины отказа.

Некоторыми распространёнными полифилами являются $.deferred, Q и Bluebird, но не все они соответствуют спецификации. ES2015 поддерживает промисы "из коробки", и в настоящее время полифилы обычно не нужны.

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

В чём разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?

1) static - значение по умолчанию. Свойства top, right, bottom, left и z-index не применяются.
2) relative - элемент выстраивается относительно самому себе без изменения разметки.
3) absolute - элемент выдёргивается из потока и выстраивается относительно ближайшего элемента-предка с position: relative. Если его нет, то относительно body. Абсолютно спозиционированные элементы могут иметь margin и padding и не схлопываются с margin и padding других элементов. Никак не влияют на другие элементы.
4) fixed - элемент выдёргивается из потока и остаётся на позиции относительно окна документа и не меняет положение при скроле.
5) sticky - смесь relative и fixed. Элемент ведёт себя как относительно спозиционированный, пока не достигнет заданной позиции, после которой ведёт себя как fixed элемент.

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

Для чего используется Noresize?

Атрибут Noresize используется во фреймах. Он используется для предотвращения изменения размера кадра в HTML-документе пользователем. Однако размер рамки по умолчанию можно изменить, и вы можете сделать это, щелкнув и перетащив границы любого кадра.

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