mefody.dev

Подсветка синтаксиса на основе 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:30 по тбилисскому (в 14:30 по минскому) можно будет подключиться к трансляции качественного митапа по фронтенду. Спикеры — огонь, темы — огонь, организаторы — огонь (ручаюсь, имел честь выступать там офлайн).

Забивайте слот в календариках.

https://t.me/tbilisi_js/596

Идеальная высота настраиваемого селекта

Думаю, вы уже слышали, что select в браузере можно кастомизировать. Правда, пока только в Chrome, но Firefox и Safari уже работают над своими реализациями.

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

Очень подробно, шаг за шагом в статье расписывается, как сделать так, чтобы работало везде хорошо. Спойлер: нужно помучить Anchor positioning.

https://jakearchibald.com/2026/goldilocks-select-height/

Веб-браузеры на игровых консолях

Если ещё не слушали 532 выпуск подкаста «Веб-стандарты», где мы активно ностальгируем, то можно почитать статью, а потом послушать подкаст.

Деклан Чидлоу собрал потрясающий список того, как игровые консоли с 1995 года ходили в интернет. CD-Online disc, браузер PlanetWeb, Randnet, NetFront и так далее. Сама по себе тема очень интересная с точки зрения того, какие раньше перед инженерами стояли вызовы на устройствах, в которые можно воткнуть только картридж или у которых два экрана с 8 кнопками.

https://vale.rocks/posts/game-console-browsers

TypeScript 7.0 RC

Новость короткая, но очень важная.

npm install -D typescript@rc — и ваш TypeScript начнёт работать в 10 раз быстрее. Потому что теперь под капотом там Go, watch-режим на основе бандлера Parcel и ещё более мощная совместимость с VS Code.

Ещё теперь можно явно указывать, сколько в параллели запускать чекеров и билдеров (флаги --checkers и --builders), если у вас много оперативки и ядер CPU.

Видел, как коллеги подключали TS 7.0 (tsgo) к довольно крупным проектам — и у них и правда всё начинало крутиться в разы быстрее. Не в 10 раз, но в 3–4 точно. И там даже есть патч специально под некоторые особенности нашей платформы разработки. В общем, пора мигрировать.

https://devblogs.microsoft.com/typescript/announcing-typescript-7-0-rc/

MDN MCP-сервер

Теперь можно писать в вашем LLM-инструменте «А проверь-ка, дружище, на MDN, работает ли этот метод в Safari и как его правильно применять».

Команда MDN зарелизила свой MCP-сервер, который умеет давать подсказки по документации, браузерной поддержке и поиску. Причём очень компактный инструмент, токенов просит мало, а документацию возвращает сразу в Markdown.

Команда открыта к фидбеку, можно приносить ишьи прямо в репозиторий.

https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/

NoLoJS

Рабочие группы по новым фичам CSS не просто так свой хлеб едят — многие вещи, которые раньше без JS нормально было никак не сделать, теперь делаются в 2–3 свойства.

Аарон Ти Грогг собрал коллекцию шаблонов, где JS-код легко заменить на HTML и CSS. Например, в аккордеонах, каруселях, модальных окнах и так далее.

Не забывайте, что подход ‘CSS Only’ имеет и недостатки, поэтому используйте шаблоны вдумчиво. Те же нативные карусели пока что сообществом A11y-экспертов не рекомендуются без доработок.

https://aarontgrogg.github.io/NoLoJS/

PolyCSS

Обожаю такие странные штуки. Клиентская библиотека, которая позволяет OBJ, glTF, GLB и VOX превратить в 3D-блоки на HTML и CSS.

Работает как веб-компонент. Есть «переходники» на React и Vue.

Может возникнуть закономерный вопрос: «Зачем?» Во-первых, это прикольно. Во-вторых, если рисовать такие штуки на Canvas, то придётся помучиться с обработчиками кликов, а тут каждая грань — DOM-элемент, с которым можете делать что угодно. В-третьих, раз это HTML+CSS, то и фильтры, и анимации, и адаптивность, и подстраивание под цветовую гамму сайта — всё это получаете на сдачу. В-четвёртых, это всё ещё прикольно.

https://polycss.com/

Что Apple и Google делают с вашими push-уведомлениями

Статья скорее не для разработчиков, а для маркетологов, но мне всё равно было интересно её прочитать, поэтому делюсь с вами.

Жак Корби-Тюш погружается в историю push-уведомлений, объясняет, почему каждое приложение вынуждено доставлять свои нотификации через сервера Apple и Google, а также почему для пользователей это хорошо.

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

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

https://www.jacquescorbytuech.com/writing/what-apple-and-google-are-doing-your-push-notifications

Спека для сайта

Есть много разных чеклистов, что должно быть сделано на сайте, чтобы пользователю было хорошо. Вот ещё один.

Йост де Валк собрал 128 пунктов, по которым можно проверить, всё ли у вашего сайта предусмотрено для современного веба. В том числе для работы с LLM-агентами.

Интересно, что каждый пункт включает в себя не только объяснение, что за пункт такой и почему он важен, а ещё и конкретные инструкции по реализации пункта и способ проверки, что всё хорошо.

Есть MCP-сервер, есть AGENT-скилл, есть старый советский HTML-вариант.

https://specification.website/

<input>, видео доклада

Обещал поделиться видео доклада про тег input, когда оно появится. Делюсь.

В докладе рассказывал:
• историю тега и его атрибутов;
• как помочь браузеру работать с инпутами удобно для пользователя;
• какая валидация есть в HTML, CSS и JS;
• почему иногда type=text — лучшее решение;
• и ещё про всякое полезное.

https://www.youtube.com/watch?v=s5mjVxk8cYw

HARD SKILLS❗️

Сегодня разбираем: realtime-лидерборд, YTsaurus, PostgreSQL и таймзоны, которые всё сломали👨‍💻

Автор поста: @mefody_dev - Никита Дубко, lead product Яндекс Контеста

#hardskills