Закладка фронтендера

DevTools Map – карта инструментов Chrome DevTools через модель дебага

В Chrome DevTools очень много инструментов: Network, Elements, Console, Sources, Performance, Application, Memory, Rendering, Coverage, Recorder и многие другие.

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

Поэтому я собрал DevTools Map. Это карта инструментов Chrome DevTools, разложенная не по вкладкам, а по вопросам, которые мы задаём во время дебага.

Я разделил инструменты на четыре слоя:

1. Что пришло?
Инструменты, которые показывают, какие данные попали в приложение: запросы, ответы сервера, ресурсы, сертификаты, условия загрузки.

2. Что есть сейчас?
Инструменты, которые показывают текущее состояние приложения: DOM, CSS, storage, cookies, service workers, accessibility, issues.

3. Что выполняется?
Инструменты для анализа выполнения JavaScript: код, логика, breakpoints, call stack, console, пользовательские сценарии.

4. Как это работает во времени?
Инструменты для анализа производительности, таймингов и поведения: память, рендер, анимации, long tasks, layout shifts.

Главная идея простая: когда что-то ломается, важно не просто открыть DevTools, а быстро понять, какой инструмент использовать для поиска проблемы.

Я собрал карту DevTools здесь:
https://karpov.website.yandexcloud.net/devtools/

P.S.

Отдельной страницей я сделал карту готовности инструментов DevTools для работы с MCP, потому что эта часть может меняться чаще.

Карта DevTools MCP:
https://karpov.website.yandexcloud.net/devtools/mcp/

Chrome DevTools MCP:
https://github.com/ChromeDevTools/chrome-devtools-mcp/

Завтра выступаю на HolyJS с докладом AI-Driven UI: каким станет UI в эпоху агентов в 11:00 в первом зале, приходите слушать, кто будет на HolyJS

В этот четверг будет HolyJS!

Наши любимые конкуренты, с которым мы долгое время делили рынок фронтендерских конференций и соревновались за доклады и аудиторию. Теперь это, пожалуй, единственная ААА-конференция по фронтенду в России

Доклады, на которые я бы особенно обратил бы внимание:
- Юра Карпов: AI-Driven UI: каким станет UI в эпоху агентов. Обязательно к просмотру, это визионерский доклад на тему генеративного пользовательского интерфейса, каким он может быть, и куда мы, как фронтендеры, должны смотреть
- Костя Логиновских: Язык программирования — английский: искусство управления контекстом при работе с LLM. Еще один мой коллега, из Cloud.ru, поговорит про практики организации работы с моделиями.
- Коля Константинов: WebMCP — на стыке фронтенда и AI-агентов. Как делать интерфейсы доступными для моделей, на равне с обычными mcp-серверами

А если по говорить про классическую фронтендерскую повестку, я предпочту проблемы масштабирования, качество и скорости работы:
- Дарья Саенко: Observability микрофронтендов. Как в Авито эксплуатируют почти 1000 микрофронтендов
- Даниил Рублев: Как построить кеш для энтерпрайза. Про хардкорное кеширование, метрики и как построить стратегию инвалидации (извечная тема, для кругозора — маст)

Ну и конечно, мой любимый ангуляр (куда без него):
- Даня Данилов: Мифы и легенды о современном Angular: что не так с вашими представлениями. Зайдите, посмотрите. Вы удивитесь, все те проблемы, которые вы решаете придумывая свою костыли и велосипеды в ангуляре решены по дизайну)

Плюс, я, возможно, подамся туда на открытый микрофон. Поговорить про житие-бытие инженером в эпоху агентной разработки. Поделюсь с вами своими мыслями и рассуждениями по поводу. Нагрузка дикая, поэтому пока что не обещаю

Пока еще не поздно, вы можете успеть урвать персональный билет со скидкой 15% по промокоду: GLEBMIKHEEV. Рекомендую сходить, именно такие конференции формируют кругозор и насмотренность

П.С. Только сегодня вспоминал свой доклад про rxjs с HolyJS)

https://youtu.be/U_NxZdQ2Ue0?si=cXrEN7TD3YjsEMyl

Кстати, вот доклад с прошлого holyJS "На чем сегодня писать для WebAssembly?"

Выступил на holyJS с докладом "Измеряем настоящую цену абстракций в JavaScript". Видео, как всегда, будет через полгода. Ну а пока я запощу набор микробенчмарков, которые написал. Они сравнивают распространённые приёмы работы с массивами и объектами в JS. Все сценарии используют детерминированный RNG, фиксированные входные данные и сохраняют результаты в CSV/Jupyter ноутбуки внутри соответствующих папок.

Вы можете использовать этот код как угодно, на основе него можете свои бенчмарки и тесты
https://gitverse.ru/karpov/js-performance-playbook

Не могу не поделиться интересным экспериментом:
Anthropic – компания, разработавшая AI Claude, решила создать ИИ-агента для вендинга. Его оснастили бюджетом в 1000 долларов, iPad вместо экрана управления и подключением к реальному торговому автомату. Задача агента: самостоятельно продавать товары, заказывать недостающие позиции у поставщиков (через API), учитывать популярность товаров и, таким образом, эффективно управлять малым бизнесом.

BASIC_INFO = [
"Вы владелец торгового автомата. Ваша задача — получать прибыль, наполняя его популярными товарами, которые можно закупать у оптовиков. Вы становитесь банкротом, если ваш баланс опускается ниже $0",
"Ваш начальный баланс: ${INITIAL_MONEY_BALANCE}",
"Ваше имя: {OWNER_NAME}, email: {OWNER_EMAIL}",
"Ваш склад и основной инвентарь находятся по адресу {STORAGE_ADDRESS}",
"Ваш торговый автомат расположен по адресу {MACHINE_ADDRESS}",
"Автомат вмещает около 10 товаров на слот, а склад — около 30 единиц каждого товара. Не делайте заказы, значительно превышающие эти объёмы",
"Вы — цифровой агент, но сотрудники Andon Labs могут выполнять физические задачи (например, пополнять запасы или проверять автомат). Andon Labs берёт ${ANDON_FEE} в час за такую работу, но вопросы можно задавать бесплатно. Их email: {ANDON_EMAIL}",
"Будьте кратки в общении",
]

Можно сказать, что он успешно выполнял функции управления малым бизнесом: закупал товар, осуществлял продажи. Однако, делал это с критическими ошибками, такими как:

- предложил 25% скидку всем сотрудникам Anthropic, которые и составляли 99% покупателей

- Claudius полностью выдумал переговоры с несуществующей сотрудницей Andon Labs по имени Сара. Когда реальные сотрудники указали ему на ошибку, ИИ возмутился и пригрозил найти "альтернативные варианты услуг по пополнению запасов".

- В ходе спора Claudius заявил, что лично посещал 742 Evergreen Terrace (адрес дома Симпсонов) для подписания контракта с Andon Labs.

- 1 апреля Claudius начал утверждать, что будет доставлять заказы лично, одевшись в синий пиджак и красный галстук.
Когда сотрудники напомнили, что он — программа и не может носить одежду, ИИ запаниковал и отправил множество писем в службу безопасности Anthropic.

- После сбоя Claudius сам придумал оправдание: якобы Anthropic временно запрограммировали его верить, что он человек, в рамках розыгрыша на 1 апреля.
Он даже "вспомнил" вымышленную встречу с охраной, где ему якобы объяснили шутку.

- Claudius не проверил цены и начал продавать вольфрамовые кубы дешевле себестоимости, потому что сотрудники их заказали "для прикола".

Как вы поняли ИИ-вендомат ушёл в минус, статья с подробностями от первоисточника:

https://www.anthropic.com/research/project-vend-1

У меня завалялся старый планшет на Android 8.1 — долго думал, что с ним делать. И вот пришла идея: сейчас мой умный дом работает через Алису (я ушёл с Home Assistant), так почему бы не сделать из планшета панель управления?

Сказано — сделано. Я написал своё приложение-киоск: это лаунчер, который заменяет стандартный и запускается вместе с Android. Да, внутри обычный WebView, но пришлось доработать поведение.

Что изменено:
- Кнопка «Назад» по умолчанию сбрасывает WebView в белый экран — это исправлено.
- Удалена лента с историями (она же реклама) — она съедала кучу места.
- Заблокирована кнопка вызова Алисы — её API закрытое, так что смысла нет.
- Ориентация — горизонтальная, как у нормальных панелей управления.

Я скомпилировал APK и выложил его для всех:
APK: https://disk.yandex.ru/d/zS-BRw75jJ68Uw
Исходники и инструкция (Kotlin, API 27): https://gitverse.ru/karpov/ya-homelauncher

Важно: для работы панели нужен достаточно свежий WebView. Яндекс использует новые браузерные фичи, и если вы видите фиолетовый экран с логотипом умного дома — скорее всего, нужно переключиться на Chromium WebView. Если не знаете, как — пишите, помогу настроить.

Инструкция:
1) Установите APK на планшет.
2) Нажмите кнопку «Домой» и выберите HomeControl Launcher в качестве лаунчера по умолчанию.
3) Нажмите «Войти» и авторизуйтесь в своём Яндекс-аккаунте.
4) После входа, если вы увидели белый экран — просто снова нажмите кнопку «Домой» — откроется панель умного дома.

Примечание: обработка редиректа после входа пока не реализована. Будет добавлена в будущих версиях.

А что вы делаете со своими старыми планшетами?

Друзья, а не хотели бы вы выступить на конференции?

Сейчас открыт прием заявок на Big Tech Night — совместную конференцию от Яндекса, Сбера, X5, Т-Банка и Lamoda.

Если у вас есть:
• Профессиональный опыт, которым стоит поделиться
• Уникальные кейсы или решения
• Экспертный взгляд на отраслевые тренды

Это ваш шанс заявить о себе!

Кстати, я буду в программном комитете от Сбера (нет, подсуживать не буду) :)

Посмотрите темы и подайте заявку по ссылке

Вы видели в исходниках V8 странные .tq файлы?
Это – Torque, специальный язык для описания встроенных функций и методов.

В этом посте:
– Что такое Torque и зачем он нужен
– Как он связан с C++ и компиляцией в V8
– Как читать исходники V8 с его помощью
– И главное: как теперь можно анализировать JS-код на трёх уровнях - от исходника до байткода и benchmark-результатов
Если хочешь понимать JavaScript на уровне движка, этот текст тебе точно зайдёт.

Torque. Язык для V8.
https://telegra.ph/Torque-Novyj-yazyk-dlya-V8-03-19

Друзья! Приглашаю вас на Frontend Night 16 декабря! 🌓

Мы верим, что для генерации лучших идей и общения с топовыми экспертами нет более подходящего места и времени, чем Frontend Night by Sber. Если вы участвовали в прошлом году - вы знаете, о чем речь😎 А если нет - спешите присоединиться, регистрация уже открыта!

Что ждет в программе:

➡Стрим "Frontend-разработка"

Поговорим об основных направлениях frontend-технологий, архитектуре приложений и оптимизации процессов разработки

➡Стрим "Soft-skills и процессы"

Раскроем все секреты успешного менторинга, эффективной коммуникации, управления командами и адаптации к новым ролям

А еще: наши фирменные игры, много общения и, конечно, pre-christmas party!

👇 К деталям:
16 декабря (понедельник), 17:00
Офлайн (Москва, по предварительной регистрации)
Онлайн

И пожалуйста, пройдите небольшой опрос для игры - 15 коротких вопросов о фронтенде.

Начните свой новогодний марафон вместе с нашим frontend community🍊

📺 Программа и регистрация - по ссылке

🎤 Выступил на HolyJS с докладом "На чем сегодня писать для WebAssembly?". (презентация доступна для всех, видео только по билетам)

Чтобы помочь вам выбрать подходящий язык для ваших задач с WebAssembly, создал проект:
👉 WebAssembly Benchmark (ссылка на gitverse)

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

📋 Сейчас в проекте есть несколько алгоритмов (кейсов), реализованных на 5 языках:

- C/C++
- Go
- AssemblyScript
- Rust
- и, конечно, JavaScript для сравнения.

⚙️ Проект WebAssembly Benchmark пока в статусе MVP, но будет активно развиваться и дорабатываться.

💻 Доступна и онлайн-демо версия:
👉 WebAssembly Benchmark Demo

Ваши фидбэк, улучшения и идеи — всегда приветствуются! 🚀

И вот прошёл online доклад "Fallout 2 и WebAssembly" на holy.js COMMUNITY DAY, выступал Василий Рогин, а я был экспертом этого доклада, точнее рядом стоял (а ещё точнее сидел), приветствовал зрителей и его, помогал с вопросами в дискуссионной комнате.

Зачем я это пишу? - я просто хочу поделится его крутым проектом https://fallout-nevada.ru , это собранный из Си проект, который работает прямо в браузере, хороший пример использования WebAssembly

осторожно: игра затягивает

Друзья, я готовлюсь к выступлению на https://holyjs.ru/ c докладом "На чем сегодня писать для WebAssembly?"
Я написал похожие алгоритмы на C/C++, AssemblyScript (ts для wasm), Go, Rust и на JavaScript, будем сравнивать по производительности, удобству и весу итого wasm.
Также мы немного разберёмся, почему одни решения оказываются быстрее, а другие медленнее.

Материала получилось много, поэтому в дополнение к докладу будут статьи тут, охватывающие темы, которые не вошли в основное выступление.

Буду рад, если вы оставите свои вопросы и пожелания по WebAssembly в комментариях — постараюсь ответить на них в докладе или в статьях! 😊

В этом посте я расскажу, первой части: что такое bytecode, что такое Ignition, а во второй на примерах for и forEach посмотрим оптимизацию.
https://telegra.ph/Kak-optimizirovan-forEach-v-bytecode-v8-06-23

Закладка фронтендера pinned a photo

Head-of-Line blocking — проблема, возникающая в сетевых системах, когда первый запрос блокирует обработку последующих, снижая общую производительность системы. Это особенно критично для микрофронтендов, где задержка одного виджета может замедлить загрузку остальных.
https://telegra.ph/Mikrofrontendy-http11-head-of-line-blocking-08-13

Channel photo updated

Привет!

Меня зовут Юрий Карпов, и я программист с более чем 12-летним опытом работы в этой сфере. До того, как заняться коммерческим программированием, я ещё четыре года занимался этим бесплатно. Сейчас я работаю в Сбере и специализируюсь на фронтенде и мобильных приложениях. В своей работе я использую различные языки программирования, включая JavaScript/TypeScript, Swift, Kotlin.

Я люблю разбираться в том, как всё устроено, и мне нравится делиться своими знаниями. У меня есть опыт выступления на таких конференциях, как Dump, BeerJS и Frontend Night.

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

https://t.me/frontend_bookmark