🧬 Иммутабельность из коробки: 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

Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

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

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFGhsAzd ИП Галактионов Тихон Витальевич, ИНН 771618975809

Вот что происходит, когда просишь ИИ отцентрировать div

CodeBase | Frontend | #meme

Помайли JavaScript за руку!

CodeBase | Frontend | #meme