Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так.
Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что:
Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег).
Некоторые элементы могут быть проигнорированы или отображены некорректно.
CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре.
Отсутствие закрывающего тега
<p>Привет, мир!
<p>Это новый абзац?
Вложенность тегов в неправильных местах
<p>Текст <div>Блок внутри абзаца</div></p>
По спецификации
<div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:
<p>Текст </p>
<div>Блок внутри абзаца</div>
Если не указать
<!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах
<img src="image.jpg" alt="Картинка" wrongAttr="что это?">
Незакрытые теги в таблице
<table>
<tr>
<td>Ячейка 1
<td>Ячейка 2
</tr>
</table>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Да. Страница обрабатывается браузером как XML, и любая синтаксическая ошибка приведёт к полной остановке загрузки. Также старые браузеры и скрипты могут не поддерживать такой MIME-тип корректно.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.
Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.
Как и
let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.
Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что
const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение
undefined.Подобно
let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".Эти переменные можно объявить без инициализации, и их начальное значение будет
undefined.Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.
var varVariable = 1;
varVariable = 2; // Переназначение возможно
const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибкуif (true) {
var varScope = "доступна везде в функции";
const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определенаСтавь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🤔1
Выбор зависит от задачи:
- ООП (Объектно-Ориентированное Программирование) – удобнее для работы с сущностями (классами, экземплярами, наследованием).
- Функциональное программирование (FP) – удобнее для чистых функций, иммутабельности, композиции.
В React чаще используется FP-подход (функциональные компоненты с useState, useEffect), но классы (ООП) до сих пор актуальны.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9💊4🔥3
Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или 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-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Компонент React перерисовывается, если:
- Изменился его state.
- Пришли новые props.
- Изменилась его родительская структура.
- Используется forceUpdate() (в классовом компоненте). Также useEffect, useMemo, memo и другие хуки влияют на контроль рендеринга.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13💊6👍3
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("Этот код выполнится сразу! 🚀");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("Этот код выполняется, пока ждём данные!");Запросы к серверу
Чтение файлов
Таймеры
Работа с базами данных
Взаимодействие с пользователем (ожидание ввода)
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍3
- Props — это входные данные, которые компонент получает от родителя. Они неизменяемы внутри компонента. Используются для передачи информации "сверху вниз".
- State — это локальные данные компонента. Компонент может их менять, и изменения вызывают перерисовку.
Props — это внешний контроль, state — внутреннее состояние.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥4
Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
-
image/png → PNG -
image/jpeg → JPEG -
image/svg+xml → SVG -
image/gif → GIF -
image/webp → WebP Content-Type: image/png
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (
.jpg, .png, .gif). <img src="picture.jpg" alt="Картинка">
Когда браузер встречает в коде такие теги, как
<img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.<img src="image.png" alt="Пример картинки">
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов
89 50 4E 47 (что означает "PNG" в ASCII). - JPEG —
FF D8 FF. - GIF —
47 49 46 38 (GIF89a).Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Амперсанд (&) делает селекторы более мощными, но при чрезмерном вложении может:
- усложнять чтение;
- порождать слишком длинные селекторы;
- снижать переиспользуемость и затруднять рефакторинг.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊4👍3🔥3
Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта
global в Node.js, что делает её доступной для использования в любом окружении.let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);
function: Будет вызвана после задержки.
functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).
delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.
arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.
function sayHello() {
console.log('Привет!');
}
// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);setTimeoutВызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции
clearTimeout.let timerId = setTimeout(sayHello, 2000);
// Отменяет выполнение
clearTimeout(timerId);
В HTML5 спецификация предусматривает минимальную задержку в
4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.
setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Асинхронность реализуется через:
- Event Loop;
- Callbacks;
- Promises;
- async/await.
JS однопоточен, но может выполнять неблокирующие операции благодаря асинхронной модели и очереди задач. Это важно для работы с сетью, таймерами и I/O.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3
Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги:
Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований.
Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове
add(2, 3) результат будет 5.Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям.
Вы запускаете код с различными значениями и проверяете результаты.
Пишете тестовые скрипты, которые автоматически проверяют корректность работы.
function add(a, b) {
return a + b;
}Мы можем протестировать её так
console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2
Однако лучше использовать автоматическое тестирование. Например, с помощью Jest
test('add function works correctly', () => {
expect(add(2, 3)).toBe(5);
expect(add(0, 0)).toBe(0);
expect(add(-1, -1)).toBe(-2);
});Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями.
Пустой ввод (например,
add() вместо двух чисел).Очень большие числа.
Неправильные типы данных (например, строка вместо числа).
console.log(add()); // undefined или ошибка
console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
Если код не работает как надо, нужно использовать инструменты для отладки
Вывод данных для проверки логики.
Для работы с JavaScript в реальном времени.
Позволяет пошагово выполнять код.
Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как
performance.now() в JavaScript, позволяют измерять время выполнения функций.После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
React не отслеживает изменения данных напрямую, как Vue. В React мы вручную обновляем состояние с помощью setState или useState, чтобы инициировать перерендер. В Vue реактивность встроена на уровне данных через Proxy/Observer.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍7🤔3
Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching).
Проблема: поверхностное слежение (`shallow watching`)
JavaScript сравнивает только ссылки на объекты, а не их содержимое.
const obj = { user: { name: "Иван" } };
const copy = obj;
copy.user.name = "Петр";
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)Обычный
Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование: const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };
shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)Для глубокого копирования можно использовать
structuredClone() или JSON.parse(JSON.stringify(obj)): const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";
console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)
В React состояние обновляется только при изменении ссылки (
shallow compare). const [user, setUser] = useState({ name: "Иван" });
useEffect(() => {
console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!
// НЕ сработает:
user.name = "Петр"; // user остался тем же объектомРешение – создавать новый объект при изменении:
setUser(prev => ({ ...prev, name: "Петр" }));Обычный
watch следит только за первой вложенностью watch(user, (newValue) => {
console.log("Изменено:", newValue);
});Глубокое слежение (
deep: true)watch(user, (newValue) => {
console.log("Изменено:", newValue);
}, { deep: true });Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
- Встроенные (style="") — прямо в HTML, неудобны в поддержке.
- Внутренние (<style>) — внутри <head>, подходят для одностраничников.
- Внешние (<link>) — лучший вариант, позволяет переиспользовать стили, кэшировать и разделять по модулям.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥3💊1
Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным.
pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода.Вместо вложенных вызовов функций (когда результат одной функции передается в другую)
pipe упрощает цепочку, делая её линейной.Код становится проще для понимания, особенно если функций много.
Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода.
pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую.const pipe = (...functions) => (input) =>
functions.reduce((acc, fn) => fn(acc), input);
// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;
// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);
console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121
В контексте RxJS
pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);
// Используем pipe для применения операторов
numbers$
.pipe(
filter((num) => num % 2 === 0), // Оставляем только четные
map((num) => num * 10) // Умножаем их на 10
)
.subscribe((result) => console.log(result));
// Вывод: 20, 40Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
amend заменяет последний коммит, добавляя новые изменения или меняя сообщение.
squash объединяет несколько коммитов в один, используется в git rebase -i для "очистки" истории перед пушем.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍5
Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.
JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.
console.log("1: Перед запросом");
setTimeout(() => {
console.log("2: Данные загружены");
}, 2000);
console.log("3: После запроса");Вывод в консоль
1: Перед запросом
3: После запроса
2: Данные загружены (спустя 2 секунды)
Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например,
click, keydown) в очередь и обрабатывает их только когда основной поток свободен. document.querySelector("button").addEventListener("click", () => {
console.log("Кнопка нажата!");
});Когда мы загружаем данные с сервера (
fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (
fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится. console.log("Запрос данных...");
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log("Данные получены:", data));
console.log("Код выполняется дальше!");Вывод
Запрос данных...
Код выполняется дальше!
(Спустя время) Данные получены: {id: 1, title: "..."}
Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью
setTimeout или requestAnimationFrame. let count = 0;
function heavyTask() {
for (let i = 0; i < 1e6; i++) {
count++;
}
console.log("Часть работы выполнена!");
if (count < 5e6) {
setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
}
}
heavyTask();
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
- Интерполяция — для вставки текста;
- Property binding — связывает DOM-свойство с данными;
- Event binding — слушает события;
- Two-way binding — синхронизирует данные и интерфейс (комбинация property + event binding).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG). p {
color: red;
}CSS позволяет задавать цвета несколькими способами
Наследование
color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background). body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}currentColor — скрытое золотоЭто специальное значение, которое означает "используй текущее значение
color". Очень полезно для стилизации border, box-shadow, outline и SVG. button {
color: red;
border: 2px solid currentColor; /* Использует color */
}transparent — особый цветp {
color: transparent;
}Когда
rgba() или hsla() лучшеp {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}color и mix-blend-modeМожно заставить текст взаимодействовать с фоном с помощью
mix-blend-modeh1 {
color: white;
mix-blend-mode: difference;
}color в ::selection и ::placeholderНекоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания
color::selection {
background: blue;
color: white;
}
input::placeholder {
color: gray;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5💊4