Posts of mefody.dev

Редизайн example.com Во-первых, я впервые за много лет зашёл на example.com. Он часто в статьях и гайдах фигурирует, а в старых CHM-учебниках для веб-мастеров чуть ли не в каждой статье был. Во-вторых, я узнал, что этот домен особенный, он зарезервирован IANA для документации. Боюсь представить, какой был бы ужас, если бы его можно было купить. В-третьих, в статье есть интересное наблюдение за тем, как содержимое страницы менялось с годами. Оказывается, там недавно произошёл полный редизайн, страница мультиязычная, а ещё у неё очень даже приличные метрики Core Web Vitals. https://www.debugbear.com/blog/example-dot-com-redesign-history

Определяем перекрытие элементов при помощи CSS До чего техника дошла. Ахмад Шадид делится способом понять, два элемента в CSS налазят друг на друга или нет. Ну и подстроить под это визуальную часть. Работает на сочетании Anchor Positioning API, Scroll Timeline API и Container Style Queries. Раньше для такого нужно было явно прописать брейкпоинты. Садится верстальщик, теребит край окошка влево-вправо, подбирает пиксель, где нужно декоративный элемент спрятать. А теперь можно собрать файлик CSS, который будем смотреть на любом размере вьюпорта, помещается декоративность или нет. Технолоджия. https://ishadeed.com/article/css-detect-overlap/

Полифил для CSS Typed OM Стоит, наверное, начать с того, а что же такое этот ваш Typed OM. Когда вы задаёте какое-то значение CSS-свойства через JS, то по сути пишете строку, которую браузер парсит и натягивает на элемент. Причём можно задать кривую строку — и ничего не упадёт. el.style.opacity = "wtf"; — валидная инструкция, к сожалению, хоть сам CSS получится не валидный. А ведь браузер вообще-то знает типы данных каждого свойства. Он умеет отличать строки от чисел, длины от времени и так далее. Так вот, CSS Typed OM — это возможность работать со свойствами элементов через attributeStyleMap, где каждое поле типизировано. А ещё при попытке запихнуть в неверный тип кривое значение вы буквально получаете ошибку, которую можно перехватить. На сдачу получаем ускорение на 30% для кода, который вертит-крутит CSS-стили в вашем приложении. В общем, я фанат этой штуки уже лет 8 в теории (на практике не применял пока что осознанно). И она даже скоро станет кроссбраузерной (Firefox вот-вот, уже-уже). А пока можно воспользоваться полифилом. Хорошим полифилом, который учитывает тесты веб-платформы. https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/

А есть уже проект с таким же именем? Брамус хотел опубликовать npm-пакет, но внезапно обнаружил, что пакет с таким именем уже есть. Поэтому собрал cli-утилиту, которая проверяет доступность имени в NPM и Netlify. При желании можно добавить свой чекер для любого другого сервиса. https://www.bram.us/2026/10/08/caniname-cli-tool-to-check-project-name-availability/

replacements.fyi Есть такое сообщество — e18e (Ecosystem Performance). Они уже довольно долго помогают вебу становиться производительнее, заменяя не самые эффективные решения в популярных библиотеках на более эффективные. Нашёл у себя в сохранённых ссылках сайт, который помогает найти альтернативы разным npm-пакетам. Например, вместо библиотеки dotenv предложит воспользоваться нативным process.loadEnvFile. А для semver предложит более производительный пакет verkit. На сайте не то чтобы прям очень много предложений. Но проверил, есть ли у меня в пет-проектах что-то не самое производительное по мнению e18e — есть. https://replacements.fyi/

Стилизация тултипов Начал писать заметку про инициативу от Microsoft Edge дать разработчикам возможность стилизовать нативные тултипы (это которые показываются по ховеру на элемент с атрибутом title). Отвлёкся на работу — а Лёша уже написал подробнейший разбор. Если коротко, то нам готовят псевдоэлемент ::tooltip, в котором можно будет задавать много разных CSS-свойств, но не все. А если не коротко, то читайте заметку Лёши и ссылки в ней. https://t.me/alexnozer_dev/413

Слабые и средние смартфоны из реального мира Если занимаетесь оптимизацией производительности сайтов, то, скорее всего, знаете, что ни один лабораторный тест не заменит теста на реальном устройстве. Периодически эксперты по перфомансу делятся советами, какие реальные устройства лучше всего иметь в распоряжении для таких задач. Гарри Робертс составил свой список. Интересно, что оба варианта в рекомендациях — Samsung. Заняли они прочно эту нишу. У меня, кстати, когда-то был старенький девайс с Opera Mini, чтобы тестировать специальную версию сайта для слабых девайсов. Прикольный опыт. Подключить его к DevTools там было банально нечем, был только кабель для зарядки. https://csswizardry.com/2026/07/low-and-mid-tier-mobile-for-the-real-world-2026/

llms.txt: выдаём желаемое за действительное Я уже много где видел эти советы: добавь на сайт llms.txt, будут агенты туда ходить, токены экономить, а ещё в выдаче поисковой попадёшь в AI-сниппет — все туда сейчас хотят. Стоян Стефанов взял и проверил, открывает кто-нибудь вообще этот файл или нет. Спойлер: там меньше процента визитов. Честно говоря, я не понимаю, почему LLM вдруг должна сходить в какой-то отдельный файл, а не на сам сайт, если только явно её не попросить. Это ж как отдельные версии для слабовидящих — гарантировать полное соответствие контенту обычной версии сайта никто не может. https://www.phpied.com/llms-txt-agent-optimization-wishful-thinking/

View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более удобно работать с View Transition API. Напомню, это такая апишка в браузере, которая позволяет делать анимации для элементов между двумя «страницами». В кавычках, потому что не обязательно буквально переходить между страницами, чтобы запустить анимацию. Как и многие проекты деврелов Chrome, репозиторий покрылся пылью примерно на следующую неделю после Google I/O. Но справедливости ради, там и апишка не то чтобы невероятно активно развивается, чтобы что-то сильно менять. https://chrome.dev/view-transitions-toolkit/

Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я бы сначала всё же попробовал подключить JavaScript. Прити Сэм применяет современные CSS-функции attr(), sibling-index() и тригонометрические функции, чтобы собрать эффект перелистывания символов как у одометра или счётчика воды в квартире. https://blog.master.dev/the-odometer-effect-in-css/

Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновился на клиенте почти незаметно. В большинстве случаев этого хватает, но я почти уверен, что если вы работали с React, то в консоли видели Hydration failed because the initial UI does not match what was rendered on the server. Иван Акулов разбирает случаи, когда такие ошибки влияют ещё и на метрику Largest Contentful Paint из Core Web Vitals. И для некоторых заказчиков это прям важная метрика. И в конце статьи делится лайфхаком, как этот самый LCP немного читерски улучшить. https://3perf.com/blog/hydration-mismatch/

Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуда слышать. Джош Комо собрал несколько демок, которые отвечают на этот вопрос. Спойлер: в JavaScript тоже есть API, которые работают в отдельных потоках. https://www.joshwcomeau.com/animation/css-vs-javascript/

Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который em, а высота строки, в которой ваш текст рендерится. Ахмад Шадид в свойственном ему стиле обилием демок и картинок объясняет, как можно полезно применять эту единицу измерения, которая, кстати, Baseline Widely available. https://ishadeed.com/article/lh-unit/

<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому внутрь можно передать синтаксис Mermaid-диграммы — и она нарисуется. Если не знаете, что такое Mermaid, то это как раз тулза, которая превращает текст вида sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! в Sequence-диаграмму. И там ещё более 30 разных видов диаграмм, которые мы периодически используем в работе. https://www.bram.us/2026/09/10/introducing-mermaid-element-a-custom-element-to-display-mermaid-diagrams/

MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё одну?» — спросите вы. Да, но она реально интересная. Во-первых, работает на TextMate, то есть грамматики под неё легко добавляются, если очень нужно. Во-вторых, всего 2 KB в gzip — это прям мало. Другие библиотеки тянут от 7 KB до 300 KB из тех, что я знаю. В-третьих, она не «гадит» в HTML. Потому что использует под капотом Custom Highlight API, то есть размечает текст без вставки разных span и div в вёрстку, а делает некоторую подкапотную магию для применения ::highlight(token) потом в CSS. «Так оно, наверное, кроме как в Chrome за флагом нигде работать не будет!» — снова возразите вы. И я тоже так думал до сегодняшнего утра. Но оказалось, что с марта 2026 года эта апишка вполне себе работает во всех браузерах. Поэтому можно либо делать аккуратную загрузку, где для современных браузеров берёте MicroLighter, а для тех, что постарше, какой-нибудь альтернативный хайлайтер, либо если подсветка кода вам в принципе в приложении скорее как дополнительная плюшка, то только MicroLighter и грузить. https://davatron5000.github.io/microlighter/

Вам больше не нужен initial-scale Стопудово где-то у вас в вёрстке есть <meta name="viewport" content="width=device-width,initial-scale=1">. Он почти у всех есть. Потому что emmet его вставляет, всякие бутстрап-шаблоны тоже. Так вот, initial-scale можно удалить. Он был нужен давно, чтобы на iPhone при повороте экрана работало так же, как на всех остальных смартфонах. Но Apple это несоответствие уже давно пофиксили. Экономим байтики. https://quirksmode.org/quirksblog/2026/0902-initial.html

deep tech night Чуть не забыл. Завтра же deep tech night будет. Там про ИИ и LLM, причём я некоторые слова в программе даже не понимаю, но ровно поэтому и хочу послушать — когда-то я так на Web Standards Days сходил в первый раз, не понял половину слов, а теперь сам их в подкасте говорю. Для работы полезно, мы тут Контестом всё-таки инфру делаем для топовых ML-соревнований. От наших деврелов знаю, что специально собирали программу под хардовую аудиторию, с уже уверенными знаниями. Для онлайна тоже нужна рега. https://deeptechnight.ru/

Ambient CSS Освещение в интерфейсах на CSS! Ладно, звучит громко, но если вам нравится делать интерфейсы, где элементы отбрасывают правильные тени, то вам понравится и эта библиотека. Работает в несколько слоёв: отбрасывание тени, подсветка скруглений, затенение противоположных скруглений, наложение материала. В итоге это всё выглядит симпатично. Есть сайт с демками, открывается через VPN. https://github.com/kikkupico/ambientcss

Ctrl или ⌘ — выводим правильное Меня, как давнего пользователя macOS, периодически подбешивает, когда на сайте в инструкции написано «Ctrl+G — нужная вам комбинация». А потом оказывается, что всё-таки Cmd+G. Уверен, что пользователей Windows тоже не очень устраивает, когда их просят нажать ⌘⌥L. Абхишек Джакар делится примером компонента, который выводит в интерфейсе инструкцию, подходящую под ОС. В статье прям совсем базовый пример, его можно сильно улучшить и расширить, но как точка старта — почему бы и не да. https://blog.master.dev/keyboard-shortcuts-that-display-the-correct-modifier-key-per-os/

Анимация для border-image Красивое и несложное. Прити показывает, как при помощи градиентов, свойства border-image и анимаций по ховеру сделать классный эффект привлечения внимания к картинке. https://css-tricks.com/animating-css-border-image/

Spec-Driven Development на практике Видео выходного дня. Попалось на неделе видео от Кирилла Мокевнина, где они с Иваном Поддубным обсуждают применение OpenSpec как важной части общего процесса разработки в компании. Как внедряли, как тюнили под себя, где он не подходит и так далее. Я с OpenSpec играюсь уже несколько месяцев — и мне нравится. Хотя есть и свои сложности полностью на него перейти. Плюсы для меня: • Перед тем, как начать писать код, нужно проработать спеку на человеческом языке. Словами объяснить, что должно получиться. И уже на этом этапе приходится хорошенько так разобраться в фиче, но с помощью LLM. • Рядом с кодом лежит инструкция, как этот код должен работать. • Тесты генерировать одно удовольствие. • С хорошей спекой код пишется тоже сходу хороший. • Очень круто подходит для новых проектов, где всё с нуля. Пет-проекты за вечер с OpenSpec поднимать ну очень приятно. • Если спека достаточно подробная, то генерировать код можно и более дешёвой моделью без заметной потери качества — эффективность по токенам, все дела. Минусы (не без них): • «В PR из 600 строчек только около 100 про код» — такой справдливый комментарий получил на днях. Да, маркдауна в PR реально много. • Чтобы генерация работала лучше, спеку нужно писать на английском — очевидно, код мы тоже пишем на английском ведь. Но я не думаю на английском, приходится сильно напрягаться, чтобы не упустить в спеке что-нибудь неочевидное. • В legacy проектах есть свои приколы, которые OpenSpec норовит переписать, но без них всё разваливается. При этом документировать костыляо как-то стыдно. • Для качественной спеки либо нужна дорогая модель (использую Sol), либо приходится сильно напрягать мозги (не, ерунда какая-то). В общем, посмотрите-вдохновитесь, если ещё не применяете spec-driven разработку с LLM. Если применяете, то молодцы. https://www.youtube.com/watch?v=oDxODi3X2Mg

Next.js изнутри У Насти @startpoint_dev Котовой вышел новый цикл статей: теперь про то, как устроены внутренности Next.js. Очень рекомендую, сам в процессе прочтения разобрался в некоторых штуках, которые давно не давали покоя. Часть 1. Архитектура Next.js Часть 2. Как работает Pages Router Часть 3. App Router: от запроса до гидратации Часть 4. App Router: навигация, кеш и мутации Часть 5. Серверный слой Часть 6. Кастомный сервер Часть 7. Сборка Часть 8. Dev-mode Часть 9. Способы оптимизации И на блог Насти подпишитесь, если любите качественные материалы про фронтенд-технологии. Если не открывается — скажите спасибо одним трём буквам и включите другие три буквы.

Как читать вкладку Performance Одна из самых мощных, и при этом самых непонятных вкладок в Chrome DevTools — это вкладка Performance. Какие-то полосочки, разноцветные линии, стрелочки, подписи, скрывашки... Ну явно не для развлечения вкладка создавалась. У меня был доклад про эту вкладку, можете посмотреть его. А ещё можете изучить классный интерактивный гайд по вкладке от компании PerfReviews. Кликабельное, переключаемое, анимируемое. Видно, что навайбкоженое, но как раз в таких случаях я безумно рад, что LLM помогают собирать такой шик в образовательных целях. https://perf.reviews/profile-guide