Селекторы CSS: простые и сложные

Читал на FrontendConf доклад про то, что умеют селекторы и какие есть интересные и необычные приёмы, чтобы выбрать что-то в DOM-дереве. Казалось бы, что там можно на целый доклад собрать. А вот как начал собирать материалы, сам удивился, сколько всего в этой теме интересного есть, даже чему-то научился в процессе подготовки.

Под каждый пример есть интерактивные демки, можно с ними поиграться, чтобы лучше понять, что происходит. А в конце — квиз для проверки знаний (хотя на самом деле мне просто хотелось сделать квиз на чистом CSS, чтобы поразвлекаться с теми самыми селекторами).

Видео: https://youtu.be/uhfcGAQv7o8
Слайды: https://mefody.dev/talks/css-selectors

Прекрасные аутлайны для фокуса

Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.

1. Используйте :focus-visible вместо :focus. В таком случае фокусное выделение будет показываться тогда, когда оно действительно нужно.

2. Если нужно выделить только текст, без фона, можно цветом обводки сделать currentColor — в целом, смотрится неплохо. В статье есть готовый сниппет, который можно попробовать вставить в проект как умолчание, если дизайнер пока не придумал отдельно фокусные состояния интерактивных элементов.

3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.

4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.

5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для :hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.

https://medienbaecker.com/articles/focus-outlines

Pkl — замена YML и JSON от Apple

Оказывается, у яблочной компании есть опенсорсное решение для конфигурационных файлов. Что обычно нужно для конфигов? Понятный простой синтаксис, возможность наследоваться от базовых конфигов и расширять шаблонные, валидация схемы данных. И новый pkl (Pickle) как будто всё это умеет.

class AppConfig {
  port: Int = 8080
  logLevel: String = "INFO"
  timeout: Duration = Duration.seconds(30)

  function validate() {
    port > 0 && port < 65536
  }
}

api = new AppConfig {
  port = 3000
  timeout = Duration.minutes(2)
}

Как будто всё по коду понятно даже без объяснений. Есть наследование, есть валидация, есть схема данных, всё в понятном формате.

Конечно, менять всё в своих проектах я резко не брошусь на этот новый формат, потому что обычно в проектах вокруг конфигов есть ещё много обёрток и тулинга, а тут пока слишком молодой формат. Но поиграться в свободное время попробую.

https://www.trevorlasn.com/blog/pkl-apple-new-configuration-language

Самозванцы, выгорание, границы

Видео выходного дня. Анастасия Калашникова — практикующий психолог, ведущая тренингов для айтишников, основательница проекта PSYvIT. Давно подписан на её канал, смотрю доклады и вебинары.

Есть старенький, но всё ещё актуальный доклад от Анастасии, где она глубоко погружается в темы «синдром самозванца» и «выгорание»: что это такое, как оно влияет на нашу психику и физиологию, что с этим делать. Полезно посмотреть, чтобы понять, есть ли вообще у вас этот синдром (а то сейчас почти у каждого либо синдром самозванца, либо выгорание), и в целом немножко прокачаться в осознанности. Я сейчас как раз столкнулся с ощущением «вот они все молодцы, а я сюда только пришёл, я точно хуже остальных» — доклад устаканил тревогу в голове.

https://www.youtube.com/watch?v=2BBumwv-jVY

Отличия между поповерами и диалогами

Мы в подкасте часто обсуждаем, как в браузеры внедряются поповеры (атрибут popover), которые могут заменить в каких-то случаях тултипы, а в каких-то — модальные окна. При этом есть dialog, который как будто умеет в похожую функциональность. Когда и как что применять — большой вопрос.

Зелл Лью написал заметку, которая помогает выбрать, с чем лучше работать. И с точки зрения доступности, и с точки зрения семантики.

https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/

А у Ромы Ахмадуллина есть хороший доклад с обилием демок и большой сравнительной табличкой в конце, как всем этим пользоваться, что умеет каждый из подходов, можно ли уже применять в продакшене и не лучше ли просто своё кастомное использовать.

https://www.youtube.com/watch?v=x4ZCGfUZntk

У CSS новый лого

Пока в соц. сетях между адептами Tailwind и БЭМ идут очередные тёрки, а AI-стартапы учатся генерировать целые приложения в 2 клика, Адам Аргайл запустил на гитхабе голосование за новый логотип CSS. Началось это ещё в августе, а буквально вчера выбор был сделан.

Победил вариант rebeccapurple, минималистичный логотип со скруглениями. Пора обновлять потихоньку картинки в слайдах для докладов.

https://github.com/CSS-Next/logo.css

Получить ширину скроллбара при помощи CSS

Короткий, но интересный лайфхак от Темани Афиф. Всё, что вам нужно, это простой советский CSS Container, @property и вычитание.

https://css-tip.com/width-scrollbar/

overflow: clip

В CSS у overflow-x: hidden и overflow-y: hidden есть одна важная особенность: если вы таким образом прячете переполнение по одной оси, автоматически переполнение прячется и по другой (там значение становится auto). То есть нет удобной возможности спрятать только то, что вылазит по вертикали, например.

Ахмад Шадид рассказывает про то, как работают значения overflow-*: clip. Это как раз то поведение, которое нам нужно, чтобы что-то спрятать по одной оси, но по другой оси всё красиво показывалось. В статье есть демки, которые помогают лучше разобраться с особенностями работы свойства.

Я с таким много раз сталкивался, когда нужно было всякие декоративные элементы прикрепить к блоку на всю ширину вьюпорта. Если ничего не прятать — появляется горизонтальный скролл. Если спрятать по горизонтали — декоративные элементы обрезались по вертикали (прятались под скролл). Приходилось выкручиваться псевдоэлементами, абсолютным позиционированием и трансформациями. А теперь можно делать всё это сильно проще.

https://ishadeed.com/article/overflow-clip/

Ведём диалоги

Адам Аргайл поделился несколькими примерами, как сверстать красивые модалки-диалоги на сайте при помощи CSS. Есть примеры с обычной модалкой, модалкой-сайдбаром и корзиной покупок. Заодно можно посмотреть, как будет выглядеть CSS, если в нём начать использовать все его самые современные возможности, потому что Адам вовсю использует вложенность, слои, новые директивы и свежие свойства. Но на то он и деврел.

https://nerdy.dev/have-a-dialog

Anchoreum

Люблю обучаться в игровой форме. Когда-то прокачивал навык вёрстки гридами при помощи CSS Grid Garden. А сейчас появилась похожая игрушка для практики с CSS Anchor Positioning. Работает в Chrome Canary, начал проходить — нравится.

https://anchoreum.com/

Полезный TypeScript для React

Хороший набор советов, как TS может помочь вам удобнее работать с React-приложениями. Якоб Пэрис делится готовыми типами и лайфхаками.

1. ReturnType — очень удобный способ получить возвращаемый тип функции. Незаменимо для колбеков.

2. Для children лучше использовать ReactNode, который одновременно и ReactElement, и фрагмент, и строка, и число — что угодно, что для реакта может быть адекватным содержимым компонента.

3. React.ComponentProps поможет достать пропсы компонента, если нужно сделать над ним обёртку или сделать что-то совместимое. Выручает, когда библиотека компонентов под капотом использует компоненты из других библиотек.

4. Вместо того, чтобы перечислять все возможные значения полей типа, лучше делать union над разными вариациями типов. То есть не { verdict: 'ok' | 'not-ok'; isOk: boolean; }, а { verdict: 'ok'; isOk: true; } | { isOk: false; verdict: 'not-ok'; }. Так TS сможет вам помогать разруливать зашитую в типы логику, а не просто подсказывать все возможные значения полей в автокомплите.

Больше советов — по ссылке.

https://www.jacobparis.com/content/react-ts

Верни true, чтобы выиграть

Забава на пятничный вечер. Простая игра, где нужно подобрать аргумент функции так, чтобы функция начала возвращать true. Вроде, супер-простая вещь, а вспомнить какие-то особенности JavaScript на многих уровнях придётся.

https://alf.nu/ReturnTrue

Как квантовые компьютеры ломают интернет

Видео выходного дня. В нём обсуждается, как квантовые компьютеры могут взломать существующие системы шифрования, используя алгоритм Шора, в течение следующего десятилетия. Я не очень люблю такие «желтоватые» вбросы, но здесь неплохо объясняется, как работает современное шифрование на ключах, почему до квантовых компьютеров это считалось супер-надёжным методом и как алгоритм Шора всё может сломать. Но на самом деле в конце автор рассказывает и о том, что делают криптографы, чтобы всё-таки интернет не накрылся, так что слишком напрягаться не стоит.

https://www.youtube.com/watch?v=-UrdExQW0cs

Упражнения по curl

Имхо, умение «курлыкать» (дёргать ресуры при помощи `curl`) — супер-важный навык для любых разработчиков, которые работают с API. Джулия Эванс собрала 21 упражнение, которые помогут «набить руку». В первый заход разобраться в аргументах командной строки, во второй — сделать без документации, в третий — закрепить.

Статья старенькая, некоторые урлы надо будет заменить в списке, но уверен, что вы справитесь.

https://jvns.ca/blog/2019/08/27/curl-exercises/

Линтинг CSS при помощи ESLint

Свежее. В репозитории ESLint появился ESLint CSS Language Plugin версии 0.1.0. Он пока супер-простой и вряд ли может стать заменой Stylelint прям сразу, но если у вас для CSS нет супер-жёстких правил в проекте, а вот количество зависимостей в проекте неприятное, то можно и попробовать мигрировать.

Что умеет плагин сейчас:
- Находит дублирование импортов.
- Ругается на пустые блоки.
- Ищет невалидные `@`-правила и свойства.

И всё. Прям маловато. Мне не хватает правил по форматированию кода: единый подход к написанию цветов, контроль за единицами измерения и порядком селекторов по специфичности в коде. Ещё было бы хорошо добавить сортировку самих свойств в блоке (`stylelint-order`).

Буду ждать новых правил и маркетинговых бенчмарков, какой теперь линтер самый быстрый в мире для CSS. Но можете уже попробовать поиграться с существующим набором, если любите новое.

https://www.npmjs.com/package/@eslint/css

Работа с куками — минное поле

Эйприл Кинг наткнулась на интересный баг, когда в веб-приложении замечательно работали куки, которые собирались по принципу cookieNames=${JSON.stringify({ a: "some string" })}, но всё сломалось, когда на сервере начали использовать стандартную библиотеку Go для работы с куками.

Эйприл решила разобраться, что есть в спецификациях, как на самом деле работают браузеры, как обрабатывают куки стандартные библиотеки популярных технологий — и там всё странно.

- В спецификациях в принципе не хватает определённости. По многим необходимым ограничениям прописанных правил просто нет. Причём для сервера и клиента существующие правила местами разные.
- Разные браузеры разрешают использовать внутри кук разные символы. Причём ближе всех к спецификации Safari, но исходный код посмотреть нельзя, поэтому приходится догадываться. Совпадения множества символов нет ни в одной паре движков.
- Ruby и Rust просто разрешают вообще все опасные символы, а Python и Go много что запрещают. При этом поведение разных библиотек разное — где-то символы игнорируются при парсинге, где-то вообще удаляются, где-то библиотека банально падает.
- А вот тут самое интересное. Эйприл делится в статье коротким JS-сниппетом, который кладёт часть функциональности в большом количестве популярных сервисов. Всё, что делает сниппет — пытается установить куку, которая очень плохо парсится разными библиотеками. В итоге ломается не только функциональность, завязанная на куки, но и в принципе обработка любых запросов от клиента.

Люблю такие расследования. Почитайте подробнее в статье, что за ломающие символы такие и как с ними можно пытаться бороться.

https://grayduck.mn/2024/11/21/handling-cookies-is-a-minefield/

Дебаг производительности страницы средствами браузера

Читал на Tbilisi JS Meetup #3 доклад про то, как пользоваться вкладкой Performance в девтулзах Chrome. Уже после доклада понял, что я показал некоторые фишки раньше, чем был их официальный релиз в Chrome, потому что привык пользоваться «канареечной» версией браузера. Теперь делюсь и с вами.

https://www.youtube.com/watch?v=CBi-ycq3tuo

Многослойный подход к Speculation Rules

Гарри Робертс делится интересным способом добавления эффекта «мгновенности» при переходе по ссылкам.

Сразу покажу его сниппет:

<noscript type=speculationrules>
  {
    "prefetch": [
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ],
    "prerender": [
      {
        "where": {
          "selector_matches": "[data-prefetch=prerender]"
        },
        "eagerness": "immediate"
      },
      {
        "where": {
          "selector_matches": "[data-prefetch]"
        },
        "eagerness": "moderate"
      }
    ]
  }
</noscript>

Итак, что здесь происходит.

- <noscript type=speculationrules> — это подсказка браузеру, что на странице нужно применять Speculation Rules. Если ещё не сталкивались с такими, можете почитать про них тут: https://developer.chrome.com/docs/web-platform/prerender-pages.
- Вместо того, чтобы размечать конкретные ссылки, Гарри предлагает использовать атрибут [data-prefetch]. Если он есть у ссылки, тогда сработает оптимизация.
- Для всех внутренних ссылок без атрибута всё равно включается оптимизация, ресурсы начнут скачиваться по задержке курсора на ссылке или в начале нажатия на ссылку.
- Если атрибут выставлен как [data-prefetch=prerender], то это просьба браузеру отрендерить контент по ссылке заранее, как только он найдёт это правило.

Таким образом можно разметить супер-важные для быстрого отображения страницы, чтобы они рендерились ещё до того, как пользователь подумал о том, что он туда перейдёт. Для всяких лендингов с единственной кнопкой-переходом — отлично.

Разумеется, помните, что такие оптимизации не бесплатны. Пререндеринг и префетчинг — это запросы на сервер. Можно неаккуратно задудосить самих себя, если настроить правила криво. Но если вы всё-таки понимаете, как разменять серверное время на прибыль бизнесу и удобство пользователей — дерзайте, подход интересный.

https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/

Отдельный канал про работу, продуктовое и менеджерское

<оффтоп>

Когда я заводил этот канал, то хотел просто делиться мыслями о всяком, не только о фронтенде. Но как-то само собой получилось, что он превратился в эдакий филиал «Веб-стандартов», где я несколько раз в неделю делюсь своими мыслями по поводу прочитанных статей или просмотренных видео около фронтенда. Иногда проскакивают менеджерские или популярно-научные видео в рубрике «Видео выходного дня».

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

Можно было бы забить и просто постить что угодно — это ж мой канал, что хочу, то и делаю. Но совесть не позволяет. Самого бесит, когда классные блогеры начинают сезон шаринга «очень полезными папками», не очень релевантный каналу.

Поэтому завёл отдельный канал @mefody_work, куда буду постить всякое интересное про свою работу и про то, как я обучаюсь продуктовому менеджменту.

- Это что, канал @mefody_dev всё?
- Нет, не всё. Фронтенд — это то, что мне супер-интересно. И не смогу я просто взять и бросить изучать то, чем занимаюсь больше 15 лет. Так что новости про фронтенд сюда буду продолжать постить.

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

- А времени на всё хватит?
- Я пока не планирую в новом канале публиковать новое так же часто, как здесь. К тому же у меня мозг так работает, что мне проще чему-то научиться, пересказав это своими словами. Оказывается, есть люди, готовые читать такие пересказы — вас только в этом канале больше 4.5 тысяч 🙂 Так что посмотрим, но должно хватить.

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

В общем, присоединяйтесь, если вам интересно читать не только про фронтенд. Всем буду рад.

</оффтоп>

https://news.1rj.ru/str/mefody_work

UPD. Естественно, первое, что мне написали в личку про новый канал, «Включи комментарии, ну ты чего!». Ладно, включил, проверим, хватит ли меня 🙂

Релиз Node.js 22.12.0

Чего это я вдруг решил написать про минорный релиз ноды? Тем более до этого я как-то про релизы ноды вообще не писал.

А случилось важное. С этой версии можно подгружать ES-модули при помощи require(). Раньше для этого надо было запускать ноду с флагом --experimental-require-module, если уж очень надо было. А теперь флаг не нужен, работает по умолчанию.

Если вам наоборот надо выключить от греха подальше приятную новинку, то можно использовать флаг --no-experimental-require-module.

Давно жду этой маленькой, но приятной мелочи. Страдать из-за модулей-немодулей мы в Node.js, кажется, будем вечно, но теперь хоть поприятнее будет совмещать два мира и не бояться получить ошибку при очередном обновлении зависимостей.

https://nodejs.org/en/blog/release/v22.12.0