Веб-страница - фронтенд бэкенд девопс

60–90 КБ в вашем бандле браузер уже умеет сам К package.json мы обычно ходим с вопросами про уязвимости и версии, но редко с вопросом, делает ли библиотека что-то, чего платформа ещё не умеет. Разбор в Smashing Magazine оценивает цену этой привычки: в среднем приложении 60–90 КБ после минификации и сжатия весят зависимости, которые дублируют то, что браузер уже умеет сам. Самый жирный кусок — форматирование. timeago.js на 1 КБ заменяется на Intl.RelativeTimeFormat, numeral на 3,9 КБ — на Intl.NumberFormat, humanize-duration на 6,6 КБ — на Intl.DurationFormat. Самописные функции, склеивающие массив в строку через запятую, закрывает Intl.ListFormat, вместе с оксфордской запятой. Отдельно разобран случай, когда менять не надо вовсе. Temporal лучше Date, но в стабильном Safari его пока нет, а официальный полифил весит 44 КБ против 3 КБ у dayjs. Сегодня такая замена не экономит, а добавляет к бандлу около 41 КБ, поэтому dayjs остаётся на месте до тех пор, пока Temporal не доедет до Safari. Рекомендую перепроверять зависимости раз в квартал, за это время как раз может выйти полезное обновление. Смотреть статус фич можно на webstatus.dev, значок Baseline есть на каждой странице MDN, а для проверки пачкой в сборке ставится пакет web-features. #javascript

Чему учиться взрослому профессионалу? Свою работу трудно оценить со стороны. Каждый день смотришь на неё одинаково и не замечаешь того же, чего не замечал вчера. Тут выручают чужие модели: короткая формулировка переворачивает привычную картину, и становится понятно, чего не хватало. Кажется, что хороший результат говорит сам за себя. Но код, о котором никто не узнал, карьеру не двигает. Кажется, что учится тот, кто проходит курс. А по-настоящему разбирается тот, кто объясняет материал другому. В новом материале на Tproger собрали семь таких моделей. Они помогают увидеть свою работу как систему и понять, куда двигаться дальше. Ссылка скрыта

CSS в письме умеет кликать за пользователя, и это самый безобидный приём в списке Гарет Хейс когда-то разобрал песочницу AngularJS. Последние месяцы он ломал почтовые клиенты: Gmail, Outlook, Fastmail, ProtonMail, Yahoo. Всё, что ниже, проходит через санитайзеры как безопасная разметка. Начинается скромно. Тег label, у которого в for стоит чужой id, отдаёт клик по элементу, до которого у письма доступа быть не должно. В Outlook так открывается лента интерфейса и закрепляется сообщение. Не починено до сих пор. Рядом лежат обходы прокси картинок, из-за которых отправитель видит, что письмо открыли, и его IP на экране в ProtonMail. Дальше становится ещё интереснее. Связка ::before, ::after и opacity разводит то, что видит человек, и то, что читает ИИ-браузер: письмо превращается в промпт-инъекцию. А вишенкой на торте в статье лежат кража токенов при CSP, который блокирует вообще все внешние ресурсы, и кража паролей. Я сохранил статью себе, хотя почтовых клиентов не пишу: разрыв между тем, что пропустил санитайзер, и тем, что отрисовал браузер, живёт везде, где вы принимаете чужой HTML. В комментариях, описаниях профилей, предпросмотрах ссылок. Запрещать label при этом не нужно, режьте у него for: опасна не подпись, а привязка к чужому id. Совет автора даже шире — отдавать чужую разметку в iframe с sandbox. И не пускайте в белый список :has, :checked, :focus и :not: на них собирают поддельные элементы интерфейса. #css #html #фронтенд #безопасность

Наверное, в каждом втором резюме среди навыков есть «системное мышление». С ним не рождаются, ему учатся в процессе работы, с накоплением опыта. Оно помогает видеть картину целиком и структурировать всё, что вы делаете. Сейчас у этого навыка появилось новое применение: с появлением ИИ-агентов умение поставить задачу и проверить результат стало ещё важнее. И ему можно научиться. Какие ошибки часто совершают разработчики, стараясь мыслить системно, и что с этим можно сделать, читайте в статье: Ссылка скрыта

Cloudflare решила, что агентам не нужен Chromium, и за 12 недель написала свой браузер Браузеры написаны для людей, а ходят в них теперь агенты, и платить за человеческую часть приходится памятью и процессорным временем. Агенту не нужны вкладки, темы, расширения и синхронизация между устройствами — ему нужны структурированный контент, размер контекста и цена запроса. Если CSS распарсился слегка неточно, модель это переживёт. Зато prompt injection для неё станет проблемой. Так появился Kitesurf. Он не запускает Chromium на отдельной машине, а работает прямо в Cloudflare Workers — там же, где крутятся обычные serverless-функции клиентов. Отсюда и вся экономика: поднять браузер на каждого агента перестаёт быть роскошью. Сам движок написан на Rust и скомпилирован в WebAssembly. Два решения в нём продиктованы именно тем, что за рулём не человек: 1. У сессий нет ничего общего. Агента задача отправляет куда угодно, поэтому каждая страница здесь считается чужим кодом, а каждая сессия начинается пустой — от предыдущей не остаётся ни данных, ни следов. 2. Браузеру нельзя падать. Если разметка кривая или скрипт сломался, страница теряет один элемент или отдаёт пустой кадр, но сессия живёт дальше. Человек в такой ситуации просто нажмёт F5, а у агента на середине задачи перезагрузка означает потерю всего, что он успел сделать. Но самое интересное — не сам браузер, а как его писали. Основную работу делали ИИ-агенты, и чтобы вместо браузера не получился правдоподобный мусор, им нужен был судья. Такой судья у веба есть: общий набор тестов, которым все браузеры проверяют себя на соответствие стандартам. Тысячи проверок, каждая отвечает «прошёл» или «не прошёл», и обсуждать там нечего. Люди же просто решали, какие фичи и в каком порядке отдавать агентам, и занимались архитектурой. А чтобы браузер нормально читал реальные сайты с их кривой разметкой, добавили второй этап. Один и тот же сценарий кликов прогоняли одновременно в Chromium и Kitesurf и проверяли, видит ли агент страницу такой же, какой её видит человек. Kitesurf сейчас бесплатен в бете внутри Browser Run. Подробный разбор устройства движка с архитектурой рендерера и тем, как гоняли агентов по тестам, можно прочитать в блоге компании. #браузеры #ии

Как измерить Core Web Vitals в SPA, где переходы не перезагружают страницу Классическая беда одностраничников: роутер меняет содержимое, а для браузера это всё та же первая загрузка. LCP, CLS и INP посчитаны один раз при входе, дальнейшие переходы не мерит никто. Отсюда и метрики, в которые никто в команде не верит. С Chrome 151 Soft Navigations работает без флага. Проверка поддержки и подписка выглядят так: ```if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) { new PerformanceObserver(console.log) .observe({ type: 'soft-navigation', buffered: true }); }``` Дальше логика простая. В каждой записи есть name — URL, к которому относится новый экран, и navigationId — уникальный идентификатор перехода, потому что один и тот же URL за жизнь приложения можно открыть десять раз. Получили запись — финализируйте метрики предыдущего экрана, отправьте их под старым URL и начинайте копить заново. LCP для мягкой навигации приходит через interaction-contentful-paint, а у самой записи soft-navigation есть getLargestInteractionContentfulPaint() — он вернёт крупнейший такой пейнт, чтобы не буферизовать записи вручную. Главное — не сравнивайте новые цифры со старыми напрямую. Они почти наверняка окажутся хуже, но не потому, что вы что-то сломали: эти переходы просто впервые попали под замер. Соберите пару недель параллельно и только потом делайте выводы. Ссылка скрыта #перформанс #spa

Тултип, который сам перепрыгивает вниз, когда не влезает сверху Позиционирование поповеров годами было задачей для JS: посчитать координаты кнопки, прибавить размеры тултипа, проверить, не вылез ли он за вьюпорт, пересчитать всё это на скролле и ресайзе. Ровно ради этого в проект приходили Floating UI и Popper.js. Теперь то же самое умеет CSS: .btn { anchor-name: --btn; } .tooltip { position: absolute; position-anchor: --btn; position-area: block-start center; position-try-fallbacks: flip-block; } Последняя строка — самое интересное. Это та самая логика «не влезло сверху, покажем снизу», за которую раньше платили килобайтами зависимости. Браузер сам проверяет доступное место и применяет запасной вариант. Anchor positioning в Baseline и работает во всех четырёх движках. В State of CSS 2026 разработчики назвали её лучшей новой фичей года. Но там много и другой полезной информации: Ссылка скрыта #css #лайфхак

В Node.js 26.6.0 распилили crypto на три бэкенда и переписали потоки на ring buffers Релиз от 3 августа выглядит как минорный, но внутри две структурные вещи. Первая — модуль crypto больше не монолит. Его разделили на три независимых бэкенда: OpenSSL 3.x, BoringSSL из Chromium и legacy-слой OpenSSL. До этого любая оптимизация под конкретную платформу упиралась в общий код, который нельзя трогать, не задев остальных. Теперь ветки развиваются отдельно. Заодно приехали фиксы вокруг ключей: сохранение DER для публичных ключей RSA-PSS, очистка памяти из-под приватных ключей и корректная обработка неполных приватных ключей. Вторая — потоки. Их переложили на ring buffers и сократили количество аллокаций. Это тот случай, когда выигрыш не виден в бенчмарке «hello world», но заметен на прокси, стриминге и всём, что весь день гоняет данные через pipe. Что делать. Если вы на 22.x или 24.x — не спешите: в конце июля вышли security-релизы для всех трёх линий, накатите их. А вот замерить свои горячие пути на 26.x уже стоит: ветка в Current с мая, поддержка до 30 апреля 2029, и именно туда уедут все дальнейшие оптимизации крипты. Если ваш сервис упирается в TLS-хендшейки или в стримы — это первый за долгое время релиз, где прирост можно получить, ничего не переписывая. Ссылка скрыта #nodejs #новости

Новые модели выходят быстрее, чем все успевают их внедрять, а прогнозы про ИИ устаревают ещё быстрее, поэтому на кафедре техпреда МФТИ запустили «Точку сборки». Это серия открытых вебинаров, на которых спикеры делятся опытом внедрения агентов, быстрой сборки MVP и конкретными кейсами своих команд. Больше о «Точке сборки», о первом вебинаре и о том, как попасть на следующие читайте в новом материале на Tproger: Ссылка скрыта