О-очень интересная картинка о динамике развития различных библиотек и фреймворков со 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 минут. После я потерялся.