Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍4
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13💊1
Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)
Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.
Чистый вариант функции
addElement() (не меняет исходный массив) function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props.
Они позволяют:
- Делать компоненты гибкими и переиспользуемыми.
- Управлять поведением дочерних компонентов.
- Разделять логику отображения и данные.
Props неизменяемы — это защита от случайных изменений внутри компонентов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥3
Чтобы повернуть блок на 45 градусов, используется свойство CSS
transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон..rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}Основной синтаксис
transform: rotate(угол);
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html>
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
В комбинации с анимацией (
@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🤔2
- Задержка при первом рендеринге;
- Нагрузка на сервер;
- Сложность интеграции с клиентским SPA-приложением;
- Повышенные требования к инфраструктуре.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8🤔2💊2
В React при рендере списков (например, через
.map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без
key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.
const users = ["Alice", "Bob", "Charlie"];
function UserList() {
return (
<ul>
{users.map((user, index) => (
<li key={user}>{user}</li> // Хорошо, если `user` уникален
))}
</ul>
);
}
Если не указать
key, React выдаст предупреждение: Warning: Each child in a list should have a unique "key" prop.
Кроме того, при изменении списка возможны проблемы с перерисовкой
{users.map((user, index) => (
<input key={index} defaultValue={user} />
))}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Нечистая функция — функция, которая:
- Имеет побочные эффекты (запросы, изменения внешнего состояния).
- Может возвращать разные результаты при одних и тех же входных данных.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3
Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
CSS, JavaScript
Изображения, видео
Шрифты, иконки
Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (
static.example.com), это снижает трафик Обычно статику размещают на поддомене:
static.example.com cdn.example.com assets.example.com Если используем NGINX:
server {
server_name static.example.com;
root /var/www/static;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Частично. Хотя они не напрямую входят в HTML5, Service Workers считаются частью современных web API, тесно связанных с HTML5 и прогрессивными веб-приложениями (PWA).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5💊2👍1
Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах.
Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах.
Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров.
Используем CSS Grid, но добавляем
@supports для fallback'а на FlexboxПриложение на React, но показываем простой HTML, если JavaScript отключён.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
- block занимает всю ширину контейнера, начинается с новой строки;
- inline занимает только свою ширину, не разрывает поток, не принимает margin/padding по вертикали.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥6💊1
version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими.
Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат
MAJOR.MINOR.PATCH
Пример в
package.json (Node.js-проекты): {
"name": "my-app",
"version": "1.2.3"
}Команда для обновления версии в
package.json npm version major # 2.0.0
npm version minor # 1.3.0
npm version patch # 1.2.4
При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.
https://api.example.com/v1/users
https://api.example.com/v2/users
В Git версиями называют теги (
tags), привязанные к коммитам.git tag v1.0.0
git push origin v1.0.0
Чтобы посмотреть все версии
git tag
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
- Сборка через Create React App, Vite или Next.js.
- Тестирование через Jest, React Testing Library, Cypress.
- Линтинг и форматирование через ESLint, Prettier.
- Документирование через Storybook.
- CI/CD через GitHub Actions, GitLab CI и др.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9🤔4💊1
Событие, которое срабатывает при потере фокуса элементом формы, называется
blur.Событие
blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.blur срабатывает, когда элемент теряет фокус, то есть пользователь:Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события
focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например,
onblur).2. JavaScript через метод
addEventListener.Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
Событие
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
Событие
change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
При установке float: left или float: right:
- элемент вырывается из нормального потока документа;
- соседние элементы (особенно текст) обтекают его;
- родитель может "не заметить" плавающий элемент, если не применить очистку (clearing).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍3💊1
innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам. document.getElementById("content").innerHTML = "<h1>Привет!</h1>";Если
innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код. const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;Если в веб-приложении включена CSP (защита от XSS), то
innerHTML может нарушать политику безопасности. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
Если заменить содержимое элемента через
innerHTML, все обработчики событий внутри него удалятся. document.getElementById("btn").addEventListener("click", () => {
alert("Нажато!");
});
document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удаленСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Можно:
- Программно — попробовать установить cookie и затем прочитать его;
- В JavaScript — через navigator.cookieEnabled (возвращает true/false).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍2
Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS
flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
Основная ось — горизонтальная, элементы располагаются справа налево.
Основная ось — вертикальная, элементы располагаются сверху вниз.
Основная ось — вертикальная, элементы располагаются снизу вверх.
Горизонтальное направление (слева направо):
.container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}Горизонтальное направление (справа налево):
.container {
display: flex;
flex-direction: row-reverse;
}Вертикальное направление (сверху вниз):
.container {
display: flex;
flex-direction: column;
}Вертикальное направление (снизу вверх):
.container {
display: flex;
flex-direction: column-reverse;
}Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Через:
- setTimeout, setInterval;
- fetch, Promise, async/await;
- события DOM.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥5💊4