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

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

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

🤔 Почему 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. Если нужно — можно переопределить стили вручную.

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

🤔 Зачем нужен eslint?

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

🚩Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

🚩Проблемы без ESLint

Разные стили написания кода
Пропущенные точки с запятой или лишние пробелы
Неиспользуемые переменные
Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

🚩Решение с ESLint:

Автоматически находит ошибки и предупреждения
Подсказывает лучшие практики
Поддерживает кастомные правила
Работает в IDE и CI/CD (автоматическая проверка)

🟠Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint?
Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm)
Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере)
В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

🤔 Как правильно выбрать фреймворк?

- Проект и команда: если команда знает Angular — нет смысла переходить на React просто так.
- Требования: SSR, мобильность, SEO — выбирать Next.js/Nuxt/Angular Universal.
- Экосистема: поддержка, документация, количество библиотек.
- Скорость и масштабируемость: что важнее — стабильность или гибкость?
Нет "лучшего" фреймворка — есть подходящий под задачу.

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

🤔 Зачем нужен ref?

В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.

🚩Основные случаи использования `ref`

Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:

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

Доступ к DOM-элементам
Установка фокуса на элемент

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Получение размеров элемента
Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Использование в классовых компонентах
Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🚩Важно помнить

Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.

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

🤔 Почему обычные генераторы позволяют написать асинхронный код?

Генераторы в JavaScript позволяют приостанавливать выполнение функции, что делает их подходящими для пошагового выполнения логики, как в асинхронном программировании. Они стали основой для реализации async/await через трансформацию кода.

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