Появился мощный инструмент для прохождения собеседований — Sobes Copilot.

Это нейросеть, которая подсказывает ответы прямо во время интервью, анализируя разговор в реальном времени.

Copilot работает незаметно в Zoom, Google Meet, Teams и других платформах. Поддерживает русский язык, не виден при демонстрации экрана и помогает держать уверенный темп диалога, даже если вопрос сложный или неожиданный.

Дополнительно Sobes Copilot делает пост-анализ собеседования: разбирает диалог после созвона, подсвечивает сильные и слабые моменты, удачные формулировки и зоны роста. Это позволяет понять, что сработало, а что стоит улучшить перед следующим интервью.

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

🎁 Промокод: SOBES26 — даёт 10% скидки на старт.

🧬 Иммутабельность из коробки: toSorted(), toSpliced() и with()

Сколько раз вы ловили трудноуловимые баги в React или Redux из-за того, что методы sort(), reverse() или splice() незаметно мутируют оригинальный массив?

Раньше, чтобы обновить состояние, нам приходилось плодить поверхностные копии через спред-оператор.

// ❌ Старая школа (много шума)
const sortedUsers = [...users].sort((a, b) => a.age - b.age);

// А замена элемента по индексу вообще выглядела как пытка:
const updatedUsers = [...users];
updatedUsers[index] = newUser;

В стандарте ES2023 (Baseline 2023) JavaScript наконец-то получил нативные иммутабельные методы массивов. Они делают то же самое, но возвращают новый массив, оставляя оригинал нетронутым.

🚀 Как пишем теперь:

1. Сортировка и разворот

// ✅ Оригинал цел, получаем новый массив
const sorted = users.toSorted((a, b) => a.age - b.age);
const reversed = users.toReversed();

2. Удаление/вставка (вместо splice)

const months = ["Jan", "Mar", "Apr", "May"];

// Вставляем "Feb" на индекс 1 (ничего не удаляя)
const fixedMonths = months.toSpliced(1, 0, "Feb");
// ["Jan", "Feb", "Mar", "Apr", "May"]

3. 🔥 Метод with() - киллер-фича для React

Заменяет элемент по индексу без мутаций. Идеально для обновления конкретного элемента в массиве состояния.

const state = ['apple', 'banana', 'cherry'];

// Меняем 'banana' на 'mango'
const newState = state.with(1, 'mango');
// ['apple', 'mango', 'cherry']

💡Методы работают не только с массивами, но и с TypedArrays (например, Uint8Array). А метод with() отлично справляется с отрицательными индексами - arr.with(-1, newItem) заменит последний элемент массива без вычисления его длины!

CodeBase | Frontend | #js

⚡️ Прощай, FID. Привет, INP: Главная метрика Core Web Vitals

First Input Delay (FID) официально ушел на пенсию в марте 2024 года. На его место пришел INP (Interaction to Next Paint). Если вы всё еще оптимизируете старую метрику, самое время пересмотреть свои подходы.

В чем был обман FID?
FID измерял только задержку (Input Delay) от клика до того момента, как браузер начал выполнять ваш обработчик событий.
Если ваша функция onClick после старта зависала на 2 секунды, перебирая огромный массив, FID всё равно мог быть идеальным (например, 3 мс), хотя пользователь видел намертво зависший интерфейс.

Что измеряет INP?
INP фиксирует всё время до появления визуального отклика на экране:

1. Ожидание освобождения Main Thread (Input delay)
2. Выполнение вашего JS-кода (Processing time)
3. Пересчет стилей, Layout и саму отрисовку (Presentation delay)

Хороший INP - это меньше 200 мс. Причем берется не среднее значение, а один из худших результатов за сессию (98-й перцентиль).

🛠 Как спасать INP (Senior level):

1. Разбивайте Long Tasks (Yield to Main Thread)
Не заставляйте браузер делать всю тяжелую работу за один присест. Дайте ему возможность «вздохнуть» и отрисовать кадр. В современных браузерах для этого внедряется scheduler.yield().

async function handleHeavyClick() {
  // 1. Показываем лоадер (синхронно, легко)
  showSpinner();
  
  // 2. Отдаем управление браузеру, чтобы он успел отрисовать лоадер!
  // Если scheduler.yield недоступен, используем await new Promise(r => setTimeout(r, 0))
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  // 3. Теперь делаем тяжелую работу
  processHugeData();
}

2. Используйте startTransition в React 18+
Если клик вызывает обновление состояния, которое требует тяжелого рендера (например, фильтрация большого списка), React может заблокировать отрисовку того же чекбокса, на который вы нажали.
Оберните тяжелое обновление стейта в startTransition - React пометит его как низкоприоритетное и не будет блокировать UI.

3. Избегайте Layout Thrashing
Если в обработчике клика вы сначала читаете размеры элемента (el.offsetHeight), а потом меняете классы, вы заставляете браузер синхронно пересчитывать стили (Forced Synchronous Layout). Это убивает фазу Presentation Delay. Сначала читайте, потом пишите!

CodeBase | Frontend | #js

Conform - это потрясающе

- Валидация клиента + сервера из одной схемы Zod
- Прогрессивное улучшение
- Восхитительно простой API
- Работает с Next.js ( server actions + useFormState)

CodeBase | Frontend | #animate

Как работает SVG ViewBox

Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.

Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case

https://svg.bradwoods.io/lessons/viewbox

CodeBase | Frontend | #animate