Еще одна малоизвестная 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

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

#spam

Хорошее видео о применимости и взаимозаменяемости 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

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

codepen

#css

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

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

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

#css #challenge

По Марио:

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

Песочница

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

#css

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

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

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

#minin #itbeard