3 и 4 октября будет проходить ViteConf 2024
Онлайн и бесплатно
Там бывают интересные доклады

#vite #conf

Миллиардная компания...

#vuejs

Недавние тесты производительности Vapor

Чудес особых не будет - Vue и так быстр. Хотя на больших сложных компонентах преимущество может быть уже ощутимей.

Поэтому не пишите большие сложные компоненты. Разбиение помогает оптимизировать рендеринг.
Признак хорошего Vue.js кодинга №4.

#vapor #benchmark

Не стоит завидовать программистам с родным английским

включить "отмеченный" из "отмеченный";
включить "vue" из "vue";
включить "использоватьМаршрут" из "vue-маршрутизатор";

постоян маршрут = использоватьМаршрут();

консоль.регистрировать(маршрут.параметры.ид);

постоян свойства = определитьСвойства<{
    рекомендация: Рекомендация;
}>();

постоян htmlДанные = вычисляемое(() => {
    если (!свойства.рекомендация) {
        вернуть "";
    }
    постоян данные = JSON.разобрать(свойства.рекомендация.данные);
    вернуть отмеченный.преобразовать(данные.рекомендация) как строка;
});

#humor

Понадобилось как-то стилизовать содержимое v-html (html, преобразованный из markdown) в нескольких компонентах

Прокидывать всё через :deep() было как-то совсем грустно, поэтому придумал такой вариант

// import в main.ts или так один раз:

<style>
@import "@/app/assets/styles/md.css";
</style>

// md.css
.md {
    table {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
        display: block;
        overflow-x: auto;

        td, 
...

на элементе с v-html в шаблоне ставится class="md"

#css

Первый шажок

Или это уже давно?

#vuejs #compositionapi

Новость, о которой на прошлой неделе говорил Эван, и которую не угадал никто (ну и я её явно в опрос не догадался поставить)

Эван создал компанию, которая будет делать "an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem" (ну то бишь как сейчас bun или deno только без js движка), и в первом раунде поднял $4.6 млн за нее (то есть продал инвесторам процентов 10-20 её акций за эту сумму)

Это очень хорошая новость. Я давно говорил, в том числе Эвану, что Vue давно перерос уровень любительского опен-сорса, и ему нужен бэкап в форме бизнеса. Потому что смотреть на депрессивные каминг-ауты Энтони, или нытье Джонсона про mucho trabajo poco dinero, или заброшенный по той же причине Vapor совсем не комильфо.

В итоге, Эван оформил права на Oxc и Rolldown на созданную компанию VoidZero Inc и продал ее часть инвесторам. Vue экосистема не затронута вообще. То есть, работа Эвана над этими новыми проектами за прошлый год оценена рынком миллионов так в 20. Нормально.

Разработчики, работающие над Vue или Vite, скорей всего будут сотрудниками этой новой компании и будут получать там зарплату за свою работу - это и называется бэкап бизнесом.

То, что Эван никому не отдаст Vue, можно было не сомневаться. Его пост настоятельно рекомендуется к прочтению.

Кстати, посмотрите внимательно на сайт voidzero.dev. Это пример того, что может VitePress.

Ну и название зачетное.

#evanyou #vitepress #rolldown #voidzero #oxc

А вы заценили анимацию и вообще весь дизайн сайта voidzero.dev?

Мастерство не пропьешь...

#webdesign #evanyou #voidzero

Начинается онлайн конференция ViteConf
Через пятнадцать минут выступает Эван, должен рассказать о Voidzero

#conf #vite

При верстке кроме flex и grid есть и другие варианты создания адаптивного шаблона

Например, малоиспользуемое display: contents как бы "удаляет" контейнер, и все его потомки переходят на уровень выше.

Еще одно CSS правило order "меняет" порядок потомков

Вместе они могут облегчить верстку, когда, например, в трехблочном макете надо боковую колонку засунуть в мобильном виде между двумя блоками основной. Если используется лэйаут flex, то можно обойтись без смены на grid

#css

Выступление Evan You на ViteConf 2024
(с субтитрами на русском)

О бандлерах, Vite, Rolldown, Oxc, немного Voidzero и сопутствующих вещах

Неплохое обучающее видео по теме

#evanyou #vite #conf #video

Воскресное видео

#offtop #video

Недавно вышел первый публичный драфт спецификации для masonry лэйаута в CSS

Сразу с двумя вариантами реализации

#css #masonry

Этимология слова freelance

Изначально это было 2 отдельных слова: free lance, где lance - это воин. А free lance - это воин-наёмник, который не присягал на службу какому-то одному лорду, а воевал за того, кто ему заплатит.

#meme

Варианты 10 пет-проектов на Vue для новичков

#pet

На vuejs.org появилась Доска почета

В принципе, идея неплохая, но как-то все это выглядит дешево (навязывание сертификации), особенно после получения Эваном хороших инвестиций на Voidzero.

#certification #jobs

john Resig - создатель JQuery

Комментировал события на ViteConf

#jquery #vite

#meme #js

В очередной раз делая i18n на Vue проекте, задумался - а зачем этому модулю (и функции t() в частности) реактивность? Неважно, стандартный это i18n-next или самописный.

Понятно, что для того, чтобы при смене языка он сразу менялся на странице без ее перезагрузки. А оно того стоит? Ценой этого - пронизывание практически всех компонентов сетью реактивной зависимости, что точно не благотворно сказывается на производительности и сложности кода.

Большинство сайтов направлены на определенную языковую аудиторию. Кроме того, можно определять по браузеру язык системы и автоматически в него переключаться в первый раз. То есть, процент тех, кто на сайте сменит язык какой - 1-2? И из-за одного их переключения должны тормозить все?

Напомню, что у монструозного лендинга GitLab основная зависимость в 13Mb скриптов именно i18n

Какие мысли по этому поводу?

#i18n #optimization

Интересная табличка

Google проверяет какие сайты проходят их тест на Web Vitals

Как видим, у Vue результаты значительно лучше, чем и SSR-ного Nuxt, одним из заманивающих доводов которого вроде бы и является хорошие веб метрики.

Также очень точно подтвердился наш подсчет по npm пакетам о соотношении сайтов на Vue и Nuxt - Vue примерно в 6-7 раз больше.

Ну и если отмотать на статистику 2020 года, то можно увидеть, что React превалировал над Vue в 10 раз. Сейчас - примерно в 2.

Script setup - this is how it's done.

#vuejs #nuxt #react #stats