Reddit подводит итоги.
Статистика по каналу r/vuejs

Обновился vue-webapp builder
Добавлены несколько хедеров, футеров и навбар в стиле Mantine UI

Документация проекта

#vwa #ui

Интересный пример использования TypeScript класса в качестве стора через composable

Дает возможность использовать приватные поля, сеттеры и геттеры (без .value), first class type support

Не в качестве рекомендации, но как демонстрация того, что возможно с Composition API

#ts #tip #pinia

Интересная дискуссия по теме "Pinia сторы против глобальных рефов" прошла на Reddit-e.

Плюсы composable сторов на глобальных рефах заявлены как:
1. Простота
2. Нативность по отношению к фреймворку
3. Отсутствие зависимостей означает отсутствие будущей ситуации "RIP Vuex" с переписыванием 50% кодовой базы проекта
4. API Composition выглядит очень зрелым и стабильным и вряд ли сильно изменится в ближайшем будущем (по сравнению с переходом Vue 2 -> Vue 3).
5. Позволяет использовать всю мощь Reactivity API вместо жесткой Reactive обертки для переменных у Pinia. Разница в производительности может быть огромной.

Выводы:

1. Большинство согласилось, что если не нужна поддержка SSR и интеграция с Devtools, то работа с Reactivity API напрямую и инкапсуляция реактивного состояния и бизнес логики в composable функции вполне возможна. Для многих это лучше использования Pinia.
2. Работа с Reactivity API позволяет делать многое, что не позволяет Pinia - например, делать сторы на TypeScript классах, как описано в предыдущем сообщении.
3. Был предложен лайфхак - во время разработки импортировать реактивные данные из composable сторов в Pinia, и тогда возможно использование Devtools. При билде для продакшна Pinia уже нет.
4. Единственный аргумент в пользу Pinia - унификация работы со стором в команде.

#pinia #architecture

Очень крутое интервью Илона Маска

Рассуждения об искуcственном интеллекте, о создании компании OpenAI, о том, что он назвал ее в честь Open Source движения, что же произошло с Альтманом, о цифровом Боге, и когда ИИ обгонит человека в интеллекте (через три года).

"Originally I named it OpenAI after open source, it is in fact closed source. OpenAI should be renamed 'super closed source for maximum profit AI'" ~ Elon Musk

"It's funny you know all these AI 'weights'. they're just basically numbers in a comma separated value file and that's our digital God, a CSV file" ~ Elon Musk.

Можно включить автоперевод в субтитрах

#ai #elonmusk

#evanyou #tip

⁣
PrimeVue сделал Tailwind версию себя

#ui #tailwind #primevue

Очередной небольшой шедевр от Anthony Fu - vite-plugin-inspect

Плагин предназначен для дебага плагинов Vite, показывая, как изменяется код проекта при их последовательном применении. Но попутно плагин строит карту компонентов и модулей проекта с их связями и приятной анимацией

#antfu #vite

Вышло обновление Microsoft VS Code 1.85.1

Появилась интересная фича - теперь любую вкладку можно перетащить на десктоп и она откроется в отдельном плавающем окне
Зачем это надо пока непонятно, но очень интересно...

#vscode

Вышел Vite 5.0.9

Из значимых последних добавлений - кэширование работы с файловой системой при отслеживании файлов проекта на изменение. На больших проектах и старых Windows машинах были просадки по производительности.

Также Evan You пообещал Vue 3.4.0 до Нового года (пока 3.4.0-betta.2)

#news #vite #vue

Facebook выпустил новую CSS-in-JS библиотеку - StyleX

Верней оформил для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для React-подобных фреймворков плюс Ангуляр, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной переквалификации их разработчиков.

Код в итоге выглядит примерно так:

import * as stylex from '@stylexjs/stylex';

const colorStyles = stylex.create({
  red: {
    backgroundColor: 'lightred',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

import * as React from 'react';
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({ ... });

function ReactDiv({ color, isActive, style }) {
  return <div {...stylex.props(
    styles.main,
    // apply styles conditionally
    isActive && styles.active,
    // choose a style variant based on a prop
    colorStyles[color],
    // styles passed as props
    style,
  )} />;
}

StyleX компилируется в атомарные CSS, то есть, можно сказать, стоит на следующем уровне извращений над CSS после Tailwind-а.

Основная утверждаемая выгода от использования StyleX - переиспользование, типизация, будет всё круто на больших проектах. Ну и получение наконец полного Single File Mess файла с js, css и html в одном флаконе.

Объяснение JWT токенов

#video #jwt

Как надо проводить интервью на разработчика ПО

Интересная статья сотрудника Google Wil Wen, в обязанности которого входило интервьюирование соискателей, и которых он провел более двухсот.

В большинстве случаев он давал всего одну задачу, причем давал и тем, кто искал позицию стажера, и на позицию L5 (Senior SWE). То, как испытуемый решал её, определяло его уровень.

Вот эта задача: дан некий массив чисел, например:
a = [ 3, 4, 6, 9, 10, 12, 14, 15, 17, 19, 21 ];
Надо определить функцию f(a, x), которая возвращала бы ближайшее к x наименьшее число массива или -1 в случае ошибки.
То есть, например: f(a, 12) = 12, f(a, 13) = 12

Нужно было написать код, времени давалось около часа. Рабочее решение состоит из примерно 30 строк кода.

Проверяющий смотрел как на техническую сторону - определил ли испытуемый все необходимые тест-кейсы, использовал ли простой перебор или двоичный поиск, знал ли о возможности выхода за пределы Int.MAX. и т.п.

Так и на другие "сигналы" - какие уточняющие вопросы он задавал, как размышлял, какие названия давал переменным и как форматировал код, в каком стиле и темпе писал код и дебажил его, как реагировал на ошибки.

По словам Wil Wen, принятое им по результатам такого теста решение в будущем почти всегда подтверждалось квалификацией человека.

#article #job

Youtube каналы с контентом по Vue

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

John Komarnicki
Lachla Miller
LearnVue
Anthony Fu
VueConf Toronto
VueSchool
VueMastery

#video