🤔 В чём отличие null от undefined?

`null` в JavaScript — это явное указание на отсутствие значения или объекта, тогда как `undefined` означает, что переменная или свойство были объявлены, но не инициализированы. `null` назначается вручную разработчиком, а `undefined` — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. `null` чаще используется для инициализации переменных, ожидающих объект.

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

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

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

🚩Атрибуты

🟠Хранение дополнительных данных
Позволяют хранить пользовательские данные непосредственно в HTML-элементах. Это особенно полезно, когда необходимо передавать данные между HTML и JavaScript.

<div id="user" data-user-id="123" data-user-role="admin">...</div>   

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

<button data-action="save" data-target="#form">Save</button>  

🟠Разделение данных и представления
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.

🟠Работа с JavaScript
JavaScript может легко извлекать и использовать данные из атрибутов data-, что упрощает манипулирование элементами страницы.

const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`);  

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

🟠Хранение информации о продукте

<div class="product" data-product-id="101" data-product-price="29.99">
    <h2>Product Name</h2>
    <p>Product Description</p>
</div>

const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);

🟠Управление действиями кнопки

<button data-action="submit" data-target="#form">Submit</button>

const button = document.querySelector('button');
button.addEventListener('click', function() {
    const action = this.getAttribute('data-action');
    const target = this.getAttribute('data-target');
    console.log(`Action: ${action}, Target: ${target}`);
});

🟠Хранение состояния элемента

<div id="toggle" data-state="collapsed">Click to Expand</div>

const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
    const state = this.getAttribute('data-state');
    if (state === 'collapsed') {
        this.setAttribute('data-state', 'expanded');
        this.textContent = 'Click to Collapse';
    } else {
        this.setAttribute('data-state', 'collapsed');
        this.textContent = 'Click to Expand';
    }
});

🚩Плюсы

➕Простота и гибкость
Легко добавлять и изменять данные без изменения HTML-структуры.
➕Совместимость с существующими инструментами
Атрибуты data- не влияют на стандартные функции браузеров и инструментов разработки.
➕Поддержка валидации HTML
HTML5 атрибуты data- валидны и не нарушают спецификацию.

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

🤔 Какие бывают хуки?

В React хуки — это специальные функции, которые позволяют "подключаться" к состоянию и жизненному циклу функциональных компонентов. Основные хуки включают `useState` для работы с состоянием, `useEffect` для выполнения побочных эффектов, и `useContext` для доступа к контексту. Также есть пользовательские хуки, которые можно создавать для повторного использования логики между компонентами. Хуки позволяют использовать функциональные компоненты так же эффективно, как и классовые.

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

🤔 Как стилизовать инпут для загрузки файлов?

Элемент <input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.

🚩Для загрузки файлов HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom File Input</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="file-input">
        <input type="file" id="file" class="file-input__input">
        <label for="file" class="file-input__label">
            <span class="file-input__button">Choose a file</span>
            <span class="file-input__name">No file chosen</span>
        </label>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

🚩Для загрузки файлов CSS

/* Стили для контейнера файла */
.file-input {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    font-family: Arial, sans-serif;
}

/* Скрыть стандартный инпут для файла */
.file-input__input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Стили для кастомного лейбла */
.file-input__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    cursor: pointer;
}

/* Стили для кнопки выбора файла */
.file-input__button {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

/* Стили для отображения имени файла */
.file-input__name {
    color: #999;
}

🚩Для загрузки файлов JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.querySelector('.file-input__input');
    const fileName = document.querySelector('.file-input__name');

    fileInput.addEventListener('change', function () {
        if (fileInput.files.length > 0) {
            fileName.textContent = fileInput.files[0].name;
        } else {
            fileName.textContent = 'No file chosen';
        }
    });
});

🟠HTML
Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.

🟠CSS
Скрывается стандартный элемент инпута для файла с помощью opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла.

🟠JavaScript
Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.

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

🤔 Что такое мемоизация?

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

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

🤔 Что такое селектор атрибутов?

Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной.

🚩Виды

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

/* Выбирает все элементы с атрибутом title */
[title] {
    color: blue;
}

🟠Селектор по точному значению атрибута
Выбирает элементы, атрибут которых имеет точное указанное значение.

/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
    background-color: green;
}

🟠Селектор по наличию значения в списке значений атрибута
Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.

/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
    font-weight: bold;
}

🟠Селектор по начальной части значения атрибута
Выбирает элементы, атрибут которых начинается с указанного значения.

/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
    color: red;
}

🟠Селектор по конечной части значения атрибута
Выбирает элементы, атрибут которых заканчивается на указанное значение.

/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
    text-decoration: underline;
}

🟠Селектор по вхождению значения в атрибут
Выбирает элементы, атрибут которых содержит указанное значение в любом месте.

/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
    color: orange;
}

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

Стилизация всех изображений с атрибутом alt

img[alt] {
    border: 2px solid blue;
}

Стилизация ссылок, ведущих на внешние сайты

a[href^="http"] {
    color: red;
}

Стилизация полей ввода с определенным типом

input[type="text"] {
    border: 1px solid gray;
}

Стилизация элементов с определенным классом

[class~="button"] {
    padding: 10px;
    background-color: lightgray;
}

🚩Комбинированные селекторы

Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.

/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
    background-color: green;
    color: white;
}

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

🤔 В чём отличие хранения данных в local storage от куки?

`localStorage` хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. `localStorage` более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. `localStorage` работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера.

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

🤔 Как изменить стили кнопок с атрибутом disabled?

C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.

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

🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

🟠Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры

С HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

С CSS

/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🟠Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.

/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}

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

🤔 В чём разница между foreach и map?

`forEach` выполняет функцию для каждого элемента массива, не возвращая нового массива, тогда как `map` создает новый массив, заполняя его результатами выполнения функции для каждого элемента исходного массива. `forEach` обычно используется для выполнения побочных эффектов, таких как изменение существующих данных или вызов внешних функций. `map` удобен для преобразования массива в новый массив с изменёнными данными. Если требуется создать новый массив, предпочтительнее использовать `map`.

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

🤔 Как изменить стили для элемента span?

Для изменения стилей элемента <span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента.

🚩Как стилизовать <span> элемент

🟠Селекторов классов
Если элементу <span> присвоен класс, вы можете использовать класс-селектор для его стилизации.

HTML

<span class="highlight">Этот текст будет выделен.</span>

CSS

.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

🟠Селекторов идентификаторов
Если элементу <span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации.

HTML

<span id="unique-span">Этот текст уникален.</span>

CSS

#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

🟠Селекторов по атрибутам
Вы можете использовать селекторы атрибутов для стилизации элементов <span>, основанных на наличии определенного атрибута или его значения.

HTML

<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>

CSS

span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

🟠Селекторов по типу элемента
Вы можете использовать селектор по типу элемента для стилизации всех элементов <span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы.

HTML

<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>

CSS

span {
    color: purple;
    font-size: 18px;
}

🟠Комбинированные селекторы
Вы можете комбинировать различные типы селекторов для более точной стилизации.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Span Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <span class="highlight">Этот текст будет выделен.</span>
    <span id="unique-span">Этот текст уникален.</span>
    <span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
    <p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
    <p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>

CSS

/* Стили для класса */
.highlight {
    color: red;
    font-weight: bold;
    background-color: yellow;
}

/* Стили для идентификатора */
#unique-span {
    color: blue;
    font-style: italic;
    background-color: lightgray;
}

/* Стили для пользовательского атрибута */
span[data-custom="example"] {
    color: green;
    text-decoration: underline;
}

/* Стили для всех span */
span {
    color: purple;
    font-size: 18px;
}

/* Комбинированные стили */
p span.highlight {
    color: red;
    font-weight: bold;
}

#unique-paragraph span.highlight {
    color: blue;
    background-color: yellow;
}

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

🤔 Что такое дженерик?

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

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

🤔 Что происходит при схлопывании границ?

Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).

🚩Почему это нужно?

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

🚩Как это работает?

Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block1 {
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .block2 {
            margin-top: 30px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="block1">Блок 1</div>
    <div class="block2">Блок 2</div>
</body>
</html>

🚩Когда схлопывание границ не происходит

🟠Если элементы имеют display:flex или display:grid.
🟠Если между элементами есть элемент с padding или border.
🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible.
🟠Если один из элементов плавающий (float).

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

🤔 Для чего нужен eventloop в js?

Event Loop (цикл событий) в JavaScript управляет выполнением асинхронного кода, следя за очередями задач и выполняя их последовательно. Когда в основной поток попадает асинхронная задача, такая как таймер или сетевой запрос, она добавляется в очередь событий. После завершения текущего блока кода Event Loop проверяет, есть ли готовые задачи в очереди, и запускает их. Это позволяет JavaScript быть однопоточным языком с поддержкой асинхронных операций без блокировки основного потока.

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

🤔 Что возвращает map?

Используется для создания нового массива, содержащего результаты вызова переданной функции для каждого элемента исходного массива. Этот метод не изменяет оригинальный массив, а возвращает новый.

🚩Почему это нужно?

Метод map удобен для выполнения операции на каждом элементе массива без необходимости вручную перебирать массив с помощью цикла. Он обеспечивает более чистый и читаемый код.

🚩Как это используется?

Метод map принимает одну функцию в качестве аргумента. Эта функция будет выполнена для каждого элемента массива, и результат выполнения этой функции будет добавлен в новый массив, который в итоге возвращается методом map. В этом примере каждый элемент массива numbers умножается на 2, и результат сохраняется в новом массиве doubled.

const numbers = [1, 2, 3, 4, 5];

// Используем метод map для умножения каждого элемента на 2
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

С использованием стрелочных функций, код становится еще более компактным:

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

🚩Дополнительные параметры

Функция, переданная в map, может принимать до трех аргументов:

🟠Текущий элемент массива.
🟠Индекс текущего элемента.
🟠Сам исходный массив.

Пример с использованием всех трех аргументов:

const numbers = [1, 2, 3, 4, 5];

const detailed = numbers.map((num, index, array) => {
  return `Элемент ${num} находится на индексе ${index} в массиве [${array}]`;
});

console.log(detailed);
/*
[
  'Элемент 1 находится на индексе 0 в массиве [1,2,3,4,5]',
  'Элемент 2 находится на индексе 1 в массиве [1,2,3,4,5]',
  'Элемент 3 находится на индексе 2 в массиве [1,2,3,4,5]',
  'Элемент 4 находится на индексе 3 в массиве [1,2,3,4,5]',
  'Элемент 5 находится на индексе 4 в массиве [1,2,3,4,5]'
]
*/

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

🤔 Какие бывают значения у свойства position?

Свойство `position` в CSS имеет следующие значения: `static` (по умолчанию, элемент расположен в нормальном потоке документа), `relative` (элемент перемещается относительно своего нормального положения), `absolute` (элемент позиционируется относительно ближайшего предка с позиционированием), `fixed` (элемент фиксируется относительно окна браузера) и `sticky` (элемент перемещается до определённой границы и остаётся закреплённым). Эти значения позволяют управлять расположением элементов на странице в зависимости от требований верстки.

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

🤔 Чем html отличается от jsx?

HTML и JSX имеют сходства и различия, которые важно понимать при разработке веб-приложений, особенно в контексте работы с библиотекой React.

🚩HTML

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

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

🚩JSX

Это синтаксическое расширение для JavaScript, которое используется в React для описания того, как пользовательский интерфейс должен выглядеть. JSX позволяет писать HTML-подобный код внутри JavaScript, который затем транспилируется в вызовы JavaScript-функций. Этот код выглядит как HTML, но на самом деле он является JavaScript-кодом, который будет компилироваться в вызовы React.createElement.

const element = (
  <div>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
  </div>
);

🚩Ключевые отличия

🟠Синтаксис и семантика
HTML использует стандартные HTML-теги и атрибуты. JSX использует JavaScript-выражения внутри фигурных скобок {}, и некоторые атрибуты имеют другие названия (например, className вместо class, htmlFor вместо for).
🟠Логика и данные
В HTML нельзя напрямую писать JavaScript-код, можно лишь использовать его через теги <script>. В JSX можно использовать любые JavaScript-выражения, что позволяет динамически формировать разметку.
🟠Транспиляция
HTML непосредственно интерпретируется браузером. JSX нужно транспилировать (с помощью Babel или другого транспилера) в обычный JavaScript, чтобы браузер мог его понять.
🟠Расширенные возможности
HTML не поддерживает логику напрямую, все изменения в DOM происходят через JavaScript. JSX позволяет интегрировать логику непосредственно в разметку, что делает код более декларативным и удобным для работы в рамках React.

Пример использования динамического контента

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

Этот JSX-код будет транспилирован

const element = React.createElement('h1', null, 'Привет, ', name, '!');

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

🤔 Что такое двустороннее связывание?

Двустороннее связывание (two-way binding) — это процесс автоматической синхронизации данных между моделью и представлением. В контексте JavaScript и фреймворков, таких как Angular, это означает, что изменения в модели обновляют пользовательский интерфейс, и наоборот — изменения в интерфейсе изменяют данные в модели. Двустороннее связывание упрощает работу с формами и вводом данных, так как не требует явного написания кода для передачи данных в обе стороны. Это улучшает интерактивность и упрощает обработку данных.

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

🤔 На что влияет доступность?

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

🚩Почему важна

🟠Инклюзивность
Доступность позволяет людям с ограниченными возможностями использовать веб-сайты наравне с другими пользователями. Это включает людей с нарушениями зрения, слуха, двигательной активности и когнитивными проблемами.
🟠Юридические требования
В некоторых странах и регионах существуют законы и нормативные акты, требующие обеспечения доступности веб-сайтов и приложений. Например, в США действует Закон о доступности (ADA), а в Европейском Союзе – Директива о доступности веб-сайтов и мобильных приложений.
🟠SEO и охват
Доступные веб-сайты часто лучше индексируются поисковыми системами, поскольку многие практики доступности пересекаются с рекомендациями по SEO (поисковой оптимизации). Это помогает улучшить видимость сайта и его охват.
🟠Пользовательский опыт
Доступные сайты обычно имеют более ясную и интуитивно понятную структуру, что улучшает общий пользовательский опыт для всех, включая людей без ограниченных возможностей.

🚩Основные аспекты

🟠Текстовые альтернативы
Все визуальные элементы (например, изображения, иконки) должны иметь текстовые альтернативы (атрибуты alt), чтобы их можно было понять с помощью экранных читалок.
🟠Навигация с клавиатуры
Весь функционал сайта должен быть доступен с клавиатуры. Это важно для людей, которые не могут использовать мышь.
🟠Контраст и читабельность
Текст должен быть достаточно контрастным по отношению к фону, чтобы его было легко читать людям с нарушениями зрения.
🟠Использование семантических HTML-тегов
Семантические теги (<header>, <nav>, <main>, <footer>, <article>, <section> и т.д.) помогают структурам страницы быть более понятными для вспомогательных технологий.
🟠Формы и элементы управления
Формы должны быть четко обозначены с помощью меток (<label>) и иметь описания ошибок, чтобы пользователи могли легко взаимодействовать с ними.
🟠Видео и аудио
Видео и аудио должны сопровождаться субтитрами и текстовыми транскрипциями, чтобы пользователи с нарушениями слуха могли понять содержание.

<img src="example.jpg" alt="Описание изображения">

Пример формы с доступными метками:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Отправить</button>
</form>

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

🤔 Различия между let и const

- let позволяет переназначать значения переменных, в то время как const не позволяет это после инициализации.
- Обе директивы предоставляют блочную область видимости.
- let идеально подходит для использования в случаях, когда значение переменной может изменяться.
- const используется для объявления переменных с неизменным значением.

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

🤔 Чем тип отличается от интерфейса?

🚩Типы (Type)

Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.

type User = {
  name: string;
  age: number;
};

Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):

type ID = string | number;

type Employee = {
  id: ID;
  department: string;
};

type Manager = User & Employee & {
  employees: User[];
};

🚩Интерфейсы (Interface)

Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

Интерфейсы могут расширять другие интерфейсы:

interface Manager extends Employee {
  employees: User[];
}

🚩Ключевые различия

🟠Расширение (extends) и пересечение (&)
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends. Типы могут использовать пересечения (&) для комбинирования других типов.
🟠Объединения (Union types)
Типы могут определять объединения (например, string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения.
🟠Декларативное объединение
Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
🟠Примитивы и другие типы
Типы могут представлять примитивные типы (например, string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов.

🚩Примеры

Тип с объединением

type ID = string | number;

const userId: ID = 123;
const userName: ID = "abc";

Объединение интерфейсов

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 30
};

Расширение интерфейсов

interface User {
  name: string;
  age: number;
}

interface Employee extends User {
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 25,
  department: "HR"
};

Тип с пересечением

type User = {
  name: string;
  age: number;
};

type Employee = User & {
  department: string;
};

const employee: Employee = {
  name: "Bob",
  age: 35,
  department: "IT"
};

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