Будни разработчика

Вышел anime.js 4.5.0. Anime.js — это JavaScript-библиотека для анимаций. Её часто используют для DOM, CSS-свойств, SVG, таймлайнов и обычных JS-объектов: когда нужна не одна transition, а нормальное управление движением, задержками, easing’ами и последовательностями. В 4.5.0 появился API адаптеров. Если коротко, теперь anime.js можно научить работать с объектами, которые устроены не как DOM-элементы. Главный пример в этом релизе — встроенный адаптер для Three.js. В Three.js анимация часто требует писать во вложенные свойства объекта:

mesh.position.x = 100
mesh.rotation.y = Math.PI / 4
mesh.material.opacity = 0.5
mesh.material.color.set('#ff8844')

С адаптером это можно описывать прямо в animate():

animate(mesh, {
  x: 100,
  rotateY: 45,
  opacity: 0.5,
  color: '#ff8844',
})

Адаптер сам сопоставляет параметры с position, rotation, material, цветом и другими свойствами Three.js. Появился и более привычный для фронтендера синтаксис 3D-трансформаций: rotateX, rotateY, rotateZ, scale, transformOrigin, плюс skewX, skewY, skewZ. Материалы тоже стало анимировать проще. Цвет можно передавать строкой — hex, rgb, hsl или CSS-переменной — без ручного перекладывания в THREE.Color. Ещё одна хорошая часть — instanced mesh. Объекты, которые в Three.js обычно используются для большого количества одинаковой геометрии, теперь можно анимировать почти как обычные меши. Для сцен с сетками, частицами, волнами и кучей повторяющихся элементов это сильно сокращает ручной код. В stagger() добавили поддержку 3D: теперь задержки можно раскладывать не только по x и y, но и по z. Плюс появились jitter и seed, чтобы делать разброс в движении, но при этом получать повторяемый результат. Остальные изменения — в changelog: фиксы timeline, keyframes, seek, reversed loops, render engine, работа с цветами и разные мелкие правки. Важная деталь: сайт anime.js теперь тоже портирован на новый API с Three.js-адаптером. То есть это не просто пример в документации, а уже основа для собственного сайта проекта. Получился релиз, после которого anime.js заметно лучше ложится на 3D-сцены. Да здравствуют описания анимаций без постоянного ручного прохода по position, rotation, material и прочим внутренним полям. #animejs #animation #threejs

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

#ссылка дня Когда-то давным давно поддержки кастомных шрифтов в браузерах толком не было, а желание сделать красиво — было. Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick. К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: https://www.drupal.org/project/textimage Просто зачастую нет никакого смысла тащить целый шрифт на фронт ради пары заголовков. Да и даже его часть — тоже. Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде https://opentype.js.org/ или FontForge в командном режиме, но каждый ли проект в этом нуждается? А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок. Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE). Забавное было время, конечно, но иногда лучше и правда сгенерировать картинку, чем тащить весь шрифт целиком. #font #old

RYBE — одежда с твоим языком программирования Мы захотели объединить людей, у которых одни интересы. В метро, на прогулке, в офисе, на конференции, в походе, в баре, в самолёте. В каком-то смысле это мерч для твоего языка программирования А еще мы добавили функциональность: люверсы для крепления пропуска, карман для наушников, салфетка для очков внутри кармана, карман для телефона. Отшиваемся в Москве, используем супер плотный, премиальный хлопок и качественную фурнитуру. Выбирай свой язык, заказывай, дари, носи сам: https://tglink.io/8040b286843e7a?erid=2W5zFGDdQTb Наш tg: @rybe_store

#такое дня Как выбесить коллег одной строкой? А сейчас я покажу вам... Автор

#новость дня В HTTP появился (точнее, вот-вот появится, только RFC приняли) новый метод QUERY. Примерно такой:

QUERY /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

И самое интересное тут даже не то, что теперь можно отправлять сложный поисковый запрос в теле HTTP-запроса. Самый интересный вопрос: а разве мы не могли делать это через GET? Могли. Иногда даже делали.

GET /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

На уровне HTTP-сообщения тело у GET возможно. Протокол не развалится только потому, что после заголовков пришёл body. Проблема в другом: у тела GET нет нормальной общей семантики. Стандарт не говорит: «тело GET — это параметры запроса». Сервер и клиент могут между собой так договориться, но для остальной инфраструктуры это будет частная магия. Прокси, CDN, кэши, балансировщики, библиотеки и браузерные API не обязаны понимать такой договор. Поэтому GET с body — это поведение из серии “может работать в нашей связке”. Где-то пройдёт, где-то тело проигнорируют, где-то запрос завернут, а где-то его вообще нельзя будет отправить. Например, браузерный fetch не разрешает body у GET и HEAD. QUERY как раз стандартизирует этот сценарий.

QUERY /search
Content-Type: application/json

{
  "q": "foo",
  "limit": 10,
  "sort": "-published"
}

Смысл метода: это запрос на чтение, но параметры запроса лежат в теле. То есть больше не нужно притворяться, что сложный фильтр — это короткая строка query-параметров, и не нужно использовать POST там, где состояние на сервере не меняется. От POST отличие тоже важное. POST для HTTP-инфраструктуры выглядит как метод с возможными побочными эффектами. QUERY, наоборот, описан как safe и idempotent: его можно повторить, не ожидая, что повтор сам по себе что-то создаст или изменит. Получается, QUERY — это не «GET с body», а нормальный стандартный способ сказать: тело запроса важно, оно описывает выборку, и сам запрос при этом остаётся запросом на чтение. #http

Как правильно работать с резервным копированием в облаке? 25 июня приглашаем на бесплатный вебинар от MWS Cloud Platform всех, кто работает с облаками. Развеем мифы, разберём лучшие современные подходы и инструменты. Обсудим интеграцию в процессы, консистентность, точечное восстановление и безопасность. Поговорим о плюсах нативных облачных инструментов. Проведём демо в MWS Cloud Platform и ответим на ваши вопросы. Зарегистрируйтесь, чтобы не пропустить! ⏰ 25 июня в 14:00 (мск) Зарегистрироваться

#статья дня Команда Chrome предложила довольно необычное API для частичного обновления HTML. В разметке можно оставить специальный маркер:

<div>
  <?marker name="placeholder">
</div>

Браузер игнорирует <?marker>, поэтому такой код уже сейчас работает как обычный HTML. Позже, когда данные будут готовы, достаточно добавить:

<template for="placeholder">
  Here is some <em>HTML content</em>!
</template>

После этого содержимое шаблона автоматически займёт место маркера. На практике это означает, что сервер может начать отдавать страницу ещё до того, как готовы все данные. Не нужно искать элементы по id, не нужно писать код для замены заглушек, не нужно придумывать собственный протокол поверх HTML. Несколько лет назад стриминг HTML ассоциировался почти только с React. Штош. Самое приятное, что <?marker> — не какой-то новый синтаксис. Processing instructions существуют ещё со времён XML, а браузеры уже умеют спокойно пропускать их в HTML. Поэтому использовать такую разметку можно хоть сегодня. Для старых браузеров есть полифилл от Google Chrome Labs. Статья: https://developer.chrome.com/blog/declarative-partial-updates Полифилл: https://github.com/GoogleChromeLabs/template-for-polyfill #html

Проект от подписчика! Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать. Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать! Всем привет! Меня зовут Роман, я фуллстек-разработчик, 5+ лет в вебе — фриланс и работа в команде, в основном фронтенд. Давно читаю «Будни разработчика», так что вдвойне приятно оказаться здесь уже со своим материалом. Хочу рассказать про инструмент, который сделал под собственную боль и которым теперь пользуюсь сам каждый день. Когда верстаешь адаптив, постоянно скачешь между десктопом и мобильной версией: то DevTools в режиме устройства, то ресайз окна, то открыть на телефоне. Десктоп и мобайл при этом никогда не видны вместе — один прячется, когда смотришь на другой. А показывать заказчику «узкое окно браузера» по видеосвязи — так себе демонстрация. Готовые симуляторы есть (Mobile First, U-eyes и другие — со своей задачей справляются). Но почти все открывают превью в отдельном окне или своей области. Мне же нужно было другое: рамка телефона прямо поверх десктопной страницы, на той же вкладке, одновременно с ней. Не нашёл такого — сделал сам. 🟣 Как устроено (коротко по технике) Страница внутри себя. Очевидный путь — iframe с тем же URL, сужённый до ширины телефона. Но большинство сайтов отдают X-Frame-Options и CSP: frame-ancestors, и iframe просто не грузится. Через declarativeNetRequest (MV3) динамически срезаю X-Frame-Options, вырезаю только директиву frame-ancestors из CSP (остальной CSP не трогаю) и подменяю User-Agent на мобильный. Правило живёт только пока открыто превью, привязано к конкретной вкладке, ничего не блокируется и не отправляется — меняются лишь заголовки ответа. Изоляция стилей. Весь UI оверлея (рамка, панель, кнопки) — в Shadow DOM, чтобы CSS сайта и расширения не ломали друг друга. Синхронизация. Скролл, клики и ввод проксируются между десктопом и превью — заполняешь форму на десктопе, видишь, как она заполняется в телефоне. Самое муторное — маппинг элементов и защита от бесконечных циклов событий. 🟣 Скриншоты снимаются и обрезаются локально, сохраняются файлом — ничего никуда не грузится. 🟣 Запись экрана. Честно про текущее состояние: в опубликованной версии работает штатным путём — через диалог захвата экрана браузера, видео кодируется локально (WebM и MP4, MP4 пока тестово). Параллельно допиливаю бесшовный вариант без промпта на расшаривание (chrome.tabCapture + getUserMedia в offscreen, перекодирование через WebCodecs + mp4/webm-muxer) — но это пока в разработке. 🟣 Приватность как ограничение архитектуры. Нет бэкенда, аналитики и удалённого кода. Настройки — в chrome.storage.local, не покидают устройство. Разрешения в манифесте — ровно под задачу. Итог: Mobile View — десктоп и мобайл одновременно на вкладке, синхронизация, скриншоты, запись. Бесплатно, лежит в Chrome Web Store. Буду рад любому фидбэку. И если найдёте баги на своей ОС/версии браузера — напишите подробно, по возможности со скрином или записью: веду проект в одиночку, так баги фиксятся куда быстрее. Chrome Web Store: https://chromewebstore.google.com/detail/mobile-view-%E2%80%94-mobile-simu/hocbjiaeeijekejepphjihbpogikmofh Сайт: https://mobileview.app Статья на Хабре: https://habr.com/ru/articles/1047354/

#фишка дня Таблица до сих пор превосходит все попытки её имитировать по очень простой причине: если скопировать её из браузера, она спокойно вставится в Excel или Google Sheets как нормальный диапазон. Но вот обратное направление не работает. Скопировал диапазон из Sheets — а в браузере всё рассыпалось в текст, будто ничего и не было. Иногда это мешает: есть форма с табличкой на сайте, есть данные в Google Sheets, и единственное желание — просто вставить их туда, не перепечатывая по ячейке. Чтобы привычный Ctrl+V вёл себя так же естественно, как в Excel. Для таких случаев можно сделать маленькую, но удобную вещь — ловить событие вставки и парсить табличные данные из буфера, распределяя их по нужным полям:

document.addEventListener("paste", function (e) {
  const text = e.clipboardData.getData("text");
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  e.preventDefault();
});

Так можно взять диапазон в Google Sheets, нажать Ctrl+V в браузере — и данные разложатся по ячейкам формы, словно это штатная функция. Я пример забыл, а вы и молчите: https://codepen.io/alinaki/pen/KwzvEeX #js #table

Приглашаем на доклад о PT Application Inspector и PT BlackBox на Product Backstage* 17 июня, 16:20 МСК Онлайн Новый AppSec**: улучшенная архитектура PT Application Inspector и динамический краулер в PT BlackBox Спикер: руководитель продуктов Сергей Синяков О каких обновлениях будем рассказывать: PT Application Inspector: - архитектурные изменения платформы; - поиск секретов и подозрительной логики в коде c помощью ML-модели MOLOT; - анализ конфигурационных файлов; - продвинутая защита 1С; - управление очередью сканирований. PT BlackBox: - динамический краулер для современных веб-приложений; - инженерные задачи быстро меняющегося ландшафта угроз. 📝Зарегистрироваться *Продуктовое закулисье **Безопасность приложений

#статья дня Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему. Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://t.me/htmlshit/806), только теперь в анимации. Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация! Есть два способа это обойти: 1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую. 2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом. В итоге получается ровная и предсказуемая смена цвета без серых провалов. Статья: https://www.joshwcomeau.com/animation/color-shifting/ #css #color #animation

#заметка дня Итак, на работе выдали новые ноутбуки тем, чьи машины в лизинге уже три года и более. Вот только есть нюанс. Мой побитый M2 Pro нём на борту 32 Гб оперативной памяти, а новенький M5 Pro — только 24. Как-то нехорошо. У компании, конечно, свои интересы в ограничении максимальной конфигурации, но получили что получили. Людям, работающим с тяжёлыми задачами выдали модели на 48 Гб, то есть, возможность что-то доказать имеется. Но я сюда не ныть пришёл, хотя очень хочется. Любые ограничения это повод пересмотреть работу. И одним из таких пересмотров, конечно же, стала сборка Webpack, которая в пике сжирает 11 гигабайт. Планирую заменить на Rspack, хоть там есть и свои нюансы. Самый главный нюанс — продать это стафф-инженеру. Но поговорить я даже не об этом хотел. У коллеги новый такой же ноутбук резко начал выть кулерами, и причина была не очень ясна. Потребление памяти в пике всё ещё не упирается в лимит, свопится не очень сильно. А воет. А воет, потому что процесс rg — знаменитый инструмент поиска ripgrep — забивал 8 ядер процессора под завязку и останавливаться не собирался. Попросил коллегу показать мне её расширения для Cursor (VS Code). И там, конечно, было очень красиво. 34 расширения с её учебных дней, от разных иконок и сниппетов до подсветки классов. Запустили Extensions Bisect — я писал об этой встроенной в VS Code утилите не так давно, она позволяет найти расширение, которое вызывает глюки редактора или прочие странные эффекты — вот вроде пожирания ресурсов ripgrep-ом. И такое расширение нашлось! Им оказалось популярное IntelliSense for CSS class names in HTML. Что заставило его сожрать все ресурсы и почему это не проявлялось на предыдущей машине — вопрос остаётся открытым. Да и не нужно оно в большинстве случаев. В общем, я рад тишине в офисе, наконец. #rg #vscode

«Давай голосом на 5 минут» — и встреча идёт уже час Эту боль давно ощущают продуктовые команды: до 10 часов в неделю уходит на встречи, которых могло бы не быть. Асинхронный формат даёт возможность обсудить задачу, показать фичу, объяснить правки или быстрее изучить документацию. Хотите научиться выстраивать асинхронные коммуникации в команде? Тогда присоединяйтесь к вебинару с Антоном Гуриным, CPO MWS TeamStream. В эфире обсудим: ⚫️Что поможет сократить количество ненужных встреч и избежать хаоса ⚫️Как обсуждать задачи, правки и фичи асинхронно ⚫️Где и как фиксировать все договорённости и решения ⚫️Какие процессы можно уже сегодня перенести в асинхронный формат Кому будет полезно: тимлидам, продакт-менеджерам, системным аналитикам, дизайнерам и архитекторам. 📅 17 июня в 16:00 👉 Регистрируйтесь по ссылке

#такое дня GDPR помните? В РФ его аналог 152-ФЗ, правда, реализация чуть другая. Ну, короче, это та штука, которая заставляет бедных-несчастных бизнесменов просить у вас разрешение на сбор ваших данных путём демонстрации убогих куки-банеров. Мы сейчас опустим тот факт, что это даже не всегда нужно, что простые куки авторизации и даже анонимной аналитики и мониторинга не всегда означают слежение и, стало быть, баннеры не нужны. Но мало кто хочет разбираться в нюансах, а штрафы большие. А вот следить за вами — хотят. Вот такой вот метод (на иллюстрации) отложенного принятия решения по сбору преддложила некая девушка, пост которой попался мне в ленте линкедина. Классический JS-шаблон: указываем тип скрипта как text/template или text/plain и он не выполняется браузером, но текстовое содержимое ноды доступно и легко можно запустить в нужный момент. Красиво? Не то слово, вот только... Вот только Google Tag Manager это буквально оркестратор! С его помощью и можно было бы показать баннер, принять решение по включению аналитики и так далее и тому подобное. И вся эта обвязка вокруг шаблона с кастомным кодом была бы не нужна. Но некоторые люди почему-то не любят искать простые решения. Штош. #gdpr #cookie #gtm

#статья дня Яндекс подвёл итоги грантовой программы Yandex Open Source — и там неожиданно много не просто «полезных тулз», а вполне серьёзной AI- и developer-инфраструктуры. Например, среди победителей есть AI Router — прокси для маршрутизации запросов между OpenAI, Gemini, Anthropic и другими LLM. С балансировкой нагрузки, rate limiting и даже встроенным аналогом Fail2Ban для защиты от подозрительных запросов. По сути, единая точка входа для работы с разными моделями. Ещё из интересного — RAGU. Это GraphRAG-движок, который строит графы знаний по документам: вытаскивает сущности, связи, дедуплицирует узлы и позволяет комбинировать локальный, глобальный и векторный поиск. То есть уже не просто «чатик поверх PDF», а полноценная retrieval-инфраструктура. Ну и отдельно понравился langchain-localai — пакет для тех, кто гоняет LLM локально или в закрытом контуре. Авторы переписали коннекторы на новый OpenAI SDK, добавили нормальную асинхронность и ускорили batch-обработку эмбеддингов. Вообще, по статье хорошо видно, как open source вокруг AI постепенно смещается от «очередной модели» к инфраструктуре: routing, observability, retrieval, orchestration и tooling. Короче, AI-native DevOps уже наступает. #opensource #ai #llm #rag #devtools

#видео дня Наверное, это слишком жёстко для утра, но всё же: вышла документалка про C++! Думаю, C++ в рекламе не нуждается и, скорее, интересно, почему так долго. Ведь про тайпскрипт, питон, да даже кложу мы получили документалки очень давно. Что уж говорить, документалка про реакт вышла аж три года назад! Хотя казалось бы. Интересный у авторов порядок выпуска, не то слово. Я плохо знаю современный C++, мои умения остановились курсе на третьем университета. Но посмотреть историю создания и пути к стандартизации было очень интересно, горячая рекомендация. Ссылка: https://www.youtube.com/watch?v=lI7tMxzSJ7w #cpp #documentary

#заметка дня Когда-то очень давно я сильно упарывался по кастомизации всего и вся. И речь сейчас даже не о WindowBlinds. Да, я настолько старый. Речь о хоткеях, файлах конфигурации, кастомных раскладках клавиатуры, бесконечных утилитах для управления окнами (вплоть до тайловых менеджеров), менюбарных приложениях и прочем. В одном только моём конфиге Vim было несколько тысяч строк. Настраиваешь всё, что настраивается, — и на своей машине ты король. Всё интуитивно, быстро, удобно. Никто, кроме тебя, за неё работать уже не сможет. Вот только и ты не сможешь нормально работать на других. Парное программирование становится менее удобным, развёртывание новой системы — отдельной болью. В какой-то момент я понял, что кастомные конфигурации больше ограничивают меня, чем окрыляют. Я не могу просто сесть за компьютер коллеги или студента и что-то показать. Не могу на воркшопе или презентации комфортно пользоваться предоставленной машиной. Все компьютеры вокруг кажутся медленными, неудобными и какими-то неправильными. Тогда я принял довольно жёсткое решение: отказаться от большинства утилит и кастомных конфигов. Вместо этого — выучить стандартные возможности редакторов, системы и системных утилит. Времени это занимает не больше, чем изучение собственных наворотов. В итоге я приобрёл свободу. Ладно, немного слукавил. На рабочем ноутбуке у меня установлен Swish, который позволяет раскладывать окна свайпами по тачпаду. На личном его нет. Но пальцы всё равно время от времени пытаются отправить окно в сторону привычным жестом. И вот сегодня я получил новый ноутбук. На чистую систему с нуля поставил наши рабочие скрипты — и через пару часов уже работал как обычно. Тем временем коллега весь день пытался восстановить свой бэкап с бесконечными конфигурациями и так и не закончил. А как поступаете вы, котаны? До сих пор настраиваете всё и вся или тоже пришли к минимализму?

The frontend is dead, long live the frontend! Evolve or die. What? Let's figure it out. I've been in this business for a long time: I saw the era of BBS's and the sunset of perl-based sites, I saw the rise of php3 and jQuery, and how React killed everything else. And remember the profession of "HTML/CSS coder" or "Markup developer" (aka "verstalshik")? Well, it looks like classic frontend developers will soon follow them. And it's not just that Claude can finally vertically align an element and you no longer need a senior dev with 15 years of experience for that - it's about the value of frontend as a whole. 🍄 Point 1: damn chats everywhere Frontend is the UI for customers, which gives them the UX they pay for. Frontend devs make the frontend. But what happens if all UIs get replaced by chats with a couple of buttons? - We'll get unification. Literally, right now you can build a fairly complex startup where there's nothing but a landing page and a button to connect an MCP/skill to your Claude Desktop and ChatGPT. Moreover, sometimes a landing page isn't even needed, because everything is already inside agents ecosystems. Somewhat reminds of the Telegram bots story, but at x1000 scale. Why do we need frontend devs if there's no frontend? 🍄 Point 2: disposability For the past week I've been working on a project, running 1-3 hour AI loops in Claude Code and Codex multiple times per day, and of course the resulting code was complete crap. More precisely, overall it was more like the miracle of the creation of the world, but if you zoom it in places it was total garbage. But that doesn't matter, for two reasons: - I could point the agent at any place in the project, show it the browser (mcp devtools is love), write "this s**t doesn't work here, fix it", and it would fix everything - despite extensive ideation, I missed the proper data flow, but even big logical misses were eliminated in half an hour with another loop run So my value as a frontend developer was even lower than my value as a manual tester. And the entire frontend was literally disposable, and whole chunks were redone at my command in literally half an hour per case. Now imagine an agent that watches how user clicks on a site, analyzes it, and then adjusts the UI itself to make the UX better for users. Almost live. Sounds crazy? Let's discuss it in 5 years. 🍄 The survivors Meanwhile, the value of backend and cloud engineers is still much higher, due to questions of security and resources. Although, I saw with my own eyes how Claude Code clicked around in my browser in the Google Cloud Console - it was really scary, though in the end everything went off successfully. So what to do? At least N years from now. - developers - accept fate and develop soft skills, primarily around product management and agent orchestration - companies - look for these soft skills, look deeply into ways of working, not just at whether a person knows something about AI and Claude Code (which will be obsolete again in half a year), plus traditional non-coding skills - another option - go work in chop-shops, where frontend wizards with long beards and 30 years of experience hand-carve Fabergé frontends, while others slather it on with a thick brush of agents, earning millions - there will always be demand for high art and its own clientele Or am I being too gloomy? What do you think about the future of frontend developers as a standalone profession? #Frontend #AI #Coding #SoftwareDevelopment #FrontendDevelopment #WebDevelopment #ClaudeAI #AIAgents #FutureOfWork #DeveloperTools Original post: https://www.linkedin.com/posts/alexander-remi_frontend-ai-coding-activity-7453310522881359872-EHZZ

Собственно, к слову о вчерашнем моём лёгком ранте на тему того, что LLM-ки любят подсовывать древние и неэффективные способы работы. Что, котаны, будем Алекса разносить, или мнение валидно? Мне кажется, тут скорее умирает не фронтенд, а часть рутины, которую мы привыкли называть фронтендом. Да, disposable UI уже реальность, и многие интерфейсы будут генерироваться агентами под задачу. Но от этого требования к UX, доступности, консистентности и дизайн-системам никуда не исчезают. Скорее наоборот. Если интерфейсы начинают собираться на лету, то кто-то должен задавать правила, паттерны и критерии качества для этой генерации. Так что фронтенд не умер — просто теперь наша работа всё меньше про пиксели и всё больше про системы, продукт и пользовательский опыт.