mefody.dev

Анимация для 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

UI-анимации Якуб Анталик делится коллекцией готовых к применению анимаций. Для популярных частей интерфейса. Там даже есть скиллы для ваших LLM. И Pro-анимации за денежку, хотя я не до конца понимаю, как можно спрятать за пэйвол CSS-анимацию. https://transitions.dev/

Тестируем скилл `modern-web-guidance` Google на Google I/O презентовали скилл, который должен помогать вашим LLM использовать при разработке актуальные возможности веба. С учётом Baseline и различных нюансов с поддержкой. Ахмад Альфи решил попробовать скилл modern-web-guidance в деле. Применил на реальном проекте и посмотрел, как тот справляется с тем, чтобы вёрстка была действительно качественной, современной и доступной. Какие конкретно делает выводы Ахмад, читайте в статье. Но для себя я выделил следующее: • В статье подтвеждается, что токенов скилл кушает много. Я ставил себе скилл сразу после анонса, тоже тогда заметил эту прожорливость. Но при этом качество результата растёт. • Чего я не знал, так это того, что скиллу можно задавать вопросы. Буквально через npx можно сформулировать запрос, а он выдаст список материалов, где лежат нужные знания. В JSON и не для человека, но подход крайне интересный. Как-то я упустил эту особенность, когда игрался. • Принимать решения, какой подход внедрять, всё равно вам. Волшебной палочки пока не существует. Но скилл постоянно допиливают, там много всякого самого свежего появляется. В общем, дам ему второй шанс, уж много кто нахваливает. https://alfy.blog/2026/07/25/modern-web-guidance.html

Дефолтные стили браузеров Можно подсматривать, что по умолчанию браузер применяет к тому или иному элементу, через DevTools. А можно взять и посмотреть все-все стили в репозиториях самих браузеров. Будет полезно, когда столкнётесь со странным багом, где стили ломаются не на элементе, а на псевдоэлементе внутри его shadow dom. Спасибо Лёше за полезный материал. https://t.me/alexnozer_dev/392

200 миллисекунд «Что происходит, когда пользователь переходит по ссылке в браузере?» Такие вопросы любят задавать на собеседованиях. Я и сам такой задавал не раз, он и правда хорош на поговорить. Так вот. Тут визуальное великолепие подъехало. Пока что это самый подробный ответ на вопрос выше, который я видел. При этом я видел потрясающую по контенту коллективную репку в гитхабе, где коммунити за годы постаралось знатно. Но тут это ещё и красиво, визуально, пошагово. https://200ms.thenodebook.com/

Безопасный релиз npm-пакетов в 2026 Андрей Ситник периодически выдаёт статьи, которые прям бери и в инструкции превращай. Это одна из них. Думаю, про всякое неприятное, что творится в npm с безопасностью в последнее время, вы слышали. Причём способы защититься от угона пакетов есть относительно давно, но их же откуда-то знать надо. В статье есть подробное руководство по защите со всех сторон от человека, который релизит в npm довольно часто. Кстати, у Злых Марсиан появилась прикольная особенность в статьях. Если статья — гайд, то прям в ней есть скилл для LLM, который реализует принципы из статьи. https://t.me/webstandards_ru/7812

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

<button aria-describedby="bold-tooltip">
  <svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>

И ещё немного JavaScript, чтобы связать кнопки с тултипами. К сожалению, этот код не доступный. Хотя там есть aria-атрибут, который вроде как должен помогать связать элементы для скринридера. Почему? Читайте в статье. Там есть готовое решение и доступный код, который можно утащить к себе в проекты. https://jakearchibald.com/2026/my-tooltip-a11y-mistake/

Бесконечность не предел Адам Аргайл делится 9 практическими примерами, где calc(infinity) или calc(infinity * 1<something>) в CSS помогают решить задачу проще и почти без костылей. Бесконечное время, бесконечное скругление, полубесконечность и другие. https://nerdy.dev/css-infinity-use-cases

VITE: The Documentary Документалки от CultRepo — это особый вид удовольствия. Во-первых, давайте признаем, что документалку про React вряд ли будет интересно смотреть людям не из IT, это всё-таки нишевая история. Поэтому сценарий опирается на то, что зритель всё же хоть минимально, но погружен в тему. Во-вторых, снимают и монтируют очень качественно, по-нетфликсовски. Посмотрел на днях их документалку про Vite. Очень понравилась. Тут тебе и набросы в сторону Webpack, и конкуренция со Snowpack, и способы продвижения в опенсорсе, и основание компании Void Zero. И рассказывают это всё непосредственные участники. Кайф. Рекомендую. https://www.youtube.com/watch?v=bmWQqAKLgT4

Подсветка синтаксиса на основе Tree-sitter В большинстве IDE подсветка синтаксиса работает на основе регулярных выражений. Топорно, с приколами, но работает же. Tree-sitter — это инкрементальный парсер, который шустро работает с полноценным деревом. Это позволяет починить разные баги, связанные с порядком применения регулярок. Lumis — это подсвечивалка кода на основе Tree-sitter. Работает в CLI, Rust, Elixir, Node.js, браузерах, Java. Поддерживает больше 110 языков. Прикольная фишка — темизация в терминале. Попробовал на одном файлике, который у меня в VS Code постоянно ломается из-за неприличной комбинации селекторов в одной длиннющей строке. Lumis справился. https://lumis.sh/

Короткая история доменов DNS появился ещё в 1983, самый первый домен был symbolics.com, доменная зона .ai принадлежит британскому острову. И другие интересные факты про домены на длинном таймлайне. https://www.dotcom.press/history-of-domains

Неполный список ошибок в CSS Рассказывал недавно коллеге про страничку, где собраны признанные W3C косяки при разработке разных CSS-спецификаций. Оказалось, не самая известная страничка. В общем, у W3C есть страничка, которая начинается с фразы: «Это должно быть исправлено, если кто-то изобретёт машину времени». И там можно посмотреть на решения, которые спустя время выглядят сомнительными. Но откатить нельзя, веб должен быть обратно совместимым. Например, !important во многих языках программирования — это «НЕ важно». Но в CSS — важно. Или шрифт в font-family было бы логично всегда брать в кавычки, а не заставлять парсер играть в угадайку. Захожу иногда на эту страничку, чтобы принять тот факт, что даже если W3C, где собирается куча экспертов и принимает решения коллективно, до сих пор делает ошибки, то мне одному в каких-то решениях помельче ошибаться не так уж и страшно. https://wiki.csswg.org/ideas/mistakes/

AT Protocol в «Веб-стандартах» Давно хотел разобраться, что за протокол такой новый модный, про который многие фронтенд-блогеры писали в течение пары месяцев. Пригласили Дэна Абрамова в подкаст, он подробно объяснил. Хорошо быть подкастером. В шоуноутах оставили много полезных ссылок, если вам тоже интересно разобраться самостоятельно. https://t.me/webstandards_ru/7793

Что на самом деле творят юзер-агенты? Пол Кинлан собрал классную тулзу, чтобы отслеживать действия каждого user agent. На каждый запрос к сайту создаётся хешик, который привязывается ко всему на странице (стилям, скриптам, шрифтам, картинкам), а затем по этому хешику можно посмотреть, что какой юзер-агент делал на сайте. Интересно следить за реальными действиями краулеров, LLM-ботов и прочих браузеров, притворяющихся Chrome. Можно как изучить статистику самого проекта, так и поднять у себя такой же для детальной анилитики на вашем сайте. https://paul.kinlan.me/ua-tracer/

Как мы делаем Frontend CTF Старожили этого канала знают, что я каждый год балуюсь и слегка издеваюсь над фронтендерами в формате заданий на фронтендерском CTF. Написал на Хабре статью про то, как мы небольшой командой ежегодно творим прекрасное, придумываем задания, пилим свой игровой движок, создаём игровую вселенную и катаем Мона Лизу по вымышленному миру. https://habr.com/ru/articles/1051050/

CodeRun Summer Challenge Зазываю. Мы тут моей командой пробуем новый формат для соревнований в CodeRun. И в этот раз переделали механику, чтобы можно было хоть самому, хоть с LLM решать, при этом важно не то, кто первый решил, а то, чей код работает быстрее всего на бенчмарках. Челлендж — это 15 задач, ворваться можно хоть в самый последний день и занять топ. Почему зазываю? Там бекендеры захватили топ, а в треке JavaScript участников мало: https://coderun.yandex.ru/seasons/2026-summer/tracks/common/catalog?language=javascript Чтобы выбиться в топ, не нужно обгонять плюсовиков. Нужно обогнать всех остальных фронтендеров. И применять можно вообще любые хаки, читать файлы бинарными чанками, всё в одной нечитаемой функции — полная свобода, лишь бы победить бенчмарк. https://coderun.yandex.ru/seasons/2026-summer

Tbilisi JS Meetup #8 Уже завтра, 4 июля, в 15:00 по тбилисскому (в 14:00 по минскому) можно будет подключиться к трансляции качественного митапа по фронтенду. Спикеры — огонь, темы — огонь, организаторы — огонь (ручаюсь, имел честь выступать там офлайн). Забивайте слот в календариках. https://t.me/tbilisi_js/596