Вышел Nuxt 3.17 🧑‍🎓

Что там нового?

Улучшения загрузки данных

— Единое кэширование: все вызовы useAsyncData и useFetch с одним и тем же ключом теперь разделяют общий ref, что исключает рассинхрон между компонентами при обновлении данных

— Реактивные ключи: ключи запросов могут быть computed-рефами или функциями-геттерами. При изменении значения автоматически выполняется новый запрос, а старые данные очищаются, если они больше не используются

— Оптимизированный рефетчинг: при нескольких компонентах, следящих за тем же источником, при изменении зависимостей выполнится лишь один сетевой запрос, и все компоненты обновятся одновременно

Новые встроенные компоненты

— <NuxtTime> — безопасное отображение времени при SSR, предотвращает гидрационные рассинхроны; принимает различные форматы времени и одинаково работает на сервере и клиенте

— Улучшенный <NuxtErrorBoundary> теперь как SFC предоставляет в слоте error объекты error и clearError, что даёт гибкий контроль обработки ошибок в шаблонах

Маршрутизатор

— Проп trailingSlash у <NuxtLink> позволяет явно задавать, будет ли в ссылке заключительный слеш (например, <NuxtLink to="/about" trailing-slash> даст /about/)

Индикатор загрузки

— Новые пропы у <NuxtLoadingIndicator>: hideDelay ( задержка перед скрытием индикатора) и resetDelay (задержка перед сбросом его состояния)

https://nuxt.com/blog/v3-17

#vue #nuxt

Используй строковые шаблоны в TS по максимуму, чтобы провалидировать значение и уменьшить шанс ошибиться в будущем 🧑‍🎓

#typescript

Недавно Google презентовала Gemini-2.5 Preview, которая уже успела обогнать всех на WebDev Arena 🚀

https://web.lmarena.ai/leaderboard

#ai

Представляем Figma Make: новый способ тестирования, редактирования и подсказки дизайна 💎

Появился AI в фигме, который может делать дизайн и оживлять макеты, а в будущем и кодить научится!

Перевёл оф. статью от команды Фигмы 👇
https://habr.com/ru/articles/912880/

#figma

Вышел Angular v20 ⚡️

Хайлайты:
— Стабилизация API, таких как effect, linkedSignal, toSignal, инкрементная гидратация, настройка режима рендеринга на уровне роута и продвижение zoneless в предварительную версию для разработчиков

— Улучшенная отладка с помощью Angular DevTools и партнерство с Chrome для создания пользовательских отчетов по Angular непосредственно в Chrome DevTools

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

— Продвижение в разработке GenAI с помощью руководств и видеороликов llms.txt и angular.dev для создания приложений генеративного ИИ

— Запущен запрос на комментарии по поводу официального талисмана для Angular

https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301

P.S. статья большая, нет времени перевести, к сожалению

#angular

v0 добавили дизайн мод 🔥

— Быстрая настройка генерации - копирование, типография, макет, цвета, стилизация и многое другое.
— Просматривай изменения и сохраняй, когда готов
— Не нужно тратить кредиты или ждать LLM
— Нативно встроенные Tailwind и Shadcn

#v0 #ai

Новый способ стилизации отступов в CSS 🚀

Совсем скоро нам станет чуточку проще 🥺

https://habr.com/ru/articles/918084/

⚡️ NuxtLabs, создатели и разработчики Nitro и Nuxt, присоединяются к Vercel

Цитата CEO NuxtLabs:

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

Подробнее👇
https://vercel.com/blog/nuxtlabs-joins-vercel

Вышел Nuxt 4: что там нового? 🧑‍🎓

Релиз был с фокусом на DX и стабильную работу фреймворка, поэтому фич особо нет

🗂 Новая структура папок

Самое заметное изменение касается организации проектов. Код приложения теперь по умолчанию находится в каталоге app/:

my-nuxt-app/
├─ app/
│ ├─ assets/
│ ├─ components/
│ ├─ composables/
│ ├─ layouts/
│ ├─ middleware/
│ ├─ pages/
│ ├─ plugins/
│ ├─ utils/
│ ├─ app.vue
│ ├─ app.config.ts
│ └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

Это помогает отделить ваш код от node_modules/ и .git/, что ускоряет работу с файлами (особенно в Windows и Linux). Кроме того, это даёт вашей IDE более чёткое представление о том, работаете ли вы с клиентским или серверным кодом.

🎨 Обновленные UI шаблоны

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

🔄 Умное получение данных

Мы улучшили работу useAsyncData и useFetch. Несколько компонентов, использующих один и тот же ключ, теперь автоматически обмениваются данными. Также реализована автоматическая очистка при отмонтировании компонентов, и вы можете использовать реактивные ключи для повторного извлечения данных при необходимости. Кроме того, мы предоставили вам больше контроля над использованием кэшированных данных. Некоторые из этих функций уже доступны в младших версиях Nuxt v3, поскольку мы внедряли их постепенно. В Nuxt v4 появились другие значения по умолчанию, и мы планируем продолжить работу над этим уровнем данных в ближайшие дни.

🦾 Улучшенный опыт работы с TypeScript

Nuxt теперь создаёт отдельные TypeScript проекты для кода приложения, кода сервера, папки shared/ и кода билдера (но как разработчику тебе нужен лишь один tsconfig в корне твоего проекта). Это должно улучшить автокомплит, повысить точность определения типов и уменьшить количество запутывающих ошибок при работе в разных контекстах.

⚡️ Более быстрый CLI и разработка

Параллельно с выпуском версии 4 мы работали над ускорением @nuxt/cli.

Более быстрый холодный запуск — запуск сервера разработки происходит заметно быстрее.

Кэш компиляции Node.js — автоматическое повторное использование кэша компиляции v8.

Нативный мониторинг файлов — использование API fs.watch для экономии системных ресурсов.

Обмен данными через сокеты — CLI и сервер разработки Vite теперь взаимодействуют через внутренние сокеты, а не через сетевые порты, что снижает накладные расходы, особенно в Windows.

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

Извини, что пропал, дорогой мой друг 🙈

Я просто уже как 3 недели исследую Кольский полуостров, лазаю по горам и заповедникам, пытаюсь жить эту жизнь🤪

На фото Хибины — крупнейший горный массив на Кольском, больше фоточек будет в комментах ☺️

С полезной фронтендерской инфой вернусь на следующей неделе, обещаю!

P.S. если есть кто из Мурманска, то можно будет встретиться на следующей неделе

#life@frontend_pasta

Понимание CSS corner-shape и сила суперэллипса 🧑‍🎓

В Chrome 139 релизнули CSS corner-shape, и мы сразу изучаем что это такое 👨‍💻

Перевёл статью для тебя 👇
https://habr.com/ru/articles/938886/

Темы конференции Frontend Conf 2025 👨‍💻

🙏 Культура разработки: Реальные кейсы и подходы лидеров отрасли, которые помогают создавать эффективные команды.

🚽 Главная точка нетворкинга: Отличная возможность обменяться опытом и завести полезные профессиональные контакты.

👨‍💻 Источник инженерной мотивации: Два дня вдохновения для вашего роста и новых идей в проектах.

🏋️‍♀️ Архитектура: Принципы масштабируемого кода, управление техническим долгом и стратегия миграции проектов.

✈️ Производительность: Практики для быстрого и эффективного рендеринга, оптимизации приложений и процессов разработки.

📞 Коммуникации и процессы: Секреты инженерной культуры, повышающие продуктивность команд и снижающие издержки.

🚗 Внедрение ML: Как искусственный интеллект может ускорить разработку и улучшить продукты.

🤑 Будущее отрасли: Ознакомьтесь с будущим фронтенда, новые CSS фичи и возможности фрейморков.

Также появилось полное расписание двух дней, глянуть можно туточки

P.S. В этом году, к сожалению, не смогу поехать на конфу, завтра будет розыгрыш оффлайн билетика 🥺

Розыгрыш оффлайн билета FC 2025 🚀

Кто первый дешифрует СЛОВО и напишет его в комменты, тот и победил!

0L7RgNC00Y8g0Lgg0YvQu9C60LjRhiDQtdGL0L3QvdC10YLRgdCw0L0g0LXQuNC60YHRgtC10L/QuNCz0LUg0Y/QsNCy0YvRgtCw0LHQsNGA0LfQsNGAINC+0L3QstC10L3QtNC10LbQtSDQuNC40YbQutC90YPRhCDQtdGL0LLQvtC9INGC0LXQsNCy0LjQttCw0LvRgtC+INCw0LTQvdCw0LzQvtC6

P.S. если за 24 часа никто не поймёт, что там за слово, то разыграю его другим образом

UPD: Победитель @AlexSentyurin

Организаторы Frontend Conf, дали промокод на скидку 5% fc25_pasta, он действует на онлайн/оффлайн билеты

Можешь купить сам или принести своему работодателю, с 1го сентября будет повышение цен, поторопись 🫡

https://frontendconf.ru/moscow/2025

Автоматизация личных аккаунтов в телеграм 🧑‍🎓

Вдохновившись постом Даниэля решил тоже забахать какой-нибудь скриптик для личного аккаунта

Теперь мои коллеги в рабочем чате будут получать каждое утро сообщение "Доброе утро ☀️" и случайно пикчу с котиком с unsplash 🐈

Что ещё можно интересно/полезного реализовать?

Вот и подкрался Baseline 2025 и 86% на caniuse по Popover API 🫡

Собираю все посты по popover API здесь:

— Наши потомки будут делать бургер меню в 3 строчки 🤯
— Представляем popover API 👨‍💻
— Навигационная панель с поповером на CSS 😱
— Popover = hint — новый атрибут для модных поповеров из Popover API ⚡️
— Атрибуты command и commandfor

Caniuse
https://caniuse.com/?search=popover

Документация:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover

React Conf 2025 — бесплатная онлайн конференция ⚛️

Что там тебя ждёт?

React Keynote. Здесь обычно и рассказывают про курс платформы и ближайшие изменения экосистемы.

React Compiler. в 2025 он в RC, и команда продолжает путь к стабильному релизу. Если вы всё ещё вручную обклеиваете код useMemo/useCallback, самое время посмотреть, как автоматическая мемоизация меняет подход к оптимизациям.

Производительность. отдельные доклады по профилированию и performance-трекам

Async React. обновлённые паттерны работы с асинхронщиной и контроль пользовательского опыта в реальных приложениях.

React и AI. как интегрировать LLM-сценарии в обычные фронтенд-флоу без превращения кода в свалку.

Трансляция будет 7-8 октября

Регистрация 👇
https://conf.react.dev/

CSS sibling-index() — позиция элемента среди соседей без JS 🧑‍🎓

Функция sibling-index() возвращает позицию элемента среди его соседей по одному родителю, счёт начинается с 1, работает прямо в значениях свойств, особенно полезно в calc()

Идея: стилизуем по порядковому номеру без классов и скриптов

Базовый синтексис

/* вернёт 1, 2, 3... для каждого ребёнка */
width: calc(8px * sibling-index());

4 быстрых приёмчика
1. Ступенчатая анимация — естественный «каскад» появления без JS

.item {
  animation: fade .6s both;
  animation-delay: calc(80ms * sibling-index());
}
@keyframes fade { from {opacity:0} to {opacity:1} }

2. Градиент по карточкам — комбо с sibling-count() даёт предсказуемые палитры для N элементов

.card {
  /* равномерно раскидываем оттенки по ряду */
  background: hsl(
    calc(360deg / sibling-count() * sibling-index()) 60% 55%
  );
}

3. Нумерация без <ol> — удобно, когда HTML менять нельзя

.row { --i: sibling-index(); display: grid; grid-auto-flow: column; gap: .5rem; }
.row::before { content: var(--i); opacity: .6; }

4. Обратный порядок — подходит для flex/grid, когда DOM трогать нельзя

.item { order: calc(sibling-count() - sibling-index()); }

На данный момент эта фича работает только в Chrome 138+, 65% на caniuse

Почитать подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-count

#css@frontend_pasta