Из святой троицы JS, HTML и CSS последний развивается, наверно, быстрее всех

Если надо анимировано удалить какой-то блок (fade-out), то раньше использовался opacity + transition. Кроме того, блок надо было еще и реально удалить - чтобы не мешал в DOM-e, это делалось либо одновременной установкой height:0 (и блок все равно в DOM-e), либо js решение setTimeout() + display:none. Оба некрасивые.

Сейчас в большинстве браузеров поддерживаются еще 4 способа для подобного рода задач.

1. animation

.fade-out {
  animation: fade-out 0.25s forwards;
}

/* Keyframe animations */
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

2. transition-behavior: allow-discrete;

.card {
  transition: opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

3. @starting-style

.card {
  @starting-style {
    opacity: 0;
  }

  opacity: 1;
  transition: opacity 0.5s;
}

4. calc-size()

.card { 
  height: 0; 
}

.card.open { 
  height: calc-size(auto);
}

#css #tip

Вышли Vue Devtools v7 (7.5.6)

Из нового - появилась секция Timeline

Что она делает - непонятно. У меня ничего не записывает.

#vuejs #devtools

2-3 ноября Vue School снова делает бесплатный доступ к своим видео.

#vueschool #learning

В Chrome 130 появился бэджик scroll на скролящихся элементах

По-моему, очень полезная штука. Порой долго ищешь по дереву, что скролится.

P.S. Такое ощущение, что как только MS Edge пересел на Chromium, сразу появилась конкуренция, и браузеры стали активно развиваться.

#chrome

Интересное сравнение нативной, кроссплатформенной (типа Flutter) и PWA разработок

Статья об этом на Хабре

#pwa #flutter

Если вам нужно визуально "увидеть" свою страницу, попробуйте вот это в глобальных стилях:

*,
*::before,
*::after {
  outline: 2px solid lime;
}

Выделит все элементы по границе

*,
*::before,
*::after {
  background: hsl(0 100% 50% / .1)
}

Выделит элементы и оттенком покажет вложенность

#css #tip

Решил написать пост, чтобы ссылаться на него в будущем при необходимости.

Это авторский канал. Как следует из описания, с фокусом на Vue.js, но не только. Я не продаю курсы, ничего тут не рекламирую, не впариваю какие-то проплаченные нарративы. Канал не монетизирует своих подписчиков.

Автор просто поет о том, о чем ему хочется. О том, что считает целесообразным. И в мире есть намного более важные вещи, чем Vue, поэтому если автор считает это нужным, он о них пишет.

Когда вы идете мимо уличного музыканта, вы не подходите к нему и не учите его как "правильно" играть и петь. Потому что вы будете выглядеть глупо и смешно. Особенно если рядом уже стоит небольшая аудитория.

Я спокойно и отзывчиво отношусь к любой адекватной критике. Но, достопочтимый аноним, вы кто такой, чтобы показывать своё бессмысленное "фи"? Что вы сделали для канала, для Vue, для мира в принципе? Какое уважение вы проявили к тому времени и силам, которые тратятся на наполнение его контентом?

Я оставил вам возможность трусливо наложить свою кучку под теми постами, которые ваш ум не в силах постичь, но это максимум. Не понравился пост - пропусти его. Не нравится политика автора канала - отпишись. Спокойно и без истеричного заламывания рук. Оставь негативный отзыв на TrustPilot и живи дальше. В интернете полно мест, где вас радостно встретят, оближут и монетизируют.

За все время существования канала только 2-3 человека прислали какой-то интересный материал для публикации. От остальных 800 каналу нет пользы НИКАКОЙ. И если какой-то мой оффтоп что-то меняет к лучшему хотя бы в одном человеке, на мнение остальных восьми сотен мне глубоко наплевать. Потому что по факту их нет. Они не существуют для канала.

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

#offtop

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

Порода - Border Collie

#video

Удивительные вещи происходят в верхушке Vue сообщества.

Часть (в основном накстовцы), ведомые Anthony Fu, активно призывают покинуть Твиттер, который на данный момент является основным каналом общения и распространения информации по Vue, и перейти в другое приложение - BlueSky.

Остальные (An Phan - член команды Vue Core) - не поймут в чем дело.

Оказывается, это общий тренд по Твиттеру, запущенный демократами в рамках предвыборной борьбы.

Когда-то у меня был новостной ресурс, и я неоднократно получал предложения пропечатать что-то за деньги.

И тут не вызывает сомнения материальная заинтересованность основных Vue/Nuxt ЛОМов, предводителем которых и является длинноволосый владелец китайской галеры.

За последнюю неделю к BlueSky присоединились 150 000 человек (с их слов). В Твиттере - больше миллиарда. Ни о чём.

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

#antfu

Vite позволяет использовать новый более производительный и функциональный компилятор SASS через эту опцию:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      }
    }
  }
}

Дефолтным его не делали пока потому, что это breaking change, но в Vite 6 он будет по умолчанию.

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

#vite #css #optimization

Заспорил тут в Твиттере с создателем FormKit Justin Schroeder, который с чего-то призвал отказаться от использования ref в пользу reactive

На аргумент о ShallowRef он привел ShallowReactive, и стало интересно, как сильно они отличаются

В итоге получился вот такой бенчмарк на Stackblitz по замеру времени изменения разных массивов

ShallowRef не использует JavaScript Proxy, отсюда такая эффективность

С одной стороны, ужасно, как Proxy уронил общую производительность в JS

С другой, еще раз стало очевидно, что писать программы на Vue надо с умом. Необходимо полностью контролировать модель и потоки данных. Именно поэтому доверять таким библиотекам, как VueUse и Tanstack, это, как минимум, торговать производительностью и архитектурой.

#optimization #benchmark

Glyph

Правильный редактор на Rust и OpenGL

#ide