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

Contacts: @RuslanMakarov
Download Telegram
Оказывается, русскоязычный язык программирования КуМир из 1980-х до сих пор часто преподается в школах...

#lang
🤯8😁4👍2🤮1🤡1
Выпустил v1.0.0 плагина vitepress-plugin-diagrams

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

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

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

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

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

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

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

Framework-as-Vite-plugin

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


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

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

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

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

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

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


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

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

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

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

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

#esse
🤡18🤣12💊51🤯1💯1🗿1
Интересное решение на CSS определить, что содержимое блока не помещается в нем и сделать что-то - через определение появления скролла и установку CSS кастомного свойства

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

#css
👍6
Что вы используете в основном во Vue для стилей?
Anonymous Poll
32%
Atomic CSS (Tailwind, UnoCSS etc)
35%
BEM
12%
CSS модули
51%
Scoped CSS классы
4%
Другое
👍2❤‍🔥1😘1
В Chrome Canary уже тестируются CSS custom functions

@function --negate(--value) {
result: calc(-1 * var(--value));
}

:root {
padding: --negate(1px); /* = -1px */
}


Пользовательскую функцию можно рассматривать как расширенное пользовательское свойство, которое вместо замены одним фиксированным значением вычисляет значение замены на основе параметров функции и значений пользовательских свойств в момент ее вызова.


Интересно, что внутрь тела этих функций можно ставить, например, @media

Через три года в GitLub-е опять будут переписывать свою дизайн систему. Хочешь снизить прибыль компании и обеспечить фронтендеров большой зарплатой на много лет вперёд - используй Atomic CSS.

#css #chrome #gitlab
👍8
CSS свойства transform, opacity, filter и некоторые другие используют GPU компьютера для рендеринга.

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

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

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

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

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

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


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

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

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

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

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

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

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

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

#x #react
😁9😢4🍌2