Скриншотное тестирование во фронтенде: современный подход к поиску визуальных багов 🧑‍🎓

Команда Яндекса выпустила статью про скриншотное тестирование: для чего оно, какие проблемы решает и как его готовить на примере своего фреймворка Testplane

https://habr.com/ru/companies/yandex/articles/890548/

#tests

Библиотека для анимации Motion теперь поддерживает VueJS 🫰

Сделали всё довольно сексуально, я их фанат

<motion.button
  :initial="{ opacity: 0 }"
  :whileHover="{ backgroundColor: 'rgba(220, 220, 220, 1)' }"
  :whilePress="{ backgroundColor: 'rgba(255, 255, 255, 1)' }"
  :whileInView="{ opacity: 1 }"
/>

Подробнее 👇
https://motion.dev/blog/introducing-motion-for-vue

Офф. дока 👇
https://motion.dev/docs/vue-animation

#vue

Помоги выяснить, какие технологии перспективны 👨‍💻

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

❓Зачем это тебе

Результаты исследования позволят:
• Скорректировать индивидуальный карьерный трек — поймешь, какой инструмент важно изучить, а где ты и так обгоняешь рынок.
• Найти для себя новые инструменты — узнаешь, не прошла ли мимо тебя перспективная технология.
• Первым внедрить актуальные инструменты в работу — сможешь помочь своей компании укрепить лидерские позиции на рынке.

✍️Как поучаствовать

Расскажи о своём стеке технологий в опросе.

Заполнение опроса займет не более 30 минут. Летом организаторы опубликуют результаты в открытом доступе.

Apple официально подтвердила, что Safari переходит на движок Chromium 🤯

Мне не верится, что пишу это, но в своём интервью Jen Simmons подтвердила, что они переводят WebKit в режим поддержки и занимаются разработкой нового функционала уже на базе нового для них движка

Выпустить новый браузер планируют уже в начале 2026 года 🚀

Подробнее 👇
Перевод интервью

Gemini Code — бесплатный копайлот от гугла 🧑‍🎓

Плагин доступен в VS Code, Jestbrains IDE и в Github

Супер нового ничего не умеет, по ощущениям что-то среднее на рынке

https://codeassist.google/products/individual/

Zod 4 в бете: что там нового? 🚀

1. Производительность и размер
— Ускорение парсинга: строки — ×2.6, массивы — ×3, объекты — ×7.
— Сокращение инстанцирований TypeScript с 25 тыс. до 1.1 тыс. (в 20 раз), что ускоряет компиляцию.
— Уменьшение размера ядра: с 12.47 КБ (Zod 3) до 5.36 КБ (Zod 4), а с @zod/mini — до 1.88 КБ (в 6.6 раз меньше).

2. Новые API
— z.interface(): точное управление опциональными свойствами и поддержка рекурсивных типов без кастов
— z.templateLiteral(): валидация строк на основе шаблонных литералов TypeScript.
— z.stringbool(): преобразование строковых "логических" значений (например, "true"/"false") в boolean.

3. Улучшения для TypeScript
— Упрощённые дженерики, что предотвращает "взрывы инстанцирования" при цепочках .extend() и .omit().
— Поддержка циклических типов через геттеры в z.interface() (например, для деревьев или ORM-схем).

4. Метаданные и JSON Schema
— Система метаданных через z.registry() для связи схем с дополнительной информацией.
— Нативная конвертация в JSON Schema через z.toJSONSchema(), включая поддержку глобального реестра z.globalRegistry.
— Обработка ошибок и локализация
— Новая функция z.prettifyError() для форматирования ошибок в читаемый вид.
—Удалены устаревшие методы (.format(), .flatten()), заменены на z.treeifyError().
— Поддержка интернационализации через API locales (пока доступен только английский).

4. Обратная совместимость
— Устарели: z.promise(), z.nativeEnum(), z.string().email() (рекомендуется z.email()).
— Удалены errorMap, invalid_type_error, required_error — заменены на унифицированный параметр error.

Для миграции стоит обратить внимание на изменения в API (например, различия z.object() и z.interface()) и обновить обработку ошибок. Полный список изменений — в миграционном гайде.

Что нового в Chrome 135? 🧑‍🎓

— ::scroll-button() и ::scroll-marker()

Большой шаг к возможностям каруселек на чистом CSS

https://developer.chrome.com/blog/carousels-with-css?hl=ru

— Атрибуты command и commandfor

Замена popovertarget и popoveraction с большими возможностями не привязанных к popover'ам

https://developer.chrome.com/blog/command-and-commandfor

— Новая функция shape() в CSS

shape() используется для определения формы для свойств clip-path и offset-path

https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape

Подробнее 👇
https://developer.chrome.com/blog/new-in-chrome-135

Вышел 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