Чем заменить палитру Tailwind в проекте на обычном CSS

После отказа от Tailwind не обязательно подбирать каждый оттенок с нуля. В подборке CSS-палитр есть готовые варианты с CSS-файлами: uchū, Flexoki и Reasonable Colors. Последняя, по впечатлению автора, сфокусирована на доступности.

Если готовая палитра не подходит, там же собраны генераторы Harmonizer, tints.dev, Coolors и colorpalette.pro. Ещё один материал показывает, как функция CSS oklch() динамически создаёт цвета.

Практический сценарий: откройте подборку в начале работы над интерфейсом, сравните готовые палитры и переходите к генератору, только если нужен собственный набор оттенков.

Почему React перерисовывает компоненты и как остановить каскад

Изменение состояния запускает повторный рендер компонента-владельца и его потомков. Даже если дочерний компонент не получает изменившийся count через пропсы, React выполняет его код снова: косвенную зависимость исключить нельзя.

Поэтому лишние рендеры стоит искать от владельца состояния вниз по дереву, а React DevTools использовать, чтобы увидеть причину повторной отрисовки конкретного компонента.

Если чистый потомок при одинаковых пропсах возвращает тот же интерфейс, React.memo позволяет взять предыдущий результат. В разборе Why React Re-Renders на сайте Josh W. Comeau это показано на интерактивных схемах и примерах с Counter, BigCountNumber и Decoration.

Почему гидрация React ломается при разном HTML на сервере и в браузере

При серверном рендеринге React отдаёт готовый HTML. Затем браузер гидрирует его: связывает DOM-узлы с компонентами. В этот момент React ожидает ту же структуру, что сформировал сервер, а не ищет и исправляет различия.

Поэтому проверка typeof window внутри рендера опасна. Если на сервере компонент возвращает null, а в браузере сразу добавляет навигацию, структуры HTML расходятся. Иногда React справляется, но гидрация оптимизирована ради скорости, и элементы могут оказаться не на своих местах.

Если интерфейс верен в разработке, но ломается после сборки, а React DevTools показывает правильное дерево, разбор Джоша У. Комо поможет сверить первый клиентский рендер с готовым HTML и проверить структуру DOM.

Как content-visibility ускоряет отрисовку длинных страниц

Если на странице десятки карточек, браузеру необязательно сразу рассчитывать стили и раскладку для всего списка. С content-visibility: auto он пропускает отрисовку содержимого секций за пределами экрана и выполняет её, когда секция приближается к области просмотра.

В примере с блогом время отрисовки сократилось с 232 до 30 мс. Есть цена: без заданного размера пропущенная секция считается пустой, поэтому полоса прокрутки может прыгать. contain-intrinsic-size задаёт размер-заполнитель, а значение auto позволяет затем запомнить фактический размер.

Откройте разбор на web.dev перед оптимизацией ленты или SPA: там показаны CSS-код, ограничения доступности и отличие от display: none и visibility: hidden.

Как stale-while-revalidate отдаёт кэш сразу и обновляет его в фоне

Директива stale-while-revalidate в заголовке Cache-Control разрешает браузеру показать устаревшую копию без ожидания сети. Одновременно браузер запрашивает свежий ответ и сохраняет его для следующего обращения.

На примере max-age=1, stale-while-revalidate=59 механика видна по секундам: первую секунду ответ считается свежим; следующие 59 секунд браузер сразу отдаёт копию и обновляет её в фоне; позже уже ждёт сеть. Такой режим подходит данным, которые запрашивают часто и обновляют по известному расписанию, например погоде или заголовкам новостей.

Я сохранил разбор web.dev как шпаргалку для настройки API: он помогает выбрать интервалы кэширования и заранее решить, насколько устаревший ответ допустим для пользователя.

Как INP измеряет отзывчивость веб-страницы

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

Ориентир считают по 75-му процентилю отдельно для мобильных и настольных устройств: до 200 мс включительно считается хорошим результатом, свыше 200 и до 500 мс требует улучшения, свыше 500 мс означает плохую отзывчивость.

Начните с PageSpeed Insights: данные CrUX покажут оценку по реальным визитам. Затем RUM, мониторинг реальных пользователей, поможет найти медленное действие, а лабораторный тест позволит его воспроизвести. В разборе INP на web.dev объясняют, почему метрика иногда отсутствует и чем ограничены лабораторные измерения.

Как браузер рисует кадры и где теряется плавность

Экран с частотой 60 Гц обновляется каждые 16,66 мс. С учётом работы браузера нужно уложиться в 10 мс: иначе частота кадров падает, а движение начинает дёргаться.

В разборе web.dev путь визуального изменения разделён на расчёт стилей и геометрии, отрисовку пикселей и сборку слоёв. Свойства width, height, left и top заставляют браузер пройти все эти этапы. Для цвета, фонового изображения или тени пересчёт геометрии не нужен. Если свойство не требует и новой отрисовки, браузер сразу собирает готовые слои.

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

Почему CORS устроен именно так и как с ним работать

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

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

Я сохранил разбор CORS с интерактивной песочницей как карту для отладки трёх слоёв: источников, учётных данных и разрешения сервера.

Как кэшировать HTML, CSS и JavaScript без рассинхронизации

Короткий max-age для изменяемых файлов выглядит компромиссом. Но браузер может оставить старые HTML и JavaScript, удалить CSS из кэша и запросить его заново. Если сервер уже отдаёт новые стили, страница соберётся из несовместимых версий. В тестах это легко пропустить.

Для неизменяемой статики надёжнее менять URL вместе с содержимым, например добавлять хеш, и задавать max-age=31536000. Для HTML подходит no-cache: браузер хранит ответ, но перед использованием сверяет его с сервером через ETag или Last-Modified. Название меткое: кэшировать оно как раз разрешает.

Подробный разбор кэширования пригодится перед настройкой заголовков и service worker. Проверьте, не получают ли изменяемые файлы короткий max-age, а для статики версионируйте URL.

Cloudflare автоматизировала обмен ключами с серверами сайтов

Cloudflare включила Automatic Key Exchange по умолчанию для доменов. Функция касается защищённого соединения между прокси Cloudflare и сайтом. Раньше Cloudflare начинала обмен по TLS 1.3 с X25519; при другом выборе сервера повтор добавлял полный сетевой круг.

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

При развёртывании доля повторов снизилась примерно с 52% до 3,7%, а задержка на 90-м процентиле сократилась более чем на 150 мс. Сотни тысяч доменов получили постквантовые соединения без ручной настройки. Разбор Cloudflare пригодится тем, кто отвечает за TLS: в панели можно проверить режим и ограничения по стандартам.

Почему большой z-index не поднимает подсказку над шапкой

У подсказки может быть z-index: 999999, а у шапки всего 2, но шапка всё равно окажется сверху. Значения сравниваются не по всей странице, а только внутри одного контекста наложения. Если main создал отдельный контекст с z-index: 1, его дочерняя подсказка не сможет обойти соседний header с z-index: 2.

Контекст появляется не только из-за сочетания position и z-index. Его могут создать opacity меньше единицы, transform, will-change, фиксированное или липкое позиционирование и другие свойства. Поэтому увеличение числа порой напоминает торг с браузером: ставка растёт, результата нет.

В разборе Josh W. Comeau есть интерактивные примеры и схемы контекстов. При отладке пройдите по предкам проблемного элемента: найдите предка, который создал новый контекст, и проверьте его порядок среди соседних контекстов.

Короткая хронология:
2001 — появился SpaceWeb, в аське живёт весь рунет
2005 — Живой Журнал, гостевые книги, счётчики посещений
2010 — торренты, флеш-игры, первые айфоны у всех
2016 — все бегают за покемонами
2020 — жизнь переезжает в Zoom
2026 — SpaceWeb исполняется 25

Анкета проводит по всей этой линии — от первой страницы до промокода в конце.

Как браузер мгновенно восстанавливает страницу при возврате

Кэш переходов назад и вперёд, или bfcache, сохраняет в памяти снимок всей страницы вместе с состоянием JavaScript. Когда пользователь уходит, браузер приостанавливает выполнение кода, а при возврате показывает страницу без запроса к сети. Механизм поддерживают все основные браузеры.

Начните проверку с обработчика unload: на компьютерах Chrome и Firefox он исключает страницу из bfcache. Используйте pagehide, а восстановление отслеживайте через pageshow: свойство event.persisted будет равно true. В одностраничном приложении кэш не ускоряет внутренние переходы без перезагрузки, но помогает при возврате к приложению с другой страницы.

Разбор web.dev пригодится перед аудитом навигации: в нём есть механика кэша, события страницы и ограничения встроенных фреймов.

Как собрать современный CSS reset для нового проекта

В наборе Josh W. Comeau сохранены разумные браузерные стили и добавлена база для предсказуемой вёрстки. box-sizing: border-box включает границы и внутренние отступы в заданную ширину элемента, а внешние отступы сбрасываются у всех элементов, кроме dialog.

Для текста задан межстрочный интервал 1,5 и более аккуратное распределение строк в абзацах и заголовках. Формы наследуют шрифт. Так меньше базовых исключений приходится исправлять в стилях компонентов.

Используйте набор при старте нового проекта. Для существующей кодовой базы автор предупреждает о риске незаметно сломать интерфейс изменением базовых стилей. Если всё же добавляете reset, тщательно протестируйте результат. Код и объяснение каждого правила есть в разборе Josh W. Comeau.

Когда в CSS нужны контейнерные запросы

Медиазапрос смотрит на окно браузера. Поэтому условие min-width: 1024px сработает на экране шириной 1920 пикселей даже для карточки шириной 300 пикселей. Тесному компоненту достанется раскладка для широкого экрана.

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

В разборе Smashing Magazine тот же принцип применяют к шрифту: cqi вместе с clamp() масштабирует его относительно контейнера. Оставляйте медиазапросы для структуры страницы, а контейнерные используйте для карточек, форм и виджетов.

Как проверить ограничитель запросов в многопроцессном Node.js

Локальный ограничитель показывает идеальные интервалы, пока сервер получает пачку запросов. В эксперименте с Bottleneck шесть воркеров при настройке на два запроса в секунду сообщали о паузах 495,8 мс, но вместе выдавали серверу 14,04 запроса в секунду.

Библиотека работала по документации: local не синхронизирует процессы. Контрольный запуск через Redis удержал суммарную частоту на двух запросах в секунду.

Если приложение запущено через Node.js cluster, PM2 в cluster-режиме или несколько контейнеров, проверяйте не отчёт ограничителя, а интервалы прихода на HTTP-сервер. Намеренно отключите координацию и убедитесь, что тест замечает всплеск. Иначе заданный предел окажется пределом для каждого процесса.

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

ИИ в разных прикладных задачах:
Как ML вычисляет фейковые отзывы и накрутку рейтингов
15 бизнес-задач для автоматизации через ИИ
ИИ в работе мобильного банкира
Как финансовые организации сокращают расходы и убирают ручной ввод документов
Распознавание документов в браузере
Как распознать паспорт на Python за 5 минут

Про модели, фреймворки и работу с ИИ:
Модели для кода в 2026: Claude, GPT, Gemini, DeepSeek, Qwen
Вайб-кодинг в терминале: настраиваем OpenCode с Claude, GPT и Gemini
Как выбрать фреймворк для ИИ-агентов
Почему ИИ-агент тупеет на большом проекте
Что меня ждало, когда я решил стать вайб‑кодером
Можно ли аналитику в 2026 году положиться на ИИ и агентов или ещё нет?

Инфобез и ИИ:
Вайб-кодинг как мечта хакера: какие уязвимости плодит код, сгенерированный ИИ
Ваш ИИ-агент видит лишнее: пять атак, которые превращают помощника в канал утечки
ИИ в ИБ: где он реально работает, а где — просто модный ярлык

Почему font-family не берёт запасной шрифт у родителя

Если на body задан стек system-ui, sans-serif, а на h1 только «Open Sans», браузер не вернётся к стеку body. Объявление заголовка самодостаточно: пока веб-шрифт грузится, браузер исчерпает его список и возьмёт свой шрифт по умолчанию, часто Times New Roman.

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

Исправление: задавайте полный стек при каждом переопределении, например font-family: "Open Sans", sans-serif;. Harry Roberts объясняет механику на CSS Wizardry. Проверьте переменные дизайн-системы: после имени веб-шрифта нужен хотя бы общий запасной вариант вроде sans-serif.

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

Почему компании возвращают нагрузки из публичного облака в 2026 году
Гибридное облако: что оставить у себя, а что вынести в публичный контур
Облако или свои серверы: почему бизнес выбирает гибридную инфраструктуру
Кто отвечает за работу облачной инфраструктуры: бизнес или провайдер
VPS или облачный IaaS в 2026: когда дешёвый сервер перестаёт справляться
Где арендовать GPU в 2026
GPU-серверы для LLM-инференса
S3 в инфраструктуре: где объектное хранилище помогает, а где не заменит файловую систему
Как хранить бэкапы в S3, чтобы их не удалил сбой или вирус

Курсорная пагинация для API: когда она надёжнее OFFSET

OFFSET удобен, пока выборка невелика и не меняется между запросами. На таблице из 1,2 млн строк в PostgreSQL 15 выдача 20 строк с OFFSET 1 000 000 заняла 2,4 секунды, а запрос по курсору выполнялся за 3 мс.

База читает пропущенные строки и отбрасывает их. OFFSET каждый раз отсчитывает позиции от текущего начала выборки, поэтому вставки и удаления между запросами дают дубликаты или пропуски. Курсор хранит ID последней полученной записи и продолжает после неё.

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

Оставляйте OFFSET для небольших стабильных данных и перехода к странице N. Для растущей ленты или синхронизации выбирайте курсор.