Оптимизация фронтенда обычно сводится к сокращению запросов, размера бандла и кэшированию, но на интерактивных экранах с живыми данными решающим фактором становится главный поток браузера. Разбор того, как он устроен, почему любая тяжёлая задача блокирует отрисовку и ввод, и какие приёмы — от разбиения работы на части до вынесения её в воркеры — позволяют использовать этот дорогой ресурс экономно.
Разработчик FrontPrep разобрал проблему тултипов с логотипами компаний: нулевая задержка вызывала мгновенное появление подсказок при любом движении курсора, а фиксированная задержка в 200мс делала переключение между соседними логотипами медленным. Решение — комбинация задержки открытия и «тёплого окна», при котором соседние тултипы открываются мгновенно.
HTMLcat.net собрал коллекцию из десятков коротких заметок о нативных возможностях HTML, CSS и JavaScript — от clamp() и container queries до Popover API и View Transitions. Каждая заметка сопровождается примером кода и предупреждением о поддержке браузерами.
Шрифты, искажающие или маскирующие текст для защиты от ИИ-краулеров, создают проблемы доступности для скринридеров и не решают заявленную задачу: любой обфускационный метод рано или поздно взламывается моделями, обученными его обходить.
Пять CSS-свойств — background-clip, vertical-align/align-content, box-decoration-break, letter-spacing и text-combine-upright — помогают заметно улучшить типографику на веб-страницах без сложных обходных решений.
Исследование PortSwigger показывает, как «безопасный» CSS в почтовых клиентах — Fastmail, ProtonMail, Gmail, Outlook, Yahoo Mail и AOL Mail — можно превратить в инструмент для эксфильтрации токенов, захвата UI, взлома аккаунтов и даже кражи паролей в реальном времени.
Классический CSS-трюк с grid и place-items центрирует контейнер внутри окна просмотра, но не учитывает боковые панели браузера, из-за которых центр страницы визуально смещается. Разработчик разобрал, как вычислить реальное положение окна браузера относительно экрана и скорректировать центрирование, и оформил решение в виде расширения center, actually.