Frontend | Вопросы собесов
19.1K subscribers
32 photos
1 video
992 links
Download Telegram
🤔 Что произойдёт, если написать typeof null?

Результат будет "object". Это историческая ошибка в JavaScript, которая сохраняется для обратной совместимости. Хотя null — это примитив, typeof возвращает "object".


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5
🤔 Что такое псевдоклассы?

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

:hover — применяется к элементу, когда на него наводят курсор мыши.
a:hover {
color: red; /* Ссылка станет красной при наведении /
}


:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).
input:focus {
border-color: blue; / Граница инпута станет синей при фокусе /
}


:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).
button:active {
transform: scale(0.98); / Кнопка немного уменьшится при клике /
}


:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.
li:nth-child(odd) {
background-color: gray; / Заливка каждого нечетного элемента списка /
}


:not() — исключает из выборки элементы, соответствующие указанному селектору.
div:not(.special) {
color: green; / Применяется к каждому div, который не имеет класса special */
}


🚩Зачем нужны псевдоклассы?

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

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
🤔 К какой структуре данных в JavaScript близок Observable?

Похоже на итерируемую коллекцию или поток событий. Поведение ближе всего к генераторам и Promise, но многократно исполняемый и отменяемый.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7💊3
🤔 Почему повсеместно нужен https?

HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации.

🚩 Главные причины использовать HTTPS

🟠Шифрование данных (Защита от перехвата)
Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты.
В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi).
В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать.

🟠Защита от атак "Человек посередине" (MITM)
Без HTTPS злоумышленник может подменить содержимое сайта.
Опасные сценарии:
Хакер в Wi-Fi кафе встраивает вредоносный код в сайт.
Вредоносный провайдер заменяет рекламу или ворует куки.

🟠Google даёт больше доверия к HTTPS-сайтам
Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные".

🟠Обязателен для онлайн-платежей и авторизации
Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей).
Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10💊2
🤔 В чём опасность работы с innerHTML?

innerHTML может привести к XSS, если вставляется непроверенный пользовательский ввод. Также он перезаписывает содержимое элемента целиком, что может вызвать потерю обработчиков событий.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
💊5
🤔 Как методы будут у api?

В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными).

🚩Примеры использования

🟠`GET` – Получение данных
Запрашиваем список пользователей:
GET /users HTTP/1.1
Host: api.example.com


Ответ (JSON)
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]


🟠`POST` – Создание нового ресурса
Отправляем данные нового пользователя:
POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
"name": "Charlie",
"email": "[email protected]"
}


Ответ (201 Created)
{
"id": 3,
"name": "Charlie",
"email": "[email protected]"
}


🟠`PUT` – Полное обновление ресурса
Заменяем пользователя с ID 1:
PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
"name": "Alice Smith",
"email": "[email protected]"
}


🟠`PATCH` – Частичное обновление ресурса
Меняем только имя пользователя 1, не трогая email:
PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
"name": "Alice Johnson"
}


🟠`DELETE` – Удаление ресурса
Удаляем пользователя с ID 2:
DELETE /users/2 HTTP/1.1
Host: api.example.com


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
🤔 Как оптимизировать страницы для печати?

- Использовать медиа-запрос
@media print;
- Убирать навигацию, рекламу, интерактивные блоки;
- Использовать чёрно-белую палитру, читаемые шрифты;
- Избегать анимаций и динамического контента;
- Добавлять display: none для ненужного в печати.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3