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

Vercel вместе с создателями Webpack уже несколько лет пишет убийцу Vite - Turborepo.

Сперва писали на Go, потом начали переписывать на Rust. Уже можно пользоваться, но для продакшна пока не рекомендуется.

#vite #webpaсk #bundler #vercel #turborepo

Документация Apple для разработчиков написана на Vue 2.7

#vue #apple

Arty-Crafty

Добавлены 3 новые главы в проект Arty-Crafty: "Категория товаров", "Избранное", "Codeium" и CMV

#artycrafty #codeium #cmv