v-memo - директива для микро-оптимизации

При изменении актуального состояния компонента он ре-рендится весь. Может случиться, что какие-то куски его шаблона тяжелы для построения, и при определенных изменениях их не надо ре-рендерить, тогда можно определить эту логику через v-memo. Особенно это может пригодиться при отображении большого массива нетривиальных элементов/компонентов.

#optimization

Не забываем, что кроме v-if есть и v-show, если нужно сохранить состояние компонента между показами или для оптимизации, когда он создается/уничтожается много раз.

#tip

А вы знали, что PostgreSQL может легко заменить Redis и MongoDB?

В первом случае, с помощью UNLOGGED таблиц и JSON типом данных, во втором - с помощью JSONB.

Еще у него есть встроенный адаптер для организации CRUD Web API - довольно удобно для фронтендеров, когда можно обойтись только этим и не писать свой бэкенд.

#db #postgresql #api

Чтобы выделить из компонента отдельно некий функционал с реактивным состоянием, были созданы composable функции (называемые "функциями", хотя по сути это объект созданный через js замыкание - closure).

Чтобы использовать функционал с реактивным состоянием между несколькими компонентами, можно задействовать js модули либо Pinia/Vuex сторы.

Иногда нужно нечто среднее - подобную сущность с реактивным стейтом и функционалом на нем, но используемую в нескольких связанных компонентах (например, в Tabs или каких-то виджетах), - то есть, в некотором локальном контексте. Для этого можно в общем родительском компоненте создать composable, который передать потомкам - либо через provide/inject (лучше), либо через props (не надо).

В этом случае данный реактивный объект будет жить в своем ограниченном контексте и не будет конфликтовать с оставшейся частью проекта.

#reactivity #bestpractices #architecture

Еще один пример как Volar может сломаться при обновлении / не обновлении VS Code

Intellisense перестает работать во вновь созданных Vue файлах.

#volar #vscode

Выражение "городить свои велосипеды" в IT заиграло новыми красками

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

Если тебе нужен индексируемый поисковиками сайт, надо писать на Nuxt, а не городить отдельную или динамическую отрисовку. Нужно использовать VueUse, потому что это швейцарский нож в любых ситуациях. Для соединения с бэком надо всегда подключать Tanstack vue-query, потому что у него десятки тысяч звезд на GitHub, все его используют, и он легко решает кучу твоих проблем, о которых ты раньше даже не догадывался, но теперь они у тебя есть. Ну и, конечно, Tailwind!

О VueUse уже много говорилось. Как и об #ssr. Как и о Tailwind.

vue-query образовался из react-query, который действительно решал проблемы Реакта. Но во Vue нет этих проблем. Vue предоставляет все инструменты для эффективной и элегантной работы с бэкендом.

Проблема "решений", пришедших и навязываемых из других фреймворков - это действительно проблема. Человек, перешедший с бэкэнда и даже с другого языка программирования возможно будет писать более качественный Vue код, чем переучившийся с Реакта.

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

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

Ну и не будем забывать, что Vue - это тоже велосипед, написанный в эпоху диктатуры Angular, React, JQuery и других солидных, проверенных и общепризнанных решений.

#esse #architecture

И вот эта хрень собирается заменить разработчиков?

#ai #meme

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

Да даже обидно немного. Тут долбишься как мартышка, тестишь сервис в пару сотен строк на разных виртуалках, конфигах, организовываешь тестовые группы юзеров и так далее. Перед выпуском морочишься со совместимостью обновлений со старыми базами и так далее. Планируешь откат, если что. Логи многокилобайтные собираешь... Базы бакапишь...
А тут херак-херак! Пол мира сервисов положили... Ну извините. Не подумали мы!

#testing #qa

На чистом CSS можно создать несложный редактор изображений

codepen

#css

Марио передвигается клавишами влево-вправо-вниз-вверх

Написано на чистом CSS

Предположения, как это может быть реализовано?

#css #challenge

По Марио:

Клавиши используются для скрола

Песочница

Полная версия игры Супер CSS Марио

#css

В следующей версии Vue - Official будет удалена функция переключения синтаксиса v-bind, поскольку новое расширение VSCode реализовало ту же и более продвинутую функциональность. Если оно вам нужно, вы можете установить и попробовать его прямо сейчас.

Мейнтенер Volar-a продолжает чудить.

Теперь надо устанавливать дополнительное расширение в VS Code (у которого на данный момент всего 20 установок), чтобы редактор ставил двоеточие перед именем пропса при обнаружении в нем js выражения.

Судя по главному спонсору расширения (antfu) и отсутствии привязанность к Vue в описании, это еще один шаг в сторону Un-иверсализации рожденного в- и около Nuxt кода на другие библиотеки и фреймворки, теперь ценой DX простых Vue-разработчиков.

Раньше казалось, что Johnson Chu просто ошибается, но теперь понятно, что это натуральный вредитель.

Хейт.

#volar

Через неделю после разноса Минина АйТиБородой пришла ответка от Владилена.

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

И согласился на дебаты с Мурычем.

#minin #itbeard

Adaptability vs. Responsiveness

Разница между адаптивностью (слева) и отзывчивостью (справа)

#css #ui

Есть два основных подхода для аутентификации пользователя

Аутентификация на основе сессии

При этом подходе вы храните информацию о сессии в базе данных или хранилище сессий и передаете идентификатор сессии пользователю.

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

Вот как это работает:

- Пользователь делает запрос на вход в систему, и он отправляется на внутренний сервер..
- Бэкэнд создает сессию с использованием секретного ключа и сохраняет данные в хранилище сессий.
- Сервер отправляет клиенту cookie с уникальным идентификатором сессии.
- Пользователь делает новый запрос, и браузер отправляет идентификатор сессии вместе с запросом.
- Сервер аутентифицирует пользователя по идентификатору сессии.

Аутентификация на основе JWT

В подходе на основе JWT информация о сессии не хранится в хранилище сессий.

Вся информация доступна в токене.

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

Вот как это работает:

- Пользователь делает запрос на вход в систему, и он отправляется на внутренний сервер.
- Сервер проверяет учетные данные и выдает JWT. JWT подписывается с помощью закрытого ключа и не требует хранения сессии.
- JWT передается клиенту либо в виде cookie, либо в теле ответа. У обоих подходов есть свои плюсы и минусы.
- При каждом последующем запросе браузер отправляет cookie с JWT.
- Сервер проверяет JWT с помощью секретного закрытого ключа и извлекает информацию о пользователе.

#jwt #auth

Есть инструмент для облегчения миграции с миксинов на композаблы - vue-mixable
Автор - член Vue.js команды Linus Borg

#mixins

Такая забавная статья про CSS попалась

Автор хочет типизацию как в TypeScript, но только для CSS

#css #ts

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

Во Vue можно создать собственный обработчик ошибок и ворнингов для лучшей обработки ошибок для улучшения UX.

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

Обработчик ворнингов работает только в dev режиме.

#tip

Для чего нужны tsconfig.node.json, tsconfig.json, (tsconfig.vitest.json)?

В проектах Vue, созданных с помощью Vite, используются несколько файлов конфигурации TypeScript, каждый из которых играет свою роль в компиляции и тестировании TypeScript-кода.

tsconfig.json:

- Основной файл конфигурации TypeScript.
- Определяет глобальные настройки TypeScript для всего проекта, такие как целевая версия JavaScript, модульная система, пути к файлам и т.д.
- Может включать ссылки на другие файлы конфигурации TypeScript (extends, references).
- tsconfig.json по умолчанию не используется в Vite для компиляции кода.

tsconfig.node.json:

- Конфигурация TypeScript для среды Node.js.
- Определяет настройки TypeScript, специфичные для компиляции кода в Node.js.
- Используется Vite для компиляции TypeScript-кода серверной части приложения.

#vite #ts #nodejs