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

Когда делаешь задачи по оптимизации скорости загрузки, то надо смотреть не исходя из показаний своей консоли, а того, что видят пользователи. Поэтому надо залогировать скорость загрузки из-под юзеров и построить график. Это значит понадобится бекенд, где-то данные хранить и все такое, задача увеличивается до каких-то больших размеров, а звучала-то просто.

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

Так появился Perf Ninja, который будет представлять из себя one-button-deploy сервис на NextJS. Выполняет только нашу простую задачу, данные хранит в вашей Supabase, а код крутится в вашем Vercel.

Такой коммитмент, чтобы не слиться.

Я тут сделал калькулятор для How Much In и по этому делу решил запоститься на HackerNews.

Если у кого есть там аккаунт, буду рад лишнему плюсику, хотелось бы вылезти в основную категорию show.

И кстати дизреспект Framer, пришлось съехать с него. Я ж там оплатил на год подписку на минимальный тариф, потом гугл меня выкинули из play store из-за того, что не было страницы privacy, а когда я захотел создать ее, то фрэймер сказал, что за твои жалкие 60 долларов в год ты можешь опубликовать только 1 страницу и экспортировать тоже ничего не дадим.

Пришлось пожертвовать анимациями, экспортнуть просто через хромовское расширение Single File и переехать в мой любимый Vercel. Ну хоть гугл сразу разбанил.

Прошла первая неделя как я безработный, но руки-то чешутся и надо что-то делать.

Вот сидел я себе, смотрел кейноут конфы Vercel Ship. Там показали возможность комментирования на сайте, сделанном на NextJS прямо кликом по месту. И я подумал ведь правда, когда мы работаем с дизайнером в Figma, мы можем оставлять комментарии прямо на артборде, а когда говорим про верстку, то обсуждение верстки (или в целом реализации интерфейса по макету) уходит куда-то в инструменты общения.

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

Кажется, может полететь, поэтому с выходных я начал пилить это расширение (на видео), хаха. Пожалуйста, отговорите меня или вдруг такое уже есть?

Апдейт по прогрессу с экстеншеном. Появилась авторизация, накидал модель предметной области, пока она будет простой:

- Проект (проект мы можем назначить на произвольный домен, условно есть проект X, я смотрю его на localhost, а заказчик приемку осуществляет на продакшене, дальше инвайтит меня в проект, я в расширении вижу этот проект X и назначаю его для localhost, ну и вижу на своем локалхосте комментарии заказчика при условии, что версия у нас одинаковая и верстка будет совпадать)
- Доступ к проекту (регулируем доступ к проектам для пользователей)
- Тред (точка на странице URL, к которой привязаны комментарии)
- Комментарий (ну тут, собственно, понятно)

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

И да, как же круто в 2к24 делать новые проекты, когда есть хотя бы shadcn/ui и ShipFast, хоть последний и стоит $200, но моя идея его покупки в комьюнити, посмотрим даст ли эта инвестиция какого-то профита для первоначального маркетинга или нет.

Как говорится, я вас заебу одним аккордом, но прошел еще один день и вроде как комменты ожили, а это можно сказать событие.

Такими темпами к концу недели, думаю, что-то полуживое будет и в продакшене.

Feeling enthusiastic...

Если у кого есть желание побыть бета-тестером, то вот тут можно поиграться:

https://www.testing-toolbar.com/shared/6655c4625663311108dff9a1/JvBYke6W-9vXY5WHdoWuX

По ссылке можно авторизоваться через email (google пока в тест-окружении поэтому авторизовываться могут только разрешенные пользователи), дальше принять приглашение в проект (кнопка Join) и установить распакованное расширение в хроме. Периодически в этом процессе можно получать 500-е, но сейчас все работает на бесплатных shared тарифах, поэтому иногда похоже вылетаю за таймауты.

Дальше заходим на эту страницу, мои текущие комменты на ней.

Запускаем экстеншен (у него пока калечная дефолтная иконка в виде какой-то красной загогулины от vite-плагина для создания экстеншенов), он должен подцепить авторизацию. Нажимаем на шестеренку и выбираем проект nextjs, обновляем страницу и снова запускаем экстеншен, дальше должны загрузиться комментарии в блоке Edge and Node.js Runtimes.

Контрактная разработка

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

Сегодня о том, как в данном случае сделать красиво. Мы все равно будем заниматься мокированием, но писать реализацию сразу с реальными запросами из сетевого слоя приложения.

Как показывает практика даже опытные разработчики не все знают об этом методе, поэтому поехали. Поможет нам mswjs. Эта штука умеет мокировать как бекенд реализацию, так и предоставлять моки для браузерных приложений. Суть такая, что эта штука поднимает service-worker, который перехватывает запросы вашего приложения, если запрос описан в моках, то отдаст мок, если не описан, то может падать, а может проксировать на реальный url.

При этом вы пишете настоящую реализацию, которую не надо потом доправлять. Все, что в конце потребуется - это выпилить мок хэндлер и начать ходить на реальные ручки. Если, конечно, ваш “контракт” фронта с бекендом не протух за время разработки, такое как мы знаем тоже частенько бывает.

Скрин как это работает на базе одного сайд-проекта.

Лучший друг разработчика StackOverflow ChatGPT

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

Я даже сейчас не про кодген. Если раньше чтобы ответить на неочевидные вопросы по инструментам/сервисам надо было шерстить документацию, то сейчас достаточно спросить у AI. Сложность только в составлении правильного промта и учете всего нужного контекста.

Последний раз мне надо было разобраться с ресайзилкой картинок через воркеры CloudFlare. На каждый запрос она делает subrequest в ориджин сервер и мне казалось всему виной отсутствие кеша. Спросил у ChatGPT «должен ли cloudflare worker перезапрашивать файл с origin сервера на каждый запрос?» и получил ответ:

By default, a Cloudflare Worker does not cache responses or automatically reuse previously fetched resources unless you explicitly implement caching. However, you can control whether a Worker re-fetches a file from the origin server on each request by managing caching behavior.

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

Для усмирения своего синдрома самозванца я хотел самостоятельно подвести итоги первого полугодия на новом месте, но внезапно HR-ы решили завезти Performance Appraisal процедуру и пришлось это делать в любом случае. В общем-то неплохой инструмент для самоуспокоения, если сделано, действительно, достаточно, лол.

Итак вот мой список what I've done с июня по декабрь 2024 (с учетом, что июнь это нулевая точка, когда я вообще ничего про состояние дел на проекте не знал):

- в первые пару недель собран первый список технического беклога
- ускорены билды всех проектов (кроме нового екома, там моего участия не было)
- внедрен Sentry для логгинга ошибок
- заведен документ по алертам и настроены правила на эти алерты в Sentry, чтобы мы вовремя узнавали о фронтовых инцидентах на продакшене
- в еком собираются метрики web vitals и мы последовательно улучшаем их, следим за их изменением
- построено нормальное взаимодействие с командами, с лидами команд проводятся регулярные 121
- начата кросс-командная коммуникация между порталом/екомом, ожил общий чат фронтовых команд в slack
- запущен процесс технических воркшопов по сложным задачам, проведено 2 таких митинга и пишется документ с логом таких митингов
- запущено e2e тестирование фронтом для всех проектов
- настроен сбор кавераджа e2e
- в GitLab заведен механизм запрета релизов с понижением кавераджа с возможностью обхода под апрув
- запущен первый обучающий курс по тестам e2e
- исправлена проблема утечки памяти SSR на еком

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

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

Мы тут месяца 3 плотно угораем по Web Vitals, много работали над улучшением скорости загрузки, но теперь дошла очередь до INP.

Interaction To Next Paint - метрика, которая "упрощенно" отвечает за то, как ваш сайт тормозит или не тормозит на устройстве пользователя.

В общем мы видим тут две ступеньки, первая связана с переходом на React 19 + React Compiler. Да, мы решили не ждать и попробовать заюзать вместе с компайлером в продакшене и на удивление это тот случай, когда ребзя из меты не просто так едят свой хлеб. Реально обновление либы дало 30% буста по INP.

Вторая ступенька связана с более неочевидным моментом. Я профилировал на старом андроиде и обнаружил, что в таблицах светится либа записи реплаев от Sentry. Отключив сентри для теста, она все равно осталась, оказалось, что реплаи были включены еще и в posthog.

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

Вайб кодинг

А вы че, ребята, все программируете? А сейчас уже не программируют, а вайб-кодят

Я навайбкодил себе обновление сайта

https://egor.sh
https://egor.sh
https://egor.sh

Конечно, рандомный чел вряд ли может сделать с помощью агента что-то вменяемое, но если ты знаешь что надо или хотя бы имеешь представление как сделать, то это буст +100 к ловкости.

Пример из моего кейса. Мне пришла идея, что на сфере было бы неплохо нарисовать «sh», я ж не просто так домен красивый купил, надо его подсветить и промт для курсора быстро сгенерировал решение, но буквы оказались где-то сбоку и сначала вообще были не видны до клика. В итоге я провозился пару часов, чтобы нормально заработало, без AI я бы проковырялся день, я думаю.

В общем через год-два если разраб не будет юзать AI на полную катушку, то индустрия его выкинет на боковину истории, надо перестраиваться, что я в том числе и пытаюсь делать.

Alright, Egor. Here’s your reality check.

You’ve got the experience. You’ve got the title. You’ve built things, led teams, and earned respect. But here’s the brutal truth:

You’re plateauing. Not because you lack skill — but because you’re operating like a high-performer inside someone else’s system. You’re optimizing within boundaries instead of breaking past them. You’re playing to maintain excellence, not to redefine it. And that’s a massive risk for someone like you, who should be several levels higher — in impact, in reach, and in vision.

И пять контрольных...

1. You’re spending too much time polishing rather than disrupting.

2. You’re still tied to your identity as “the frontender who builds stuff.”

3. You’re underestimating marketing and overestimating product.

4. You’re rationalizing a slow pace by hiding behind “quality.”

5. You’re avoiding the pain of reinvention.

Если у вас есть какая-то более-менее история взаимодействия с этим чатом, то промт будет в первом комментарии. Я, честно сказать, удивлен насколько точно он все расписал.