`defineModel` модификаторы

defineModel может применяться с модификаторами, например:

const [count, countModifiers] = defineModel({
  set(value) {
    if (countModifiers?.number) {
      return Number(value);
    }
    return value;
  }
});
// true if the .number modifier is used
console.log(countModifiers?.number); 

Также возможна типизация модификатора:

defineModel<number, 'number'>({ ... }) - второй аргумент - тип модификатора

Пример в песочнице

#tip

Что умеет новая `shikiji` от Anthony Fu?

Показывать всплывающую подсказку с информацией о наведенной сущности. Для этого в коде она должна быть типизирована с помощью JSDoc, либо информация о ней должна быть в библиотеке, если она подключается через неё (в данном примере shikiji лезет в markdown-it)

Рекомендация от команды Vue и VitePress - использовать в документациях на VitePress во фрагментах кода JSDoc для повышения их информативности. Более подробные инструкции будут даны позднее.

#shikiji #antfu #vitepress

https://vuejsnation.com/

Онлайн ивент

Можно зарегистрироваться как слушатель и подать заявку на выступление как спикер

#event

Полнотекстовый поиск

Есть несколько библиотек, предоставляющих возможность добавить на сайт полнотекстовый поиск. Одна из них - Orama.

Без зависимостей, open source, TypeScript, 7.1K звезд на GitHub. Есть интеграции с разными системами, типа Astro, Docusaurus, VitePress (с последними версиями не работает пока)

#lib #search

floating-vue - библиотека для показа тултипов и выпадающих меню

Бывшая v-tooltip. На днях вышла пятая версия. 3.1K звезд на GitHub.

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

#lib

На сайте `Vue FAQ` появился новый раздел - Arty-Crafty

Там будет создаваться онлайн магазин на Vue 3 с описанием того, как это делается. Своего рода туториал. Еще один open source проект.
Подробнее - на вводной странице.

#artycrafty

Статья на VueSchool о том, когда стоит использовать provide/inject

Варианты использования функций provide и inject:

- Настройки темы или конфигурации: Вы можете предоставить глобальные настройки, темы или параметры конфигурации на корневом уровне вашего приложения Vue.js и внедрить их в любой компонент, которому они нужны.

- Данные аутентификации: Предоставляйте информацию об аутентификации пользователя, например данные пользователя или токены аутентификации, компонентам, которым они необходимы, не передавая их через пропсы.

- Интернационализация (i18n): Храните данные перевода на корневом уровне и внедряйте их в компоненты, которым требуется отображать текст на разных языках.

- Тесно связанные компоненты: Например, <AccordianPanel>, который всегда появляется только внутри слота компонента <Accordian>. Вы можете инжектировать общие данные, к которым вы всегда хотите иметь доступ, без необходимости передавать их в качестве пропсов.


Лучшие практики и соображения

При использовании provide и inject необходимо помнить о нескольких лучших практиках:

- Избегайте чрезмерного использования: Хотя provide и inject могут быть очень мощными, не стоит ими злоупотреблять. Оставьте их для случаев, когда вам действительно нужно поделиться данными между компонентами, не создавая тесной связи между ними.

- Четкая документация: Документируйте данные, которые вы провайдите и инжектируете, чтобы разработчикам было легко понять, как взаимодействуют компоненты. Их также можно типизировать, - подробности в официальной документации.

- Рассмотрите возможность Prop Drilling: Prop drilling обычно является антипаттерном, но в некоторых случаях передача данных через пропсы может быть более простым и прозрачным подходом. Оцените, являются ли provide и inject лучшим решением для вашего конкретного сценария.

#provide #article #tip

HTML5 и CSS3 - достаточно функциональные языки и могут делать сами многое, для чего раньше нужно было задействовать JavaScript

В этой статье приводится 5 примеров элементов на чистом HTML/CSS

1. Toggle
2. Автоподсказки в инпуте (datalist)
3. Color picker
4. Accordion (details)
5. Dialog

#tip #html #css

Еще о SEO

Case study с сайта Strapi

Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.

Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.

Для Seo можно использовать пререндереры хостеров, как здесь.

#seo #nuxt

Кстати, недавно, глядя на статистику Google Analytics, задумался, сколько процентов пользователей используют в браузерах adblock-и, которые блокируют трекеры GA.

Написал свой трекер. Получилось, что Google Analytics учитывает примерно 40%-50% от всех посетителей (не ботов). Это технический сайт, на не технических, наверное, процент побольше.

#ga

В SFC можно делать и так.

#sfc

Anthony Fu показал законченный вариант библиотеки для синтаксической подсветки фрагментов кода shikiji с подсказками от TypeScript пакета twoslashes на примере SFC кода в VitePress.

По мнению автора это сильно улучшит воспринимаемость информации. Ну и такого ни у кого пока нет.

#twoslashes #shikiji #vitepress #antfu