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

Псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позводяет стилизовать определенную часть выбранного элемента. Они могут использоваться для украшения (: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

Объясните, что такое блочный контекст форматирования и как он работает.

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

Блочный контекст форматирования может быть создан чем-либо из этого списка:
- плавающие элементы (элементы, у которых float не равно none)
- абсолютно позиционированные элементы (элементы, значение position которых либо absolute, либо fixed)
- «строчные блоки» (элементы с display: inline-block)
- флекс-элементы (непосредственные потомки элемента с display: flex или inline-flex)
- грид-элементы (непосредственные потомки элемента с display: grid или inline-grid) многоколоночные контейнеры (элементы, у которых column-count или column-width не - равно auto, включая элементы с column-count: 1)

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

Расскажите про семантический HTML?

Семантический HTML - это стиль программирования. В основном это использование HTML-разметки для усиления смысла содержимого.

Пример: в семантическом HTML мы предпочитаем использовать strong тег вместо тега b для полужирных выражений. Точно так же мы предпочитаем использовать тег em вместо тегов i для выделений курсивом.

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

Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?

Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.

Событие DOM DOMContentLoaded будет запущено после создание DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.

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

Объясните своими словами, что такое блочная модель

Блочная модель отвечает за определение того, сколько места займет блочный элемент, схлопнутся или нет border или margin, размеры блока.

Правила блочной модели:
- Размеры блочного элемента складываются из width, height, padding, border, and margin.
- Если высота (height) блока не задана, то высота блока равна: высота контента этого блока + padding'и.
- Если ширина блока не задана, то блоки, для которых не задано float, будут иметь ширину: ширина родителя - padding'и родителя.

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

Расскажите про тег DIV?

DIV - это контейнер или область, которая обычно используется для размещения элемента или группы элементов. DIV в основном используется для выделения области или блока текста на веб-странице TML, чтобы можно было применить к ним стили. Тег DIV также является альтернативой тегу Paragraph p, поскольку он создает логическое разделение документа HTML.

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

Дайте определение функции высшего порядка

Функция высшего порядка — это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными, и/или возвращает функцию в качестве результата. Классическим примером является метод map, который принимает массив и функцию в качестве аргументов. Затем map использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JS являются forEach, filter и reduce.

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

Объясните, как браузер определяет, на какие элементы накладывать CSS стили?

Браузер сравнивает селекторы справа налево. Браузер находит все элементы DOM, соответствующие ключевому (самому правому) селектору. Дальше проходит до его родителя и ищет соответствия. Чем короче цепь селекторов, тем быстрее браузер найдет элемент.

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

Свойство Marquee

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

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

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

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

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