Илья Зыкин. Pro Жизнь
137 subscribers
1.1K photos
45 videos
4 files
95 links
Download Telegram
MiniApp

День 8

Сегодня успел сделать несколько простых но нужных вещей.

1. Тостер — так обычно называют функцию/модуль, которые будут показывать сообщения пользователю.

2. EventEmitter. Простейшая реализация Pub/Sub, которая часто позволяет развязать React компоненты.

Зачем? Есть же много готовых решений.

✔️ Во-первых, минимальный объем. Вместо универсальных комбайнов на сотни килобайт и тысячи строк - 4-5 методов.

✔️ Во-вторых, продолжается изучение пользы AI в разработке.

В целом, практически все важные элементы для следующего шага готовы.

Немного чистки, проверки результатов и можно будет постепенно переходить к backend.
🔥2
Илья, как там дела с AI кодингом?

Да нормально все.

Главная боль — наработка кодовой базы с примерами для AI.

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

Инфраструктурные настройки и согласование всех инструментов надо с вниманием к каждой мелкой детали произвести.

Поставил ты роутер, i18n, jest, vite и storybook.

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

Полировка, полировка, полировка.

Пока не наработана эта основа и фундамент — движение дальше, это движение вслепую и 100% к неприятностям и техническом долгу.

Работаем. Кажется почти все подготовлено.
👍1
В Стамбуле первый снег. ❄️

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

В Стамбуле снег идет только несколько дней. Обычно в феврале, редко в начале марта. И это прямо событие.
🔥3
AI, AI, AI. Тесты, Тесты, Тесты

Сегодняшний прогресс весь связан с тестами.

Всегда важно ответить на вопрос: Зачем?

Тестирование, и даже 100% покрытие тестами не показывает полезность проекта и то, что он вообще корректно функционирует.

Зачем я уже несколько дней с фанатизмом занимаюсь только тестами. Да еще и на фронтовую часть проекта?

Моя главная цель — наработать инструментарий и набор решений.

Во многом мастера определяет инструмент.

Мои инструменты — это подходы, концепции, способ и формат декомпозиции, мышления, и (в том числе) технические наработки.

Каждый новый тест — это новый кейс и новые ограничения / особенности поведения системы.

Чем больше я сделаю наработок сейчас — тем проще двигаться будет потом.

🎞 https://www.youtube.com/watch?v=JXcND_gOaw8
👍2
AI vs Модальные окна

Только не смейтесь, это не смешно.

Сделать модальное окно на React, да и вообще в целом в web это не тривиальная задача.

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

Обеспечить нормальный Дизайн модального окна и предусмотреть большое количество кейсов и их комбинаций — это вызов.

Я использовал пару GPT/Курсор — базового желаемого результата достиг, но еще много есть над чем работать — пока ставим на паузу — с текущим решением можно работать.

Под моим руководством AI реализовал задачу за пару часов.

Good Enough.
👍2
Mini App

День 14

Каждый день я уделяю мини проекту немного времени. У меня нет возможности сесть и делать pet проект целый день, поэтому единственный вариант — размазывать нагрузку на большой интервал по времени.

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

Весь интернет завален историями 3-х дневного успеха и проектов сделанных AI за 3 запроса.


2 недели, около 190 коммитов, 230+ юнит тестов, мини UI-kit, настройка линтеров и окружений тестирования, кастомный тостер и EventEmitter, роутер, контейнеры, локализация, формы и их валидация. И куча еще всего разного.

И это только начало Frontend части.

Следующий этап — тонкий тюнинг поведения форм. Дебаг, чистка, полировка.

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

Наверное еще 3-4 дня уйдет на это. Надо сразу отладить все — с качественным примером будет легче работать над другими проектами.

И потом уже буду фокусироваться на бэке.
🔥4
Мы с вами в одинаковых позициях

Пока мои молодые коллеги пытаются войти в ИТ, через изучение основ Ruby, JavaScript, TypeScript, Python и прочее, я пытаюсь войти в AI разработку. Я такой же джуниор в этой новой сфере как и те, кто изучает циклы и массивы и типы переменных.

Какие действия я предпринимаю, чтобы вкатиться в ИТ 2.0?

1️⃣ Практика. Я не знаю, правильно ли я решаю задачи с AI — но я их решаю. Каждый день я сталкиваюсь с новыми кейсами и ищу решения. Даже если я делаю неправильно — как только кто-то даст намек на то, как делать "правильно" у меня уже будет достаточно контекста, чтобы мгновенно перенять знания и использовать.

2️⃣ Заточка инструментов. Ведьмак не одолеет Ведьму с Болот, если у него будет тупой меч. Через Практику я формирую свой инструментарий, который мне поможет успешно справляться с будущими задачами.

3️⃣ Насмотренность и отсев шума. В океане хайпа и маркетинговой чуши, я нахожу микро-авторов, которые тоже следят за AI и разработкой. Читаю их посты и соображения. Насматриваюсь.
🔥3
Человеческий язык как ограничение в работе с AI

Есть несколько неочевидных фактов, которыми я хочу поделиться.

1️⃣ Мысли словами формулировать очень тяжело и медленно.

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

2️⃣ «Мысль изреченная есть ложь» Попробуй кому-то объяснить что-то, что для тебя кажется простым и очевидным.

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

3️⃣ "Была задача прочитать, а не понять"
Фундаментальная проблема передачи, получения и интерпретации информации никуда не делась.

Даже если ты все правильно сформулировал и написал — совсем не факт, что тебя поймут. В работе с AI это проявляется довольно часто.
👍1
🎯 Не в цель, а рядом

Я заметил, что Cursor AI показывает хорошие результаты не потому, что он слушает, что хочет человек, а скорее догадывается, что человеку хотелось бы.

Это вообще-то не тот навык, который машина могла бы сформировать только на основе документации и анализа ответов stackoverflow.

Я подозреваю, что важная часть современных AI — это анализ профиля пользователя, обучение каким-то основам интерпретации, может философии. Те этим надо прямо заниматься.

В посте одного из авторов я прочитал, что в Cursor работают ребята с хорошим фундаментальным образованием, в том числе в области философии.

В большей части результаты такой работы Cursor AI довольно хорошие.

Однако, я заметил и минусы.

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

Чем формулировать, описывать и корректировать — легче пойти и самому поправить.

Это еще одна ниша, где без оператора никуда.
👍1
Форма — это сложно

Иногда на конференциях можно слышать — web формы это сложно.

А что же в них такого сложного? Давайте посмотрим. А то клиенты и менеджеры не очень понимают, почему одну форму можно делать 2 недели.

1️⃣ View / HTML вид формы желательно отделить от логики ее обработки. так легче поддерживать, тестировать.
2️⃣ C формой могут быть связаны стили. CSS.
3️⃣ Локализация на несколько языков нужна? Ну, конечно. — держи файлы локалей.
4️⃣ Валидация полей и данных? Конечно! Добавляем.
5️⃣ Мини-компоненты, которые помогают разгрузить код основной формы. Да, конечно.
6️⃣ Утилиты, которые помогут работать с данными формы. Конечно нужно!
7️⃣ Если реакт — без кастомных хуков вряд ли обойдется.
8️⃣ А Unit тесты? Конечно!
9️⃣ А сторибук для формы? Естественно!
🔟 Связи и зависимости с системой нотификации на сайте или кинуть событие? Без этого никуда.

По-хорошему, каждая форма (если это не школьный проект) тянет за собой очень много деталей, которые предусмотреть довольно не просто.
👍1
Mini App Project

День 16

Сегодня утром удалось сделать

1) Локализация валидационных ошибок

2) Форма реагирует на каждое изменение поле и дает подсказку о статусе поля. Inline валидации, короче.

3) Кнопка отправки не работает пока не заполнены и не валидны все поля, согласно схемы;

4) небольшой рефакторинг

5) Тесты, тесты, тесты.

Первая форма в проекте самая сложная. Это пример всех возможных решений, которые хочется получить.

Локализация, валидации, динамика реагирования, показ сообщений и emit событий, декомпозиция элементов, тесты. Сторибук.

Кажется я закончил тут. Осталось сделать прототипы остальных страниц. Некоторые UI элементы и буду переключаться на бэк.
👍2
Часто программисты не пишут тестов и вот почему

Сколько тестов нужно, чтобы протестировать простую web форму на React из 5 инпутов, и 2-х кнопок?

Примерный ответ: 80+ тестов.

Для этого надо написать и определить сетапы (начальные установки для каждого для каждого кейса). Замокать внешние зависимости или эмулировать их поведение — чтобы реальный код внешних элементов и react хуков не вызывался и не усложнял и не замедлял тестирование.

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

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

Теперь у каждого из вас есть свой собственный ассистент-тестировщик. Пусть пишет!

Требуйте 100% тестирования кода в ваших проектах!

Прежде всего требуйте от себя. Заставляйте себя. Делайте ревью. Учитесь.

Даже плохой тест это всегда лучше его отсутствия.

Госпаде, благослави AI!
👍3
Дизайн кода (Часть 1)

AI сделай мне форму с 5 полями, 2 кнопками и чтобы работало так и вот так.

— Слушаюсь и повинуюсь!

1️⃣ AI вообще пофиг на ваши человеческие предпочтения, он делает то, что вы просите и генерирует огромную форму с кучей кода, которая, возможно, работает.

Как убедится, что это все не сломается на следующем запросе?

Надо (хотя бы) написать тесты и зафиксировать поведение.

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

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

Если идти таким "слепым путем", и ничего не понимать в своем проекте, то пусть AI сразу пишет на Ассемблере — зачем лишние прослойки в виде промежуточных языков программирования?

Ведь единственная причина почему мы просим AI писать код на понятных нам языках — это желание удерживать контроль над кодом и иметь возможность его модифицировать человеком.
👍3
Дизайн кода (Часть 2)

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

Но это не наш путь.

2️⃣ Первая мысль, которая приходит в голову — отделить функционал от видимой части. Разделить огромный массив кода хотя бы на 2 части.

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

Мы сможем обеспечить большое количество моков (заглушек) и процесс тестирования станет намного проще; И чтение и понимание и будущая поддержка.

А еще функции из огромного компонента мы сможем растащить по утилитам, кастомным хукам (по сути — тоже функциям) и мы получим уже уровень качества решения на порядок выше чем предыдущий.

Однако, как вы видите на картинке мы все еще вынуждены оперировать огромным массивом параметров и прокидывать между компонентами.
👍3
Дизайн кода (Часть 3)

Атомарность, декомпозиция, сокращение контекста.

Чем меньше элемент / компонент, тем проще им управлять, контролировать, тестировать, развивать.

3️⃣ На третьей итерации мы разбиваем форму на инпуты. Теперь каждый инпут это микро компонент со своими зависимостями, валидациями, локализацией, кастомным поведением.

Больше не надо прокидывать никаких параметров. Инпут может получить все нужное из контекста формы или других хуков.

При таком уровне декомпозиции мы разбиваем все на атомы-компоненты.

Тестирование малых компонент становится простым и дешевым.

Тестирование более крупных компонент основано на моках более мелких компонент.

Начиная с самого низа, поднимаясь наверх мы просто мокаем уже протестированные компоненты.

Так на каждом уровне мы можем сфокусировать именно на том, что важно именно для нужного уровня.

Чтение и понимание кода в каждом файле становится занятием элементарным. Поддержка и развитие достигают максимальной простоты.

Так мы приручаем AI монстра.
👍6
AI и Промптинг

Весь твиттер, реддит, сайты крупных ИТ компаний пестрит правилами и рекомендациями о том, как правильно писать запросы (Промпты) для AI.

Пиши запрос вот так — и твои результаты будут, как у самого крутого профессионала!

Мой опыт показывает обратное. Промптинг совершенно не важен. Пропускайте мимо этот бред и не обращайте внимание.

Нет волшебной строчки, которая заставит AI делать то, что она не делала и до этого.

В работе с AI, как и прежде, важно сесть и начать работать над конкретным проектом и конкретной задачей.

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

Работать надо, ребята, а не искать заветную кнопку или промпт.

Хочешь результат? Будь готов собрать волю в кулак, стиснуть зубы и заставить себя хорошенько потрудиться.

Понимаю. Непопулярное мнение.
👍2🔥1