Vue-FAQ Pictures представляет

Путь Мурыча. Часть третья.

ВЛАДИЛЕН

#murych #video #minin #vuefaqpictures

29 и 30 июня 2024 года Certificates.dev бесплатно на 48 часов откроет доступ к тренировочным материалам на соискание ученой степени Certified Vue.js Developer.

Включает в себя теорию, задачи по кодированию и пробный экзамен.

#certification

CSS3 не позволяет использовать конкатенацию при нестинге классов:

.title {
  /* не работает */
  &--red {
    color: red;
  }
}

но для любителей BEM есть обходной путь:

.title {
  & [class*='--red'] {
    color: red;
  }
}

#css #bem

Новый бандлер Эвана Rolldown еще не вышел, но уже появились бандлеры на его основе - tsdown

Меж тем работа над Rolldown идет активно.
Похоже, это основной проект команды Эвана сейчас.

#rolldown

Вчера в стриме по результатам опроса State of JS 2023 Илья Климов не справился с элементарной математикой, заявив, что недовольных своим фреймворком разработчиков во Vue почти в два раза меньше, чем в React.

На самом деле, исходя из диаграммы именно пользователей, получивших негативный опыт, у Vue больше - 24% против 23.5% у React

Что довольно странно.

Чем вы недовольны, ***?

#vue #react

Легкий, стильный, чисто-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