Последние посты
mefody.dev
16 сент., 15:58
Какие анимации более производительные: CSS или JS?Лучше пару раз увидеть, чем много откуда слышать. Джош Комо собрал несколько демок, которые отвечают на этот вопрос.Спойлер: в JavaScript тоже есть API, которые работают в отдельных потоках.https://www.joshwcomeau.com/animation/css-vs-javascript/JoshwcomeauCSS vs. JavaScript • Josh W. ComeauThere are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several…mefody.dev
14 сент., 16:07
Единица измерения lhЕсли коротко, то 1lh = 1 line height. И это не размер шрифта, который em, а высота строки, в которой ваш текст рендерится.Ахмад Шадид в свойственном ему стиле обилием демок и картинок объясняет, как можно полезно применять эту единицу измерения, которая, кстати, Baseline Widely available.https://ishadeed.com/article/lh-unit/IshadeedThe CSS lh unitA look at the CSS line height unit and how it works.mefody.dev
11 сент., 16:52
<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/Bram.usIntroducing <mermaid-element>, a custom element to display Mermaid diagramsToday I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to easily include these in your markup … so I built one.mefody.dev
10 сент., 16:10
MicroLighterДейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё одну?» — спросите вы. Да, но она реально интересная.Во-первых, работает на TextMate, то есть грамматики под неё легко добавляются, если очень нужно.Во-вторых, всего 2 KB в gzip — это прям мало. Другие библиотеки тянут от 7 KB до 300 KB из тех, что я знаю.В-третьих, она не «гадит» в HTML. Потому что использует под капотом Custom Highlight API, то есть размечает текст без вставки разных span и div в вёрстку, а делает некоторую подкапотную магию для применения ::highlight(token) потом в CSS.«Так оно, наверное, кроме как в Chrome за флагом нигде работать не будет!» — снова возразите вы. И я тоже так думал до сегодняшнего утра. Но оказалось, что с марта 2026 года эта апишка вполне себе работает во всех браузерах. Поэтому можно либо делать аккуратную загрузку, где для современных браузеровDavemicrolighterI made a smol client-side syntax highlighter that uses the CSS Custom Highlights API called MicroLighter. I’ll talk about why I made it in a bit but first I wanted to… ahem… highlight… some of the features.mefody.dev
9 сент., 06:16
Вам больше не нужен initial-scaleСтопудово где-то у вас в вёрстке есть <meta name="viewport" content="width=device-width,initial-scale=1">. Он почти у всех есть. Потому что emmet его вставляет, всякие бутстрап-шаблоны тоже.Так вот, initial-scale можно удалить. Он был нужен давно, чтобы на iPhone при повороте экрана работало так же, как на всех остальных смартфонах. Но Apple это несоответствие уже давно пофиксили. Экономим байтики.https://quirksmode.org/quirksblog/2026/0902-initial.htmlquirksmode.orginitial-scale no longer neededFifteen years ago I helped popularise the meta viewport width=device-width,initial-scale=1. Today I found out the second bit is no longer necessary. A retrospective.mefody.dev
4 сент., 09:26
deep tech nightЧуть не забыл. Завтра же deep tech night будет. Там про ИИ и LLM, причём я некоторые слова в программе даже не понимаю, но ровно поэтому и хочу послушать — когда-то я так на Web Standards Days сходил в первый раз, не понял половину слов, а теперь сам их в подкасте говорю. Для работы полезно, мы тут Контестом всё-таки инфру делаем для топовых ML-соревнований.От наших деврелов знаю, что специально собирали программу под хардовую аудиторию, с уже уверенными знаниями.Для онлайна тоже нужна рега.https://deeptechnight.ru/deep tech nightКонференция Яндекса о вызовах, с которыми IT-индустрия сталкивается в эпоху AImefody.dev
2 сент., 09:29
Ambient CSSОсвещение в интерфейсах на CSS! Ладно, звучит громко, но если вам нравится делать интерфейсы, где элементы отбрасывают правильные тени, то вам понравится и эта библиотека.Работает в несколько слоёв: отбрасывание тени, подсветка скруглений, затенение противоположных скруглений, наложение материала. В итоге это всё выглядит симпатично.Есть сайт с демками, открывается через VPN.https://github.com/kikkupico/ambientcssGitHubGitHub - kikkupico/ambientcss: A physics-based lighting system for CSS. Define a light source, and every shadow, highlight and…A physics-based lighting system for CSS. Define a light source, and every shadow, highlight and surface gradient follows from it — calibrated against Blender raytraces. - kikkupico/ambientcssmefody.dev
28 авг., 13:41
Ctrl или ⌘ — выводим правильноеМеня, как давнего пользователя macOS, периодически подбешивает, когда на сайте в инструкции написано «Ctrl+G — нужная вам комбинация». А потом оказывается, что всё-таки Cmd+G. Уверен, что пользователей Windows тоже не очень устраивает, когда их просят нажать ⌘⌥L.Абхишек Джакар делится примером компонента, который выводит в интерфейсе инструкцию, подходящую под ОС. В статье прям совсем базовый пример, его можно сильно улучшить и расширить, но как точка старта — почему бы и не да.https://blog.master.dev/keyboard-shortcuts-that-display-the-correct-modifier-key-per-os/blog.master.devKeyboard Shortcuts That Display The Correct Modifier Key per OSWebsites often hardcode keyboard shortcuts for Mac (⌘) while neglecting Windows users, leading to confusion.mefody.dev
25 авг., 14:52
Анимация для border-imageКрасивое и несложное.Прити показывает, как при помощи градиентов, свойства border-image и анимаций по ховеру сделать классный эффект привлечения внимания к картинке.https://css-tricks.com/animating-css-border-image/CSS-TricksAnimating CSS border-image | CSS-TricksBorder images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an element, and animating it creates beautiful effects.mefody.dev
23 авг., 19:56
Spec-Driven Development на практикеВидео выходного дня.Попалось на неделе видео от Кирилла Мокевнина, где они с Иваном Поддубным обсуждают применение OpenSpec как важной части общего процесса разработки в компании. Как внедряли, как тюнили под себя, где он не подходит и так далее.Я с OpenSpec играюсь уже несколько месяцев — и мне нравится. Хотя есть и свои сложности полностью на него перейти.Плюсы для меня: • Перед тем, как начать писать код, нужно проработать спеку на человеческом языке. Словами объяснить, что должно получиться. И уже на этом этапе приходится хорошенько так разобраться в фиче, но с помощью LLM. • Рядом с кодом лежит инструкция, как этот код должен работать. • Тесты генерировать одно удовольствие. • С хорошей спекой код пишется тоже сходу хороший. • Очень круто подходит для новых проектов, где всё с нуля. Пет-проекты за вечер с OpenSpec поднимать ну оченьYouTubeSpec-Driven Development на практике: опыт компании из 100 человек / Иван Поддубный #90🔹 Присоединяйся к курсу «ИИ для разработчиков» https://ru.hexlet.io/programs/ai-for-developers?utm_source=youtube SDD (Spec Driven Development) постепенно превратился из эксперимента с AI-агентами в полноценный подход к организации разработки. Но что произошло…mefody.dev
20 авг., 11:56
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. Способы оптимизацииИ на блог Насти подпишитесь, если любите качественные материалы про фронтенд-технологии.Если не открывается — скажите спасибо одним трём буквам и включите другие три буквы.TelegraphNext.js изнутри. Часть 1. Архитектура Next.js.Введение Next.js — один из самых популярных фреймворков в экосистеме React, которому в этом году исполняется 10 лет. Начавшись как простое решение для серверного рендеринга, он превратился в полноценную платформу со своим компилятором, бандлером, двумя серверными…mefody.dev
19 авг., 18:03
Как читать вкладку PerformanceОдна из самых мощных, и при этом самых непонятных вкладок в Chrome DevTools — это вкладка Performance. Какие-то полосочки, разноцветные линии, стрелочки, подписи, скрывашки... Ну явно не для развлечения вкладка создавалась.У меня был доклад про эту вкладку, можете посмотреть его. А ещё можете изучить классный интерактивный гайд по вкладке от компании PerfReviews. Кликабельное, переключаемое, анимируемое. Видно, что навайбкоженое, но как раз в таких случаях я безумно рад, что LLM помогают собирать такой шик в образовательных целях.https://perf.reviews/profile-guideperf.reviewsReading a Performance Profile: Field GuideAn interactive field guide to the Chrome DevTools Performance panel: waterfall, flame chart, LCP, CLS, INP, and the Insights panel.mefody.dev
14 авг., 13:32
UI-анимацииЯкуб Анталик делится коллекцией готовых к применению анимаций. Для популярных частей интерфейса.Там даже есть скиллы для ваших LLM. И Pro-анимации за денежку, хотя я не до конца понимаю, как можно спрятать за пэйвол CSS-анимацию.https://transitions.dev/Transitions.devTransitions.dev: UI transitions for AI agentsCollection of the most essential UI transitions for web apps. Copy and paste them, or use them with your coding agent via the skill.mefody.dev
10 авг., 18:17
Тестируем скилл modern-web-guidanceGoogle на Google I/O презентовали скилл, который должен помогать вашим LLM использовать при разработке актуальные возможности веба. С учётом Baseline и различных нюансов с поддержкой.Ахмад Альфи решил попробовать скилл modern-web-guidance в деле. Применил на реальном проекте и посмотрел, как тот справляется с тем, чтобы вёрстка была действительно качественной, современной и доступной.Какие конкретно делает выводы Ахмад, читайте в статье. Но для себя я выделил следующее: • В статье подтвеждается, что токенов скилл кушает много. Я ставил себе скилл сразу после анонса, тоже тогда заметил эту прожорливость. Но при этом качество результата растёт. • Чего я не знал, так это того, что скиллу можно задавать вопросы. Буквально через npx можно сформулировать запрос, а он выдаст список материалов, где лежат нужные знания. В JSON и не для человека, но подходAhmad Alfy's BlogTesting Google'sA test of the `modern-web-guidance` skill against a real React app, to see whether it actually catches stale frontend patterns and surfaces current best practices.mefody.dev
6 авг., 15:55
Дефолтные стили браузеровМожно подсматривать, что по умолчанию браузер применяет к тому или иному элементу, через DevTools. А можно взять и посмотреть все-все стили в репозиториях самих браузеров.Будет полезно, когда столкнётесь со странным багом, где стили ломаются не на элементе, а на псевдоэлементе внутри его shadow dom.Спасибо Лёше за полезный материал.https://t.me/alexnozer_dev/392Telegram<divelopers>Browser Default Styles Как известно, во всех браузерах есть стили по умолчанию. Они подключаются к любой странице автоматически и стилизуют все HTML-элементы, переопределяя значения CSS-свойств по умолчанию. Поэтому <div> — display: block, а не inline. Благодаря…mefody.dev
4 авг., 13:11
200 миллисекунд«Что происходит, когда пользователь переходит по ссылке в браузере?»Такие вопросы любят задавать на собеседованиях. Я и сам такой задавал не раз, он и правда хорош на поговорить.Так вот. Тут визуальное великолепие подъехало. Пока что это самый подробный ответ на вопрос выше, который я видел. При этом я видел потрясающую по контенту коллективную репку в гитхабе, где коммунити за годы постаралось знатно. Но тут это ещё и красиво, визуально, пошагово.https://200ms.thenodebook.com/The Nodebook200 Milliseconds — the complete life of one HTTP request, visualizedA single HTTP request, traced in real time through DNS, TCP, TLS, the kernel, Node's event loop, and Postgres — then back to the pixel. Scroll distance equals time.mefody.dev
31 июл., 08:47
Безопасный релиз npm-пакетов в 2026Андрей Ситник периодически выдаёт статьи, которые прям бери и в инструкции превращай. Это одна из них.Думаю, про всякое неприятное, что творится в npm с безопасностью в последнее время, вы слышали. Причём способы защититься от угона пакетов есть относительно давно, но их же откуда-то знать надо. В статье есть подробное руководство по защите со всех сторон от человека, который релизит в npm довольно часто.Кстати, у Злых Марсиан появилась прикольная особенность в статьях. Если статья — гайд, то прям в ней есть скилл для LLM, который реализует принципы из статьи.https://t.me/webstandards_ru/7812TelegramВеб-стандартыБезопасный способ выпустить npm-пакет в 2026 году. Андрей Ситник разбирает, как атаки на цепочку поставок идут полуавтоматически и компрометируют сотни пакетов в день и предлагает строить защиту как повышение стоимости атаки. Быстрые меры, большинство из…mefody.dev
29 июл., 18:35
Чиним доступность тултипаДжейк Арчибальд делится историей, как он пытался сделать доступное решение, но в итоге получилось не очень.Итак, задача. Нужно сделать кнопку-иконку, по наведению на которую показывается короткая подсказка, что это за кнопка. Как во всяких 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/JakearchibaldFixing my tooltip accessibility mistakearia-describedby isn't always enough.mefody.dev
28 июл., 15:20
Бесконечность не пределАдам Аргайл делится 9 практическими примерами, где calc(infinity) или calc(infinity 1<something>) в CSS помогают решить задачу проще и почти без костылей. Бесконечное время, бесконечное скругление, полубесконечность и другие.https://nerdy.dev/css-infinity-use-casesnerdy.devCSS Infinity Use CasesSome practical, some wildmefody.dev
22 июл., 13:29
VITE: The DocumentaryДокументалки от CultRepo — это особый вид удовольствия. Во-первых, давайте признаем, что документалку про React вряд ли будет интересно смотреть людям не из IT, это всё-таки нишевая история. Поэтому сценарий опирается на то, что зритель всё же хоть минимально, но погружен в тему. Во-вторых, снимают и монтируют очень качественно, по-нетфликсовски.Посмотрел на днях их документалку про Vite. Очень понравилась. Тут тебе и набросы в сторону Webpack, и конкуренция со Snowpack, и способы продвижения в опенсорсе, и основание компании Void Zero. И рассказывают это всё непосредственные участники. Кайф.Рекомендую.https://www.youtube.com/watch?v=bmWQqAKLgT4YouTubeVITE: The Documentary"If you're using a JavaScript framework, you're probably using Vite." Created by Evan You (the mind behind Vue.js), Vite began as a frustrated response to slow build times with Webpack. What started as a personal side project for Vue users quickly grew into…
