Еще одна малоизвестная UI библиотека от китайцев - Vexip UI

Для Vue 3, с мягкой приятной графикой и интересным наборов компонентов. Есть, например, Wheel и Tour

Features

📦 Out-of-box high quality 78 Vue 3 components
📐 Intuitive, minimalistic Api design
🔧 Configurable default value of props, quickly complete global/local modifications
⚡️ Composition Api, good performance base
🔨 With TypeScript, fully types
💪 1100+ unit tests to provide good stability
🎨 Support CSS variable, built-in dark theme
🚩 Support i18n
🛫 Provide resolver, support unplugin
🚤 Support SSR
🩹 Good a11n
👀 Close to business code arrangement, low threshold for source code reading

The design tokens are base on Open Color, and have some adjustments.

————

А какие еще чисто Vue 3 UI библиотеки существуют?
Чтобы не переписка с какого-нибудь Реакта или Vue 2.
Это ведь имеет огромное значение и для размера бандла, и для производительности, и для DX.

#lib #ui

• Webpack is still the most popular bundler, and Rspack inherits its best-in-class configuration and plugin system.
• Rspack is faster than Vite.
• Vite isn’t architecturally sound, as it’s a mixture of two bundlers: esbuild for development and rollup for production. This leads to the configuration and plugin system being bottlenecked as a superset of both.
• Vite is so successful because it came at the right time to replace create-react-app, and it has added support for any framework one can think of.
• Historically, Vite and Vitest come out of the Vue ecosystem. This isn’t an issue if you like Vue.

All in all, Vite has worked fine and always performed well for me. However, for the long term, I cannot recommend it and prefer Rsbuild.

React девелопер пишет, почему Rspack лучше Vite
Позабавила последняя "историческая" причина

#react #rspack #vite

Спам-боты выходят на новый уровень...

#spam

"Мы не добавляем что-то "просто потому, что можем". У нас должна быть чертовски веская причина для этого. А я до сих пор не вижу причин, и я не видел, чтобы кто-то хотя бы попытался их объяснить".

- Линус Торвальдс

#quote

Хорошее видео о применимости и взаимозаменяемости flex и grid и предубеждении, что flex только для одномерных лэйаутов, а grid - для двумерных.

#css #video

Если в VS Code у вас отключено автоматическое обновление редактора или стоит firewall, запрещающий такие запросы, то в один момент Volar или Eslint могут просто перестать работать, потому что их новая версия требует последних версией VS Code (и это случается далеко не редко). Об этом будет краткая запись в output логах Eslint.

Можно потратить кучу времени, пытаясь определить, что сломалось. Логи VS Code - очень полезная штука.

#vscode #volar #eslint #ide

Сколько лет современному программированию:

🟢 CSS is 29 years old
🟡 HTML is 31 years old
🔵 JavaScript is 29 years old
🐍 Python is 33 years old
🐘 SQL is 49 years old
🟧 Java is 29 years old
🟪 PHP is 29 years old
🔶 C++ is 38 years old
🔷 Ruby is 28 years old
🌐 Go is 15 years old
🟦 C# is 23 years old
🐳 Docker is 10 years old
🔵 TypeScript is 11 years old
🔵 Basic is 61 years old
🔵 ANSI C is 39 years old

#lang

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