Фронтенд

🚀 День 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

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

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

Несмотря на кадровый голод в IT занято огромное количество лишних людей деятельность которых в общем-то бесполезна. А все что бесполезно как известно приносит только вред. Возьмем к примеру новомодную отрасль UI/UX которая по задумке должна улучшать пользовательский опыт - так называемый "экспириенс". На планете существует целый зоопарк разных форматов дат: 1 ноября 2000, 01.11.2000 и т.д и т.п. Это мелочь, но и в мелочах можно тот самый "экспириенс" взять да и улучшить. И он был повсеместно "улучшен" до формата "3 года назад". Как правило без какой либо возможности вернуть нормальную дату.

Теперь просто хочется простереть руки к небу и крикнуть за что это мне?

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

Верстаем письмо на React, чтобы оно корректно отображалось во всех почтовых клиентах

Чтобы свёрстанные письма хорошо выглядели на десктопе и мобильных, нужно знать, как почтовые клиенты поддерживают возможности CSS и HTML. И на практике это не всегда просто. Например, Gmail отбрасывает атрибут style целиком, если встречает в нём цвет, заданный как rgb. В итоге даже в 2025 году вёрстка писем нередко сводится к написанию таблиц и атрибутов наподобие align, valign, bgcolor и т.д.

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

Наша команда решила оценить для создания писем библиотеку React Email. Она предоставляет компоненты, которые генерируют HTML и CSS для корректного отображения во всех почтовых клиентах. Письмо можно посмотреть в браузере и отправить на почту. Под капотом всё равно останутся таблицы, но писать их руками не придётся.

На примере отправки через сервис Yandex Postbox покажем, как это работает.

Начало работы. Установим библиотеку @react‑email/components и клиент для работы с почтовым сервисом AWS SESv2 — Postbox поддерживает эту версию клиента.

npm install @aws-sdk/client-sesv2 @react-email/components

Создадим компонент, который будет генерировать письмо:

email.tsx
import * as React from 'react';
import { Button, Html } from '@react-email/components';

export function Email(props) {
   const { url } = props;

   return (
       <Html lang="en">
           <Button href={url}>Click me</Button>
       </Html>
   );
}

Больше компонентов — в документации.

Создание аккаунта в облаке

1. Создадим сервисный аккаунт в том же каталоге, в котором находится адрес. Если создать сервисный аккаунт и адрес в разных каталогах, при попытке отправить письмо возникнет ошибка.

2. Назначим сервисному аккаунту роль postbox.sender.

3. Для отправки письма с помощью SDK создадим статический ключ доступа. Важно надёжно сохранить идентификатор и секретный ключ. После того как вы закроете окно, параметры секретного ключа станут недоступны.

Отправка письма. Ключи доступа можно передать в конструктор SESv2Client явно, как показано ниже, указать их в переменных окружения или использовать конфигурацию AWS CLI.

import { render } from '@react-email/components';
import type { SendEmailCommandInput } from '@aws-sdk/client-sesv2';
import { SendEmailCommand, SESv2Client } from '@aws-sdk/client-sesv2';
import { Email } from './email';
import React from 'react'


const sesClient = new SESv2Client({
   region: 'ru-central1',
   endpoint: 'https://postbox.cloud.yandex.net',
});

const emailHtml = await render(<Email url="https://example.com"/>);
const emailText = await render(<Email url="https://example.com"/>, {
   pretty: true,
   plainText: true,
});

const email: SendEmailCommandInput = {
   Content: {
       Simple: { 
           Body: {
               Html: {
                   Data: emailHtml,
               },
               Text: {
                   Data: emailText,
               },
           },
           Subject: {
               Data: 'Тестовое письмо',
           },
       },
   },
   Destination: {
       ToAddresses: [
           'bob@example.com'
       ],
   },
   FromEmailAddress: 'Alice <alice@example.com>',
}

const command = new SendEmailCommand(email);

const result = await sesClient.send(command);
console.log(result);

Чтобы удобно запускать скрипт, установим tsx loader:

npm install --save-dev tsx

Теперь запустим скрипт, передав в переменные окружения ключи сервисного аккаунта:

AWS_ACCESS_KEY_ID=... AWS_SECRET_ACCESS_KEY=... node --import @nodejs-loaders/tsx index.tsx

В консоли увидим ответ от Postbox. Если письмо отправлено успешно, то в ответе будет MessageId.

{
 '$metadata': {
   httpStatusCode: 200,
   requestId: undefined,
   extendedRequestId: undefined,
   cfId: undefined,
   attempts: 1,
   totalRetryDelay: 0
 },
 MessageId: 'D8BT2CX3IDK2.2HZQ4CE0E8CRL@ingress1-sas'
}

Если захотите отправить несколько писем в цикле, рекомендуем добавить в код задержку между отправками, чтобы не превысить квоту.

ИИ-агенты могут убить привычный нам Интернет, e-commerce и заодно порушить весь рекламный рынок

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

Но с приходом в нашу жизнь ИИ-агентов эта модель устаревает:

• ИИ-агенты не реагируют на рекламу так, как люди. Они не подвержены эмоциям, не кликают на баннеры и не нуждаются в вдохновляющих слоганах.

• Они совершают покупки рационально, сравнивая цены, характеристики и сроки доставки автоматически, без влияния брендинга и маркетинговых трюков.

• Сайты становятся интерфейсом для ботов, а не для людей: ИИ-агенты требуют структурированных данных, а не красивых витрин и описаний.

И по мере того, как ИИ-агенты будут все чаще совершать покупки в интернете вместо нас, встает вопрос изменений не только привычной инфраструктуры E-commerce, но и в ценности диджитал рекламы в сети.

Руководители e-commerce-компаний уже называют массовое появление ИИ-агентов «экзистенциальной угрозой» для всей отрасли. Стартап New Gen предлагает решение, позволяющее адаптироваться к этой новой реальности, предоставляя разные интерфейсы для людей и агентов, что помогает брендам хоть на первых порах не потерять позиции на рынке электронной коммерции.

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

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

А еще в этом же видео профессор Эндрю Ын говорит о подходе "кубиков Лего", как о современном принципе построения сложных систем из множества готовых инструментов и модулей, о чем я буквально на днях писал на Хабре, правда в другом контексте, как о способе создавать и монетизировать свои микро-продукты.

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

Контент сайтов будет генерироваться ИИ в реальном времени под конкретного пользователя или агента. А интерфейсы станут «невидимыми», взаимодействие будет происходить через голос, а там глядишь и через нейроинтерфейсы.

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