Телеграм канал «Code Ready | Frontend»

Как избежать потери изменений при обновлении данных через API?

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

Например, два запроса изменяют название документа:
fetch('/api/document/1', {
method: 'PATCH',
body: JSON.stringify({ title: 'Draft' })
});

fetch('/api/document/1', {
method: 'PATCH',
body: JSON.stringify({ title: 'Final' })
});

Порядок отправки запросов не гарантирует порядок их применения на сервере. Поэтому итоговое название может оказаться Draft, хотя пользователь последним указал Final.

Один из способов предотвратить перезапись изменений устаревшими данными — оптимистическая блокировка через версионирование данных. Сервер возвращает документ вместе с его версией:
{
"id": 1,
"title": "Draft",
"version": 5
}

При обновлении клиент передаёт версию, на основе которой редактировал документ:
const response = await fetch('/api/document/1', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Final',
version: 5
})
});

На бэкенд обновление выполняется только при совпадении версии. Например, в sql:
UPDATE documents
SET title = 'Final',
version = version + 1
WHERE id = 1
AND version = 5;

Если запись уже была изменена другим запросом, условие version = 5 не выполнится и количество обновлённых строк будет равно нулю. Такой же результат возможен, если документ не существует.

В таком случае бэкенд проверяет количество обновлённых строк и может вернуть 409 Conflict при несовпадении версии или 404 Not Found, если документ отсутствует. Фронтенд при конфликте может предложить пользователю обновить данные или разрешить конфликт:
if (response.status === 409) {
throw new Error(
'Документ был изменён. Обновите данные.'
);
}

🔥 Главное преимущество подхода — атомарная проверка версии и обновление записи в базе данных. Это предотвращает незаметную перезапись изменений, но не гарантирует применение последнего отправленного запроса.

📣 Code Ready | #практика

❤️ Крайне интересная статья на Хабре: «WASM vs JavaScript 2026 — проверка на Flutter Web»!

В этой статье:
• Узнаете, действительно ли переход с JavaScript на WebAssembly ускоряет Flutter-приложения;
• Разберёте результаты 46 тестов производительности: от вычислений и работы с памятью до обработки данных и графики;
• Посмотрите, в каких задачах выигрывает WASM, где быстрее JavaScript и как это влияет на плавность интерфейса.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

Как убрать скачки меню при наведении без фиксированной ширины?

В навигации при наведении текст становится жирным, его ширина увеличивается, а соседние пункты сдвигаются.
.nav-link:hover {
font-weight: 700;
}
Часто это исправляют фиксированной шириной пунктов меню. Но такой подход плохо работает с переводами, динамическими названиями и адаптивной вёрсткой.

Есть более гибкий приём: заранее зарезервировать место под жирную версию текста.
<a class="nav-link" data-text="Каталог">
Каталог
</a>
.nav-link::before {
content: attr(data-text);
font-weight: 700;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
Псевдоэлемент создаёт невидимую копию надписи с нужной толщиной шрифта. Несмотря на нулевую высоту, его ширина участвует в расчёте размера элемента.

Поэтому ссылка заранее занимает достаточно места для жирного текста. Остаётся добавить само состояние наведения.
.nav-link:is(:hover, :focus-visible) {
font-weight: 700;
}

Теперь изменение толщины шрифта не должно сдвигать соседние элементы, если жирная версия действительно шире обычной.

Важный нюанс: значение data-text нужно поддерживать в соответствии с видимым текстом. Для многострочных подписей и сложной типографики приём стоит проверять отдельно.

🔥 Приём особенно полезен для горизонтальной навигации, вкладок и переключателей, где активный пункт выделяется жирным начертанием.

📣 Code Ready | #совет

🔥 Мастхев подборка для каждого айтишника

Держите подборку авторских IT-каналов по всем направлениям: курсы, гайды, статьи, практики, примеры кода, шпаргалки и прохождение собесов.

▪️ Python: @python
▪️ Frontend: @frontend
▪️ Java: @java
👨‍💻 Go: @golang
▪️ ИБ & Хакинг: @hacking
▪️ C/C++: @cplusplus
▪️ C# & GameDev: @gamedev
▪️ Data Science: @datascience
▪️ DevOps: @devops
▪️ Linux: @linux
▪️ IT Курсы: @courses
▪️ Вайбкодинг: @vibecoding
▪️ Весь айти: @itnews

⏱️ Успей подписаться пока не удалили!

👩‍💻 Умная валидация формы без JS!

Обычный :invalid подсвечивает ошибки даже в пустой форме, когда пользователь ещё ничего не вводил. Из-за этого приходится добавлять обработчики событий и отслеживать, какие поля уже были затронуты.
Но у CSS есть более точный инструмент — :user-invalid.

Как работает:
• :user-invalid выбирает поле, которое не прошло проверку после взаимодействия пользователя;

• : неhas() позволяет родительскому контейнеру реагировать на состояние вложенного поля;

• :not(:placeholder-shown) здесь не нужен — браузер сам учитывает момент взаимодействия;

• :user-valid позволяет аналогично оформить корректно заполненные поля.

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

📣 Code Ready | #фишка

✍️ frontend-interview-notes — большая подборка материалов для разработчиков!

В репозитории собраны заметки по ключевым темам веб-разработки, которые помогают систематизировать знания и разобраться в вопросах, встречающихся на технических интервью. Удобно использовать для повторения теории, самопроверки и подготовки к собеседованию.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

overflow-anchor — управляем сохранением позиции прокрутки при изменении контента!

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

Браузеры используют механизм scroll anchoring, который помогает сохранять видимую позицию при таких изменениях. Но иногда автоматическая компенсация прокрутки мешает логике интерфейса.

Рассмотрим контейнер с сообщениями:
<div class="chat">
<div class="messages">
<!-- сообщения -->
</div>
</div>

Зададим ему ограниченную высоту и вертикальную прокрутку:
.chat {
height: 400px;
overflow-y: auto;
}

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

Для управления этим механизмом существует CSS-свойство overflow-anchor:
.chat {
overflow-anchor: none;
}

Значение none исключает контейнер и его потомков из выбора опорного элемента для scroll anchoring. При этом прокрутка продолжает работать, а размеры содержимого могут изменяться как обычно.

По умолчанию используется auto:
.chat {
overflow-anchor: auto;
}

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

Чат, в котором новые сообщения добавляются в конец списка:
const chat = document.querySelector('.chat');
const messages = document.querySelector('.messages');

function appendMessage(text) {
const message = document.createElement('div');
message.textContent = text;

messages.append(message);
}

Если требуется самостоятельно управлять прокруткой, можно отключить scroll anchoring:
.chat {
height: 400px;
overflow-y: auto;
overflow-anchor: none;
}

Например, после добавления сообщения можно прокрутить контейнер вниз:
chat.scrollTop = chat.scrollHeight;

Но если пользователь читает историю сообщений, принудительная прокрутка будет мешать.

Поэтому лучше проверять положение до добавления сообщения:
function appendMessage(text) {
const distanceToBottom =
chat.scrollHeight -
chat.scrollTop -
chat.clientHeight;

const shouldScroll = distanceToBottom <= 20;

const message = document.createElement('div');
message.textContent = text;

messages.append(message);

if (shouldScroll) {
chat.scrollTop = chat.scrollHeight;
}
}

Теперь контейнер прокручивается вниз только тогда, когда пользователь уже находился рядом с нижней границей. Здесь overflow-anchor: none отключает автоматическую компенсацию, а js управляет необходимой позицией.

Если у родителя установлено overflow-anchor: none, потомки не могут повторно включить scroll anchoring:
.container {
overflow-anchor: none;
}

.container .item {
overflow-anchor: auto;
}

В данном случае .item всё равно остаётся внутри исключённой области.

Также scroll anchoring не гарантирует компенсацию любых изменений. А поддержка overflow-anchor в Safari ограничена, поэтому для строго определённого поведения лучше использовать js.

🔥 overflow-anchor позволяет управлять участием элементов в scroll anchoring. Свойство полезно для чатов, лент и динамических списков, где положение прокрутки контролируется логикой приложения.

📣 Code Ready | #практика