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

Cloudflare начала отключать D1 на бесплатном плане после 5 млн прочитанных строк в сутки С 1 сентября превышение дневного лимита на Workers Free больше не проходит незаметно: запросы к базе возвращают ошибки до полуночи UTC (03:00 МСК), данные не удаляются. Лимиты прежние: 5 млн прочитанных и 100 тысяч записанных строк в сутки, 5 ГБ хранилища. Изменился только режим: раньше мягко, теперь жёстко. Ловушка в учёте: считаются строки, которые прошёл движок, а не строки в ответе. SELECT без индекса по таблице в 100 тысяч записей съедает 100 тысяч чтений за один вызов. Сколько реально прочитал запрос, D1 показывает в meta.rows_read. Что сделать: пройтись EXPLAIN QUERY PLAN по частым запросам и добавить индексы там, где SCAN; кэшировать горячие ответы в KV; писать батчами, лимит записей в 50 раз меньше лимита чтений. Тарифы платного плана и чек-лист собрали на сайте. @tproger_web

Уберите тормозящую задержку из многоуровневого меню — её заменяет геометрия Пользователь ведёт курсор по диагонали от пункта к подменю, задевает по дороге соседнюю строку, и содержимое переключается прямо под мышью. Обычное лечение — задержка перед сменой подменю, из-за которой интерфейс ощущается медленным. В большом меню Shop by Department на Amazon задержки нет, и промаха тоже. Синий треугольник на схеме — предполагаемый путь курсора. Его вершины: текущая позиция указателя и правые верхний и нижний углы открытого меню. Если следующая позиция попадает внутрь, человек, скорее всего, идёт к подменю, и оно остаётся открытым чуть дольше, даже когда курсор на секунду оказался над соседним пунктом. Вышел за треугольник — подменю переключается мгновенно. Механизм разобрал Бен Кеймeнс в 2013 году и выпустил по мотивам плагин jQuery-menu-aim, который позже применили в меню Khan Academy. Приём описывает геометрию намерения пользователя, поэтому живёт дольше любой библиотеки. #javascript #фронтенд

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-режим браузера. Про довод «в приложении можно то, чего нельзя в вебе» автор напоминает, что иконку на домашнем экране сайт ставит сам, а офлайн на вебе давно работает. #фронтенд

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