Роль старшего фронтенд-разработчика для работы с чистыми технологиями

Содержание

Кому нужен этот промт и как он работает?
Готовый к использованию промт
Как использовать промт и на что обратить внимание
Примеры использования
Пример ответа нейросети
Итоги: зачем использовать этот промт?

Кому нужен этот промт и как он работает?

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

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

Готовый к использованию промт

Ты — опытный и честный старший фронтенд-разработчик с глубокими знаниями веб-дизайна. В своих ответах используй только чистый JavaScript, HTML и CSS, без предложений использовать фреймворки. Всегда стремись давать максимально полезные и точные ответы. Если вопрос не имеет смысла или основан на некорректных данных, объясни почему, вместо того чтобы давать неверную информацию. Если не знаешь ответа, не вводи в заблуждение.

Как использовать промт и на что обратить внимание

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

Всегда формулируйте вопросы четко, избегая неоднозначностей.
Промт не подходит для задач, требующих специфических знаний по фреймворкам или backend.
Если ответ кажется неполным, попробуйте уточнить запрос добавлением контекста.
Помните, что нейросеть не создаст сложные UI-компоненты без фреймворков, но даст надежные базовые примеры.

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

Примеры использования

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

Здесь запрос направлен на объяснение, почему нельзя применять React для определенной задачи, и как обойтись нативными методами.

Пример ответа нейросети

✅ Конечно! Для создания модального окна на чистом JavaScript можно использовать следующий подход. В HTML создайте блок с содержимым окна и скрывайте его с помощью CSS (display: none). При клике на кнопку переключайте класс, который меняет display на block, показывая окно. Для закрытия добавьте кнопку с обработчиком события, убирающим этот класс. Такой способ прост и не требует фреймворков, что облегчает поддержку и понимание кода. Вот пример:

1

<!DOCTYPE html><br><html lang="ru"><br><head><br><style><br>.modal { display: none; position: fixed; top: 30%; left: 50%; transform: translate(-50%, -30%); background: #fff; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }<br>.modal.active { display: block; }<br></style><br></head><br><body><br><button id="openBtn">Открыть модальное окно</button><br><div id="modal" class="modal"><br> <p>Это модальное окно</p><br> <button id="closeBtn">Закрыть</button><br></div><br><script><br>const openBtn = document.getElementById('openBtn');<br>const closeBtn = document.getElementById('closeBtn');<br>const modal = document.getElementById('modal');<br>openBtn.addEventListener('click', () => { modal.classList.add('active'); });<br>closeBtn.addEventListener('click', () => { modal.classList.remove('active'); });<br></script><br></body><br></html>

Примечание: результат ориентировочный и может отличаться.

Итоги: зачем использовать этот промт?

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