Иллюстрация к эксперименту в сообщении выше в виде Coding Music Video

https://vimeo.com/891441617

#cmv #spa #google #seo

Вторая часть статьи Anthony Fu "Reimagine Atomic CSS".
UnoCSS

#unocss #antfu #tailwind

Форма обратной связи для вебсайтов на статичных хостингах

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

В то же время есть удобный способ обойтись без сторонних сервисов и остаться только на статике - отправка сообщения обратной формы в Телеграм через его API.

(Подробнее - в комментарии)

#tip

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 в одном флаконе.