🎄 Залип на AdventJS и не могу остановиться

Это как leetcode, но с новогодним настроением: каждый день новая задача по JavaScript или TypeScript, рейтинг, соревнования с разрабами со всего мира.

Почему это стоит попробовать:

ℹ️ После решения видно подходы других — отличный способ перенять сильные практики

ℹ️ Есть задачи от простых до сложных — каждый найдёт свой уровень

ℹ️ Формируется стабильный навык: к концу декабря GitHub выглядит как новогодняя гирлянда — и это отражает реальный прогресс

Доступно уже 9 дней — успеете войти в ритм и выгрузить максимум пользы 🎄

📎 Ссылка на адвент

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

#read_watch

👨‍💻 Почему я больше не использую CSS-in-JS

1️⃣ Рантайм остаётся узким местом

Любой styled-компонент генерирует классы, хеши, вставляет <style> в документ.

Это не бесплатно: инъекция стилей и работа GC заметны на слабых устройствах. На MacBook незаметно, на бюджетных Android — уже да.

const Button = styled.button`
  background: ${p => (p.primary ? 'blue' : 'gray')};
`;

2️⃣ Дебаг становится хаосом

Инспектор показывает:

.css-4kq0lj { margin: 0 auto; }

И теперь ищи, какой из 50 вложенных styled-компонентов это создал.

3️⃣ SSR и гидратация часто ломаются

Небольшое отличие порядка импортов — и хеши на сервере и клиенте расходятся. Гидратация падает, юзер видит FOUC. С этим сталкивался почти каждый.

4️⃣ Современный CSS решает те же задачи проще

CSS Variables, CSS Modules, Container Queries покрывают 90% кейсов CSS-in-JS:

• Никакого рантайма
• Никаких хешей
• Никакого лишнего веса в бандле
• Прозрачный дебаг

.button {
  background: var(--primary-color);
}

Динамика? Меняем --primary-color из JS → браузер обновляет мгновенно.

📌 CSS-in-JS решал проблемы 2017 года: отсутствие переменных, отсутствие модульности и неудобство работы с CSS. В 2025 браузерный CSS стал мощнее, быстрее и надёжнее — и для большинства проектов этого достаточно.

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

#code_battle

📌 npm explain — кто притащил эту зависимость

Команда (алиас npm why с npm 7+) показывает полную цепочку зависимостей — кто, через что и зачем тянет пакет.

🔢 Раздутый бандл

Нужно узнать, откуда lodash в зависимостях:

npm explain lodash

Получаете цепочку: проект → axios → follow-redirects → lodash.
Сразу видно, что обновлять или менять.

🔢 Конфликт версий

Подозрение на несколько React одновременно:

npm ls react

Команда покажет каждую версию и её источник.

🔢 Security audit

Нашлась уязвимая транзитивная зависимость:

npm explain vulnerable-package

Понимаете, через какой пакет она попала — обновляете или заменяете.

🔢 Чистка проекта перед продом

Проверить только прямые зависимости:

npm ls --depth=0

Быстро находит забытый мусор в package.json.

🧶 Yarn альтернатива

yarn why package-name

Работает так же, с более подробным выводом.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme #npm

⚡️ Iconoir

Каталог минималистичных SVG-иконок (1600+), выровненных под сетку 24×24. Открытый код, свободная MIT-лицензия, единый визуальный стиль.

🔜 Что делает библиотеку удобной:

🔘 Поддержка экосистемы — React, Vue, Flutter, React Native, Swift; в Figma и Framer встроена нативно

🔘 Быстрый старт — установка через NPM, импорт компонента — иконка готова

🔘 Стиль без компромиссов — единая геометрия и толщина линий, подходит для любых дизайн-систем

🔘 MIT License — без ограничений для коммерческих проектов

🔜 Как использовать:

npm i iconoir-react  # или iconoir, или @iconoir/vue

// React — иконка как компонент
import { Bell, HandBrake } from 'iconoir-react';
<Bell color="hotpink" width={32} />

// Или old-school CSS
<i class="iconoir-hand-brake"></i>

💻 Полный каталог иконок — iconoir.com: поиск, предпросмотр, копирование SVG одним кликом.

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

#stack

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

#pixel_pause

📊 Карта GitHub-репозитория за пару секунд

GitDiagram визуализирует структуру любого репо: файлы, директории, связи между модулями — всё в виде интерактивной схемы. Удобно, когда нужно быстро понять архитектуру незнакомого проекта.

🔴 Работает предельно просто:
замените github → gitdiagram в адресе репозитория.

🈁 Дальше можно:
— кликать по узлам, проваливаясь в структуру
— экспортировать диаграмму
— анализировать связность, размеры и «тяжёлые» модули

Для фронтендеров особенно полезно — моментально видно, как устроены компоненты и где находятся ключевые части интерфейса.

🔗 Ссылка на GitHub

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

#resource_drop