#datapicker — Public Fediverse posts

Два способа создания доступного DataPicker'а с помощью AI: 80/20 в пользу AI или системное проектирование с агентом

DatePicker казался нам небольшой задачей в разработке UI, пока мы не попробовали создать компонент, который будет корректно работать с keyboard navigation, screen reader’ом, управляемым состоянием и реальными проверками доступности. Нам потребовался DatePicker производственного уровня на React и TypeScript, и сначала очевидный путь казался очень заманчивым: дать AI четкий запрос, получить 80% готового кода, а остальное доработать руками. Подробный разбор этого кейса есть в моей предыдущей статье « Попросили Claude создать WCAG-доступный DataPicker на React и потратили 3 дня на доработки ». Так вот. Модель может сгенерировать структуру календаря, атрибуты ARIA, базовую keyboard navigation и логику работы с датами. Затем начинается интеграция: поведение фокуса становится нестабильным; возникают конфликты между обработчиками событий; озвучивание screen reader’ами требует тщательного тестирования; небольшое изменение в логике работы с датами может неожиданно нарушить работу календаря; код выглядит нормально, но компонент пока не является надежным. В этой статье я сравниваю два способа создания доступного DatePicker'а с помощью AI: Первый — 80% кода с помощью AI, остальные 20% руками. Второй — системное проектирование с AI-агентом: PRD, декомпозиция задач, правила агента, внешняя верификация, Vitest, Playwright, сборка Vite, проверки типов и строгий цикл, в котором агент не может двигаться дальше, пока не будет пройден текущий шаг. Дальше все по делу: в чем AI действительно нам помог; где он начал сбиваться с курса; почему одного большого promt'а оказалось недостаточно; как The Verifier изменил процесс и почему основная задача инженера в разработке с использованием AI больше не сводится только к написанию кода, а заключается в контроле над замыслом, архитектурой, контрактами и стоимостью изменений.

https://habr.com/ru/articles/1052932/

#datapicker #frontend #claude #ии #typescript #javascript #web #ux #ui #ai

Попросили Claude создать WCAG-доступный DataPicker на React и потратили 3 дня на доработки

Выбор даты кажется небольшой задачей в UI, пока не попробуешь сделать его по-настоящему WCAG-доступным. Нам понадобился настраиваемый DataPicker на React для процесса записи на прием к врачу, где пользователи, работающие с keyboard navigation, и люди, использующие screen reader’ы, должны были выбрать дату без лишних затруднений. Claude сделал нам хорошую первую версию: структуру компонента, ARIA-атрибуты, базовую keyboard navigation и логику календаря. На первый взгляд результат выглядел почти готовым. Затем мы запустили NVDA, VoiceOver и протестировали сценарий keyboard navigation. Фокус выходил за пределы диалогового окна; некоторые даты озвучивались неверно; переключение между месяцами сопровождалось слишком тихим звуком; нажатие клавиши «Esc» закрывало календарь, но оставляло пользователя без контекста; режим высокой контрастности Windows нарушал отображение выбранного состояния. Код выглядел нормально, но UX оставлял желать лучшего. В этой статье мы рассмотрим реальную работу, стоящую за WCAG-доступным DataPicker'ом: где AI сэкономил нам время; где он не справился; как нам помог WAI-ARIA APG ; какие детали нам пришлось исправлять вручную и почему доступность нельзя проверить, просто прочитав сгенерированный код. Приготовьтесь к инсайтам, багам и победам!

https://habr.com/ru/articles/1052878/

#datapicker #frontend #claude #ии #typescript #javascript #web #ux #ui #ai

Как я создал Vanilla Calendar Pro — легкий и гибкий календарь на JavaScript с использованием TypeScript

Привет, Habr! Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla Calendar Pro собрал больше 480 звезд на GitHub и получает 17 тысяч скачиваний в месяц, я решил поделиться своей историей. Хочу сразу отметить: я не претендую на лавры лучшего разработчика календарей и датапикеров. Эта статья о моем первом опыте в open source, о том, как я создавал проект с нуля и как он стал полезен другим разработчикам.

https://habr.com/ru/articles/862216/

#datapicker #calendar #timepicker #vanillajs #vanillajs #vanilla #javascript #typescript #native #pure_javascript