Что нового в Chrome 132? 🚀

— У элемента <dialog> теперь можно слушать 2 новых события: beforetoggle и toggle
— Захват и стримминг конкретного элмента
— API для доступа к файловой системе на Android и WebView
— Поддержка ключевых слов: sideways-rl и sideways-lr для свойства CSS writing-mode

Подробнее 👇
https://developer.chrome.com/blog/new-in-chrome-132?hl=ru

В TypeScript 5.8 появился новый флаг erasableSyntaxOnly 🙈

Он отключает кучу функций, такие как enums, namespaces и class parameter properties

Нафига он это делает, и что такое "erasable syntax"?
"erasable" переводится как "стираемый", то есть от кода при компиляции не останется ни следа

А такой функционал как enums и namespaces компилируется в грязноватый JS, поэтому он не попадает по определение "стираемый"

Не знаю, переживать или радоваться, но кажется, что команда TypeScript смотрит в будущее, где этот синтаксис больше не будет использоваться 🙈

🔥 Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

🔭OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📆 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрация тут:
podlodka.io/reactcrew

CSS hyphens — влезет всё 🍔

Бывает такое, что из-за длинных слов текст вылезает за контейнер или же просто плохо выглядит из-за гэпов от них

Тебе может помочь hyphens: auto, таким свойством ты позволишь браузеру делать перенос слов через дефис, прям как в тетрадочке в школе 🤓

Потестил русский и английский языки, всё работает на высшем уровне, однозначно найду этому применение на практике 🚀

https://developer.mozilla.org/ru/docs/Web/CSS/hyphens

Что нового в Chrome 133? 👨‍💻

— Расширенные возможно атрибута attr() согласно CSS level 5

// пример
div { 
   color: attr(data-foo type(<color>), red);
}

— CSS scroll state container queries (состояния stuck, snapped, scrollable при container-type: scroll-state)

// пример
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

— CSS text-box, text-box-trim и text-box-edge (Свойство text-box-trim указывает, какие стороны обрезать, сверху или снизу, а свойство text-box-edge - как обрезать край)

Подробнее 👇
https://developer.chrome.com/blog/new-in-chrome-133?hl=ru

CSS Custom Functions уже на подходе 🚀

Думаю с выходом этой фичи препроцессоры уже будут не нужны 🥹

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

Мок собеседование гугла 🧑‍🎓

Задачка:

A farmer wants to farm their land with the maximum area where good land is present.
The "land" is represented as a matrix with 1s and 0s, where 1s mean good land and 0s mean bad land. The farmer only wants to farm in a square of good land with the maximum area. Please help the farmer to find the maximum area of the land they can farm in good land.

(Фермер хочет обрабатывать свою землю с максимальной площадью, на которой есть хорошая земля.
Земля" представлена в виде матрицы с 1 и 0, где 1 означает хорошую землю, а 0 - плохую. Фермер хочет заниматься сельским хозяйством только в квадрате хорошей земли с максимальной площадью. Пожалуйста, помогите фермеру найти максимальную площадь участка, на котором он может вести хозяйство.)

Example:
0 1 1 0 1
1 0 1 1 0
0 1 1 1 0
1 1 1 1 1
1 1 1 1 1
0 0 0 0 0

https://www.youtube.com/watch?v=Ti5vfu9arXQ

Идеальное центрирование текста в верхнем регистре 🥹

Тебе надоели ненужные пробелы над и под текстом? Всего одна строчка кода может исправить это, и ты сможешь идеально выровнять текст верхнего регистра по центру

.text {
  text-box: cap alphabetic;
}

P.S. пока только Safari и Chrome поддерживают это свойство, но остальные движки уже работают над реализацией этой фичи

Подробнее про text-box 👇
https://developer.chrome.com/blog/new-in-chrome-133?hl=ru#text-box

Popover = hint — новый атрибут для модных поповеров из Popover API ⚡️

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

Подробная инфа для гиков 👇
https://open-ui.org/components/popover-hint.research.explainer/
https://html.spec.whatwg.org/#attr-popover-hint

Приём докладов на FrontendConf 2025 👨‍💻

Если хочешь стать спикером, но сомневаешься в актуальности темы своего доклада и хочешь задать вопросы Программному комитету конференции, то эта онлайн встреча для тебя, там ты узнаешь подробнее о подготовке программы, темах и сможешь получить ответы на свои вопросы 🧑‍🎓

Время: 13 марта, 19:00 (GMT+3)

Участие во встрече свободное, только нужно обязательно зарегистрироваться здесь 👈

Prioritized Task Scheduling API: Оптимизируй выполнение задач в браузере 🚀

Если твой сайтик тормозит из-за тяжелых вычислений, этот API может стать спасением.

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

Как работает?

Есть приоритеты задач:
— user-blocking (максимальный — например, обработчик клика).
— user-visible (средний — анимации, подсказки).
— background (низкий — аналитика, логирование).

    scheduler.postTask(
        () => { /* Тяжелая задача */ }, 
        { priority: 'user-blocking' }
    );

Плюсы:
— Больше контроля над производительностью.
— Автоматическая оптимизация без велосипедов.
— Есть встроенная возможность прерывать и откладывать задачи
— API доступен, как в window, так и в WebWorker'е

Также есть scheduler.yield(), который позволяет делить выполнение одной задачи на несколько подходов (у него приоритет user-visible)

button.addEventListener("click", async () => {
  // делаем мгновенную обратную связь, чтобы пользователь знал, что его клик был принят.
  showSpinner();
  await scheduler.yield();
  // делаем более длительную обработку
  doSlowContentSwap();
});

P.S. пока полная поддержка только в Chrome подобных браузерах, но для остальных есть полифилл

Дополнительные ресуры для гиков:
https://developer.mozilla.org/en-US/docs/Web/API/Prioritized_Task_Scheduling_API

https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield

https://developer.chrome.com/blog/use-scheduler-yield?hl=en

#js

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

Хайлайты:
— Лёгкое закрытие для <dialog>

Теперь благодаря новому атрибуту closedby можно управлять лёгким закрытием <dialog>

— <dialog closedby="none">: Полное отсутствие закрытия диалогов по требованию пользователя.

— <dialog closedby="closerequest">: Нажатие ESC (или другой кнопки закрытия) закрывает диалог

— <dialog closedby="any">: Если щелкнуть за пределами диалога или нажать ESC, диалог будет закрыт

— Атрибут imageSmoothingQuality теперь поддерживается в canvas

— Теперь можно кастомизировать меню <select> с помощью изображений и многого другого.

https://developer.chrome.com/blog/new-in-chrome-134?hl=ru

#chrome

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

Команда Яндекса выпустила статью про скриншотное тестирование: для чего оно, какие проблемы решает и как его готовить на примере своего фреймворка 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()) и обновить обработку ошибок. Полный список изменений — в миграционном гайде.