Статья на VueSchool о том, когда стоит использовать provide/inject
Варианты использования функций provide и inject:
- Настройки темы или конфигурации: Вы можете предоставить глобальные настройки, темы или параметры конфигурации на корневом уровне вашего приложения Vue.js и внедрить их в любой компонент, которому они нужны.
- Данные аутентификации: Предоставляйте информацию об аутентификации пользователя, например данные пользователя или токены аутентификации, компонентам, которым они необходимы, не передавая их через пропсы.
- Интернационализация (i18n): Храните данные перевода на корневом уровне и внедряйте их в компоненты, которым требуется отображать текст на разных языках.
- Тесно связанные компоненты: Например, <AccordianPanel>, который всегда появляется только внутри слота компонента <Accordian>. Вы можете инжектировать общие данные, к которым вы всегда хотите иметь доступ, без необходимости передавать их в качестве пропсов.
Лучшие практики и соображения
При использовании provide и inject необходимо помнить о нескольких лучших практиках:
- Избегайте чрезмерного использования: Хотя provide и inject могут быть очень мощными, не стоит ими злоупотреблять. Оставьте их для случаев, когда вам действительно нужно поделиться данными между компонентами, не создавая тесной связи между ними.
- Четкая документация: Документируйте данные, которые вы провайдите и инжектируете, чтобы разработчикам было легко понять, как взаимодействуют компоненты. Их также можно типизировать, - подробности в официальной документации.
- Рассмотрите возможность Prop Drilling: Prop drilling обычно является антипаттерном, но в некоторых случаях передача данных через пропсы может быть более простым и прозрачным подходом. Оцените, являются ли provide и inject лучшим решением для вашего конкретного сценария.
#provide #article #tip
Варианты использования функций provide и inject:
- Настройки темы или конфигурации: Вы можете предоставить глобальные настройки, темы или параметры конфигурации на корневом уровне вашего приложения Vue.js и внедрить их в любой компонент, которому они нужны.
- Данные аутентификации: Предоставляйте информацию об аутентификации пользователя, например данные пользователя или токены аутентификации, компонентам, которым они необходимы, не передавая их через пропсы.
- Интернационализация (i18n): Храните данные перевода на корневом уровне и внедряйте их в компоненты, которым требуется отображать текст на разных языках.
- Тесно связанные компоненты: Например, <AccordianPanel>, который всегда появляется только внутри слота компонента <Accordian>. Вы можете инжектировать общие данные, к которым вы всегда хотите иметь доступ, без необходимости передавать их в качестве пропсов.
Лучшие практики и соображения
При использовании provide и inject необходимо помнить о нескольких лучших практиках:
- Избегайте чрезмерного использования: Хотя provide и inject могут быть очень мощными, не стоит ими злоупотреблять. Оставьте их для случаев, когда вам действительно нужно поделиться данными между компонентами, не создавая тесной связи между ними.
- Четкая документация: Документируйте данные, которые вы провайдите и инжектируете, чтобы разработчикам было легко понять, как взаимодействуют компоненты. Их также можно типизировать, - подробности в официальной документации.
- Рассмотрите возможность Prop Drilling: Prop drilling обычно является антипаттерном, но в некоторых случаях передача данных через пропсы может быть более простым и прозрачным подходом. Оцените, являются ли provide и inject лучшим решением для вашего конкретного сценария.
#provide #article #tip
vueschool.io
Unveiling the Magic of Provide/Inject with Vue.js - Vue School Articles
Explore the power of Provide/Inject in Vue.js. Learn how to manage state and share data across components efficiently in Vue applications.
👍10👎1🔥1
HTML5 и CSS3 - достаточно функциональные языки и могут делать сами многое, для чего раньше нужно было задействовать JavaScript
В этой статье приводится 5 примеров элементов на чистом HTML/CSS
1. Toggle
2. Автоподсказки в инпуте (datalist)
3. Color picker
4. Accordion (details)
5. Dialog
#tip #html #css
В этой статье приводится 5 примеров элементов на чистом HTML/CSS
1. Toggle
2. Автоподсказки в инпуте (datalist)
3. Color picker
4. Accordion (details)
5. Dialog
#tip #html #css
You don't need JavaScript for that - HTMHell
A collection of bad practices in HTML, copied from real websites.
🔥1
Еще о SEO
Case study с сайта Strapi
Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.
Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.
Для Seo можно использовать пререндереры хостеров, как здесь.
#seo #nuxt
Case study с сайта Strapi
Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.
Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.
Для Seo можно использовать пререндереры хостеров, как здесь.
#seo #nuxt
strapi.io
Mug & Snug uses Strapi to develop a social e-commerce platform
Phillip Gourley, CEO, gives his feedback about the headless CMS Strapi that he's been using to manage content with Netlify, Nuxt.js, MongoDB Atlas, Docker, Stripe and Braintree.
👍3
👍3
Кстати, недавно, глядя на статистику Google Analytics, задумался, сколько процентов пользователей используют в браузерах adblock-и, которые блокируют трекеры GA.
Написал свой трекер. Получилось, что Google Analytics учитывает примерно 40%-50% от всех посетителей (не ботов). Это технический сайт, на не технических, наверное, процент побольше.
#ga
Написал свой трекер. Получилось, что Google Analytics учитывает примерно 40%-50% от всех посетителей (не ботов). Это технический сайт, на не технических, наверное, процент побольше.
#ga
👍1
Anthony Fu показал законченный вариант библиотеки для синтаксической подсветки фрагментов кода
По мнению автора это сильно улучшит воспринимаемость информации. Ну и такого ни у кого пока нет.
#twoslashes #shikiji #vitepress #antfu
shikiji
с подсказками от TypeScript пакета twoslashes
на примере SFC кода в VitePress.По мнению автора это сильно улучшит воспринимаемость информации. Ну и такого ни у кого пока нет.
#twoslashes #shikiji #vitepress #antfu
👍9❤2
Небольшое исследование по популярности серверных языков, а так же производительности некоторых PHP фреймворков и CMS
#benchmark #php #backend
#benchmark #php #backend
Arty-Crafty
Добавлены 3 новые главы в проект Arty-Crafty: "Категория товаров", "Избранное", "Codeium" и CMV
#artycrafty #codeium #cmv
Добавлены 3 новые главы в проект Arty-Crafty: "Категория товаров", "Избранное", "Codeium" и CMV
#artycrafty #codeium #cmv
Arty-Crafty - проект онлайн магазина
Онлайн маркетплейс | Vue FAQ
Vue FAQ - information about Vue.js and frontend development in general
👍5
DOM manipulation performance - React, Svelte and Vue comparison
https://krausest.github.io/js-framework-benchmark
#benchmark #react #svelte #vue
https://krausest.github.io/js-framework-benchmark
#benchmark #react #svelte #vue
🤣13👍3
Большинство JS фреймворков в своей эволюции идут примерно по одному пути - SPA, SSR метафреймворк, Native Script для мобильных устройств
Vue от своего Vue Native давно отказалась, а вот Svelte развивает - Svelte Native
#native #svelte
Vue от своего Vue Native давно отказалась, а вот Svelte развивает - Svelte Native
#native #svelte
svelte.nativescript.org
Svelte Native • The Svelte Mobile Development Experience
❤2🤔1