🎯 CSS Селекторы: nth-child

Восемь способов выбрать нужный элемент без лишних классов. От базовых :first-child и :last-child до продвинутых формул с :nth-child(3n+1). Один селектор вместо десятка классов.

➕ Простая математика для точного контроля над версткой.

🐸 Библиотека фронтендера

#readme #css

🔴 История о том, как я убил производительность сайта

Всё началось невинно. Нужен debounce для поиска — поставил Lodash. Нужно форматировать даты — Moment.js. Иконки? React Icons, конечно.

Через три месяца разработки делаю npm run build и вижу:

⚠️ 2.8 MB main.js

Решил разобраться. Установил webpack-bundle-analyzer и офигел от того, что увидел.

🔤 Где прячутся мегабайты:

Оказалось, я тащил в проект кучу лишнего:

Lodash (70 KB)
Импортировал всю библиотеку ради двух функций. Остальные 200+ методов просто висят мёртвым грузом.

Moment.js (70 KB)
Мне нужен был только format('DD.MM.YYYY'), а получил все локали мира, парсеры timezone и calendar-системы.

React Icons
По проекту набралось 50+ импортов разных иконок. Bundle незаметно разросся.

Картинки в bundle
Webpack превращал изображения в base64 и пихал прямо в JavaScript. Hero-картинка на 200 KB стала частью main.js.

💡 Что я сделал:

Начал с простого — заменил импорты на точечные:

// Было: тащит 70 KB
import _ from 'lodash'

// Стало: всего 1-2 KB
import debounce from 'lodash/debounce'

Дальше пошёл по библиотекам и нашёл более лёгкие альтернативы:

Moment.js (70 KB) → date-fns (11 KB)
Axios (13 KB) → fetch API (нативно)

Для роутинга включил code splitting. Теперь страницы грузятся только когда пользователь на них переходит:

const Dashboard = lazy(() => import('./Dashboard'))
const Settings = lazy(() => import('./Settings'))

<Suspense fallback={<Loader />}>
  <Dashboard />
</Suspense>

С картинками разобрался так: большие файлы переложил в /public, конвертнул в WebP (экономия 30-50%), добавил loading="lazy".

И последнее — настроил size-limit в CI/CD. Теперь если кто-то попытается влить PR с раздутым bundle, пайплайн упадёт:

"size-limit": [{
  "path": "build/static/js/*.js",
  "limit": "500 KB"
}]

📊 Результаты:

Было:
• Bundle: 2.8 MB
• Загрузка на 3G: 8.5 секунд
• Lighthouse: 45/100

Стало:
• Main bundle: 380 KB
• Остальное в lazy chunks по 50-150 KB
• Загрузка на 3G: 1.2 секунды
• Lighthouse: 92/100

Сайт стал грузиться в 7 раз быстрее. Пользователи перестали жаловаться. Менеджер доволен.

💬 Что я понял:

Главная ошибка была в подходе. Я думал: «npm install — и готово, пакеты же для этого и есть!»

Но каждый килобайт в bundle — это реальное время загрузки. Особенно для людей не на оптоволокне.

У меня на MacBook сайт грузился моментально. А у пользователя с iPhone 8 в метро на 3G — 10 секунд чёрного экрана. Это разные миры.

Теперь перед каждым npm install спрашиваю себя: мне правда нужна вся библиотека? Или хватит одной функции? Может, это вообще можно сделать нативно?

И раз в спринт запускаю npm run build && npm run analyze. Лучше увидеть проблему сейчас, чем в жалобах пользователей потом.

❗️ P.S. Если твой bundle больше 500 KB — самое время открыть bundle analyzer и посмотреть, что там творится.

🐸 Библиотека фронтендера

#code_battle

👀 Перестаньте таскать 50 КБ JS для модалок

Каждый раз одно и то же: нужна модалка → гуглите библиотеку → тащите зависимости → настраиваете accessibility → фиксите баги с фокусом → плачете над z-index.

А что если браузер уже умеет всё это нативно?

🔢 CChrome DevRel запустили серию «Baseline in action» — показывают, как решать реальные задачи без костылей.

Галерея с модалкой на чистом <dialog>: ноль библиотек, ноль кастомного JS для accessibility.

<dialog>
  <form method="dialog">
    <!-- Браузер сам управляет фокусом, Esc, backdrop -->
  </form>
</dialog>

Из коробки:

✅ Фокус автоматом заходит внутрь и не выходи
✅ Esc закрывает
✅ Контент под модалкой заблокирован
✅ Backdrop с blur одной строкой CSS
✅ Плавные анимации появления (даже из `display: none`)

📎 Читать статью с живыми примерами

🐸 Библиотека фронтендера

#read_watch

🐸 Библиотека фронтендера

#pixel_pause

🐸 Библиотека фронтендера

#code_challenge #js

💳 Официальное руководство по Scrum

Гайд от Кена Швабера и Джеффа Сазерленда — 17 страниц, которые задают единственный корректный способ понимать Scrum.

🔤 Если вы работаете в продуктовой команде, строите процессы или хотите лучше понимать, как организуются современные фронтенд-команды, — это must-have.

🐸 Библиотека фронтендера

#readme #scrum

🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!

// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;

🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:

const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение

✅ Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:

// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;

🐸 Библиотека фронтендера

#hotfix #ts

🔥 Каверзный вопрос с собеса по TypeScript

Типы any и unknown часто путают, но они работают совершенно по-разному!

🔍 Что происходит на самом деле:

any — «отключает» TypeScript

let value1: any = "hello";
value1.toUpperCase();  // TS не проверяет
value1.someMethod(); // TS разрешает всё
value1.foo.bar.baz;      // Никаких проверок

➕ TypeScript полностью доверяет вам и не проводит никаких проверок
➕ Это как "аварийный выход" из системы типов

unknown — «безопасный any»

let value2: unknown = "hello";
value2.toUpperCase();   // Ошибка компиляции!

// Нужна проверка типа:
if (typeof value2 === 'string') {
  value2.toUpperCase(); // Теперь работает
}

➕ TypeScript требует явной проверки типа перед использованием
➕ Это безопасный способ работы с неизвестными данными

🎯 Когда использовать:

any — когда:
— Мигрируете JS → TS постепенно
— Работаете с legacy-кодом
— Но помните: это технический долг!

unknown — когда:
— Парсите JSON с бэкенда
— Работаете с пользовательским вводом
— Получаете данные из внешних API
— Обрабатываете ошибки в catch

✅ Best practice:

// Плохо
function parseResponse(response: any) {
  return response.data.user.name;
}

// Хорошо
function parseResponse(response: unknown) {
  if (
    response &&
    typeof response === 'object' &&
    'data' in response
  ) {
    // Type guard для безопасной работы
    return (response as {data: {user: {name: string}}}).data.user.name;
  }
  throw new Error('Invalid response');
}

❗️ unknown заставляет вас думать о безопасности типов, any — отключает эту защиту.

🐸 Библиотека фронтендера

#career_merge #ts #middle