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

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

#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

• 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