Фронтенд

afterEveryRender и afterNextRender

В Angular 20 afterRender был переименован в afterEveryRender, и это очень логично, так как теперь он более четко отражает суть (нейминг решает). Сам afterRender (далее afterEveryRender) и его брат afterNextRender появились в версии 17. Рассмотрим, почему эти два мощных инструмента управления рендерингом — не просто альтернативы ngAfterViewInit, а полноценные хуки жизненного цикла с бесшовной поддержкой SSR!

Это хуки?
Да! Это хуки нового типа, которые выполняются после рендеринга компонента:

• Они не заменяют ngAfterViewInit/ngAfterContentInit, а дополняют их

• Включают гранулярные реакции на рендеры, включая обновления

Почему идеально подходит для SSR?
Главное преимущество: обратные вызовы выполняются только на клиенте!
✅ После гидратации (в SSR)
✅ После первоначального рендеринга (в CSR)
✅ Больше никаких ошибок «документ не определен»

Использование:
constructor() {
// 🚫 Не запускается на сервере
// ✅ Запускается только один раз после загрузки браузера!
// 📊 Идеально подходит для однократной инициализации
afterNextRender(() => {
console.log('Next');
});

// 🚫 Не запускается на сервере
// 🔄 Запускается после каждого цикла обнаружения изменений
// ✨ Отлично подходит для обновлений, зависящих от DOM
afterEveryRender(() => {
console.log('Every');
});
}

Когда использовать?

afterNextRender

• Одноразовые операции (инициализация библиотеки, загрузка данных)

• Безопасная замена ngAfterViewInit для SSR

afterEveryRender

• Отслеживание изменений DOM (измерения элементов, позиции)
  
  ⚠️ Внимание: может повлиять на производительность

Основные выводы

• Интегрировано в систему жизненного цикла Angular

• Автоматический пропуск на стороне сервера - больше никаких хаков isPlatformBrowser!

• afterNextRender - "один раз после рендеринга"

• afterEveryRender - "после каждого обновления"

"Я пока не использовал afterEveryRender в своих проектах - есть ли у вас практические примеры использования? Поделитесь в комментариях!"

Больше об 🅰️ngular в моём Telegram-канале

JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году? 

Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!

Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.

Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.

Всего на митапе будет 7 докладов, где расскажем:

• как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;

• какие свежие css-спецификации могут упростить ежедневный кодинг;

• как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;

• что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)

и многое другое, что поможет в работе со сложными интерфейсами!

Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.

Крутая история инди-хакера.

Денис работал программистом, а в свободное время запустил браузерное расширение, которое затем продал за $100k.

https://youtu.be/zbsXZ_xRMOM?si=EmwBb7umAytf4IRk

Очень вдохновляет, не могу не поделиться

Обновил сайт знакомств для айтишников

Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.

Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.

Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.

Как было раньше можно посмотреть в архиве интернета, с 2012 года.

🚀 День 5: Тестирую управление общими папками в своем конструкторе форм. Релиз все ближе.

Так же запускаем череду юридических проволочек, чтобы стать Оператором Персональных Данных

Попробую публиковать серию постов про мои новые эксперименты с вайбкодингом.

Не использую v0, bolt - так как они совсем почти no-code + генерят react приложения, а мне интересно сейчас проработать поработать с Dart проектами.

Начал с крафта нового сайта для xsoulspace.dev (мой основной сайт по проектам, давным давно писал на flutter и очень давно не обновлял).

Основная идея в том, чтобы:

1. Как можно больше проработать паттернов вайбкодинга

2. Как можно качественнее научиться работать с дизайнерской точки зрения

3. Научиться учить агента новой информации (новый пишу на jaspr - а на нем крайне мало информации - и скорее всего не обучалась ни одна модель, поэтому вайбкодить на нем тяжело - если агенту дать задачу без правил и промптов - он не сможет завершить задачу и закопается в ошибках).

Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)

Восстановил часть промптов которые были раскиданы по проектам.

Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..

Исходный код открытый, поэтому буду делиться результатами когда завершу делать :) (надеюсь что скоро)

Пока что было две идеи:

1. Сделать в виде интерактивной игры (получились вырвиглазные кнопки

2. Каким-то образом придумать бенто..

Спасибо за ваше время и хорошего дня!

P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(

P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..

Почему фидбек пользователей это важно?

Нам написал пользователь из Японии: “The trans result is wrong.result is wrong.” и отправил скрин бага PDF где весь контент сломался.

Я сразу понял, что дело в шрифтах и попросил нейросеть ChatGpt o3 сгенерить мне на 50 языках тестовый текст, чтобы проверить все шрифты и пофиксить. 

После того как сохранил в PDF - все подтверилось, фиксим!

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

Почему мы решили делать именно Конструктор форм?

Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:

1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ. 

2)  Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей. 

У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше. 

Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм. 

Мы хотим видеть одну таблицу с сортировкой по последним и фильтрами по всем ответам/заявкам.

3) Уведомления в телеграм.

4) Встроить оплату и другие виджеты.

5) Кастомные домены.

Почему все сообщества инди-хакеров в России платные?

Давайте создадим свое бесплатное комьюнити для всех 👇👇👇

🖼 🚀 Я почти всегда выбираю ISR в Next.js для контентных сайтов.

Вот почему:

SSR:
- Каждый запрос = генерация страницы

SSG:
- Обновить контент = пересобрать весь проект
- При 1000+ страниц билдится часами

ISR - лучший вариант:
- Не генерит страницы сразу. Только по запросу.
- Ключевой параметр: revalidate - определяет, как часто Next.js должен перегенерировать страницы.

Например revalidate: 60 - страница обновляется раз в 60 сек, а между этим - юзер видит кэш из памяти.
Для некоторых контентных сайтов норма обновления данных 8-24 часа. Данные будут в оперативной памяти все это время.

💡 Фишка для SEO:
После деплоя (CI/CD) - страницы прогреваются скриптом, чтобы не ждать первого захода.
Это нужно чтобы поисковые боты видели всегда лучшую версию сайта, а не ждали прогрузки кеша.

📌 Вывод:
Если тебе не нужен real-time обновления сайта - ISR закрывает почти все потребности.

А чем пользуешся ты? Пиши 👇

Задача о новой фиче, которую никто не видит

Задача будет полезна разработчикам веб-приложений и сервисов.

Текст подготовил Артём Шумейко — внештатный райтер, амбассадор Selectel и автор YouTube-канала о разработке.

Условие

В компании «ГигаПост» выпустили долгожданное обновление: на сайте появилась новая кнопка «Подписаться на тему». Интерфейс готов, API поддерживает, проверено на стенде — все работает как часы.

Но после релиза начались странности. Некоторые пользователи видят кнопку, а некоторые — нет. Кто-то говорит, что она появилась через сутки. Кто-то — что только после нажатия Ctrl+F5.

Команда фронтенда уверена — код задеплоен. Бэкенд-эндпоинт отвечает корректно. На тестовом стенде все видно. Даже сам разработчик открывает сайт на своем ноутбуке — кнопка есть.

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

И вот тогда кто-то предложил простую мысль: а пользователи вообще видят свежую версию сайта?

Задача

Почему часть пользователей не видит новую кнопку, хотя код задеплоили? В чем может быть причина? Где в цепочке доставки может остаться старая версия?

Предлагайте свое решение в комментариях. А правильный ответ можно подсмотреть в Академии Selectel.

withComponentInputBinding()
Упрощение работы с параметрами маршрутизатора в Angular.

Как было раньше?

1. Создаем переменную/свойство (Signal, BehaivorSubject, Observable, неважно)

2. Инжектим и подписываемся на ActivatedRoute

3. Получаем параметры маршрута

4. Записываем в BS/Signal

😵‍💫😵‍💫😵‍💫

Манипуляций довольно много, но мы все к этому привыкли и это кажется нормальным.

Но с withComponentInputBinding() все стало намного проще:
1. Создаем сигнальный инпут... и...
Вот и все!

Никаких дополнительных манипуляций, и значение «у вас в кармане». Все, что вам нужно, чтобы это работало, — это передать withComponentInputBinding() в качестве аргумента в provideRouter().

Функция не новая (кажется, появилась в Angular 16), но я редко ее видел в проектах.

Немного технической информации из документации:

🔍Маршрутизатор передает данные в input() из:

1. Параметров запроса (?page=1&sort=asc)

2. Параметров пути и матрицы (/users/123;details=true)

3. Статических данных маршрута (data: { role: 'admin' })

4. Результатов резолвера (resolve: { user: userResolver })

🔍 Приоритеты:
Если есть дублирующиеся ключи, данные переопределяются в порядке выше — резолверы имеют наивысший приоритет и перезапишут остальные.

🚩 Важный нюанс
Если в маршруте нет данных для input(), он получит undefined (например, если параметр запроса удален из URL).

ℹ️ Как задать значения по умолчанию?

✔ Через resolver (чтобы данные всегда были в маршруте)
✔ Через transform в input() (если нужно обрабатывать undefined)

Спасибо разработчикам Angular за эту функциональность 🙏.

Больше об 🅰️ngular в моём Telegram-канале

Мега Bolt или как неройнка заменяет кучу разрабов

Разработка или Vibe Coding продолжается 3 день. Я все ещё использую Bolt и смог сделать вполне рабочий сервис. Вручную программисту потребовалось бы около 1-2 недель на такой функционал.

• Авторизация

• Редактор форм

• Просмотр ответов форм с фильтрами

• Выгрузка ответов в csv

• Шаблоны форм

• Загрузка файлов в хранилище

• Публикация формы для клиента

Все уже работает и связано с БД

Остальные скрины и ДЕМО версию пришлось опубликовать в телеге т.к. тут лимит на 1 картинку.

Я попробовал Bolt. Мои первые шаги в Вайб-кодинге.

На связи Антон 👨‍💻

Мы выбрали идею нового продукта - Form builder. Простой и минималистичный конструктор форм на замену Google Forms.

Для разработки я пробую сервис Bolt.new. Я пишу в промтах ТЗ, нейросеть генерит код за меня.

За 5 запросов я получил функционал, который писал бы пару дней. Конечно с кучей багов и недоработок. Они и в ручной разработке тоже бывают.

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

А у вас какой опыт с вайб-кодингом? Писать про наш опыт с нейросетями в разработке?

Уже 3000+ пользователей у нашего расширения Core Web Vitals Test!

Продолжаем расти 🚀.

Как мы создавали продукт, можно прочитать в этой статье.

Что происходит с JavaScript-кодом внутри V8?

Сначала любая программа подвергается лексическому анализу, который выполняет компонент V8 под названием Scanner. И он разбивает исходный код на поток отдельных токенов в соответствии с лексической грамматикой, описанной в спецификации ECMAScript.

Интересно, что невалидные программы, вроде...

const = = ;

...ещё не выдадут ошибку на данном этапе. Сканер спокойно разобьет нашу программу на токены и отдаст дальше, ведь проверка синтаксической корректности не его зона ответственности. Это зона ответственности Parser, который способен выявить все синтаксические ошибки.

Кстати, одна из ключевых особенностей Parser — генерация Abstract Syntax Tree, которое затем используется для создания байт-кода внутри Ignition. На основе полученных токенов из Scanner генерируется дерево, в котором каждый узел отражает языковую конструкцию: идентификатор, оператор, выражение или функцию.

Например, для кода...

const sum = (a, b) => a + b;

...мы получим следующее дерево:

VariableDeclaration (const)└── VariableDeclarator    ├── Identifier: sum    └── ArrowFunctionExpression        ├── Params        │   ├── Identifier: a        │   └── Identifier: b        └── BinaryExpression (+)            ├── Identifier: a            └── Identifier: b

Об остальном, что происходит на этапах лексического анализа и синтаксического анализа в V8, читайте в статье «Что происходит с вашим JavaScript-кодом внутри V8. Часть 1».

внезапно пришла идея - кажется витает в воздухе новый путь установки пакетов и вообще библиотек в приложения.

Начну как всегда из далека:
В последнее время, так как вместо человека теперь LLM чаще всего обращается к сайтам и приложениям, становится популярно добавлять специально написанные для llm страницы (как раньше sitemap, только теперь md файлы)

Это даже стало правилом для MCP серверов - например Cline добавляет только те MCP сервера, которые LLM может поставить в one shot или имеют llm-install.md файл.

По сути, кажется это становится файлом установки для llm - то есть, llm, следуя инструкциям этого файла ставит и конфигурирует MCP сервер на компьютере (прям как раньше, люди скачивали и устанавливали на windows).

Уязвимостей тут может быть много (потому что промпт может быть corrupt), но если следить за процессом и обязательно проверять команды исполнения - why not?

А теперь - представляете что можно сделать это для любого пакета и любого языка?

То есть, есть библиотека например для интеграции авторизации. Вместо того, чтобы разворачивать её вручную, автор библиотеки может написать llm-install и агент, имея контекст проекта в котором он работает, может целиком его развернуть!🙌
Креды например строго хранить в отдельном фале, не давать доступ (например использовать cursorignore etc..) и такие пакеты можно интегрировать как клиенту и бекенду!

И тоже самое можно применить и для удаления! И таким образом весь процесс интгерации станет больше как лего plug & play 🤩

Game changer?:)

🦥 RxJS defer — ленивая инициализация Observable

defer — это фабрика, которая создает Observable только при подписке, а не во время объявления. Идеально подходит для:

• HTTP-запросов (чтобы избежать преждевременного выполнения)

• динамических данных (которые должны быть свежими при каждой подписке)

• условных потоков (когда Observable зависит от состояния времени выполнения)

📌 Основные варианты использования

1. Свежие данные при каждой подписке

   const freshData$ = defer(() => of(Date.now()));

   // Новая временная метка при каждой подписке()

2. Работа с изменяемым состоянием

   const token$ = defer(() => of(localStorage.getItem('token')));

   // Всегда получает текущий токен, даже если обновлен

3. Условные наблюдаемые

   const api$ = defer(() => isLoggedIn ? http.get('/user') : http.get('/guest') );

4. Генерация случайного значения

   const random$ = defer(() => of(Math.random()));

   // Новое случайное число на подписку

🚫 Ограничения defer

• нет кэширования → используйте shareReplay, если вам нужно повторно использовать результаты.

• нет отмены запроса → объедините с switchMap/takeUntil для управления отменой

⚡Когда следует выбирать defer вместо обычных наблюдаемых?

• данные должны быть свежими при каждом subscribe()

• cоздание наблюдаемого стоит дорого и должно быть отложено

• поток зависит от изменяемых условий (флаги функций, статус аутентификации и т. д.)

Больше об 🅰️ngular в моём Telegram-канале

Написали подробный разбор запуска второго продукта в рамках челленджа 12 проектов за 12 месяцев - браузерное расширение Save Emails from Gmail as PDF.

В статье рассказали про:

• выбор идеи,

• разработку,

• SEO и размещение на UGC-платформах,

• текущее кол-во пользователей.

👉🏻 https://habr.com/ru/articles/915050/

Приглашаем на бесплатный вебинар «Принципы построения архитектуры фронтенд-приложений».

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

📅 Дата: 05.06.2025

⏰ Время: 17:00-19:00 (Мск)

Содержание:

✔️ Архитектура

✔️ Solid

✔️ Grasp

👨‍🎓 Спикер: Щербаков Александр — эксперт в области фронтенд-разработки.

✍️ Записаться на вебинар