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

Видео выходного дня. Анастасия Калашникова — практикующий психолог, ведущая тренингов для айтишников, основательница проекта 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

Эффект матового стекла с backfrop-filter

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

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

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

https://www.joshwcomeau.com/css/backdrop-filter/

Эффект полутонов в 3 строчки CSS

Ана Тюдор показывает, как совместить всего три свойства — background, background-blend-mode, filter — чтобы получить красивый эффект рисования однотонными точками (и не только). Вся магия в том, что filter: contrast превращает полутона в превалирующий цвет. Было разблюренное чёрное пятно на белом фоне — получится яркий чёрный кружок с чёткими белыми краями.

Если соединить два фона внутри background, поиграться с режимами смешивания и бахнуть поверх контрастом, то получается красивое.

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

https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

Иконочные шрифты — это плохо?

Олли Уильямс пробует разобраться, действительно ли в 2024 году плохо использовать иконочные шрифты.

- Говорят, иконки в шрифтах невозможно перекрасить. Но вообще-то браузеры уже умеют в COLRv1, то есть в цветные шрифты, которые вполне себе можно перекрашивать.

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

- Говорят, иконочные шрифты негативно влияют на производительность страницы. Но ведь woff2 очень даже компактный, а если сверху добавить unicode-range вместе с каким-нибудь glyphhanger, то ничего лишнего на страницу и не попадёт.

- Говорят, если шрифт не загрузится, пользователь увидит страшное. Ну, вообще-то если ваши иконки не встроены SVG-спрайтом или инлайном на страницу, то всё тоже может сломаться.

- Говорят, иконочные шрифты ломают доступность. Да, символы в том же Font Awesome явно не те, которые будет адекватно озвучивать скринридер. Но у нас уже есть в браузерах как ARIA-атрибуты, так и content: 'text' / 'alt-text'; для псевдоэлементов.

В статье есть ещё пара аргументов в пользу того, что на самом деле иконочные шрифты не так уж и вредны. Хотя в конце Олли советует всё-таки использовать SVG для таких задач, потому что там проблем в разы меньше, а накопленного опыта — больше.

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

https://fullystacked.net/icon-fonts/