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

Contacts: @RuslanMakarov
Download Telegram
About
Blog
Apps
Platform
Join
Vue-FAQ
924 subscribers
Vue-FAQ
Кроме Rolldown-a команда Vue на прошлой неделе выставила в open source еще один свой грандиозный проект - Vue Vapor, который уже можно попробовать в его песочнице.

Грандиозный потому, что это по сути переписывание бОльшей части фреймворка. При этом Vue API (код для Vue 3, который пишет разработчик) должен остаться тем же самым.

Современные фронтенд фреймворки бывают двух типов - runtime и compile time. Первые работают с Virtual DOM - это такая абстракция на JavaScript, с которой взаимодействует пользовательская программа вместо реального DOM вебстраницы и, грубо говоря, являющаяся его зеркальным отображением. Делается это потому, что работа с браузерным DOM (рендеринг) - очень затратная операция, и фреймворк через Virtual DOM призван её оптимизировать - например, несколько изменений в DOM собрать вместе и зарендерить как одно. Так работают Vue.js и React, они предоставляют в runtime браузера прослойку для пользовательского кода (типа виртуальной машины), который работает только с объектами Virtual DOM.

Compile time фреймворки вроде Solid.js или Svelte не создают этой прослойки, и компилируют пользовательский код в код, который работает с браузерным DOM напрямую. В результате бандл получается меньше, а программа - быстрее. Сложность тут в оптимизации подобной компиляции. Для простых вещей она подходит, но что-то более сложное - и сompile time фреймворки уже могут проигрывать в скорости, и однозначно проигрывают Vue 3 в DX.

Команда Vue хочет хотя бы частично попробовать внедрить compile time реактивность - можно будет указывать, какие пользовательские компоненты компилировать в конечный код (Vapor mode), а для каких использовать обычный Virtual DOM.

#vapor #solid #svelte #vuejs #react
GitHub
GitHub - vuejs/vue-vapor: Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM. - vuejs/vue-vapor
535 viewsedited  
Vue-FAQ
Vue-FAQ
Кроме Rolldown-a команда Vue на прошлой неделе выставила в open source еще один свой грандиозный проект - Vue Vapor, который уже можно попробовать в его песочнице. Грандиозный потому, что это по сути переписывание бОльшей части фреймворка. При этом Vue API…
Если кто-то немного прифигел от числа контрибьютеров во Vue Vapor в новости выше (450 на данный момент), то данный твит Эвана всё разъясняет:

Совет: проведите spellcheck вашего репозитория, прежде чем опенсорсить его, чтобы избежать всех PR с исправлениями опечаток.

#tip
417 viewsedited  
Vue-FAQ
Следующая большая Vue.js онлайн конференция пройдет 25-26 апреля 2024 года
Evan You заявлен спикером

Vue.js Live

#event #vuejs
Vuejslive
Vue.js Live 2024 Conference
Vue.js Live is a community conference taking place in a remote format. Meet best engineers to learn more about Vue.js fundamentals, best practices, and architecture. Join us on April 25-26, 2024.
413 views
Vue-FAQ
Хм..
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)

Это этим занимаются SEO-специалисты?

#seo #webvitals
438 views
Vue-FAQ
Кастомный обработчик ошибок:

try {
   // ...
} catch(e) {
   let url = `https://www.stackoverflow.com/search?q=[js] + ${e.message}`;
   window.open(url, "_blank");
}


#humor
855 views
Vue-FAQ
Пример реализации светлой и темной тем на сайте на чистом CSS

<body>
  <label>
    <input id="dark" type="checkbox">
    Dark mode
  </label>
</body>


body {
  --fg: black;
  --bg: white;
  color: var(--fg);
  background-color: var(--bg);
}

body:has(#dark:checked) {
  --fg: white;
  --bg: black;
}


#css #tip
440 views
Vue-FAQ
Решил применить плагин eslint-plugin-vuejs-accessibility на своем проекте онлайн магазина Arty-Crafty. По PageSpeed оценка по A11y была 72, теперь вот так. Мелочь, а приятно. БОльшую часть ошибок плагин помог исправить, остальное - по подсказкам PageSpeed.

Кстати, когда eslint-plugin-vuejs-accessibility показывает ошибку, по ссылке можно попасть на очень хорошее описание в документации плагина соответствующего требования A11y и варианты исправления, так что однозначно рекомендуется.

Чтобы подключить плагин в ESlint flat config (типа того, что используется в antfu eslint-config) нужен примерно такой код (в доке этого нет):

import a11y from "eslint-plugin-vuejs-accessibility";

export default antfu({
  plugins: {
    "vuejs-accessibility": a11y,
  },
  rules: {
    ...a11y.configs.recommended.rules,
    "no-console": "off",


#a11y #eslint #artycrafty
520 views
Vue-FAQ
Полезный каталог Telegram групп по IT

@it_chats

#tip
408 views
Vue-FAQ
Еще одна книжка с громким названием - Design patterns for Vue.js.

Автор - Lachlan Miller, член Vue team, контрибьютор во Vue.js, Vue Test Utils и Cypress

Платная, есть превью с двумя главами

#learning #book
885 views
Vue-FAQ
С 1988 года 14 марта отмечается Международный день числа «Пи»
В 15 часов 9 минут 26 секунд

В связи с чем, один и тот же вопрос двум версиям ChatGPT - какая предпоследняя цифра в числе π?

#ai
555 views
Vue-FAQ
Эван уже отписался по поводу нового AI Devin, который якобы решает 13% issues на GitHub

Devin не выходит за рамки того, что я себе представлял - и, честно говоря, он меня не впечатляет. Разработчик, который справляется со своими задачами лишь на 13%, - это обуза, а не актив.

Ну и надо заметить, что issues на GitHub бывают очень разные - и элементарные и хорошо сформулированные, и "туманные". Так же как и код, к которому они относятся.

#ai #evanyou
561 viewsedited  
Vue-FAQ
Сегодня день искусственного интеллекта

Обновления у Codeium - бесплатного AI помощника в качестве расширения для IDE.

1. Появился Codeium University (кликнуть иконку "i" справа вверху боковой панели). Подробная информация как работать с инструментом в виде удобной справки

2. Появилась возможность добавлять свои файлы, директории и даже GitHub репозитории в контекст (вкладка Context). По-прежнему по репозиториям есть React и Svelte, но нет Vue ((. Можно скачать и добавить как локальную директорию. В принципе, можно наверно так найти несколько качественных проектов на Vue и добавить в контекст как эталон.

#codeium #ai
686 views
Vue-FAQ
Щупальца Vue протянулись к горлу Ангуляра - вышел Analog.js 1.0

Мета-фреймворк на Vite, Nitro, с File-based routing, SSR/SSG и вот таким SFC форматом:

<script lang="ts">
  import { signal } from '@angular/core';

  const count = signal(0);

  function increment() {
    count.update(total => ++total);
  }
</script>

<template>
  <h2>Hello Analog</h2>

  Count: {{ count() }}

  <button (click)="increment()">
    Increment
  </button>
</template>

<style>
  h2 {
    color: red;
  }
</style>


Автор - Brandon Roberts, NgRx maintainer, Angular GDE

Осталось выпустить ReAnalog.js и затем смёржить все три ветки фронтенд фреймворков в одну главную - Vue

#angular #analogjs
analogjs.org
Analog | Analog
The fullstack Angular meta-framework
1.0K viewsedited  
Vue-FAQ
Член Vite core команды Patak сообщил, что, возможно, некоторые опциональные возможности Rolldown могут появиться в Vite 6 (релиз ~октябрь/ноябрь). Rolldown по дефолту заменит esbuild, возможно, в Vite 7. А замена и esbuild, и Rollup планируется в Vite 8. На данный момент реальный ETA не определен.

Всё еще очень нескоро, короче.

#rolldown #vite
468 viewsedited  
Vue-FAQ
Microsoft, Amazon (и, вроде, Google) дали корпоративным клиентам из РФ три дня на чтоб собрать вещи с их облачных решений. Пока точно не понятно, кого именно это коснется, но если и у физлиц есть там данные - повод задуматься или хотя бы сделать бэкап на сторону.

#cloud
Хабр
Microsoft и Amazon с 20 марта 2024 года приостанавливают доступ к своим облачным продуктам на территории РФ
15 марта 2024 года компания Softline сообщила , что Microsoft и Amazon с 20 марта 2024 года приостанавливают доступ к своим облачным продуктам на территории РФ, включая Power BI и Dynamics CRM....
570 views
Vue-FAQ
CSS свойство line-clamp позволяет ограничить текст определенным числом строк.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


#tip #css
498 views
Vue-FAQ
Если вы используете сторонние шрифты (например, Google Fonts), то подключать их лучше не в вашем CSS, а в index.html.

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

#fonts #css #tip
525 views