Frontend по-флотски 👨‍💻

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🤩 🔔 28 мая, четверг, 19:00 (мск) — приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney поделятся, как работают над задачами и улучшают процессы в команде. Вот о чём будут рассказывать: 🟣 Как спят вкладки в браузере. На живом примере разберём, как браузер усыпляет вкладки, почему из-за этого ломается real-time и какие приёмы дебага и resync помогают находить и чинить их в продакшене. 🟣 Как построить Spec-Driven платформу для генерации писем. Используя OpenAPI как единый источник правды, покажем, как описывать контракты электронных писем через спецификацию и автоматически генерировать консистентный HTML. 🟣 Подключение модуля шумоподавления в рабочее место оператора. Рассмотрим инструменты React, WebSockets, WebRTC, а также архитектуру и логику работы модуля шумоподавления. 🟣 Круглый стол — AI во фронтенде: вызовы и реальность. Обсудим влияние нейросетей на фронтенд с трёх позиций: рынка, разработки и образования. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix 👈

CSS shape-outside — плавучий текст 🏖️ Если тебе надо, чтобы текст обтекал по какой-то странной форме, которую задумал дизайнер, то сразу вспоминай про shape-outside. Он может так:

    
        shape-outside: circle(50%);
shape-outside: ellipse(130px 140px at 20% 20%);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: linear-gradient(45deg, white 150px, red 150px);{}
    

И даже так:

    
        shape-outside: url("image.png");{}
    

А в Chrome 149+ (пока в бете) вообще вот так (пример из видоса):

    
        shape-outside: shape(from 0px 0px, line to 100px 0px, curve to 150px 100px with 100px 40px / 150px 60px, curve to 100px 200px with 150px 140px / 100px 160px, curve to 50px 300px with 100px 240px / 50px 260px, curve to 100px 400px with 50px 340px / 100px 360px, line to 0px 400px, close);{}
    

CodePen поигарться (Chrome 149+) MDN документация

TanStack попал под атаку 😬 Команда Socket нашла компрометацию 84 npm-пакетов в @tanstack. Внутрь залетел вредонос Mini Shai-Hulud, который пытался вытаскивать секреты из CI/CD, особенно из GitHub Actions Самое неприятное — запускался он автоматически через npm lifecycle hooks. То есть ты просто ставишь зависимость, а где-то в фоне уже начинается весёлый квест по поиску GITHUB_*, AWS, Vault и Kubernetes токенов 💩 Среди затронутых пакетов был даже @tanstack/react-router, у которого больше 12 млн загрузок в неделю. Так что это не «ну кто-то там поставил левый пакет», а прям нормальный удар по supply chain. Как пролезли: — через GitHub Actions — pull_request_target — отравление кеша между fork и base — вытаскивание OIDC-токена из runner’а — публикация пакетов в npm через доверенную OIDC-связку TanStack говорит, что npm-токены не украли, а сам workflow публикации не был скомпрометирован. Но звучит всё равно так, будто CI опять оказался дырой в борту корабля 🫠 Что делать, если юзал @tanstack/*: — проверить lock-файлы и версии пакетов — поискать подозрительный router_init.js — ротировать секреты, если ставил заражённые версии — пройтись по GitHub Actions, OIDC, npm publish workflow — не тащить pull_request_target, если не до конца понимаешь, зачем он тебе нужен Supply chain атаки становятся всё жирнее. Уже мало просто смотреть на код в своём репозитории — теперь надо ещё понимать, что происходит в CI, npm hooks и правах публикации пакетов 🫡

Адатив `<img>` стал чуточку проще 👀 Если ты когда-нибудь писал sizes для картинок, то знаешь эту боль: CSS живёт отдельно, srcset отдельно, брейкпоинты отдельно, а потом браузер такой: «держи 1600px картинку в карточку на 320px» 💩 Теперь для lazy-loaded картинок можно использовать sizes="auto":

    
        <img
  loading="lazy"
  width="1600"
  height="900"
  sizes="auto, 100vw"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1600.jpg 1600w
  "
  src="image-800.jpg"
  alt="..."
/>{}
    

Браузер сам смотрит на реальный layout-размер картинки и выбирает подходящий файл из srcset, без ручного дублирования брейкпоинтов в HTML 🤤 Что важно: — работает только вместе с loading="lazy" — srcset должен быть с w-дескрипторами — width и height всё ещё лучше оставлять, чтобы не ловить сдвиги соседних элементов — 100vw после auto — это fallback для браузеров без поддержки Небольшой облом: Chrome / Edge / Firefox уже умеют, а Safari пока в пролёте, так что это именно прогрессивное улучшение, а не призыв к рефакторингу всех sizes Но направление кайфовое: меньше ручных брейкпоинтов, меньше копипасты CSS-логики в HTML, больше работы на стороне браузера 🏖️

Как устроены агенты и RAG под капотом Большинство разработчиков собирают RAG и агентов по туториалам или вместе с агентом, не понимая, как всё работает внутри. Из-за этого сложно дебажить проект, масштабировать его или чинить, когда система начинает вести себя не так, как ожидаешь. Чтобы разобраться в устройстве, а не просто копировать чужой пайплайн, приходите на онлайн-лекцию от Тимура Фатыхова — инженера, который руководил DL-командой в KoronaPay. Он разберёт агентов и RAG изнутри и покажет, как собрать первые рабочие версии в n8n. На лекции вы узнаете: — как агенты принимают решения: инструменты, MCP, память — из каких частей состоит RAG и как улучшить его работу — как собрать агента и RAG в n8n — как настроить личного агента на базе Claude Code 🔔 Лекция бесплатная и пройдёт онлайн в четверг, 7 мая, в 18:00 МСК Регистрируйтесь по ссылке и приходите! Реклама. ИП Фатыхов Тимур Маратович, ИНН 540132430312, Erid 2Vtzqxgqxyd

Программа JavaScript-конференции HolyJS собрана на 100% — показываем то, что лучше не пропускать 📍 14–15 мая, Москва Узнайте, как AI автоматизирует рабочие процессы (вместе с багами 😈), меняет UI и заставляет перерабатывать фронтенд для агентов. Может, и главным языком программирования становится… английский? Агенты делают разработку проще, но остаются задачи, которые инженер может решить только сам. Поговорим про ускорение без JS, поиск утечек памяти в Chrome, искусство Vue-компонентов, DDoS-атаки на Node.js, модульный Backend-for-Frontend и даже способы сэкономить на оперативной памяти. На воркшопах будем писать полезные модульные тесты веб-интерфейса, сделаем «расклад на качество» и предскажем появление багов, порисуем в 4D. А еще задебажим резюме, чтобы работа находилась быстрее. Полное расписание и подробности докладов — на сайте HolyJS. Купить персональный билет со скидкой 15% можно по промокоду FRONTENDPASTA Реклама. ООО «Джуг Ру Груп». ИНН 7801341446

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFHgJjqb ИП Галактионов Тихон Витальевич, ИНН 771618975809

🔧 Делаю iOS-приложение за 30 дней — в одного, без команды 5+ лет опыта на Backend blockchain с NestJS. Решил выйти за пределы своего стека и сделать нативное iOS приложение с нуля. Swift, SwiftUI, CoreLocation, MapKit. Без бэкенда — всё локально на устройстве. Строю TripTrack — автодневник поездок на машине. Ниша пустая: Google Timeline сломал данные миллионам людей в марте 2025, прямой конкурент с 1 звездой в App Store. 🎩 Показываю весь путь: архитектурные решения, работа с геолокацией в фоне, проблема батареи, TestFlight, App Store review. День за днём — без купюр. Если пишете своё или интересно как выглядит смена стека изнутри — заходите. — @onezee_co

Мой хороший друг @sergeyfrey сейчас в поиске нового места работы, один из лучших frontend разработчиков с которым когда либо работал Вот его актуальное резюме 👇 https://sergey-frey.github.io/cv/

OpenAI выкатили GPT‑5.5 🤯 OpenAI представили новую модель GPT‑5.5, и это всё больше и больше похоже на старый добрый кодинг в паре 🫠 Основной упор сделали на агентную работу: модель лучше держит контекст, сама планирует шаги, юзает тулзы, проверяет результат и не отваливается после первой же ошибки. Для фронтенда самое интересное: Кодинг стал жирнее GPT‑5.5 лучше справляется с реальными задачами в кодовой базе: имплементация, рефакторинг, дебаг, тесты, проверка гипотез и вот это всё, что обычно превращает «маленькую правочку» в 12 диффов 😄 Codex стал полезнее В Codex модель может работать с большими проектами, понимать, где именно что сломалось, и тащить задачу через несколько файлов, а не просто генерить красивый кусок кода в вакууме. Контекст до 400K в Codex То есть можно скормить приличный кусок проекта и не объяснять каждый раз, что Button — это не просто кнопка, а священный компонент дизайн-системы 🙃 API тоже завезли gpt-5.5 и gpt-5.5-pro уже доступны в API. У обычной версии контекст до 1M токенов, но прайс, конечно, не для «потыкать ради интереса»: $5 за 1M input и $30 за 1M output токенов. По бенчам тоже выглядит хорошо, что бы они не значили: Terminal-Bench 2.0 — 82.7%, SWE-Bench Pro — 58.6%, OSWorld-Verified — 78.7%. Заменит фронтендеров? Нет, но тех, кто не умеет им пользоваться, может подвинуть 😈 Почитать подробнее 👇 https://openai.com/index/introducing-gpt-5-5/