Полезные советы при разработке с
1. Используйте по возможности системный промпт.
Напишите свой и попросите
2. Научитесь азам promp-engineering. Это полезно и при разработке, и при диалогах с обычными чатботами. От простого
3. Используйте сильные стороны
4. Используйте его как консультанта перед реализацией какой-то задачи. Задайте несколько вопросов в чате, как что-то можно сделать (с использованием вашего кода как контекста), проанализируйте варианты, выберите подходящий и дальше в
4.1. Вместо «Напиши такой-то модуль» используйте цепочку:
- Проектирование API
- Реализация core-логики
- Добавление обработки ошибок
- Интеграция с существующим кодом
- Оптимизация производительности
5.
6.
7. При использовании
8. Пробуйте разные модели. Причем, разные модели для разных случаев. Дороже ≠ лучше.
9. Переиспользуемые промпты можно хранить в отдельных текстовых файлах.
Также, научитесь использовать структурированные промпты при необходимости, например:
Для современных
10. Почитайте документацию к вашей
#ai #tip #ide #cursor
IDE AI агентами от @vuefaq.1. Используйте по возможности системный промпт.
Cursor позволяет иметь .cursorrules файл, в котором можно прописать основные установки по проекту. Пример файла.Напишите свой и попросите
AI улучшить его. Автокомплит его плохо видит, но чат и composer - вполне. По крайней мере, свою CSS дизайн систему и компоненты использует четко.2. Научитесь азам promp-engineering. Это полезно и при разработке, и при диалогах с обычными чатботами. От простого
few-shots prompt эффективность результата может вырасти в разы. Не надо винить AI в тупости, если вы не умеете формулировать вопрос на языке, который ему более понятен.3. Используйте сильные стороны
AI. Он может хорошо сгенерить новый компонент, новый микросервис, добавить функционал, сделать i18n перевод, дать совет по какой-то лучшей практике в определённой области, рефакторить, делать рутинные задачи, писать тесты, но не так хорошо работает на больших изменениях с существующим кодом. Также может с нуля нагенерировать плохой неоптимальный код на нестандартных задачах (в таких случаях, необходимо давать максимально подробную информацию о контексте задачи).4. Используйте его как консультанта перед реализацией какой-то задачи. Задайте несколько вопросов в чате, как что-то можно сделать (с использованием вашего кода как контекста), проанализируйте варианты, выберите подходящий и дальше в
composer начните постепенно его реализовывать, руководя процессом. Стратегически важные вопросы задавайте также разным внешним системам - Gemini, ChatGPT, DeepSeek. Иногда кто-то один даёт явно более лучший ответ.4.1. Вместо «Напиши такой-то модуль» используйте цепочку:
- Проектирование API
- Реализация core-логики
- Добавление обработки ошибок
- Интеграция с существующим кодом
- Оптимизация производительности
5.
AI - не старик Хоттабыч, он не творит чудеса. Более того, он очень тупой. Тупой инструмент. Но сильный. Управление им это как управление двухтонным ковшом экскаватора - можно быстро сделать много полезного, и можно быстро сделать кучу плохого (со своим кодом). Которую потом будешь долго разгребать.6.
AI хорошо генерит комментарии и документацию. Можете добавить сразу VitePress к проекту и поддерживать его техническую документацию.7. При использовании
AI сервисов в приложении используйте структурированные (JSON) ответы. Не все это умеют, но последняя 4o-mini, например, умеет (по JSON-scheme). С учетом цены на нее, она очень полезна для парсинга документов или картинок, скажем, из которых предварительно можно вытащить текст конвенциональными методами (pdf2text и OCR).8. Пробуйте разные модели. Причем, разные модели для разных случаев. Дороже ≠ лучше.
9. Переиспользуемые промпты можно хранить в отдельных текстовых файлах.
Также, научитесь использовать структурированные промпты при необходимости, например:
/analyze-tech-debt
--focus=duplication,complexity
--suggest-refactoring
Для современных
LLM они, часто, предпочтительней для простых задач.10. Почитайте документацию к вашей
LLM и лучшие практики. Ваша продуктивность ( => стоимость как разработчика) может возрасти в несколько раз с этим инструментом. Потратьте время на то, чтобы научиться им эффективно пользоваться.#ai #tip #ide #cursor
👍21
Сегодня в 17:00 GMT+3 начинается двухдневная онлайн конференция VueJsNation
Выступит Evan You с новостями о
#event #evanyou #vapor
Выступит Evan You с новостями о
Vue 3.6 и Vapor#event #evanyou #vapor
👍10
В мой vite-plugin-html-injection сделали первый
Приятно, чёрт возьми.
Теперь во фрагментах можно использовать
#vite #plugin #lib
PRПриятно, чёрт возьми.
Теперь во фрагментах можно использовать
Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.#vite #plugin #lib
GitHub
vite-plugin-html-injection/README.ru.md at ef3e38165e68213326f54bb813a1c8fbb65594d0 · altrusl/vite-plugin-html-injection
Vite plugin for injecting html, js, css code snippets into index.html - altrusl/vite-plugin-html-injection
👍21❤1
Время от времени можно удалять локальный
#npm #pnpm #optimization
npm/yarn/ pnpm кэш, чтобы освободить место на диске от устаревших версий пакетов.#npm #pnpm #optimization
👍3👌1
Датацентры всего мира производят 3.7% мирового CO2 (carbon footprint, углекислый газ)
Каждый показ вашего сайта является причиной выделения CO2 - в среднем 0.8 грамм.
Замерьте карбоновый след вашего сайта
Еще одна причина писать эффективные
#pwa #optimization
Каждый показ вашего сайта является причиной выделения CO2 - в среднем 0.8 грамм.
Замерьте карбоновый след вашего сайта
Еще одна причина писать эффективные
PWA #pwa #optimization
Website Carbon Calculator
Website Carbon™ Calculator v4 | What's your site's carbon footprint?
The original website carbon calculator tool, brought to you by Wholegrain Digital,London's original sustainable WordPress agency.
🤡10🔥3
Жила-была мышка в домике.
Скачет мимо лягушка - прыг-прыг! - спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка. А ты кто?
- А я лягушка - реактушка. Пусти и меня!
- Иди.
Вот их уже двое. Бежит зайчик. Подбежал к домику, спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка. А ты кто?
- А я зайчик - ангулярчик. Пустите и меня!
- Иди.
Вот их уже трое. Бежит лисичка:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка да зайчик - ангулярчик. А ты кто?
-А я лисичка - астричка. Пустите и меня!
Вот их уже четверо сидит. Глядь, бежит волчок - и тоже к домику, да и спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик да лисичка - астричка. А ты кто?
- А я волчара - вьючара. Пустите и меня!
- Ну иди!
Влез и этот. Уже стало их пятеро. Откуда ни возьмись, бредет кабан:
- Хро-хро-хро, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка да волчара - вьючара. А ты кто?
- А я кабан - хатамахан. Пустите и меня!
Вот беда, всем в домик охота.
- Тебе и не влезть!
- Как-нибудь влезу, пустите!
- Ну, что ж с тобой поделаешь, лезь!
Влез и этот. Уже их шестеро. И так им тесно, что не повернуться! А тут затрещали сучья: вылезает медведь и тоже к домику подходит, ревет:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка, волчара - вьючара да кабан - хатамахан. А ты кто?
- Гу-гу-гу, вас тут многовато! А я медведюшка - денофрюшка. Пустите и меня!
- Как же мы тебя пустим? Ведь и так тесно.
- Да как-нибудь!
- Ну уж иди, только с краешку!
Влез и этот. Семеро стало, да так тесно, что домик того и гляди, разорвется.
А тем временем шёл Деми Мурыч по лесу. Смотрит - домик битком набитый.
- Вы кто? - спрашивает.
- Мы? Фронтендеры!!
- Идите в жопу, фронтендеры, - сказал Деми Мурыч и пошёл дальше.
#creative #literature #humor
Скачет мимо лягушка - прыг-прыг! - спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка. А ты кто?
- А я лягушка - реактушка. Пусти и меня!
- Иди.
Вот их уже двое. Бежит зайчик. Подбежал к домику, спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка. А ты кто?
- А я зайчик - ангулярчик. Пустите и меня!
- Иди.
Вот их уже трое. Бежит лисичка:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка да зайчик - ангулярчик. А ты кто?
-А я лисичка - астричка. Пустите и меня!
Вот их уже четверо сидит. Глядь, бежит волчок - и тоже к домику, да и спрашивает:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик да лисичка - астричка. А ты кто?
- А я волчара - вьючара. Пустите и меня!
- Ну иди!
Влез и этот. Уже стало их пятеро. Откуда ни возьмись, бредет кабан:
- Хро-хро-хро, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка да волчара - вьючара. А ты кто?
- А я кабан - хатамахан. Пустите и меня!
Вот беда, всем в домик охота.
- Тебе и не влезть!
- Как-нибудь влезу, пустите!
- Ну, что ж с тобой поделаешь, лезь!
Влез и этот. Уже их шестеро. И так им тесно, что не повернуться! А тут затрещали сучья: вылезает медведь и тоже к домику подходит, ревет:
- Кто, кто в домике живет?
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка, волчара - вьючара да кабан - хатамахан. А ты кто?
- Гу-гу-гу, вас тут многовато! А я медведюшка - денофрюшка. Пустите и меня!
- Как же мы тебя пустим? Ведь и так тесно.
- Да как-нибудь!
- Ну уж иди, только с краешку!
Влез и этот. Семеро стало, да так тесно, что домик того и гляди, разорвется.
А тем временем шёл Деми Мурыч по лесу. Смотрит - домик битком набитый.
- Вы кто? - спрашивает.
- Мы? Фронтендеры!!
- Идите в жопу, фронтендеры, - сказал Деми Мурыч и пошёл дальше.
#creative #literature #humor
🤡14💊6🤮4😁3❤1👍1🥰1😭1
Если показываете через
Через
Через хук роутера
Второй способ дает еще возможность использовать
#router #tip
<router-view> страницу с route параметром (продукты, каталоги, пользователей через id), и надо при смене параметра загружать нового, - то есть, следить за изменением параметра, то делать это можно двумя способами.Через
watch:watch(
() => props.id,
async () => {
userData.value = await fetchUser(to.params.id);
},
{ immediate: true }
);
Через хук роутера
onBeforeRouteUpdate:js
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id);
}
})
Второй способ дает еще возможность использовать
onBeforeRouteLeave, если вдруг надо#router #tip
🔥19👍7
Написал статью "Обзор различных методов работы с реактивным стейтом во Vue"
Переделанная вот эта. Исправлены фундаментальные ошибки (автор не понимает, что такое
Внизу статьи опрос, просьба проголосовать.
Также размещено на Vue-FAQ
#reactivity #pinia #eventbus #article
Переделанная вот эта. Исправлены фундаментальные ошибки (автор не понимает, что такое
composable функция) и некоторые другие недочетыВнизу статьи опрос, просьба проголосовать.
Также размещено на Vue-FAQ
#reactivity #pinia #eventbus #article
Хабр
Обзор различных методов работы с реактивным стейтом во Vue
Организовать обмен [реактивными] данными между компонентами и модулями во Vue 3 приложении можно несколькими способами. 1. Prop drilling Prop drilling - это ситуация, когда пропсы передаются через...
❤17🎃1
Потестируйте и покритикуйте (UX, UI, функционал и др.) последний пет-проект
lissa-health.com
Позволяет держать в одном месте свою медицинскую информацию (лабораторные анализы, заключения, произвольные записи) и делать AI аналитику по ним
На сайте есть демо-видео
Также можно загрузить демо-данные
#lissa #pet
lissa-health.com
Позволяет держать в одном месте свою медицинскую информацию (лабораторные анализы, заключения, произвольные записи) и делать AI аналитику по ним
На сайте есть демо-видео
Также можно загрузить демо-данные
#lissa #pet
Lissa-Health
Lissa Health
Lissa Health | Персональный помощник в области здоровья
👍6🔥2
Технические детали проекта выше
Для графика (
Используются разные
Кнопка справа внизу (
Её задача - сделать удобный
#lissa #pet #arkui
ark-ui в некоторых местах глючит, но как UI библиотека понравилась, буду использовать.Для графика (
chart) модели из TS переделал на классы (без реактивности внутри), стало намного удобнейAI очень помогает делать перевод сайта сразу на нескольких языках одновременно с кодингомИспользуются разные
LLM для парсинга файлов и аналитических отчетов (подешевле и подороже)Кнопка справа внизу (
FAB) идет как волшебная палочка - в ней разные действия в зависимости от страницы и контекста.Её задача - сделать удобный
UX, чтобы пользователь не бегал по всему экрану пальцемPWA, variable fonts, JSON-RPC, JSON5#lissa #pet #arkui
👍3🔥1