Легкий, стильный, чисто-vue тоастер с красивой анимацией - vue-sonner

#toast #lib

Сегодня Nuxt 2 всё

End-of-Life

#nuxt

Немного воскресной фронтедерской эстетики

#video #offtop

На прошедших выходных можно было попробовать тренировочные материалы и пробный тест на Certified Vue.js Developer.

Как сам сайт (привет, Nuxt) глючный, так и вопросы-ответы подготовлены плохо.

У составителей (Vue School, между прочим!) проблемы как с английским, так и с Vue, в результате есть такие вот некорректные вопросы, в которых надо думать не над сутью вопроса, а тем, "что хотел сказать автор". Не верится, что Эван ревьюил этот тест, как они утверждают.

Тестирование требует для прохождения современный браузер, не Firefox. В последние годы титул тормоза прогресса в вебе от IE и Safari плавно перешел именно к Firefox.

Certified Senior Vue.js Developer еще не готов. Видимо, ихние маркетологи решили сперва содрать со всех за Certified Vue.js Developer, а потом за "сеньорский" титул. Кстати, цена за первый экзамен вроде упала до $50 в большинстве стран. Разработчик Middle- его пройдет без проблем и подготовки.

В экосистеме Vue много косяков, но сертификация, наверное, самый большой.

#certification

pnpm в бета версии 9.5 добавила поддержку синхронизации версий NPM пакетов catalog для монорепозиториев.

pnpm workspaces используются для многих монорепозиториев, например, Vite, Next.js, Vue, SvelteKit

#pnpm #monorepo

Во Vue реактивными могут быть не только обычные переменные, но также ссылка на функцию, что вполне в духе JS:

<script setup>
import { computed, ref } from 'vue'

const f = ref(() => "Hello");

const v = computed(() => {
  return f.value();
});

setTimeout(() => {
  f.value = () => "World";
}, 3000 );
</script>

<template>
  <h1>{{ v }}</h1>  
</template>

Реактивность будет не глубокой (shallow)

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

Перед заменой функции происходит изменение некоего состояния компонента/приложения. Вот на него лучше и ориентироваться.

#reactivity

О-очень интересная картинка о динамике развития различных библиотек и фреймворков со State of JS

Интерактивная версия

Хотя релевантность выборки для составления статистики под большим вопросом. Как помнится, по этим опросам неудовлетворенных пользователей Vue у них получилось больше, чем неудовлетворенных пользователей React

#js

Для любителей FSD описание проекта на Vue на нем (тудушка)

В качестве выводов - констатация факта, что по FSD все сделать нельзя, даже такой маленький проект, и надо искать компромисс между FSD методами и не FSD методами в одном проекте.

#fsd #architecture

Задача:

Есть тяжелый сайт. Надо для хорошего UX показать какой-нибудь сплэш-скрин (глобальный прелоадер) в самом начале и отключить его после загрузки всех (по возможности) ресурсов и готовности сайта

Как это сделать без JS?

Задача имеет минимум два решения - через CSS и через HTML

#challenge #css #html

По задаче выше

Сплэш-скрин (стартовая заставка) значительно улучшает UX. Во Vue он ставится в index.html и отключается в onMounted() App.vue

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

CSS

Например, прилетит стиль (или в конце html файла, или css файла)

.splash-screen {
  display: none;
}

Ещё вариант подсказали в комментариях - через :has(). Возможны и другие способы.

HTML

Интересней с HTML. Для этого можно использовать Declarative Shadow DOM (часть Web Components), который позволяет строить Shadow DOM без JS. У Shadow Root есть слоты. Слот будет показывать дефолтное значение ( в нашем случае блок на весь экран с лоадером), пока не прогрузится <div slot="splash-screen">, который его затрет.

<template shadowrootmode="open">
  <slot name="splash-screen">
    <div class="splash-screen">Loading...</div>
  </slot>
</template>

<!-- additional content -->

<div slot="splash-screen">
  <div />
</div>

#challenge #css #html

Варианты определения пропсов с дефолтными значениями во Vue:

// runtime declaration:

const props = defineProps({
  foo: { type: String, required: true },
  bar: { Type: Number, default: 0 },
});

// type-based declaration:

const props = withDefaults(defineProps<{
  foo: string
  bar?: number
}>(), {
  bar: 0,
});

type Variant = "default" | "primary" | "secondary"
 
const props = defineProps({
  variant: { 
    type: String as PropType<Variant>, 
    default: <Variant> "default" 
  }
})

Evan You посетил VueConf 2024 в Шенжень, КНР, хотя в интервью не так давно говорил, что опасается ездить в Китай по определенным причинам

#conf #evanyou

Не про js.

На dvd вышел наконец последний мульфильм от Хаяо Миядзаки:
Мальчик и птица
Мальчик и цапля
Как поживаете
Как ты живешь

очень рекомендую к просмотру.
совершенно неожиданная для меня работа Миядзаки. А я его фанат.

Моих мозгов хватило только на первые 40 минут. После я потерялся.