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/

Опыт использования CSS Container Queries командой Netflix

На web.dev периодически появляются «истории успеха», когда большие компании делятся тем, как они использовали современные технологии (часто — доступные только в Chrome) и им это сильно помогло. И вот, чем поделилась команда Netflix (очень популярный стриминговый сервис с фильмами и сериалами, если вдруг не знали).

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

2. Проще работать с медиавыражениями. Раньше нужно было опираться одновременно и на размеры вьюпорта, и на какие-то классы или стили, устанавливаемые через JavaScript. Теперь достаточно смотреть только на размеры контейнера.

3. В принципе стало нужно писать меньше кода. JavaScript почти стал не нужен для выставления размеров элементам. А чем меньше кода, тем проще избавиться от багов.

4. Лучший Developer Experience. Судя по цитатам, некоторые разработчики считают, что так и должен был работать CSS изначально.

5. Ко всему этому можно привязать полифил, если надо работать в браузерах, где Container Queries нет.

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

https://web.dev/case-studies/netflix-cq

Как звучит загрузка страницы

Пока многие решают задачки в Advent of Code, Advent of TypeScript или просто открывают классические адвент-календари с подарочками, я дополнительно читаю Web Performance Calendar, который в декабре каждого года тоже раз в день выкладывает по одной интересной статье.

Брайан Луис Рамирес в рамках одной из таких статей поделился забавным инструментом, который озвучивает загрузку страницы по HAR-файлу. Вам нужно открыть DevTools, во вкладке Network поставить тротлинг сети (чтобы звук был подольше), загрузить нужную вам страницу, экспортировать HAR-файл и загрузить его в утилиту Soundtrace.

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

https://calendar.perfplanet.com/2024/how-does-web-performance-sound/

Переходы страниц как в Internet Explorer

Когда я читал доклад про View Transitions API, то шутил, что современные браузеры наконец-то научились делать то, что Internet Explorer умел ещё в версии 4.0. Можно было написать что-то вроде <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=3)" />, и страница появлялась через 3 секунды со спецэффектами жалюзи. Олды помнят.

А Брамус взял и собрал библиотеку, которая реально обрабатывает такие метатеги и при помощи View Transitions API воссоздаёт те самые милые сердцу спецэффекты. Пока игрался с демкой, олдскулы порвало.

https://page-transitions.style/

Про local-first подход, движки синхронизации и архитектуру приложений

Видео выходного дня. Кирилл Мокевнин и Андрей Ситник хорошо обсудили то, как современные возможности браузеров позволяют делать полноценные приложения без нужды в запросах к бекенду на каждое нажатие кнопки. И хоть local-first подход не применить вообще для любого приложения, но знать и уметь работать с «умной» синхронизацией — полезный навык.

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

https://youtu.be/-57r5AARRgY

Собственный инструмент замеров скорости сайта на основе Puppeteer

Генри Прайс показывает, как можно при помощи Puppeteer собирать нужные именно вам метрики с сайта.

В статье есть примеры, как искусственно замедлить сеть, эмулировать устройства, собрать Core Web Vitals и выгрузить это всё в табличку Excel. Но на самом деле, так как вы по сути запускаете почти полноценный браузер в CI, то делать на странице можно почти что угодно и замерять можно почти какие угодно синтетические метрики. Важно только не забывать, что это синтетические замеры, а не RUM.

https://calendar.perfplanet.com/2024/build-your-own-site-speed-testing-tool-with-puppeteer/