Как получить высоту блока? Его положение относительно границ документа?

Чтобы получить координаты относительно видимой части документа — .getBoundingClientRect(). Этот метод также возвращает ширину и высоту элемента.
Пример:

 document.querySelector('button').onclick = function() {
   var c = this.getBoundingClientRect()
   alert('top:' + c.top + ' left: ' + c.left +'');
 }

Чтобы получить координаты относительно начала документа — значение .scrollTop / .scrollLeft + .getBoundingClientRect().top / .getBoundingClientRect().left

Пример:
document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect(),
scrolltop = document.body.scrollTop + c.top,
scrollleft = document.body.scrollLeft + c.left;
alert('top:' + scrolltop + ' left: ' + scrollleft + '');
}

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Как упростить написание кросс-браузерных стилей?

1. Некоторые CSS свойства требуют префиксов, чтобы работать в разных браузерах. Вы можете использовать автопрефиксеры, такие как Autoprefixer, чтобы автоматически добавить необходимые префиксы к вашему CSS коду. Это позволит вам писать стили без префиксов, а затем автоматически генерировать кросс-браузерный код.

2. CSS-фреймворки, такие как Bootstrap или Foundation, предоставляют готовые компоненты и стили, которые уже учитывают кросс-браузерные различия. Вы можете использовать эти фреймворки для быстрого создания стилей, минимизируя необходимость вручную управлять кросс-браузерными проблемами.

3. CSS-препроцессоры, такие как Sass или Less, предоставляют дополнительные возможности, которые могут упростить написание кросс-браузерных стилей. Например, они позволяют использовать переменные, миксины и вложенные стили, которые упрощают и структурируют ваш CSS код. Кроме того, некоторые постпроцессоры, такие как Sass, также содержат встроенные функции для работы с префиксами.

4. Использование нормализации стилей: Различные браузеры имеют свои собственные стандарты и стилевые правила по умолчанию. Иногда это может приводить к различиям в отображении элементов на странице. Для решения этой проблемы можно использовать CSS-нормализацию, такую как Normalize.css. Нормализация стилей помогает создать более предсказуемую и консистентную базовую стилизацию для всех элементов на странице.

👉 @frontendInterview

Next.js Cookbook: Learn how to build scalable and high-performance apps from scratch (2023)

В начале книги будут рассмотрены основы Next.js, включая настройку среды и создание вашего первого приложения. Затем вы узнаете, как использовать паттерны проектирования для оптимизации процесса разработки приложения. Далее книга поможет вам познакомиться с возможностями Next.js по рендерингу на стороне сервера, предоставив знания и навыки, необходимые для использования этой мощной функции для повышения производительности и удобства работы с ERP-приложением. Кроме того, книга поможет вам провести сквозное тестирование с помощью Cypress и Playwright, а также развернуть приложение в продакшн с помощью AWS Amplify. Наконец, вы узнаете, как оптимизировать ваше веб-приложение для поисковых систем, что позволит улучшить видимость и увеличить посещаемость вашего сайта.

👉 @frontendInterview

Представить массив чисел в виде промежутка

Ваша задача - написать функцию, которая принимает массив чисел и преобразует соседние числа в промежутки

Пример:
числа 5, 6, 7, 8, 9 преобразуются в "5_9"
число 6 останется "6"
числа 3,4,5,6,9 станут "3_6,9"

👉 @frontendInterview

Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?

- Относительное позиционирование — это когда элемент смещается относительно его положения, задаваемого по умолчанию.

- Фиксированное позиционирование — это когда настраивают положение элемента, ориентируясь на края окна браузера.

- Абсолютное позиционирование — это размещение элемента относительно ближайшего позиционированного родительского элемента, причём, именно там, где указано разработчиком.

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

👉 @frontendInterview

👉 @frontendInterview

Чем отличаются PUT- и POST-запросы?

PUT-запросы приводят к замене целевого ресурса на данные, передаваемые в запросе. Его можно использовать для обновления содержимого существующего ресурса или для создания нового ресурса.

POST-запросы приводят к специфической для ресурса обработке данных, передаваемых в запросе. Их можно использовать для выполнения различных действий. В том числе — для создания новых ресурсов, для выгрузки файлов на сервер, для отправки форм.

Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы — нет. То есть — если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса.

Стоит отметить, что описанное выше - это лишь вопрос семантики и договоренностей. На самом деле можно сделать удаление данных на PUT и добавление на DELETE.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Какая разница между селекторами идентификаторов и классов в CSS?

Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.

Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.

Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.

👉 @frontendInterview

Оформление программного кода

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

👉 @frontendInterview