👁 9 день как пилю свой проект для замены Google Forms.
- Добавил картинку в заголовок формы
- Иконку
- Настройки верстки
- Красивое отображение элементов в редакторе и в просмотре
Хабра-капчи
Попытка залогиниться на "Хабр" практически всегда наталкивается на запрос решения капчи. Сейчас это настолько модно, что не только "Хабр", но, наверное, каждый второй сайт показывает капчу. Обычно, простую от Cloudflare. Но на "Хабре" капчи становятся всё сложнее и сложнее. Или - забавнее и забавнее. В пост нельзя добавить несколько изображений, поэтому вот один, но зато свежий, пример:
Это в чём-то лучше, чем другие варианты, где в качестве образца указаны наборы клякс из теста Роршаха, которые требуется угадать и сопоставить с размытыми картинками. Но, всё же, чем же из изображённых предметов можно писать? Может, бургером? Выдавливая соус?
Да, да, имелась в виду клавиатура. Для мощной LLM это, скорее всего, очевидно. Но не для роботов человеков-пользователей.
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 и очень давно не обновлял).
Основная идея в том, чтобы:
Как можно больше проработать паттернов вайбкодинга
Как можно качественнее научиться работать с дизайнерской точки зрения
Научиться учить агента новой информации (новый пишу на jaspr - а на нем крайне мало информации - и скорее всего не обучалась ни одна модель, поэтому вайбкодить на нем тяжело - если агенту дать задачу без правил и промптов - он не сможет завершить задачу и закопается в ошибках).
Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)
Восстановил часть промптов которые были раскиданы по проектам.
Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..
Исходный код открытый, поэтому буду делиться результатами когда завершу делать :) (надеюсь что скоро)
Пока что было две идеи:
Сделать в виде интерактивной игры (получились вырвиглазные кнопки
Каким-то образом придумать бенто..
Сложность с бенто и с игрой в том, что если всем моделям тяжело делать даже по картинке ассимитричные вещи и то, на чем они не обучались.
Некоторый текст и данные на картинке ниже абстрактные.
Спасибо за ваше время и хорошего дня!
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.
Как было раньше?
Создаем переменную/свойство (Signal, BehaivorSubject, Observable, неважно)
Инжектим и подписываемся на ActivatedRoute
Получаем параметры маршрута
Записываем в BS/Signal
😵💫😵💫😵💫
Манипуляций довольно много, но мы все к этому привыкли и это кажется нормальным.
Но с withComponentInputBinding() все стало намного проще:
1. Создаем сигнальный инпут... и...
Вот и все!
Никаких дополнительных манипуляций, и значение «у вас в кармане». Все, что вам нужно, чтобы это работало, — это передать withComponentInputBinding() в качестве аргумента в provideRouter().
Функция не новая (кажется, появилась в Angular 16), но я редко ее видел в проектах.
Немного технической информации из документации:
🔍Маршрутизатор передает данные в input() из:
Параметров запроса (?page=1&sort=asc)
Параметров пути и матрицы (/users/123;details=true)
Статических данных маршрута (data: { role: 'admin' })
Результатов резолвера (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?:)