SVG тоже могут иметь реактивные свойства

<template>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
defineProps<{
  color: string
}>();
</script>

#tip #svg

Известно, что несколько пропсов можно передать как объект через v-bind

<template>
  <UserAccount
    :name="user.name"
    :profile="user.profile"
    :location="user.location"
  />
</template>

// равносильно

<template>
  <UserAccount v-bind="user"/>
</template>

Но это же верно и для событий:

<template>
  <UserAccount v-on="userEventHandlers"/>
</template>

<script setup>
const userEventHandlers = {
  updateName(newName) { ... },
  deleteUser() { ... },
  addFriend(friend) { ... }
};
</script>

Названия функций должны совпадать с названиями событий.

#tip #events

Коллеги, всем привет!

С сегодняшнего дня доступен официальный перевод документации Vue js на русский язык!

https://ru.vuejs.org/

Семь признаков хорошего Vue.js кодинга:

1) ESlint и авто-форматирование
2) Следование Vue style guide
3) Осмысленное наименование переменных, функций, компонент; семантические тэги в шаблоне и CSS классы
4) За редким исключением размер компонента со стилями и шаблоном не превышает 200 строк
5) Отсутствие дублирования кода
6) Комментирование с JSDoc
7) Простой, легко-читабельный код

#bestpractices #styleguide #architecture

Микрософт и Open AI собираются построить AI суперкомпьютер стоимостью 100 миллиардов долларов

В нем будет миллион GPU

#ai

Nuxt 4 собираются выпустить к 14 июня 2024, обгоняя версионность Vue.js

#nuxt

Для накстовцев наконец тоже придумали свою сертификацию

Кстати, если кто встречал в интернете образцы вопросов для Vue.js Developer сертификации, оставьте в комментариях ссылку, пожалуйста.

#nuxt #certification

Мы уже писали про инициативу jsr.io, продвигаемую Deno, создатель которого Ryan Dahl был также создателем Node.js

Бывший создатель NPM, разработчик Node.js, а также CEO компании npm Inc. Darcy Clarke и другие известные люди начали еще одну похожую инициативу - vlt, который называют новым домом для open source:

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

Заявленные проблемы NPM:

- манифест пакета npm публикуется независимо от его тарбола
- манифесты никогда полностью не проверяются на соответствие содержимому тарбола
- в экосистеме принято считать, что содержимое манифеста и тарбола совпадает
- любые инструменты или идеи, использующие публичный реестр, восприимчивы к эксплоитам/возможно неточны
- злоумышленники могут скрывать вредоносное ПО и скрипты в прямых или транзитивных зависимостях, которые остаются незамеченными

Выпустили пока только общее коммюнике, никакой конкретики, ходя идее уже почти год

Примечательно, что Evan You в vlt выступает в качестве инвестора

#jsr #evanyou #vlt

Обнаружил Telegram канал с глубоким и интересным аналитическим разбором различных фронтендных тем - @frontend_almanac_ru

#tg

Добрый человек сделал перевод на русский язык документации VitePress
Чтобы его PR приняли, нужно сделать ревью.
Документация немаленькая, предлагаю разделить нескольким добровольцам и проверить по частям.

#vitepress #translation

Использование функций на массивах, типа filter, map и других, очень удобно и даёт красивый код, но может создавать проблемы в производительности из-за:

1. Выделения и потом уничтожения промежуточных массивов
2. Cоздавания циклов в циклах ( сложность O(N^2) ), хотя весь код можно разместить в одном цикле ( O(N) )

Например, код 1. ниже выполняется в 2-3 раза дольше, чем код 2.

// setup:
const numbers = Array.from({ length: 10000 }).map(() => Math.random())

// 1. functional
const result =
  numbers
    .map(n => Math.round(n * 10))
    .filter(n => n % 2 === 0)
    .reduce((a, n) => a + n, 0)

// 2. imperative
let result = 0
for (let i = 0; i < numbers.length; i++) {
  let n = Math.round(numbers[i] * 10)
  if (n % 2 !== 0) continue
  result = result + n
}

#js #optimization

Интересно, если у такой конторы как VueSchool месяцами висит объявление о найме Vue/Nuxt мидл-левел фронтендера, то это что значит?

#vueschool

Толстосумы тоже решили подкинуть немножко на Volar.

Интересно, сколько денег они потратили на свою заброшенную реализацию?

#jetbrains #webstorm #volar

Рейтинг фронтенд фреймворков по количеству набранных в 2023 году GitHub звезд

Забавно, что Vue 2 набрал не сильно меньше Vue 3. По общему числу звезд Vue 2 уже отстал от React.

Также интересно, что у Svelte и Vue примерно одинаковое количество звезд каждый месяц (что может коррелировать с вливанием новых разработчиков в фреймворк), но число реальных проектов в коммерческой сфере отличается на порядок (или порядки)

#rating #benchmark #framework

Забавный генератор типовой документации произвольного пакета - tsdocs.dev

Наверно написан на Node.js - очень сложно поймать момент, когда сайт не лежит или не перегружен. Но возможно.

#tsdoc #ts #docs

Завтра должен выйти ESLint v9.0.0

Flat config формат конфигурационных файлов станет форматом по умолчанию

#eslint

Использовать <script setup> во Vue 3 можно вместе с обычным блоком <script>

<script setup>
  // Composition API
  import { ref } from 'vue';
  console.log('Setting up new component instance');
  const count = ref(0);
</script>

<script>
  // ...and the options API too!
  export default {
    name: 'DoubleScript',
  };
</script>

Это работает потому, что блок <script setup> компилируется в функцию setup() компонента.

Есть несколько причин, по которым вы можете захотеть сделать это:

- Использование Options API - не всё имеет эквивалент в Composition API, например inheritAttrs. Для этого можно использовать defineOptions.
- Выполнить код один раз - поскольку setup() выполняется для каждого компонента, если у вас есть код, который должен быть выполнен только один раз, вы не можете включать его в <script setup>. Однако вы можете поместить его в обычный блок <script>
- Именованный экспорт - иногда удобно экспортировать несколько объектов из одного файла, но это можно сделать только с помощью обычного блока <script>.

#tip

Развитие в GitHub звездах Vue экосистемы за 2023 год.

Vue Element Admin - китайский продукт на Vue 2.6

#ecosystem #rating