#evanyou #video

Аргументация против глобальных автоимпортов (типа тех, что в Nuxt) от Artyom Tuchkov

1. Это явно - ты всегда видишь, откуда взялся компонент и в один клик можешь провалиться в него, а не в *.d.ts ;)

2. Это наглядно видно не только в редакторе, но и на всяких гитхабах, когда смотришь там код, с автоимпортами тебе придется гадать, откуда взялся компонент

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

4. Не нужно генерировать портянку *.d.ts для того, чтобы редакторы видели их, и, как следствие, без них ты получаешь более качественный тулинг и анализ твоего кода

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

6. Импорты может проставлять сама IDE, а еще их можно сворачивать в 1 строку, если визуально отвлекают

#architecture #bestpractices #tip #nuxt

Недавно только обсуждали провал Vue School с их Vue сертификацией на certificates.dev (хотя с точки зрения бизнеса это, наверно, совсем не провал).

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

#vueschool #certification #angular

Рабочее место настоящего программера.

Эван дал большое интервью. Есть интересное.

#evanyou #video

В VitePress картинкам тоже можно задавать стили.

Определять стили можно в том числе и в самом .md файле.

Вообще, VitePress можно застилизовать до неузнаваемости (в хорошем смысле этого слова)

#vitepress

Очень познавательный стрим АйТиБороды про Владилена Минина,

Бо́льшую часть его занимает рассказ о конфликте Минина и Ильи Климова, начавшегося с мининского курса по Vue.

Больше всего удивляет тупость стримера. Вроде бы взрослый, серьезный, понюхавший пороха человек, а всё равно ему надо десять раз наступить на говно, пять раз его понюхать и два раза попробовать на вкус прежде чем признать, что это говно. И даже после этого делать предположение, что возможно в душе это все-таки плохо сваренное шоколадное масло.

То ли дело настоящая борода IT - Мурыч

В конце стрима темная энергия мининских хомячков сделала свое черное дело... (

#itbeard #minin #video

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