Комфортный вайб-кодинг для новичков
- -
- 100%
- +
- данные пока не передаются во внешний сервис.
Сохрани доступность формы с клавиатуры и не используй alert.
После реализации перечисли ручные сценарии проверки.
Доступность с клавиатуры означает, что человек может переходить между полями клавишей Tab, видеть фокус и отправить форму без мыши. Подписи должны быть связаны с полями, а ошибки понятны без одного лишь красного цвета.
Подключение реальной отправки
Для реальной заявки нужен серверный обработчик или проверенный сервис форм. Он принимает HTTP-запрос — сообщение от браузера серверу. Данные часто передаются в формате JSON: текстовой структуре из полей и значений. Например, имя и телефон становятся объектом, который обработчик может прочитать.
Не привязываемся к одному хостингу. Выберите платформу, способную обслуживать статический сайт и серверную функцию, либо отдельный сервис форм. Перед подключением прочитайте актуальную документацию выбранной платформы.
Промпт 26. Проектирование обработчика заявки
Нужно подключить реальную отправку формы на платформе [ПЛАТФОРМА].
Изучи текущий проект и актуальную официальную документацию платформы.
Сначала предложи план без кода.
Обработчик должен:
- принимать только ожидаемые поля;
- повторно проверять данные на сервере;
- ограничивать размер входных данных;
- не возвращать внутренние ошибки пользователю;
- не содержать секреты в клиентском коде;
- давать понятный ответ об успехе или ошибке.
Укажи, какие переменные окружения понадобятся и где их настроить.
Переменная окружения — настройка, которую платформа передаёт приложению отдельно от исходного кода. Секретный ключ можно хранить там, а не в публичном JavaScript.
Если заявки отправляются в Telegram, электронную почту или CRM, ключ интеграции должен оставаться на серверной стороне. Всё, что попало в код страницы, посетитель способен увидеть.
Производительность и доступность
На небольшом сайте главные проблемы создают тяжёлые изображения, лишние шрифты и скрипты. Сжимайте фотографии, задавайте им размеры и не загружайте огромный файл ради маленькой карточки. Проверка доступности должна охватывать заголовки, подписи полей, контраст, клавиатуру и альтернативный текст для содержательных изображений.
Промпт 27. Аудит перед публикацией
Проведи аудит сайта перед публикацией.
Проверь HTML, CSS и JavaScript по направлениям:
- ошибки и предупреждения;
- адаптивность;
- доступность;
- скорость загрузки;
- корректность формы;
- базовая поисковая разметка;
- отсутствие секретов и тестовых данных.
Составь список проблем по приоритету. Сначала исправь только критические и высокие проблемы, не меняя дизайн без необходимости. Затем запусти повторную проверку.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.