Web Page - Frontend Backend DevOps

Firefox 155 добавил CSS-функцию progress() и Promise.allKeyed(), а на iOS браузер получил встроенный блокировщик рекламы Для вёрстки главное: progress(value, start, end) возвращает долю от 0 до 1 между двумя границами, так что адаптивные размеры пишутся без ручного calc(); alpha() меняет прозрачность любого цвета; attr() теперь работает в любом свойстве, а не только в content; font-width заменил font-stretch, старое имя осталось псевдонимом. В JavaScript появились Promise.allKeyed() и Promise.allSettledKeyed(): на вход объект с промисами, на выход объект с теми же ключами, без сопоставления по индексам. В сети добавили согласование QUIC v2 для HTTP/3, DevTools научились читать NDJSON построчно. На iPhone у Firefox нет привычных расширений, поэтому Mozilla встроила блокировщик на Apple Content Blocker и EasyList прямо в настройки; выключен по умолчанию. Примеры кода и список закрытых уязвимостей разобрали на сайте. @tproger_web

Переведите SVG-контур в CSS-функцию shape() за один вставленный путь Функция shape() описывает произвольный контур прямо в CSS: её можно анимировать, задавать в ней проценты и единицы вроде em, использовать в clip-path и offset-path. Проблема ровно одна: писать её руками мучительно, а все реальные контуры уже нарисованы и лежат в виде d-атрибута внутри SVG. Мэтью Морете год возился со спецификацией и выложил три маленьких инструмента, которые закрывают эту работу: — Path to Shape переводит d из SVG-пути в синтаксис shape(); — Shape to Polygon делает обратный ход в polygon(). Пригодится как запасной вариант для браузеров без поддержки shape(), а иногда и как прямая замена: polygon() часто выходит компактнее; — Minify Shape сжимает готовый код shape() примерно так же, как SVGO поступает с SVG. Все три работают в браузере и написаны на SvelteKit. Автор пишет, что прогнал через них все контуры, до которых дотянулся, но на особо заковыристых путях с дугами конвертер всё ещё спотыкается — проверяйте результат глазами. #css

Векторизуйте логотип в SVG прямо во вкладке браузера, не отправляя файл на сервер Онлайн-сервисы просят за трассировку растра деньги или подписку, а бесплатные выдают контуры, будто их обводили во время землетрясения. Vectron решает этот случай локально: внутри открытый движок VTracer на Rust, собранный в WebAssembly и запущенный в Web Worker, поэтому картинка никуда не уходит. Алгоритм обычный — детекция краёв и подгонка кривых, без нейросети, так что один и тот же файл всегда даёт один и тот же результат. Лучше всего выходит на логотипах, иконках и линейных рисунках. В нашем канале «Инструменты программиста» разобрали подробнее, включая настройку фильтров по выделенному участку. #фронтенд

Браузер научится подтверждать почту без письма с кодом — разбор Email Verification API Каждая регистрация с подтверждением почты теряет людей на одном шаге: отправили код или magic link, пользователь ушёл во вкладку почты — и не факт, что вернулся. Email Verification API — новое предложение, которое убирает этот шаг: браузер подтверждает сайту, что адрес принадлежит пользователю, не выпуская его со страницы. Как это устроено: у адреса есть провайдер почты (gmail.com) и издатель — issuer, сервис, управляющий учётной записью (accounts.google.com). Браузер находит issuer, тот проверяет активную сессию пользователя и выпускает подписанный токен подтверждения, а сервер сайта проверяет токен у себя. Вместе с кодами исчезают и опечатки в адресах с мёртвыми ящиками, которые портят репутацию отправителя. Статус ранний: это proposal, браузерная часть доступна через origin trial в Chrome, из почтовых провайдеров участвует Gmail. Подключать можно уже сейчас как progressive enhancement — с фолбэком на обычный код. Разбор с примерами кода #фронтенд

Как работает облако в эпоху AI, почему в RecSys происходит незаметная революция и с какими вызовами сталкиваются инженеры при трансформации генеративных агентов в массовый продукт. Эти и другие темы эксперты разберут 5 сентября на deep tech night — онлайн-конференции о вызовах, с которыми IT-индустрия сталкивается в эпоху AI. Это мероприятие о том, как ИИ меняет устройство инфраструктуры, продуктов и самой разработки. Мо Гавдат, ex‑Chief Business Officer Google X, расскажет, как генеративные нейросети меняют разработку и работу инженеров.  Также выступят эксперты Яндекса: Александр Сафронов — про архитектуру модели в Яндекс Музыке, которая умеет строить персональную Мою волну по запросу пользователя; Станислав Макеев — про встраивание агентных контуров в работающий бизнес на примере Лавки; Андрей Попов — о том, как AI влияет на скорость и эффективность разработчиков. Регистрируйтесь, чтобы подключиться к онлайн-трансляции, задать вопросы экспертам на Q&A-сессии и получить запись докладов после события.

«В приложении удобнее» — а потом вас выкидывает в браузер Терранс Иден описал бытовую сцену, знакомую любому, кто делает продукт с приложением и сайтом. Он хотел подписаться на календарь событий. У него была ссылка, Pixel с Android 17 и обновлённое приложение «Календарь». Добавить календарь по ссылке из приложения оказалось нельзя. Он открыл calendar.google.com в браузере в режиме desktop, подписался — и календарь тут же появился в приложении. Задача не из сложных: кнопка, поле ввода, валидация, сохранение. Функциональность на бэкенде уже есть, приложение её просто не показывает. Дальше автор обобщает по своему опыту разработки под Symbian, BlackBerry и Palm Pilot. Приложение тяжело обновлять: каждая новая возможность или даже новый экран требуют проверки на тысяче устройств и потом медленно расходятся по пользователям. Единственный способ это обойти — научить приложение подтягивать функциональность с сервера. На этом месте вы уже написали браузер. Практический вывод для тех, кто отвечает за веб-версию: приложение обычно покрывает узкий сценарий, всё остальное всё равно возвращается в браузер. Значит, мобильный сайт стоит держать полнофункциональным — включая те операции, которые «по логике» должны жить в приложении. Проверить у себя просто: возьмите список действий пользователя и отметьте те, что с телефона выполняются только через desktop-режим браузера. Про довод «в приложении можно то, чего нельзя в вебе» автор напоминает, что иконку на домашнем экране сайт ставит сам, а офлайн на вебе давно работает. #фронтенд

Типичный Программист снова откладывает отпуск. В этот раз аргумент новый, но узнаваемый: релиз вот-вот стабилизируется. Спойлер: не стабилизируется. В новой мини-игре вам придётся взять дело в свои руки: найти его билет, собрать чемодан и проследить, чтобы туда попали не только рабочий ноутбук и запасные зарядки. По пути можно поймать промокоды от партнёров! Поехали → Ссылка скрыта

Firefox начал догонять Chrome в предварительной загрузке страниц Firefox Nightly получил ограниченную поддержку Speculation Rules API. Этот API позволяет прямо в HTML указать ссылки для предварительной загрузки, чтобы браузер подготовил переход заранее. В Chrome механизм работает давно, поэтому его отсутствие в Firefox оставалось одним из заметных расхождений в скорости навигации. Сейчас реализация Mozilla покрывает только same-origin prefetch, режим immediate и правила-источники list. Браузер умеет заранее загружать ресурсы в пределах того же источника по явно заданному списку. Остальная часть API пока за рамками заявленной поддержки. Правила задаются блоком script type="speculationrules" прямо в HTML: браузеры без поддержки его просто игнорируют, так что добавить его безопасно уже сейчас — в Chrome предзагрузка заработает сразу, а Firefox подтянется. Пока это Nightly 157: Mozilla предупреждает, что функции оттуда могут не дойти до стабильного выпуска.

Connection Allowlist в Chrome может отключить вход через FedCM Chrome добавил сайтам способ заранее ограничить все сетевые подключения страницы. Механизм включается добровольно через заголовок Connection-Allowlist, но после включения любое забытое направление блокируется. Под удар попадает и FedCM — браузерный протокол для кнопок федеративного входа. В Chrome 152 владельцу сайта нужно вручную разрешить все адреса поставщика удостоверений. В список входят конечные точки .well-known, Config, Accounts, ID assertion, Disconnect и Client metadata. Запись может выглядеть так: ("Ссылка скрыта response-origin). Без этих разрешений интеграция FedCM может повести себя не так, как ожидается, вплоть до того, что пользователь не сможет войти. Google описала этот побочный эффект отдельно. Для сайта с таким входом нужно сопоставить заголовок со всеми конечными точками провайдера до включения механизма. Пока Connection-Allowlist не задан, сетевое поведение страницы остаётся прежним.