🤔 Как проверить правильную иерархию html заголовков?

Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.

🚩Зачем нужна правильная иерархия заголовков?

🟠Логическая структура
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
🟠Доступность
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
🟠SEO
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.

🚩Что значит "правильная иерархия заголовков"?

🟠`<h1>`
Заголовок страницы (должен быть уникальным и только один на странице).
🟠`<h2>`
Подразделы <h1>.
🟠`<h3>`
Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков?

🟠Ручная проверка HTML-кода
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).

🟠Использование браузерных DevTools
В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.

🟠Инструменты для проверки доступности
Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.

🟠Скрипт для автоматической проверки
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков
Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.

🚩Примеры ошибок в структуре и как их исправить

Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

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

🤔 Что такое adaptive и responsive web-страницы?

- Responsive (отзывчивый) дизайн — подстраивается под любое устройство с помощью гибкой сетки, процентов, vw/vh, media-запросов.
- Adaptive (адаптивный) — использует фиксированные "точки останова", под каждое разрешение загружается заранее подготовленная верстка.

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

🤔 Как уничтожить объект web worker?

В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.

🚩Зачем уничтожать Web Worker?

Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.

🚩Как использовать `terminate()`?

Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

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

1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker?

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

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

🤔 Какая разница между <script>, <script async>, <script defer>?

- <script> — блокирует парсинг HTML, загружает и выполняет скрипт сразу.
- <script async> — загружает скрипт параллельно и выполняет как только загрузится (не гарантирует порядок).
- <script defer> — загружает параллельно, но выполняет после загрузки HTML, в порядке следования.

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

🤔 К какой категории относятся промисы?

Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами).

Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await, then/catch)

🚩Почему промисы – асинхронная конструкция?

Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк

До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

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

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

🤔 Как сделаем график изменения цены?

- Храним историю в БД (timestamp + price).
- Отдаём через API диапазон.
- Рендерим через Chart.js, Highcharts, ECharts, Plotly.

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

🤔 Какие типы данных существуют?

Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.

🚩Примитивные типы:

🟠Number
представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

🟠String
представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

🟠Boolean
имеет два значения, true и false, и используется для работы с логическими операциями.

🟠Undefined
переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

🟠Null
специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

🟠Symbol
уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.

🟠BigInt
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🚩Объекты

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

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

🤔 Что такое хук?

Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect).

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

🤔 Что такое элемент datalist в html 5?

<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение.

🚩Как работает `<datalist>`?

Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`?

Нет, <datalist> не работает с type="number".
Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

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

🤔 Как наследуемся от классов?

В JavaScript и TypeScript для наследования используется ключевое слово extends. Класс-потомок наследует все свойства и методы родителя. Если в дочернем классе нужно вызвать метод родителя, используется super.
Такой подход позволяет расширять поведение классов без дублирования кода.

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

🤔 Что такое функциональное программирование?

Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов.

🚩Основные принципы функционального программирования

🟠Чистые функции (Pure Functions)
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data)
Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions)
Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce)
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying)
Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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

🤔 Для чего нужна методология в HTML?

Методология помогает структурировать и стандартизировать верстку, улучшает читаемость, поддержку и масштабируемость кода. Пример: BEM (Block Element Modifier) — популярная методология для CSS/HTML.

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

🤔 Зачем создавались библиотеки react и другие?

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

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

🟠Улучшение производительности
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.

🟠Облегчение работы с состоянием приложения
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.

🟠Улучшение масштабируемости и поддерживаемости кода
По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.

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

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

🤔 С чем работать помимо React?

Обычно в связке с React используют:
- Redux / Zustand / Context API — для управления состоянием.
- TypeScript — для типизации.
- React Router — для маршрутизации.
- Formik / React Hook Form — для работы с формами.
- Styled-components / Emotion / Tailwind CSS — для стилизации.
- Jest / React Testing Library — для тестирования компонентов.
- Next.js — для SSR, SSG и улучшенного рендеринга. Если ты уточнишь стек, могу подробнее описать каждую технологию.

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

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

Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати.

🟠Использование `@media print`
Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации)
Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст
Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст
При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

🤔 Какие статические методы есть у Promise?

Promise предоставляет несколько полезных статических методов:
- Promise.resolve() — создаёт успешно завершённый промис.
- Promise.reject() — создаёт отклонённый промис.
- Promise.all() — ждёт завершения всех промисов или отклоняет при первой ошибке.
- Promise.race() — возвращает результат первого завершившегося промиса.
- Promise.allSettled() — ждёт завершения всех промисов, возвращает статусы.
- Promise.any() — возвращает первый успешно завершённый промис или ошибку, если все отклонены.
Эти методы позволяют управлять сразу несколькими асинхронными операциями.

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

🤔 Для чего в js нужна асинхронность?

JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет.

🟠Проблема синхронного кода
Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему
Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS?

Callbacks (обратные вызовы) – старый способ.
Promises (fetch(), then/catch) – современный вариант.
async/await – удобный синтаксис для асинхронного кода.
async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность?

Запросы к серверу
Чтение файлов
Таймеры
Работа с базами данных
Взаимодействие с пользователем (ожидание ввода)

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

🤔 Как работает this в JavaScript?

this указывает на контекст вызова функции. Его поведение зависит от способа вызова:
- В методе объекта — указывает на сам объект.
- В обычной функции — зависит от строгого режима (undefined или глобальный объект).
- В стрелочной функции — берёт значение this из внешнего контекста.
- Через call, apply, bind можно явно задать this.

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

🤔 Расскажи про оптимизацию рендеринга в react?

Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.

🚩Почему важна оптимизация рендеринга?

🟠Производительность
Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.
🟠Экономия ресурсов
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.
🟠Лучший UX
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.

🚩Основные подходы к оптимизации рендеринга

🟠Мемоизация компонентов
React предоставляет утилиту React.iss.onemo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.iss.onemo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

🟠Использование `useMemo` и `useCallback`
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.iss.onemo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

🟠Разделение кода и ленивый рендеринг
Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

🟠Проверка зависимости в `useEffect`
Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

🟠Избегайте анонимных функций и объектов в `props`
Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

🟠Разделение больших компонентов
Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.

🟠Использование ключей при рендере списков
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

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

🤔 Как в CSS работают разные приоритеты стилей?

Приоритеты определяются специфичностью селектора и порядком подключения. !important имеет высший приоритет, но лучше его избегать. Inline-стили имеют больший вес, чем внешние. Более конкретные селекторы побеждают общие.

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