🤔 Что такое screen reader и accessibility?

Screen reader — это программа, которая озвучивает содержимое экрана для людей с нарушениями зрения.
Accessibility (доступность) — это практика разработки интерфейсов, которые доступны всем пользователям, включая людей с ограниченными возможностями. Это включает ARIA-атрибуты, контрастность, навигацию с клавиатуры и семантику.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Можно ли перезапустить остановленный promise?

Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов.

🚩Почему нельзя перезапустить Promise?

Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда.
Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.

const myPromise = new Promise((resolve, reject) => {
  resolve('Done!');
});

myPromise.then((result) => console.log(result)); // "Done!"

// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)

🚩Что делать, если нужно "перезапустить" асинхронную операцию?

Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.

function createPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Я новый промис!'), 1000);
  });
}

// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"

// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)

🚩Как это сделать с использованием `async/await`?

Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Данные загружены!'), 1000);
  });
}

async function main() {
  const data1 = await fetchData();
  console.log(data1); // "Данные загружены!"

  const data2 = await fetchData(); // "Перезапуск" fetchData
  console.log(data2); // "Данные загружены!"
}

main();

🚩Повторная попытка выполнения промиса (ретрай)

Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.

function fetchDataWithRetry(retries) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.7) { // 70% шансов на ошибку
        resolve('Данные успешно загружены!');
      } else {
        reject('Ошибка загрузки данных');
      }
    }, 1000);
  }).catch((error) => {
    if (retries > 0) {
      console.log(`Повторная попытка... Осталось: ${retries}`);
      return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
    } else {
      throw error; // Если попытки исчерпаны, выбрасываем ошибку
    }
  });
}

fetchDataWithRetry(3)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Ставь 👍 и забирай 📚 Базу знаний

🤔 Особенности работы с function expression и function declaration?

- Function declaration: создаётся при фазе инициализации, доступна до объявления;
- Function expression: создаётся во время выполнения, не доступна до строки объявления;
- У выражения можно создавать анонимные функции или присваивать переменным.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое merge и rebase, в чем отличие друг от друга?

Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

🚩Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

🚩Rebase (перебазирование)

Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

🚩Основные отличия

🟠История коммитов
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

🟠Коммиты слияния
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

🟠Конфликты
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

🟠Применение
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что произойдёт, если написать typeof null?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое псевдоклассы?

Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или 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-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.

Ставь 👍 и забирай 📚 Базу знаний

🤔 К какой структуре данных в JavaScript близок Observable?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Почему повсеместно нужен 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, браузеры блокируют передачу банковских данных.

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём опасность работы с innerHTML?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как методы будут у 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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как оптимизировать страницы для печати?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Wink AI Challenge — хакатон на стыке IT и кино. Участников ждут задачи, которые ускорят производство фильмов и сериалов за счёт прикладных AI-решений. Призовой фонд соревнования — 1 125 000 рублей.

🗓 Регистрация до 31 октября: https://cnrlink.com/winkaichallengeeasyfront
💻 Формат: онлайн, а в финале — очная защита. Участвовать можно в команде или соло. 
⭐️ Приглашаем: ML-инженеров, backend- и frontend-разработчиков, специалистов в DevOps, MLOps, а также инженеров в сфере мультимедиа.

Главные причины присоединиться:
🔸 Первый в России хакатон, посвящённый применению ИИ в кинопроизводстве.
🔸 Разработка ML-модели, которую оценят и будут использовать продюсеры популярных российских фильмов и сериалов.
🔸 Работа с настоящими сценариями и видеоматериалами, анализ текстов, извлечение сущностей, генерация структуры съёмок.

Задачи хакатона основаны на реальных кейсах, с которыми продюсеры сталкиваются каждый день:
→ Трек 1. Разработайте решение, которое на основе сценария проведет анализ каждой сцены, определит место действия, персонажей, реквизит и поможет оптимизировать планирование съемок.
→ Трек 2. Обучите модель определять возрастную категорию контента и выделять ключевые сцены, влияющие на рейтинг. Решение сэкономит время профильных юристов и облегчит адаптацию контента для разных медиа.  
→ Трек 3. Создайте систему, которая превращает текст сценария в превиз с эскизами, ключевыми кадрами, анимацией и возможностью командного редактирования. 

Регистрируйтесь на Wink AI Challenge, чтобы разработать ИИ-ассистента, который станет частью производства фильмов и сериалов: https://cnrlink.com/winkaichallengeeasyfront

🤔 Почему map используют чаще, чем объект?

Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев.

🟠`Map` может использовать любые типы данных в качестве ключей
В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей
В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях
Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.
Разница в скорости
В Map операции .set(), .get(), .delete() выполняются быстрее.
В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей.

🟠У `Map` есть удобные методы
Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами
В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

Ставь 👍 и забирай 📚 Базу знаний

🤔 Откуда тег b или strong берут свою "жирность"?

Жирность задаётся стилями по умолчанию, встроенными в браузер, чаще всего через CSS-свойство font-weight. Если нужно — можно переопределить стили вручную.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний