Неплохой список ссылок на полезные ресурсы для веб разработчиков

#tip

10 советов для написания чистого кода на Vue.js

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

2. Следуйте соглашениям об именовании в Vue. Используйте PascalCase для имен файлов компонентов и, при необходимости, kebab-case для использования в шаблонах.

3. Избегайте чрезмерного использования Vuex или Pinia. Держите временные состояния интерфейса (например, видимость модальных окон) локальными для компонента, а не в глобальном управлении состоянием.

Пример: Используйте ref или reactive для временных состояний.

4. Эффективное использование слотов. Используйте именованные слоты для большей гибкости в многократно используемых компонентах и документируйте их использование.

Пример: Создайте компонент Card с <slot name="header"></slot> для настраиваемых заголовков.

5. Использование Scoped Styles. Используйте scoped стили в <style scoped> для предотвращения конфликтов CSS.

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

6. Написание многократно используемых компонентов. Разделяйте элементы интерфейса на многократно используемые, специфичные компоненты, избегая чрезмерно обобщенных конструкций.

Пример: Вместо жесткого кодирования кнопки, создайте настраиваемый компонент Button, поддерживающий пропсы для различных стилей.

7. Обработка асинхронного кода. Используйте async/await для API-запросов и обрабатывайте ошибки с помощью центральной функции.

8. Документирование пропсов и событий. Ясно определяйте и документируйте пропсы и события, используя аннотации props и emit или TypeScript.

Пример: Используйте defineProps и defineEmits в Vue 3 для ясности и безопасности типов.

9. Линтинг кода. Настройте ESLint и Prettier с Vue-специфическими конфигурациями для обеспечения качества и согласованности кода.

10. Упрощение шаблонов. Избегайте сложной логики в шаблонах; вместо этого используйте вычисляемые свойства или методы.

Пример: Замените `v-if="list.filter(item => item.active).length > 0"` на вычисляемое свойство `activeItems`.

(с) dev.to

#tip #bestpractices

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

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// Component A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">hello</p>
</template>

Функции во Vue ведут себя не совсем как функции

В данном примере функция isAuthenticated() ведет себя как computed и будет вызываться каждый раз, когда user изменится или компонент А будет перерисовываться.

Происходит это из-за того, что Vue определяет все реактивные зависимости внутри тела функции и перерендивает компонент, когда кто-то из них меняется.

Таким образом, большой разницы в использовании функции вместо computed нет. Но если внутри большая логика, то лучше использовать computed, потому что он будет пересчитываться только когда его зависимости изменились, а функция - при любом рендеринге

#reactivity #tip #optimization

Для Linux:

"count:sfc": "find . -type f -name '*.vue' ! -path '*/node_modules/*' | wc -l"

Для Windows:

"count:sfc": "Get-ChildItem -Recurse -Include *.vue -Exclude '*/node_modules/*' | Measure-Object -Line"

Добавьте в скрипты своего package.json.

Считает число компонент в проекте.

#tip

Чтобы заставить Vite HMR перегружаться при изменении конкретных файлов, иногда может понадобиться такой плагин:

// vite.config.ts

const fullReloadJson5 = {
  name: "full-reload-json5",
  handleHotUpdate({ file, server }) {
    if (file.endsWith(".json5")) {
      server.ws.send({ type: "full-reload" });
    }
    return [];
  },
};

// ...
plugins: [
    vue(),
    json5Plugin(),
    fullReloadJson5,
  ],

#vite #tip

Полезные советы при разработке с 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

Если показываете через <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

Как отключить scroll страницы, когда показываешь модальный диалог через <dialog>?

body:has(dialog[open]) {
  overflow: hidden;
}

Размыть фон/overlay?

dialog::backdrop {
  backdrop-filter: blur(2px);
}

#css #tip #scroll

Если делаете два близких приложения (например, клиентский фронтенд и админку) , и хотите расшарить какие-то компоненты и ресурсы, то есть несколько вариантов

1. Монорепозиторий. Оба проекта идут как пакеты и общие пакеты тоже отдельно. На любителя.

2. Выделить общее в отдельный NPM пакет и подключать его. Неудобно возиться с версиями и апдейтом.

3. Делать в одном проекте, настроить на две точки входа. Собирать Vite будет в одну кучу с двумя html файлами входа. Подразумевается, что так удобно работать на одном сайте с двумя мини-приложениями

4. Два отдельных vite.config.ts файла, два html, два App.vue и роутера. В package.json в скриптах прописываете свой Vite конфиг и копирование своего html в index.html. Запускается и собирается каждый как отдельный проект, в коде всё общее.

4. Git submodules. Отдельный проект подключается как поддиректория в твой (общие компоненты).

#tip