Обновить

Фронтенд

Сначала показывать
Порог рейтинга
Уровень сложности

Карта чёрная, в консоли ни одной ошибки. Три бага одной подложки

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели4.3K

Мы переводили карту парковок с растровой подложки на векторные тайлы и получили чёрный экран. Без единой ошибки в консоли: ни исключения, ни предупреждения, идеально чистый лог. Единственной уликой оказалось отсутствие запросов за тайлами — воркер MapLibre не попал в сборку, потому что Rollup не умеет разбирать шаблонную строку в new URL(…, import.meta.url). Разбираем этот баг и ещё два из той же серии: как смена города убивала Leaflet и почему событие load у карты не наступает никогда.

Читать далее

Новости

Неудаляемый бэкап: три режима Object Lock и цена неверного выбора

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели4.3K

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

Так может случится в любой момент. Например, если будет взлом  инфраструктуры компании, у которого основной источник общения с клиентов это сайт и почта и “резервные копии хранились на одном сервере с сайтом”, то будет очень печально, тк восстановить будет крайне сложно.

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

Читать далее

Теперь Яндекс показывает рекламу посетителям прямо на вашем сайте

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели6.1K

На сайтах со встроенными Яндекс Картами стала появляться реклама.

Причём речь не только о сложных интеграциях через API. С рекламой можно столкнуться и на обычной карте, которую когда-то сделали через Конструктор и встроили на страницу контактов.

Для владельца сайта ситуация выглядит, мягко говоря, не очень приятно. Карта — часть интерфейса сайта. На ней мы хотим показать свой офис, магазин или схему проезда, а теперь внутри этого блока посетителю может демонстрироваться чужая реклама.

Отключить её можно. Но уже за деньги. Вот такая вот фигня, собачка…

Я решила разобраться, что изменилось у Яндекса и есть ли сейчас нормальная альтернатива. И здесь неожиданно интересным оказался Конструктор карт 2ГИС.

Читать далее

Публикуйте инструменты, а не пиксели: собираем WebMCP‑магазин на React и считаем грабли

Уровень сложностиПростой
Время на прочтение23 мин
Охват и читатели5K

Представим обычный интернет-магазин. Пользователь открывает каталог, вводит «наушники» в поиск, включает фильтр наличия, задаёт цену до 10 000 рублей, открывает карточку и добавляет товар в корзину. Шесть вполне понятных действий. Если их выполняет человек, всё хорошо. Если за дело берётся AI-агент, начинается небольшой квест: прочитать страницу, найти поле, угадать назначение переключателя, нажать кнопку, проверить результат и не купить случайно кофеварку вместо наушников.

А что, если сайт сам скажет агенту: «Я умею искать товары, показывать карточку и добавлять позицию в корзину. Вот названия функций, вот параметры, вот ограничения»? Эту задачу решает WebMCP — экспериментальный браузерный API, который позволяет странице объявлять инструменты для AI-агентов прямо из JavaScript или HTML-формы. Черновик и обсуждение стандарта открыты в репозитории Web Machine Learning Community Group.

Меня зовут Денис Смирнов, я ведущий .NET-разработчик, в профессии больше пяти лет. Это не пересказ новости. Соберу небольшой магазин электроники на React, добавлю три инструмента, прогоню проверки и покажу четверо граблей, на которые наступил. Грабли оказались интереснее рабочего примера.

Читать далее

Полезные новшества ECMAScript 2026

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели6.5K

JavaScript получает новый стандарт языка каждый год. Некоторые редакции представляют синтаксис, который меняет то, как программы пишутся или как они выполняются. Версия ECMAScript 2026 (ES17) представила набор полезных возможностей, которые мы рассмотрим в этой статье. Эти возможности добавляют API для задач, которые сейчас решаются с помощью небольших утилит, повторяющихся проверок или обходных путей, подверженных ошибкам.

Читать далее

Одна карточка на всех без сервера: детерминированная генерация, RLS и флаг retired в шахматном бинго

Время на прочтение4 мин
Охват и читатели4.8K

Разбираю несколько инженерных решений из небольшого браузерного проекта: бинго на шахматных задачах Lichess без собственного сервера. Как получить одну и ту же карточку у всех игроков в один день с помощью детерминированного сида, почему запись из пула данных нельзя удалять (флаг retired), как записать правило «одна партия в день» частичными уникальными индексами и почему политик RLS в Supabase недостаточно: по умолчанию клиентским ролям выданы права, в том числе TRUNCATE, который RLS не проверяет.

Читать далее

Субтитры с переводом в расширении Chrome: звук вкладки в MV3, один поток вместо двух сервисов

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели6.3K

Расширение Chrome показывает субтитры с переводом поверх созвона в браузере, бот в звонок не заходит. Разбираю три места, где ушло больше всего времени: захват звука вкладки в Manifest V3, переход с двух сервисов на один поток с транскрипцией и переводом, и ошибку в счётчике минут, из-за которой время списывалось в тишине.

Читать далее

История npm‑библиотеки morphing‑scroll

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели8.3K

Хочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи.
Библиотека решает ряд проблем и ограничений связанных с дефолтным поведением браузерного элемента скролл.

Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.✨

Читать далее →

Как я «изобрел» свой VSCode + Excel

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели6.9K

Хотя… не изобрел, а собрал. Я собрал свой MVP Simple Data Editor, так как хотел простое и миниатюрное решение, работающее везде, где есть браузер и чтобы при этом не происходило никаких обращений во вне. Но не только. Основная идея в реализации возможности представления одной и той же информации, но в разных форматах: текстовом, табличном ну а в перспективе и в графическом.

Читать далее

React 19.3

Уровень сложностиПростой
Время на прочтение14 мин
Охват и читатели7.1K

React 19.3 уже доступен в npm!

В прошлом году мы представили View Transitions и Fragment Refs как новые экспериментальные API, которые готовились к появлению в React. Теперь оба API получили стабильный статус в React 19.3.

В этой статье разберём, как они работают, а также рассмотрим другие заметные изменения в этом релизе.

Читать далее

Откликов все больше, ответов все меньше. Что показали 16 000 вакансий в моей базе

Время на прочтение18 мин
Охват и читатели13K

Всем привет! Этой весной я искал работу, и в какой-то момент пришел к тому, что на сами отклики у меня уходит минут тридцать, а весь остальной вечер я трачу на то, чтобы просто обойти площадки и посмотреть, не появилось ли чего нового. То есть я не работу искал, я вкладки открывал.

Вечером открываешь hh, листаешь. Потом пару телеграм каналов, где вакансия тонет за час. Потом вспоминаешь компании, куда хотелось бы попасть, и идешь по их карьерным страницам руками, а их штук пятнадцать, и на половине ничего не меняется неделями. Половину ты уже видел вчера. Закрыл вкладки, на завтра все то же самое.

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

Далее две части. Сначала про рынок и про то, что видно из базы, когда вакансии можно посчитать. Потом техническая кухня: что ломалось, что я чинил и какие места, по-моему, полезно знать заранее. Я разработчик, но парсинг, нормализация данных, Postgres, эмбеддинги и инфраструктура были для меня новыми, так что граблей набралось прилично.

И сразу заранее: все цифры ниже про мою базу, а не про рынок целиком. Спорить с ними можно и даже нужно :-)

Читать далее

Кнопка нажата, а ответа нет: как не потерять действие пользователя и не наделать дублей

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели9.6K

Пользователь нажал кнопку, сеть пропала, а браузер не знает, дошёл ли запрос до сервера. Повторите запрос — можно получить дубль. Не повторяйте — потеряете действие.

Показываю схему, которая решает обе проблемы: API без toggle, ключ идемпотентности в PostgreSQL, очередь в IndexedDB, Service Worker и проверка офлайна в Playwright. Это не полный offline-first — только защита действий в момент обрыва связи.

Разобраться с повторами

Протез для силы воли или харнесс для думскроллинга

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели7K

Раньше я не знал, сколько времени провожу в ленте Х, и это меня сильно напрягало. На телефоне есть удобные приложения для контроля экранного времени в любых приложениях, но десктоп это совсем другой мир. Здесь всё приходится собирать самому, по частям, и работает оно хуже.

Не то чтобы я не пробовал разные расширения для контроля думскроллинга в браузере. Но у всех был один дефект: запрет легко обойти. Причём величина усилия на обход заметно ниже буфера лени. Всё настолько просто, что лень не успевает сказать своё «да ладно, забей». На телефоне этот порог тоже невысокий, но там можно заморочиться и поставить родительский контроль или сторонние приложения, которые создадут больше трения.

В десктопе с этим сложнее. Но когда я писал статью про харнесс, я подумал: вот бы собрать такой же структурный подход и для себя самого. Чтобы нарушения не возникали не потому, что у тебя такое соглашение, а потому, что сам путь к обходу закрыт. В той статье я разбирал Atomic Habits и его подходы к закреплению полезных привычек. Но там же есть и методы против вредных: как помогает даже самое простое «убрать с глаз долой». И самый полезный инструмент в этом наша лень.

Так я решил применить эти методы и собрать свой небольшой харнесс по контролю думскроллинга, обходить который обычно просто лень.

Этим софтом стал Curfew, расширение для браузера, которое контролирует и лимитирует дневные бюджеты на «вредные» сайты.

Читать далее

Ближайшие события

Форма, которая знает слишком много: как превратить правила СХД в состояние UI

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели4.8K

История о том, как одна команда разработала сложную форму для систем хранения данных. Делимся ценным опытом, о том как имея три разных сценария и один интерфейс, мы избежали дублирования состояния и хаоса в обработчиках.

Перенять наш опыт

Это больше не ХИ‑ХИ: как использовать ИИ — и не разучиться думать

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели8.9K

«Ну понятно, до нормального результата ещё года два». Так можно было сказать про нейронки… примерно полгода назад. И вот мы здесь. ИИ уже делает кучу вещей сильно быстрее и проще.

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

Привет! Это Денис Румянцев, руководитель продуктовой разработки в Профи.ру. Я не сторонник ни полного восторга от ИИ, ни идеи «давайте всё запретим, пока не поздно». 

Читать далее

Diablo II, римские стратегии и Prince of Persia: что фронтенду стоит перенять у геймдева

Время на прочтение21 мин
Охват и читатели13K

В Diablo II характеристики навыков хранятся в обычных текстовых файлах, поэтому для изменения баланса игру не нужно пересобирать. В Prince of Persia 1989 года поведение персонажа описано через состояния и переходы, а в градостроительных стратегиях сборщик налогов сам выбирает следующее действие по набору правил.

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

Речь пойдет о контрактах и моках, конечных автоматах, событийной модели, pattern matching и деревьях поведения.

Читать далее

Как я перестал измерять MVP количеством функций: история создания Prosnix

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели6.2K

В первом приложении мне было легко понять, чем заняться дальше. Всегда находилась ещё одна функция, которую можно добавить: новый экран, аналитика, AI, оплата. Каждая закрытая задача давала понятное ощущение прогресса. Продукт становился больше, код — сложнее, релизы — заметнее.

После большого релиза я задал себе неприятный вопрос: что именно я доказал? Что могу довести приложение до работающего состояния — да. Что людям нужна каждая из реализованных функций и они готовы возвращаться — уже не факт.

Со вторым проектом я решил поменять порядок работы. Не начинать с большого roadmap и каталога возможностей, а сначала сформулировать одно повторяемое действие, которое можно проверить. Так появился Prosnix — Telegram Mini App для личных экспериментов после пробуждения.

Это не история успешного запуска. Пользователей пилота и подтверждённых результатов пока нет. Это история о том, как попытка сделать более узкий MVP изменила мои технические решения — и почему даже одна простая продуктовая метрика потребовала state machine, нескольких версий и отдельного отношения к исходным данным.

Как устроен проверяемый MVP

Next.js, внешний API, Zod, нормализация и controlled fallback

Время на прочтение11 мин
Охват и читатели5.9K

Внешний API возвращает данные в своей модели. Названия полей, вложенные объекты, изображения, цены и правила пагинации принадлежат provider. UI приложения обычно работает с другой моделью. Если компонент читает event._embedded.venues[0].city.name напрямую, структура внешнего ответа распространяется по интерфейсу. Изменение API затрагивает карточки, detail page, search, metadata и тесты.

В App Router внешний запрос можно выполнять на сервере. Server Components работают с fetch, а серверный код не попадает в клиентский bundle. API key при такой схеме остаётся вне браузера. Документация Next.js описывает server-side data fetching для App Router. В учебном проекте EventMap внешний источник событий проходит через server API слой.

Читать далее

Я профессионально создаю библиотеки 5 лет

Время на прочтение5 мин
Охват и читатели5.8K

7 лет назад я опубликовал в npm свою первую библиотеку — custom‑border‑mixin. Тогда я на неделю пропал, просто чтобы в своё удовольствие написать SCSS‑миксин. Если вам интересно, что весёлого может быть в SCSS, просто посмотрите на хелпер:

Или все-таки поменял?

Polymorpheus: очень нужная деталька пазла Angular

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели7.3K

Angular — отличный фреймворк. А ещё он очень заботливый: множество вещей уже продумано за вас, а когда всё-таки требуется что-то нестандартное — существующее поведение обычно легко переопределить или расширить.

Сегодня я хочу поговорить об одном таком случае и показать инструмент, который я создал много лет назад и с тех пор считаю абсолютной базой для Angular. Речь пойдёт о маленькой библиотеке Polymorpheus, которую мы в Taiga UI используем буквально повсюду, когда нужно отобразить какой-нибудь динамический контент.

Читать далее
1
23 ...