Vue.js Nation конференция будет хоститься в онлайн хабе Vito, созданном с помощью Vue.js

#vito

Vue.js Nation конференция началась с часовой рекламы курсов и сертификаций (скоро появится по Nuxt и JS)

Затем Evan You отвечал на вопросы ведущей:

- Поддержка TypeScript во Vue 3 нормальная
- В феврале будет Vuenniversary - 10 лет Vue
- В 3.5 и 3.6 изменения будут небольшие, типа сomponent types и uuid для SSR
- Во второй половине года объявит о чем-то интересном (exciting)
- Если Signals будут стандартизованы, то Vue может использовать это
- Elk (клиент Mastodon) - пример крутого нетривиального приложения на Vue (Nuxt)
- Vue украл был вдохновлен разными моментами в Angular 1, React, Knockout, Svelte
- Options API убирать не собираются
- Evan сомневается, что React идет куда-то туда с RSC
- Объяснил, почему не рекомендуется мутировать пропс-объект (не так явно видно, кто и как его меняет)
- VitePress 1.0.0 готов, но в конце декабря они погрязли в другой работе и не релизнулись. Скоро выпустят с фанфарами.
- AI сильно фронтенд не изменит в ближайшем времени. Пока это просто помощник

#evanyou #vuejsnation

Создатель Solid.js Ryan Carniato год назад написал статью об эволюции Signals в JavaScript (чья концепция лежит и в основе реактивности Vue.js)

#reactivity #solidjs

Scroll chaining - это когда скролишь в модалке или боковом меню, и при окончании скрола в ней начинает скролиться главное окно за модалкой.

Такое поведение можно отключить следующим правилом внутри элемента со скролом:

overscroll-behavior-y: contain;

Еще один совет - при переходе по роутам часто заметно "прыгание" содержимого экрана, потому что главный скроллбар то появляется, то исчезает в зависимости от количества контента или открытия модального окна.

Можно заранее зарезервировать под него место, и тогда визуально дерганий не будет. Сам скроллбар будет появляться по необходимости. Правило ставить надо на html тэг в общем случае.

scrollbar-gutter: stable;

#tip #css #scroll

Чтобы показать размер акулы, через которую современный Software development перепрыгнул, вот реальная история.

Пять лет назад надо было организовать JWT аутентификацию на сайте с PHP бэкендом. Взял firebase/php-jwt - продукт разработчиков Google, ноль зависимостей, один файл среднего размера который делал всю криптографию. Логика там простая - сгенерировать JWT токен при логине и проверить подпись токена при запросе с фронтенда. Реализация на бэке заняла строк 50 кода, на фронте - столько же.

Через некоторое время делал JWT аутентификацию на другом проекте, заметил, что firebase/php-jwt переписался в ОО стиле - появились классы JWT, Key, ExpiredException и т.д. Логика та же, размер общий чуть увеличился.

Продолжение следует...

#laravel #dx #optimization #jwt

О сложности в SD (продолжение)

Недавно надо было поставить JWT аутентификацию на Ларавель. Посмотрел в интернете - делается через пакет tymon/jwt-auth. Поставил, настроил.
Залез внутрь пакета - там 65 php файлов. Глянул в зависимости в composer.json:

"require": {
  "php": "^5.5.9|^7.0",
  "illuminate/auth": "^5.2|^6|^7|^8",
  "illuminate/contracts": "^5.2|^6|^7|^8",
  "illuminate/http": "^5.2|^6|^7|^8",
  "illuminate/support": "^5.2|^6|^7|^8",
  "lcobucci/jwt": "<3.4",
  "namshi/jose": "^7.0",
  "nesbot/carbon": "^1.0|^2.0"
}

Ой-вей, так этот пакет даже JWT криптографией не занимается, это просто прослойка между Ларавелем и другими пакетами, которые уже делают что-то полезное. То есть, это аналог того кода в 50 строк, который я писал пять лет назад.

Вот этот пакет со всеми зависимостями делает, по сути, то же самое, что и firebase/php-jwt. То же самое с точки зрения бизнес-требований, технической стороны, безопасности.

Складывается впечатление, что как минимум 90% кода пишется не для того, чтобы решить конкретную бизнес задачу, а по другой причине. Чтобы получить доход, но не прямо и конкретно, а в целом, "для отрасли". Для этого усложняются фреймворки и методики. То, что можно сделать просто, делается сложно. Это как таксист, который везет кругами неместного пассажира, чтобы накрутило на счетчик. Причем таксист сам не знает куда ехать - он ведёт по навигатору, он только это умеет. А навигатор ведет так, как в него заложил его хозяин.

Сфера software development усложняется и задурманивается, чтобы там нельзя было найти прямых путей. А те, кто помнит, как их находить, побыстрее вымерли.

#laravel #dx #optimization

Вчера был показан пример, как убрать дергание экрана из-за появляющегося-убирающегося скроллбара через scrollbar-gutter: stable;. Минус данного метода в том, что если бэкграунд сайта непрозрачный и "от края до края", то становится видна зарезервированная под скроллбар полоска.

Частично это можно исправить через scrollbar-gutter: stable both-edges; - постоянные полоски будут слева и справа.

Есть еще два варианта избежать "прыжков" страницы. Можно "накладывать" скроллбар на сайт при его появлении - именно это используется на проекте arty-crafty. Это делается через отрицательный отступ справа:

html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

Также можно добавлять компенсационный отступ слева, тогда вся страница будет "сужаться" слева и справа равномерно при появлении скроллбара. Тут стабильность страницы будет зависеть от контента на нем (например, текст может перенестись) и нужно будет отдельно обработать элементы с position: fixed:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Понятно, что данные методы имеет смысл использовать только при разрешении экрана десктоп/ноутбук.

#tip #css #scroll

Если нужно продебажить внутри шаблона SFC, можно внутрь поставить логгирующую функцию или debugger:

<template>
  <div v-for="i in 4" :key="i">
    {{ log(i) }}
    {{ i + 1 }}
  </div>
</template>

function log(val) {
  console.log(val);
  // debugger;
}

#tip

Apple разрешила использовать отличные от WebKit движки браузеров для iOS в EU

#news #safari #ios

Бывают случаи, когда надо явно перерендерить шаблон - например, он мог быть изменен сторонней нереактивной библиотекой. Самый правильный способ делать это - через key:

<script setup>
import { ref } from 'vue';

const componentKey = ref(0);

const forceRender = () => {
  componentKey.value += 1;
};
</script>

<template>
  <MyComponent :key="componentKey" />
  <button @click="forceRender">Force re-render</button>
</template>

#tip

Буду иногда кидать интересные математические задачки для разминки ума

#math

Сегодня полегче

#math

Обновился проект Arty-Crafty
Добавились: выбор BaaS, настройка и интеграция с Supabase, настройка Hoppscotch, добавление мобильного нижнего меню.
Текущая версия сайта - https://vuesence.github.io/arty-crafty/
Очередное CMV

#artycrafty #supabase #cmv

Как сделать человеко-понятные SEO-friendly ссылки из названия, типа такой?

/category/2-voylochnie-igrushki вместо /category/2

5 строк.

В роутах пишем:

  {
    path: "/category/:categoryId",
    name: "category",
    props: route => ({ categoryId: +(route.params.categoryId as string).split("-")[0] }),
    component: ProductCategoryView,
  },

И в месте создания ссылки (боковое меню, например) при router.push() добавляем slug названия категории:

@click="router.push(`${category.id}-${slug(category.title)}`)"

функцию slug() разрешаем сгенерить Codeium-u запросом "write slug function for сyrillic letters". На бэкенде ничего менять не надо.

Теперь если пользователь сохранит страницу в браузере, а название категории немного изменится на сайте, он все равно попадёт, куда надо.
categoryId можно поставить и после slug-a, тогда будет как у Ozon-a.

Может кто знает, есть ли готовые библиотеки для визуализации графа релизов и коммитов GitHub проекта? Подскажите.

#github

Вчера не смог заснуть пока не сделал. Демо. Строит таймлайн релизов любого публичного репозитория. Адаптирован к темам VitePress.

Опубликовал npm пакет release-timeline. Документация здесь.

Подключение в компоненте или в VitePress .md:

<script setup>
  import { ReleaseTimeline, DefaultOptions as options } from "release-timeline";
  import "release-timeline/dist/style.css";

  options.github.owner = "vuesence";
  options.github.repo = "arty-crafty";
</script>

<ReleaseTimeline :options="options" />

Планируется добавить детали релиза, а также опционально список commits и pull requests к каждому релизу

Глобальный прелоадер

Альтернативу много лет создающемуся Suspense несложно сделать самому с помощью одной composable функции в 30 строк.

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

Небольшой лайфхак, если у вас в строковых переменных содержится какой-то код, и вы хотите, чтобы он синтаксически подсвечивался.

Также есть отдельное расширение для VS Code для этого.

#tip

Вопрос: при изменении какого CSS свойства на 0.01px визуально видно изменения на экране?

#tip #css

История shikiji - библиотеки для синтаксической подсветки фрагментов кода, о которой мы писали несколько раз, - скоропостижно завершилась.

Напомним, Anthony Fu форкнул и портировал пакет shiki.js на ESM. Данная библиотека предназначено для синтаксической подсветки фрагментов кода, аналог highlight.js. Использует hast для токенизации и VS Code Oniguruma, которая написана на C и компилируется в WebAssembly. Данная часть переписана Anthony на ESM, является tree-shakable и работает и в Node.js, и в браузере.

Использование того же движка, что и в VS Code, позволяет работать быстрее распространенных подсветчиков кода, занимать меньше места и быть более функциональна (например, включает препроцессор для TypeScript TwoSlash нотаций). Доступны множество языков (включая вариации Vue и Vue HTML) и все темы VS Code (на данный момент около 5000). VitePress переехал на новую библиотеку для подсветки блоков кода в декабре 2023 года.

На прошлой неделе владельцы shiki сделали Pull request и забрали себе все улучшения, добавленные Anthony. Теперь он работает над shiki, проект shikiji архивирован.

#antfu #shiki #shikiji #vitepress

Один из вариантов решения записывается в одну строчку

#math