Что делает * { 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

Что такое замыкание и как/для чего его используют?

Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также "лексической ОВ" или "статическая".
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.

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

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

- visibility: hidden
- width: 0px; height: 0px;

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

Все ли HTML-теги имеют конечный тег?

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

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

Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?

Преимущества:
- Помогает избежать "callback hell", который может быть нечитаемым.
- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью then().
- Упрощает написание параллельного асинхронного кода с помощью Promise.all().
- С использованием промисов можно избежать следующих проблем: колбэк-функция была вызвана слишком рано, поздно или вовсе не была вызвана; функция была вызвана слишком мало или слишком много раз; не удалось передать необходимую среду/параметры; были пропущены ошибки/исключения.

Недостатки:
- Чуть более сложный код.
- В старых браузерах, где не поддерживается ES2015, нужно загрузить полифил, чтобы их использовать.

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