Расскажите об 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

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

Если условно, есть один быстрый способ выяснить, насколько правило 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