Vue-FAQ
924 subscribers
562 photos
90 videos
557 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Выпустил v1.0.0 плагина vitepress-plugin-diagrams

Для чего он нужен?

1. Просите AI добавить в проект VitePress документацию

2. Просите AI изучить кодовую базу какого-нибудь модуля (TimelineChart в данном случае) и сгенерировать несколько диаграмм, описывающих его структуру и потоки данных

3. Результат в текстовом виде в markdown файлах и сразу на экране. Никаких расширений IDE ставить не нужно.

Список поддерживаемых типов диаграмм (несколько десятков) здесь

#ai #lib #vitepress
По результатам StateOfReact 2024 Vite обошел Webpack и в мире реактеров, в связи с чем их главари порекомендовали теперь использовать Vite

Читая победное напутствие Эвана новообращенным адептам, пришла мысль, что в js метафреймворки это не Nuxt / Next, а Vite / Webpack

Framework-as-Vite-plugin

#evanyou #react #vite #webpack
Media is too big
VIEW IN TELEGRAM
Окружили злые
Доброго меня.
С виду боевые,
В реальности - фигня


(с) Юра музыкант

Второй величайший русскоязычный поэт после В. Высоцкого

#offtop #music #video
CSS свойство clamp() позволяет создавать адаптивные элементы, которые масштабируются в зависимости от размера экрана, но при этом не выходят за заданные границы.

h1 {
font-size: clamp(24px, 4vw, 48px);
}

.container {
width: clamp(300px, 50%, 900px);
}

.element {
padding: clamp(10px, 2vw, 1.5rem);
}


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

#css
Часто спрашивают: зачем нам обращать внимание на характер и личность учителя Vue? Мы должны судить о том, что он говорит, и принимать только это в соображение.

Это неверно. Если человек хочет учить React, Angular или другим фронтенд фреймворкам, он может быть чем ему угодно, так как они требуют только умственного багажа; но что касается знания Vue, то решительно невозможно, чтобы истинное понимание его жило в нечистой душе.

Какому знанию может научить нечистый человек? Необходимое условие для приобретения истины для себя или для передачи ее другим — чистота сердца и души. Видение Vue, или даже слабый проблеск его понимания никогда не явятся, пока душа не чиста. Поэтому в учителе Vue вы должны смотреть прежде всего: что он такое — и уже затем: что он говорит. Он должен быть совершенно чист, и только тогда его слова приобретают ценность, так как только тогда он действительный «наставник».

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

#esse
Интересное решение на CSS определить, что содержимое блока не помещается в нем и сделать что-то - через определение появления скролла и установку CSS кастомного свойства

https://codepen.io/robinrendle/pen/MWRxNJr

#css
Что вы используете в основном во Vue для стилей?
Anonymous Poll
32%
Atomic CSS (Tailwind, UnoCSS etc)
35%
BEM
12%
CSS модули
51%
Scoped CSS классы
4%
Другое
Please open Telegram to view this post
VIEW IN TELEGRAM
CSS свойства transform, opacity, filter и некоторые другие используют GPU компьютера для рендеринга.

Проверяйте в browser devtols, что им хватает ресурсов, они не грузят процессор и нет отброшенных фреймов

Свойство will-change используется чтобы явно включить GPU оптимизацию на элементе

#css #tip
Я ранее советовал переходить от .env к конфигурационным файлам в json формате

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

Это значит блок кода

if (import.meta.env.MODE === "development") {
// do some debug work
}


не попадет в бандл вообще в первом случае, а аналог с конфиг файлом - попадет, (но не будет выполняться, естественно).

Так что иногда имеет смысл использовать эту конструкцию (для import.meta.env.MODE переменной .env файл не нужен, она определена всегда).

#vite #tip
Среди владельцев сайтов новая мода - все ставят себе рядом с robots.txt еще и LLMs.txt

Это новый стандарт, предложенный для управления доступом больших языковых моделей (LLMs) к содержимому веб-сайтов. Он работает аналогично robots.txt, но предназначен специально для LLM.

Файл llms.txt использует markdown форматирование и может содержать различные типы информации, такие как:
- Краткое описание сайта.
- Ключевые темы и понятия.
- Ссылки на важные страницы или разделы.
- Инструкции для LLM о том, как интерпретировать контент.

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

#ai
Сайт, на котором можно сравнить код разных языков программирования (почти 1000) при решении определенных задач

#sd #lang
Автор - админ самого большого Vue.js community в Twitter

#x #react
Оптимизация форматирования даты:

date.toLocaleString() - относительно очень медленная функция

new Intl.DateTimeFormat() - в 10 раз быстрей

Своё кастомное форматирование может увеличить скорость еще почти на порядок

При использовании Intl хорошей практикой будет не создавать этот объект каждый раз, а переиспользовать его

#date #intl
jsbenchmark.com - очень удобный сервис для проведения замеров производительности небольших кусков кода

#benchmark
[де]-Генеративный AI в действии.

Кто-то мог представить 7 лет назад, что создадут такую абсолютно безмозглую махину, которая так хорошо умеет повторять сочинять тексты? Хотя Пелевин в середине 2010-ых об этом уже вроде писал...

У Claude вышел Sonnet 3.7, который считается лучшей LLM для программерских задач. Она уже появилась в Cursor, который последнюю неделю что-то очень сильно колбасит - кодогенерит чушь. На их форуме полно жалоб, я тоже агентом временно перестал пользоваться.

Тем не менее у Cursor на днях тоже должно появиться большое обновление - версия 0.46. Довольно много изменений. Чат и Composer совместили, улучшены MCP поддержка и сам Агент.

Ну и вот хороший сайт для мастеринга AI промптов

Грамотно составленный промт очень сильно повышает качество результата как при использовании AI программно, так и в простом чатботе.

#ai #cursor #ide