Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

За долгие годы у меня было несколько миграций с браузера на браузер. Сейчас Chrome, перед ним были Vivaldi и Brave, и вот думаю об Edge, потому что Chrome ну что-то прям сильно часто стал не показывать то, что нормально показывает Edge.

Вообще переход на Chromium у MS был очень грамотный шаг

Embrace, extend, and extinguish

#chrome #ms

Продвинув Vite в экосистему React Эван выстрелил в свою Vue ногу - React попер как на дрожжах, согласно статистике w3tech.

#stats #react

Зелёной окисью окрасив интернет
Висит Vue лого мощная махина.
Окончен бой, соперников уж нет,
Сгорели под напалмом реактива.

Истерзанный фреймворками фронтенд
Склонил главу в заслуженном почтеньи.
Скупую похвалу дал Мурыч-дед,
И ви-три-си в слезах от умиленья.

Реакты что? Родятся и помрут.
Их жизнь есть тлен, и краток путь в забвенье.
Один лишь Vue теперь надолго тут,
Логичный, прогрессивный, офигенный.

#literature #creative

#audio #offtop

Тут знакомый попросил потестить его приложение на React Native на Андроиде

Столкнулся с непонятным поведением - курсор мигает в поле ввода, тыкаю на ссылку в другом месте - ноль реакции. С 10 раза как-то только получается

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

То есть, артефакты, в обычной веб разработке вообще не встречающиеся.

Стало интересно - это он криво накодил/нагенерил, или это React Native сам по себе такой?

#react #mobile

Книга Chibi Vue от разработчика Yoichi Kikuchi - подробное руководство по внутреннему устройству Vue 3. Полезно для разработчиков, углублённо изучающих Vue.

В ней есть:

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

Книга на английском языке.

#learning #chibivue #vuejs

Есть сайты, у которых нельзя открыть браузерные devtools

Делается это так:

Запрет на меню и хоткеи

document.addEventListener('contextmenu', event => event.preventDefault());

document.addEventListener('keydown', event => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

Определять открытие девтулз и, например, перегружать страницу:

(function() {
    const element = new Image();
    Object.defineProperty(element, 'id', {
        get: function() {
            throw new Error('DevTools detected!');
        }
    });
    console.log(element);
})();

#badpractice #devtools

Идти по жизни надо так

А стремиться к цели - так

#offtop #video #motivation #animals

Очередной бессмысленный и беспощадный лонгрид: React vs Vue – подробное сравнение и перспективы

Комментировать не буду

#react #article

В последних версиях Vite активно доделывают поддержку lightningcss

Сейчас для процессинга CSS используется ESBuild, но с переходом на Rolldown нужно что-то другое.
Экспериментально lightningcss был в Vite с 4 версии.

#vite #css

Поздравляем Деми Мурыча с очередным взятым на выходных рубежом в форме Дня рождения и предлагаем широкой публике его мысли о TypeScript

#murych #audio #typescript

А что вы используете для составления презентаций?

После долгих поисков остановился на Marp
Содержание презентации находится в markdown, затем преобразуется в html, и потом в pdf

Из удобного:

1. Прост как валенок и проверен временем
2. Текст и оформление можно сгенерить AI и затем кастомизировать вручную
3. Каждый слайд держу отдельным файлом и собираю их скриптом - для разных презентаций свои слайды
4. Из-за перевода в html можно очень сильно кастомизировать любой слайд через CSS класс на этом слайде
5. Плагин для VS Code - сразу видно превью, и есть генерация по команде/кнопке

#presentation #markdown

:hover > :not(:hover)

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

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform 1s var(--ease-spring-3), opacity 0.3s var(--ease-3);
    }

    &:hover > li:not(:hover) {
      opacity: 0.25;
      transform: scale(0.8);
    }
  }
}

#css #tip

В GitLab-e уже тестируют rolldown-vite

Скорость сборки примерно в 5 раз быстрей, и значительно меньше потребление памяти

#gitlab #rolldown #vite

У меня Cursor - девочка (безо всяких системных промптов)

#ai