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

#pixel_pause

🎯 Interest Invoker API — тултипы без единой строчки JS

Раньше, чтобы показать поповер по ховеру, нужен был JavaScript. Теперь — достаточно HTML.

➡️ Как работает:

interesttarget связывает элемент-триггер и поповер. Браузер сам обрабатывает hover, focus или long-press и показывает подсказку.

Можно совмещать с Popover API и Anchor Positioning для точного позиционирования.

⚠️ Поддержка:

Пока экспериментальная — работает в Chromium-браузерах (Chrome 135+, Edge 135+). В Firefox и Safari API ещё не реализован, поэтому стоит использовать фолбэк или JS-вариант для совместимости.

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

#readme #html

🧠 Три бага: LLM против ручного анализа

Разбираем кейс:
может ли LLM полноценно дебажить сложные проблемы в связке React + Next.js + TanStack Query + Zod?

🔴 Где AI действительно силён

Типовые проблемы:

• ошибки валидации Zod
• забытые null-check’и
• очевидные runtime-ошибки
• несовпадение типов

В этих кейсах AI часто:

✅ Быстро находит причину
✅ Предлагает рабочий фикс

⚠️ Но не всегда учитывает контекст продукта

🔴 Где начинаются проблемы

Когда баг связан с:

• Suspense и границами загрузки
• RSC payload и SPA-навигацией
• redirect в App Router
• Server Actions
• кэшированием и hydration

AI начинает:

❌ предлагать противоречивые root cause
❌ «уверенно галлюцинировать»
❌ чинить симптом, а не архитектуру
❌ создавать новый баг вместо старого

Особенно это видно в сложных сценариях Next.js App Router, где поведение зависит от того, сервер это, клиент, переход по Link или refresh.

🔴 Главный вывод

AI — отличный инструмент первого уровня:

«Вот лог, вот ошибка, почини»

Но если проблема требует понимания:

• как работает фреймворк под капотом
 • как данные проходят через сервер и клиент
 • какие UX-последствия создаёт решение

— здесь без человеческой модели системы не обойтись.

🧩 Реальность 2026 года

Навык больше не в том, чтобы «писать хорошие промпты». Навык — понимать, когда:

• AI действительно помогает
• AI надо остановить
• и пора включать собственное мышление

AI ускоряет. Но ответственность за root cause остаётся на разработчике.

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

#code_battle

🖥 Вышла бета TypeScript 6.0 от Microsoft

Это переходная версия перед крупным релизом 7.0, который будет основан на новом компиляторе на Go с поддержкой многопоточности. По сути, 6.0 — последний мажорный релиз на текущей JavaScript-кодовой базе и мост к новой архитектуре.

Что добавили:

🈂️ Типы для Temporal — новой модели работы с датами и временем

🈂️ Upsert-методы для Map и WeakMap: getOrInsert, getOrInsertComputed

🈂️ RegExp.escape — безопасная экранизация строк для регулярных выражений

🈂️ Поддержка es2025 в target и lib

🈂️ В dom теперь по умолчанию включены iterable и async iterable

➕ Важные изменения по умолчанию:

• strict теперь включён
• module → esnext
• target → актуальная версия ECMAScript (сейчас es2025)
• types по умолчанию пустой массив — больше контроля и быстрее сборка
• Убраны и помечены deprecated устаревшие опции (es5, amd, classic, baseUrl и др.)

➕ Установить бета-версию:

npm install -D typescript@beta

Если планируете переход на 7.0 — лучше протестировать проект уже сейчас: 6.0 помогает заранее убрать несовместимости и снизить шум при миграции.

🔗 Источник

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

#release_digest

⚡️ 5 приёмов работы с объектами, которые снижают количество багов

Во фронтенде данные чаще всего представлены объектами. Проблемы возникают из-за мутаций, отсутствующих свойств и некорректного копирования.

Ниже — практики, которые помогают держать состояние под контролем.

🔴 Деструктуризация с дефолтами

Значение по умолчанию применяется только если свойство === undefined.

const { theme = "light", user = {} } = settings ?? {};

✅ Защищает от падений
✅ Убирает лишние проверки
✅ Делает код предсказуемым

🔴 Optional chaining ?. + Nullish coalescing ??

const city = user?.profile?.address?.city ?? "Не указан»;

— ?. возвращает undefined, если часть цепочки отсутствует
— ?? подставляет значение только для null или undefined
— В отличие от ||, не ломает 0, false, ""

✅ Без defensive-кода
✅ Без неожиданных fallback’ов

🔴 Иммутабельное обновление через spread (shallow copy)

const updatedUser = {
  ...user,
  settings: {
    ...user.settings,
    darkMode: true
  }
};

Spread создаёт поверхностную копию (вложенные объекты — по ссылке).

✅ React корректно увидит изменения
✅ Нет скрытых мутаций
✅ Предсказуемый state

🔴 Удаление поля через rest (без мутации)

const { password, ...safeUser } = user;

Создаётся новый объект без password. Исходный объект не изменяется.

✅ Без побочных эффектов
✅ Удобно перед отправкой данных

🔴 structuredClone — глубокая копия по стандартному алгоритму

const copy = structuredClone(state);

— Делает глубокую копию
— Работает с Date, Map, Set и другими поддерживаемыми типами
— Основан на стандартном structured clone algorithm

✅ Без JSON-костылей
✅ Без ручной рекурсии

📍 Навигация: [Вакансии]

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

#readme #js

🔍 Матовое стекло 2.0: правильный backdrop-filter

Размытие через filter: blur() — это про сам элемент. Если нужно размывать фон за ним — используйте backdrop-filter.

🔴 В статье разбирается:

— В чём разница между filter и backdrop-filter
— Почему стандартный blur выглядит «плоско»
— Как расширить зону размытия через mask-image
— Как избежать проблем с кликами, мерцанием и поддержкой браузеров

В конце — готовый код и интерактивная песочница. Если вы делаете glass-эффект в интерфейсах — этот материал поможет довести его до действительно аккуратного уровня.

📍 Навигация: [Вакансии]

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

#under_hood

🐱 SQL на котиках

JOIN — это способ соединить данные из разных таблиц по общему полю.

В видео разбирают:

— разницу между INNER и LEFT JOIN
— почему строки могут «пропадать»
— как формируется итоговый результат

Подойдёт новичкам, тем, кто путается в JOIN, и всем, кто хочет перестать писать запросы вслепую.

📍 Навигация: [Вакансии]

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

#read_watch #sql

⚡️ Техника, которая спасает от половины UI-багов

Discriminated Union — это самый практичный инструмент в TypeScript, который многие недооценивают.

Суть:

Вы описываете состояние через общий дискриминатор (обычно status или type), и TypeScript гарантирует, что вы обработаете все варианты.

🔥 Почему это must-have

🔵 Безопасный switch

Если вы добавите новое состояние:

| { status: 'refreshing' }

TypeScript сразу подсветит ошибку — вы забыли обработать кейс. Без Discriminated Union это всплывёт только в продакшене.

🔵 Невозможно обратиться к несуществующему полю

state.data // ❌ ошибка, если status !== 'success’

Тип автоматически сужается внутри каждого case. Никаких undefined и падений в рантайме.

🔵 Убирает «магические boolean»

Плохой вариант:

{
  isLoading: boolean;
  isError: boolean;
  data?: string;
}

Можно получить одновременно:
• isLoading = true
• isError = true

Нелогичное состояние, но типы это пропустят. Discriminated Union делает такие состояния невозможными.

📎 Где применять обязательно:

Если вы работаете с:

• React state
• API-запросами
• Redux / Zustand
• finite state machine
• сложными UI-формами

— это не «опциональная техника», это базовая архитектура состояния.

📍 Навигация: [Вакансии]

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

#hotfix #ts

🚨 Sentry React Native 8.0 — серьёзный апдейт

Теперь можно инициализировать Sentry на нативном уровне до загрузки JS.

— Ловит краши при старте приложения
— Закрывает «слепую зону» до Sentry.init()

⚠️ Breaking

Минималки выросли:

— iOS 15+
— AGP 7.4+
— Kotlin 1.8+

Если поддерживаете старые iOS — обновление может быть болезненным. Обновляться стоит, если критичны краши на cold start. Иначе — сначала проверить совместимость билд-пайплайна.

Вы уже на 8.x ❓

📍 Навигация: [Вакансии]

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

#release_digest

🔥 Топ-вакансий недели для фронтендеров

Middle frontend-разработчик — 150 000 - 200 000 ₽, удаленно, Санкт-Петербург

Middle Frontend — ~ от 274 700 ₽, удаленно

Junior+ Frontend (React) Developer — 120 000 - 150 000 ₽, гибрид, Москва

➡️ Больше офферов в канале: @jsdevjob

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

😳 Из разряда:

у меня localhost не открывается на проде

📍 Навигация: [Вакансии]

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

#pixel_pause

👩‍💻 npmx — быстрый браузер npm-пакетов

Альтернативный интерфейс для просмотра пакетов из npm registry. Работает быстрее стандартной страницы и показывает ключевые данные без лишнего шума.

❇️ Что видно сразу:

— Версии и частота обновлений
— Размер пакета
— Количество и состав зависимостей
— Формат модулей (ESM / CJS)
— Лицензия

❇️ Удобно сравнивать пакеты между собой по:

— размеру
— транзитивным зависимостям
— лицензии
— формату сборки

Полезно при выборе библиотеки в продакшен, чтобы не тащить лишний вес и риски.

📍 Навигация: [Вакансии]

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

#stack