#инструмент дня

Разработчики Google Chrome вот буквально вчера представили MCP для Chrome DevTools! Вот тут: https://developer.chrome.com/blog/chrome-devtools-mcp

MCP расшифровывается как Model Context Protocol — это протокол, который задаёт единый способ подключения внешних инструментов и источников данных к ИИ-моделям.

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

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

Берёшь такой и спрашиваешь: «У меня там валидация не срабатывает когда я ввожу неверный емейл, разберись». И ведь разберётся!

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

Не, кроме шуток, это очень круто. Теперь можно подсоединиться к Jira, Figma, натравить это всё на браузер и отдохнуть наблюдать :)

#chrome #mcp

#статья дня

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

Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://t.iss.one/htmlshit/806), только теперь в анимации.

Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!

Есть два способа это обойти:

1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.
2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.

В итоге получается ровная и предсказуемая смена цвета без серых провалов.

Статья: https://www.joshwcomeau.com/animation/color-shifting/

#css #color #animation

🚀 Стажировка для начинающих аналитиков в Яндексе

Яндекс открыл новый набор стажёров-аналитиков в Москву и Санкт-Петербург. Компания обновила тестовые задания: если вы уже пробовали свои силы раньше, можно пройти ещё раз.

Стажировка — это возможность работать над реальными продуктами с миллионной аудиторией: запускать A/B-тесты, анализировать поведение пользователей, строить дашборды и предлагать решения, которые напрямую влияют на развитие сервисов. Для стажёров предусмотрены гибкий график, зарплата, поддержка наставника, Айтиобщага для участников из других городов.
И даже отложенный оффер — если вы ещё учитесь и хотите вернуться в Яндекс позже.

📍 Что важно знать про отбор

Первый шаг — тестовое задание. Оно включает задачи по алгоритмам, SQL и математике. Важно уметь писать эффективные запросы (в том числе с оконными функциями), уверенно работать с числами и логикой, применять статистические методы. После теста участников ждут технические секции и знакомство с командами.

👉 Подать заявку можно на сайте. Там же есть полезные материалы, которые помогут подготовиться к отбору.

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.iss.one/htmlshit/2639

Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween #бородач

#ии дня

Когда тебе говорят «ИИ встроен во весь цикл разработки», обычно хочется дважды переспросить. Но тут реально интересно.

В SourceCraft Code Assistant появился ИИ-агент — его фишка в том, что он работает с полным контекстом твоего проекта прямо в веб-интерфейсе. Теперь агент может:
— поднять репозиторий,
— сгенерить автотесты,
— проверить, не оставил ли ты ключ API в коде (а ты оставил),
— и даже запустить деплой в Yandex Cloud, потому что платформа с ним теперь намертво интегрирована.

Причём всё это — по одному запросу. Пишешь: «хочу сервис для заметок» — и агент протаскивает идею от кода до выката.

У SourceCraft Code Assistant есть и базовый режим: теперь он умеет не только подсказывать, что писать, но и отслеживает связи в коде. Поменял функцию в одном месте — он автоматически покажет повторяющиеся места и предложит правки.

Плюс, появился крутой паблик API для автоматизации задач и CI/CD.

В общем, достойно.

#sourcecraft #ai #devtools

#фишка дня

Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?

А вот можно! Как в этом примере от Мэтта Покока.

И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.

#js #event #abortsignal #бородач

#инструмент дня

Писать тесты утомительно. Писать тесты компонентов — утомительно вдвойне. Писать тесты по доступности — втройне.

А проверять тесты и дописывать их — вчетверо.

Почему не вчетверне, кто знает?

На самом деле я, конечно, утрирую. Писать тесты, основываясь на доступных ролях элементов и их значениях — это весьма полезная практика для всех. Вот, обсуждали: https://t.iss.one/htmlshit/3717

Но что делать, если надо посмотреть, а что происходит-то? Иногда изолированно запустить компонент довольно сложно, добираться до компонента внутри приложения — тоже.

Один из правильных ответов на самом деле — использовать Storybook, но об этом я в следующий раз. И одно другого всё равно не отменяет.

А сегодня у нас прекрасная тулза: Jest Preview.

Нетрудно догадаться, что она делает: визуализирует ваши тесты! Смотрим видео на иллюстрации.

Теперь не нужно постоянно сверяться с кодом и прокручивать дерево DOM в голове. Пара строчек — и вот вы уже в браузере наблюдаете, что происходит на самом деле.

Прекрасно? Не то слово!

#test #jest #preview #storybook

Ошибка доступа: необходимо обновить знания по базам данных 👁️‍🗨️

Академия Selectel выпустила квиз по базам данных. Проверьте свои навыки работы с СУБД и повторите основные термины — а после теста получите промокод на 1000 бонусов в панели управления Selectel.

Жмите на ссылку, чтобы начать квиз 👉

#статья дня

Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.

i18n, если ещё короче.

Если говорить строго, правильная локализация — это жопа.

1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.

Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/

TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.

#slack #i18n #бородач

#инструмент дня

Модульные шрифты всегда строились на простой идее: буква рождается из сетки. Ещё в 1920-е годы баухаузовцы экспериментировали с кругами, квадратами и треугольниками, чтобы создать универсальный алфавит, который можно воспроизвести где угодно — от печатного станка до архитектуры. Позднее Вим Кроуэл и другие дизайнеры показали, что строгая сетка может быть источником бесконечного разнообразия форм.

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

Получившийся результат легко превратить в шрифтовой файл и использовать в реальных проектах.

Советую заглянуть в примеры — шрифтами дело не ограничивается! Орнаменты тоже тут. Можно использовать как часть CTF-игры…

Для тех, кто работает с кириллицей, доступна отдельная бета-версия: beta.grid-type.com А основной сервис здесь: grid-type.com

#fonts #tool

Must-watch с недавней big tech night: доклад Дмитрия Иванова (руководитель SourceCraft в Yandex B2B Tech) о трансформации профессии разработчика под влиянием ИИ. Посмотреть доклад можно здесь.

Эти изменения хорошо прослеживаются во времени. Сначала AI появился в виде чат-ботов, которые помогали писать код и находить ошибки. Затем — встраивание ассистентов прямо в IDE, что уже стало стандартом. Следующий шаг — агенты, способные самостоятельно кодировать, запускать тесты и автоматизировать часть рабочих процессов. А дальше речь идёт о мультиагентных системах и «бесшовном AI», который будет встроен во все стадии цикла разработки и станет незаметным, но постоянным участником процесса.

Отдельный акцент был сделан на том, куда уходит время разработчиков. По данным исследования, почти половина рабочего дня уходит на работу с кодом. Около 20% занимают встречи и рутинные процессы, ещё столько же — поиск информации. Ревью кода и поддержка распределяются между остальным временем. Эта картина показывает, что прирост продуктивности возможен не за счёт абстрактных «ускорений», а через конкретные улучшения: ускорить работу с кодом хотя бы на треть и сократить время на поиск информации минимум вдвое — и эффект будет ощутим. Именно эти направления в Яндексе сейчас называют приоритетными.

Часть решений уже работает. Около трети разработчиков внутри компании пользуются генерацией кода, примерно четверть ревью проводится при поддержке моделей. В тестировании применяются генераторы чеклистов и автотестов, а в области поддержки и эксплуатации AI помогает анализировать логи, инциденты и даже core dump’ы.

Ключевая мысль доклада прозвучала так: искусственный интеллект в разработке стоит рассматривать не как замену специалиста, а как напарника. Важнее не сопоставление «человек против машины», а результат связки «человек плюс AI».

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

#ссылка дня

Вы ждали этого. Вы хотели этого. Вы жаждали этого!

Вы рисовали мемы, вы унижали бакендеров, вы унижались сами. Но теперь все проблемы решены!

Итак, 100 способов отцентировать div: https://css-generators.com/center/

Красненькое не надо использовать.

#css #div #center

#фишка дня от Jhey

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

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

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

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

#статья дня

Я уже откровенно боюсь иной раз выкладывать статьи с какой-то теорией или генераторами, потому что обязательно в комментариях будет «есть же ИИ». Таким темпом проще рассказывать о продакт-инициативах (я вот про Story Map недавно узнал, надо?). Но вдруг продактов тоже заменит ИИ? Я бы с удовольствием.

Ладно, к чему это я. Конечно же к очередной статье про Big O aka сложность алгоритмов!

Да, сеньоров вряд ли спросят, разве что бровью поведут, а вот собесы на джунов и мидлов всё ещё очень часто в себе содержат требования или оценить сложность алгоритма, или написать «без квадратов».

Итак, что же тут у нас? А тут у нас и сама статья:
https://samwho.dev/big-o/

И её перевод: https://habr.com/ru/companies/timeweb/articles/942956/

Но честное слово, лучше идите смотреть статью. Там наш с вами любимый интерактив!

#bigo #algorithm #cs

FrontendConf 2025 - крупнейшая в России профессиональная конференция фронтенд‑разработчиков пройдет 20–21 октября 2025, Москва, Кластер «Ломоносов».

Что будет на конференции:
• 1000+ представителей российского фронтенд‑сообщества;
• 2 дня насыщенной программы: 55 докладов в 8 ключевых секциях (AI во фронтенде, Архитектура, Производительность, Инженерный UX, Культура команд, FrontOps и др.);
• Практические форматы: 2 воркшопа, 4 круглых стола, 6 кейсов‑факапов;
• Ламповые дискуссии и дебаты - живой обмен мнениями;
• After‑party для неформального нетворкинга и обмена опытом.

Почему это выгодно вашей компании:
• Конкретные решения, которые можно внедрить за недели, а не месяцы;
• Меньше проблем в продакшне и быстрее релизы - экономия времени и денег;
• Приоритетные предложения, план внедрения и оценка эффекта;
• Повышение экспертизы команды и удержание ключевых специалистов.

Присоединяйтесь 20–21 октября - два дня концентрированного опыта, полезных контактов и конкретных инструментов для развития фронтенд‑команд.
Подготовьте короткую просьбу руководителю и Забронируйте билет - сайт конференции.

#реклама
О рекламодателе

#статья дня

Motion почти 5 лет держали монорепозиторий на TypeScript (~2.5 млн строк). Но со временем разработка стала всё медленнее.
CI прогонял проверки больше 20 минут. Компилятор часто падал.

Это все решилось бы ts-go, но они устали ждать.

Приходилось поддерживать Zod, иначе проверка данных разваливалась. Prisma и Drizzle создавали трудности при рефакторинге. Совместный код между вебом и мобилой ломался при малейших изменениях.
В итоге команда решила перейти на .NET и C#.

Ссылка на статью: https://engineering.usemotion.com/moving-off-of-typescript-e7bb1f3ad091?gi=1f6548fc7f1a

Аргументы:
— Entity Framework упрощает работу с данными.
— Синтаксис и структура знакомы после TypeScript.
— Экосистема стабильная, инструменты зрелые.

Теперь их бэкенд пишется на C#, фронт остался на React. По их словам, так быстрее и предсказуемее, чем поддерживать TypeScript на большом масштабе.

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

Мнения, котаны?

#typescript #zod #dotnet