🔗 Разбор: временная мёртвая зона

Раннее мы выкладывали задачу 📎

Правильный ответ: переменная `a` находится во временной мёртвой зоне (TDZ)

🔛 Что происходит:

JS делит выполнение на две фазы:

1. Инициализация (создание окружения) — компилятор видит let a = 2 внутри функции и создаёт для неё локальную переменную a.

2. Выполнение — когда доходит до console.log(a), движок уже знает о локальной a, но она ещё не инициализирована.

⚠️ Поэтому обращение к ней до строки let a = 2 вызывает ReferenceError, даже если код в if не выполнится.

❗️ Это и есть Temporal Dead Zone (TDZ) — период между созданием переменной и её инициализацией, когда доступ к ней невозможен.

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

#code_challenge #js

🌪 Как очистить объект от мусора

Иногда после API-запроса или сборки данных в объекте куча undefined — их не видно, но они мешают при сериализации, сравнении и логах.

const clean = obj => Object.fromEntries(
  Object.entries(obj).filter(([_, v]) => v !== undefined)
);

🔤 Что делает:

— пробегается по всем парам [ключ, значение],
— выкидывает те, где значение undefined,
— возвращает новый “чистый” объект.

🔴 Пример:

clean({ name: 'Alex', age: undefined, city: 'Berlin' });
// => { name: 'Alex', city: 'Berlin' }

🔤 Полезно:

— перед отправкой данных на сервер,
— при сборке форм,
— при логировании чистых JSON.

🔤 Для более «умной» версии (чистит и вложенные объекты):

const clean = obj =>
  Object.fromEntries(
    Object.entries(obj)
      .filter(([_, v]) => v !== undefined)
      .map(([k, v]) => [k, v && typeof v === 'object' && !Array.isArray(v) ? clean(v) : v])
  );

🔴 Эта версия:

— рекурсивно чистит вложенные объекты,
— не трогает массивы,
— остаётся компактной и читаемой.

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

#readme #js

🧿 Паттерн недели — Container / Presentational

Иногда компонент делает всё сразу: тянет данные, хранит стейт, обрабатывает события и рендерит UI. Через месяц — каша, через три — баги и боль.

⚪️ Что это дает:

— код становится чище и стабильнее,
— проще тестировать (UI отдельно, логика отдельно),
— UI можно переиспользовать,
— границы между слоями становятся прозрачными.

⚪️ Когда применять:

— компонент разросся и делает всё,
— нужно использовать один UI с разными данными,
— хочешь сделать код «архитектурно зрелым».

🆖 Чек-лист:

✅ Presenter без useEffect и fetch

✅ Только пропсы и рендер

✅ Контейнер решает, что показать, Presenter — как

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

#blueprint

📎 React, Vue, Svelte — разные догмы, одни и те же боли

Кажется, вот он — новый порядок, чистый код, свежий старт. А потом снова файл на 600 строк и состояние, которое живёт своей жизнью. И вы ловите дежавю.

❓ Что бы вы сделали:

🔥 — Выбрали новый фреймворк
❤️ — Переписали старый проект с нормальной архитектурой

🔤 Как это сделать — разбираем на курсе «Архитектуры и шаблоны проектирования» (−40%)

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

#code_battle

🚀 Шпаргалка по HTML

Всё от базовой структуры до таблиц, форм, списков и современных тегов разметки.

➕ Отличный инструмент для быстрой проверки кода и обучения.

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

#readme #html

🔥 Библиотека на Tailwind для быстрого прототипирования

UI Skeleton — мощный UI-фреймворк, построенный поверх Tailwind CSS. Он оптимизирован под скорость, доступность и готовые темы, включая dark mode из коробки.

⏯ Чем еще хорош:

— Можно собрать интерфейс за минуты, без возни с конфигами и кастомизацией

— Все компоненты уже адаптивные, доступные (a11y) и подчиняются Tailwind-токенам

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

🎈 По сути — Tailwind + готовый UI-кит, где всё уже выверено по UX.

Ссылка на инструмент

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

#stack