Custom directives

Кастомную директиву можно задать непосредственно в script setup компонента.

Её имя должно быть в camelCase и начинаться с v.

#tip

Как фронтенд фреймворки себя позиционируют (на своих главных страницах):

Реакт - это библиотека
Vue - прогрессивный
Nuxt - интуитивный
Svelte - кибернетически усовершенствованный
Solidjs - простой и производительный
Angular - дающий уверенность
$mol - микромодульный
Meteor.js - не требующий борьбы с собой
jQuery - многофункциональная библиотека
Qwik - создавайте приложения мгновенно
Ember.js - для амбициозных вебразработчиков
Alpine.js - новый, лёгкий фреймворк

Работа с шрифтами

Сайт fontsource.org позволяет установить как npm пакет множество open-source шрифтов, в том числе с Google fonts.
Шрифты интегрируются в бандл, что имеет свои плюсы и минусы.

npm install @fontsource-variable/inter

import { createApp } from "vue";
import '@fontsource-variable/inter';

import App from "./App.vue";
...

#fonts #lib

Хорошие бесплатные наборы иконок в SVG формате

- icones.js.org
- iconbuddy.app (есть ограничение на скачивание)
- svgl.app - бренды
- flaticon.com - не все бесплатно, большой поиск
- pictogrammers.com - Material Design

#icons #lib

Вышла вторая редакция проекта PLB (Programming Language Benchmark) по тестированию производительности решения типовых задач на различных языках программирования

В ней измеряется производительность кода для умножения матриц и решения задачи расстановки 15-ферзей, а также дополнительно оценивает поиск решений в игре Судоку и определение пересечений двух массивов.

Как видно, все языки программирования находятся примерно на одном уровне, за исключением Elixir, PHP, Perl, Python:CPython и Ruby.

Bun не показывает чудес по отношению к Node.js+JIT

В реальных задачах данная производительность обычно играет глубоко второстепенную роль после DX (удобства работы с языком), задержек в работе с UI, сетью, базой данных и прочих накладных расходов.

#benchmark

AI помощник Codeium (бесплатный аналог Copilot) показывает статистику своей помощи в непосильной программерской работе.

Нормально помог.

#codeium #ide

На просторах Рунета обнаружился еще один сайт, посвященный бесплатному обучению программированию на Vue:

https://vib-online.ru/

Автор выкладывает материал в виде глав учебника
К сайту прилагается Telegram канал: "Fronend для взрослых"

#learning #vib

Пара неочевидных вариантов работы с Reactivity API

Типа, стор:

const counter = reactive({
  count: 0,
  increment() {
    this.count += 1;
  },
  decrement() {
    this.count -= 1;
  },
});

То же, с рефом:

const counter = reactive({
  count: ref(0),
  increment() {
    this.count.value += 1;
  },
  decrement() {
    this.count.value -= 1;
  },
});

`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