mefody.dev

Горячий код в V8 Настя Котова у себя в телеграм-канале продолжает разбираться в глубинах Node.js и V8. В этот раз задалась интересным вопросом: что же такое «горячий код» для V8? Один и тот же код может превращаться в итоге в разные инструкции внутри движка, причём скорость выполнения этих инструкций тоже может значительно отличаться. Потому что на старте он «холодный», а чем больше движок собирает статистики про выполнение, тем лучше может его оптимизировать. В этом полезно разбираться: • если вы пишете бенчмарки и удивляетесь, почему они каждый раз выдают разные результаты; • ваш проект дошёл до стадии оптимизации производительности на уровне подстраивания под движок (может быть важно на высоконагруженных проектах); • при работе с облачными функциями (вопрос денежки); • для общего развития. https://telegra.ph/Goryachij-kod-v-V8-chto-ehto-znachit-04-05

Scroll-Driven Animations Джош Комо продолжает радовать нас интерактивными уроками по крутым возможностям современного веба. На этот раз он добрался до анимаций, привязанных к скроллу. Это когда на экране что-то двигается и появляется по мере того, как пользователь скроллит страницу. Напомню, в 2026 вполне себе можно использовать Animation Timeline API для таких задач, чтобы не тянуть на клиент жирные библиотеки. Для Firefox пока придётся подключить полифил, но он есть. https://www.joshwcomeau.com/animation/scroll-driven-animations/

<input>, слайды доклада Только что прочитал на Dump доклад про тег <input>. Напомню, в 2019 году у меня был доклад <a>, в 2020 — <img>. Самое время обновить список. Пока готовился, узнал пару новых интересных фактов. Имхо, самый сложный и неоднозначный тег в HTML. Прикладываю слайды. А когда появится видео, выложу и его сюда. https://mefody.dev/talks/input/

Никогда больше не теряйте заполненные формы Аарона Густафсона, видимо, сильно достало, что иногда заполняешь форму, нечаянно уходишь со страницы (внезапный переход назад из-за скролла по тачпаду, нетерпеливый Cmd+W, игривый кот прошёлся по клавиатуре) — и всё, заполняй заново. Поэтому он собрал веб-компонент form-saver, который сохраняет всё в localStorage и восстанавливает поля формы, если вдруг случилась перезагрузка. Забирайте, если вам такое нужно. https://www.aaron-gustafson.com/notebook/never-lose-form-progress-again/

Какие метрики интересны бизнесу, какие – вам, а какие – никому Видео выходного дня. Полторы недели назад на Podlodka Teamlead Crew читал доклад про то, как выстроить систему метрик, которая будет не бесполезна, а вести к каким-то результатам. Андрей Смирнов пригласил поделиться опытом, а у меня как раз давно было желание систематизировать знания по различным подходам. Вообще тема, конечно, не самая простая. Универсальных советов попросту нет. Несмотря на то, что я попытался в докладе раскрыть тему, как почти любую метрику привязать к самому важному для бизнеса (деньгам), днём ранее Серёжа Попов в своём докладе совершенно справедливо заметил, что не всегда так нужно делать. Но одну мысль хочу закрепить: метрики должны помогать достигать результатов, а не мешать людям работать. https://youtu.be/cNhIeA8ZG6o

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

 .isRangeSelected {
    :nth-child(1 of :has(:checked)) ~ :not(:nth-child(2 of :has(:checked)) ~ li) {
       background-color: rgb(228 239 253);
    }
 }

Селектор :nth-child(N of .selector) позволяет выбирать подмножество в списке детей. Это открывает приятные возможности по стилизации сложных списков, WYSIWYG-текста и в прочих случаях. Например, вы можете стилизовать каждый второй параграф p в тексте, где между параграфами есть заголовки. В статье же интересный лакончиный пример того, как подсветить даты, которые расположены между двумя выбранными чекбоксами. https://css-tricks.com/selecting-a-date-range-in-css/

CSS-анимации как state-машины В свежем выпуске «Веб-стандартов» обсуждали крайне интересную статью от Патрика Бросета про то, как использовать анимации для хранения истории работы со страницей. Простая задача: если пользователь наводит мышку на элемент сейчас или наводил в прошлом, хранить это знание и использовать для каких-нибудь полезных визуализаций. На JavaScript такое делается просто. А вот если на чистом CSS? Решение потрясающее:

.track-hover {
  --was-hovered: false;
  animation: track-hover .00001s linear forwards paused;
}
.track-hover:hover {
  animation-play-state: running;
}
@keyframes track-hover {
  to { --was-hovered: true; }
}

Если не до конца понятно, что здесь происходит, почитайте объяснение в статье. Или послушайте подкаст. Но само по себе такое решение рядом с container queries и нативными if в CSS позволяет добавить в вёрстку новый слой: не только текущее состояние страницы, но и прошлое, влияющее на настоящее. https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/

Под капотом нового фронтенда MDN Если вы всё ещё читаете актуальную документацию на MDN, а не просите совсем всё делать вашу LLM («Вы, чего, и конфеты за меня есть будете?»), то могли заметить, что у MDN обновился фронтенд: типографика, иконки, стили. На самом деле, это произошло ещё в августе прошлого года. В статье Лео МакАрдл рассказывает, что скрывается под капотом у этого нового фронтенда. Интересно почитать, как устроен самый популярный портал с документацией для веб-разработчиков. • Много веб-компонентов. Простых и сложных. С хорошими примерами, как их применять в современном фронтенде. • Rspack для сборки. Свежатинка на замену Webpack. Значительно улучшился DX. • Мощная кроссбраузерность. Потому что не могут выдать «прастити, Safari не поддерживаем». Но при этом с опорой на Baseline. • Markdown для контента. Который потом сложно, но интересно превращается в полноценные страницы с обвязкой. • Современный CSS там, где он уместен. Видел, как pepelsbey использовал нативную вложенность селекторов в пулл-реквестах. • Интерактивные демки на многих страницах. • Всё это лежит на GitHub, то есть можно подсмотреть и вдохновиться. https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

Калькулятор метрик шрифта для font-size-adjust Есть такое замечательное и мощное свежее свойство для шрифтов, font-size-adjust. Оно позволяет задавать отношение некоторого размера из свойств шрифта к самому размеру шрифта. Попробую объяснить на примере: • Допустим, у вас есть шрифт Roboto. • Его прописные буквы по высоте составляют 0.713 от размера шрифта. • Его строчные буквы по высоте составляют 0.531 от размера шрифта. • Получается, если размер шрифта — 72px, то cap-height будет 51.336px, а ex-height — 38.232px. Теперь, если вам нужно на момент загрузки шрифта Roboto показать фолбек системным шрифтом, вы можете написать font-size-adjust: ex-height 0.531 — и строчки после загрузки прыгать не будут. Или если в одной строке нужно показать два разных шрифта зачем-то, то тоже можно сделать красиво. Откуда я взял числа для вычислений? По ссылке ниже. Простая страничка, работает сугубо на клиенте. Загрузили шрифт — получили метрики. Удобно. Вот бы ещё PWA из неё собрать — вообще счастье было бы. https://clagnut.com/sandbox/font-size-adjust.html

Что на самом деле важно в разработке? Видео выходного дня. Вова Гриненко на ЯЛФ в этом году прочитал шикарный доклад про то, что так или иначе волнует каждого разработчика. Философское размышление с добротной порцией фирменного юмора. https://youtu.be/nBbTeDUYgyU

Axios скомпрометирован В блоге Socket подробно разбирается свежий взлом супер-популярного пакета Axios. Рассказывают, как он затронул экосистему и что делать, чтобы подобные атаки вас не задевали. Для начала, обязательно проверьте, есть ли у вас где-то версия 1.41.1 в зависимостях и в зависимостях зависимостей. Важно не просто найти подстроку, но и проверить разрешённые диапазоны типа ^1.13.5. Затем убедитесь, что нигде в пайплайне не используете npx — в нём у вас контроль минимальный. К слову, npx часто используют для работы с MCP, привет современной разработке. Если npx ну очень нужен, перейдите на --no --offline. А потом внимательно прочитайте статью и прислушайтесь к советам из неё. Кстати, ещё можно перейти на pnpm, он по умолчанию более требовательный к любым зависимостям. https://socket.dev/blog/hidden-blast-radius-of-the-axios-compromise

Шрифт-график Datatype Крайне интересная находка. Вариативный шрифт Datatype, который превращает инструкции текстом в графики. Например, {l:15,45,90,30,75,20,85,95} — линейный график, {b:30,70,50,90} — диаграмма столбиками, {p:65} — круговая диаграмма. Собсна, пока всё. Вся магия в лигатурах. Из минусов вижу только то, что копировать такой текст, как и читать его скринридером, будет тем ещё приколом. И если доступность починить довольно легко, то с копированием не придумал, что можно сделать. https://franktisellano.github.io/datatype/

Два круга, одна стрелка и Anchor Positioning Темани Афиф продолжает экспериментировать с различными свежими API, чтобы исследовать их пользу на практике. Задача: соединить два круга стрелкой. Круги можно двигать при помощи JS. Для усложения над стрелкой нужно выводить расстояние между кругами, без JS. И двигать круги можно вообще как угодно. Темани по шагам, демка за демкой приходит к реализации. А потом ради интереса реализует на CSS алгоритм нахождения кратчайшего пути в графе. Потому что может. Когда-то давно у меня был доклад с названием «CSS — язык программирования». Кажется, пора с него сдуть пыль и переделать под современные реалии. https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

Flexbox Masonry Layout Ибрахим Бендебка предлагает решить задачу masonry-раскладки на флексах при помощи математики. Буквально берёт и раскладывает важные составляющие флексов на формулы и высчитывает нужные размеры для всех элементов, чтобы они красиво выкладывались в горизонтальную плитку. На самом деле получился не совсем masonry, а только очень частный его случай. И на узких экранах подход ломается. Но для реализации фотогалереи с превьюшками, честно говоря, идея очень интересная, к тому же не нуждающаяся в JavaScript — всё на CSS-переменных и небольших `atan2`-хаках. Советую вчитаться в демки всем любителям математики в интерфейсах. https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/

Browser Score Страничка от Лии Веру, которая проверяет, какие фичи CSS ваш браузер поддерживает. Раньше это называлось CSS3 Test, но CSS3 — устаревший термин, даже в вакансиях вижу его всё реже. Практическое применение у него есть полезное как минимум для процессов поддержки. Можно просить пользователя, у которого что-то визуально сломалось, открыть страницу и через девтулзы сделать её скриншот полностью (если пользователь знает, что такое девтулзы). Это всё равно проще, чем пытаться на машине разработчика имитировать все браузеры мира. https://browserscore.dev/

Книга ‘Accessibility for Everyone’ У меня эта книга есть в бумажном виде довольно давно. Крайне полезный источник знаний про доступность для веба и не только. Спасибо Лоре Калбаг. Несмотря на то, что книге уже 9 лет, знания из книги во многом всё ещё актуальные. Да, появились WCAG 3, новые законы и акты о доступности. И в момент написания книги не было LLM-агентов, которым можно скормить гайдлайны, чтобы они помогали писать хороший код. Но для погружения в тему — самое то. Собственно, откуда вдруг пост про книгу 9-летней давности. Она стала бесплатной в электронном виде. Превратить HTML в удобный для чтения формат на ваших устройствах, если веб-версии недостаточно, поможет гугление или джипитишение. https://accessibilityforeveryone.site/

NES.css Нашёл визуальное наслаждение. CSS-библиотеку, которая превращает интерфейс в 8-битную игру. Олдскулы радуются. Проект, к сожалению, не обновлялся с 2021 года. Но это не мешает вдохновиться и форкнуть, если очень нужно. https://nostalgic-css.github.io/NES.css/

Будущее карьеры разработчика Внезапно не про веб, а про профессию в целом. Маттео Коллина (легенда) поделился своим видением, что изменится в нашей работе и в карьерных возможностях будущих новичков. • Фундаментальные знания стали ещё важнее. Так как LLM может взять на себя написание кода, кто-то должен ревьюить то, что оно напишет. И заранее можно эффективнее задачи ставить, если чётко формулировать, со знанием дела. • Стажировки — самый правильный способ вкатиться в IT. Джуны с рынка не интересны, компаниям интереснее брать мотивированных новичков, которых можно обучить тому самому фундаменту. Чтобы с LLM работать эффективнее. Рынок сейчас принадлежит компаниям, правила устанавливают они. • Индивидуальное решение сделать всё проще, универсальное не всегда нужно. Я уже сейчас иногда для себя вайбкодю то, что мне поможет решить текущую задачу разово, а не пытаюсь адаптировать универсальные инструменты. И такого будет всё больше. Но вообще, что забавно, я и раньше знакомым, которые хотели в айти, рекомендовал то же самое: обучиться базе (онлайн или офлайн, в интернете полно бесплатных материалов), найти ментора и/или попробовать попасть на стажировку (куда угодно, лишь бы опыт промышленный получить), собирать пет-проекты под свои нужды. Просто теперь эти рекомендации ещё более актуальны. Сейчас бы ещё интеграцию какую-нибудь вставить, что вообще-то у нас есть стажировки, приходите. Но вы и так их найдёте, если захотите поработать где-нибудь рядом со мной :) https://adventures.nodeland.dev/archive/the-future-of-the-software-engineering-career/

Холивар про Tailwind Опытные слушатели подкаста «Веб-стандарты» знают, что его ведущие, включая меня, слегка предвзяты по отношению к Tailwind. Нам за это и в письма прилетает, и в комменты на ютубе, и при личных встречах. Просили позвать кого-нибудь действительно разбирающегося. Позвали. Получился выпуск про плюсы и минусы инструмента и экосистемы, с лёгким налетом дебатов и холивара, но не слишком. https://t.me/webstandards_ru/7667

Navigation API — теперь во всех браузерах Как же я жду, когда эту апишку можно будет смело тащить в продакшен! Как мы до сих пор работали со SPA: • подписываемся на клики по ссылкам; • или пытаемся вклиниться в History API; • по клику делаем preventDefault; • имитируем работу браузера, но через JS (ходим за данными, собираем компоненты, рендерим); • обязательно руками обновляем window.history. И потом ещё спорим на конференциях, какая библиотека для роутинга самая правильная. Navigation API переворачивает процесс в правильную сторону: • пользователь как-то изменяет URL страницы (ссылка, JS, серверный заголовок); • мы подписываемся на событие изменения урла; • вклиниваемся в ивент, если нужно, через event.intercept; • имитируем работу браузера (ну а как без этого). Кода меньше, урл становится единым источником правды, не толкаемся в History API с самим браузером. Хорошечно же! Осталось дождаться 2.5 года, когда фича станет Widely Available. И когда фреймворки это внутрь себя затащат, чтобы нам меньше думать нужно было. https://web.dev/blog/baseline-navigation-api