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

Задачка:

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

Что нового в 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