Интересная дискуссия по теме "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

TypeScript и Developer eXperience

В последнее время сразу два видных в IT человека - создатель Ruby David Hansson и создатель Svelte Rich Harris, - заявили, что отказываются от использования TypeScript в своих проектах (Turbo 8 и Svelte 5, соответственно). Показательны слова David Hansson:

..TypeScript просто мешает мне в этом. Не только потому, что он требует явного шага компиляции, но и потому, что он загрязняет код гимнастикой типов, которая добавляет так мало радости к моему опыту разработки, и довольно часто приносит много горя. То, что должно быть легко, становится трудно, а то, что трудно, становится "any". Нет, спасибо!

С моей точки зрения, пользоваться TypeScript надо в меру. Это не строготипизированный язык, и никогда им не будет, и трудности с определением типов в TypeScript разработчикам, например, на Java будут вообще не понятны. Потому что TypeScript - это язык описания интерфейсов. И описывать им нужно только самое необходимое. Основные типы данных, которыми обмениваются между собой элементы системы, пропсы компонентов, - всё то, что не займет много времени и принесёт ощутимую пользу.

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

#typescript #tip

HTML5 и CSS3. Аккордеон.

Фронтендерам за свою жизнь много раз приходится делать "аккордеоны", и каждый раз это какой-то челендж с велосипедами, своими или чужими. Хороший аккордеон нельзя было сделать без JavaScript.

В HTML5 появились тэги details и summary:

<details>
  <summary>Title</summary>
  <p>Some description</p>
</details>

Они позволяют построить элемент "аккордеон" на чистом семантическом HTML, без привлечения JS. Переключение видимости происходит атрибутом open. Следить за состоянием можно подписавшись на событие toggle.

На vue-faq.org используются именно details для организации вопросов-ответов.

По умолчанию данный элемент выглядит как на картинке, с треугольным маркером, однако details и summary допускают глубокую стилизацию, позволяя оформить аккордеон как понадобится - например, убрать маркер, добавить поворачивающийся крестик и анимацию при раскрытии. Соответствующий CSS - в комментариях.

#tip #html

Адаптировал для Реддита и запостил там свою статью Google и Yandex SEO оптимизация для SPA приложений

Как обычно, на таких ресурсах интересны комментарии пользователей.
Первый комментарий - что Bing тоже уже несколько лет хорошо понимает JavaScript
Второй, от false_creek_change, приведу здесь:

Консультант по SEO/a11y на проводе. Не могу передать, сколько раз я сталкивался с SEO-специалистами и/или клиентами, которые клялись, что вам нужен SSR, чтобы поисковые роботы правильно индексировали ваш SPA. Это не так уже почти десять лет. Есть множество гигантских Ecommerce брендов, которые используют SPA уже много лет и имеют чрезвычайно высокие показатели SEO (на ум приходит Walmart). Анекдотично, я лично руководил конверсией сайта .NET MVC Ecommerce со 100 000+ SKU на Vue 2 SPA, и мы действительно увидели улучшение наших SEO-метрических показателей. Это было 8 лет назад.

Мы обычно исходим из следующих соображений:

- Является ли HTML семантическим и доступным (a11y)?
- Предоставляется ли схема через JSON+LD и/или теги?
- Соответствуют ли основные показатели сайта (core web vitals) требованиям?
- Требует ли контент действий пользователя перед загрузкой? Например, если навигация по категориям находится в меню, который по умолчанию скрыт, то такая навигация может не индексироваться. В общем случае, если что-то может быть сделано через SSR, то это же также может быть отображено на стороне клиента и проиндексировано.

Все это Google укажет в Search Console / Lighthouse, чтобы сообщить вам о наличии проблемы.

#seo #spa #google #ssr

На Хабре очередная статья о том, чем pnpm лучше npm и yarn

Для меня у pnpm два громадных явных плюса. То, что он в node_modules пишет хардлинки файлов из своего центрального хранилища, в итоге реальные затраты на диске на него небольшие. У меня так экономится много гигабайт на разных проектах.

Второе - скорость. Нужно было недавно десятки раз тестировать полный цикл установки проекта, так выяснилось, что Windows 10 удаляет директорию node_modules медленней, чем pnpm её устанавливает. С точки зрения DX переход с npm/yarn на pnpm по ощущениям это как переход с Webpack на Vite.

#pnpm #npm