🌟 Универсальные компоненты против специализированных

Ты делаешь кнопку. Вроде просто, но решаешь сделать переиспользуемую: добавляешь пропсы на цвет, размер, иконки, лоадер, курс Меркурия. Через день — это уже не кнопка, а мини-фреймворк.

А потом ПМ говорит:

«Нужна такая же кнопка, но чтобы внутри был селект и тултип. Завтра в прод.»

Ты смотришь на своё творение… и плачешь.

И вот ты стоишь на развилке:

1️⃣ Универсальные компоненты

+ Один раз написал — используешь везде

+ Красиво в теории

- Становятся слишком умными, и потом ими невозможно пользоваться

- Каждый новый флаг ломает старые кейсы

2️⃣ Специализированные

+ Просто и понятно

+ Быстро пилится под задачу

- В каждом модуле своя кнопка, своя модалка, свой select

- Стиль, UX и логика могут расползаться

Мораль?

Универсальность — это хорошо… до тех пор, пока ты не начал дебажить. А потом ты просто хочешь простую кнопку, которая не знает про весь остальной мир.

💡 А ты в каком лагере — абстракции или прагматизма?

Давайте драться в комментах — по-доброму, конечно.

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

#междусобойчик

📣 Дайджест материалов за неделю

🔘 Как на самом деле работает async и await

🔘 Команда дня: Vite для быстрого старта проекта

🔘 Чек-лист для рекламных спецпроектов: используются примеры на основе проектов для VK

🔘 Что нужно знать и уметь фронтенд-разработчику, чтобы не потеряться в 2025 году: полезные советы

🔘 Собеседование на мидла: реальные вопросы, объясняют, что важно в ответах, и как не выглядеть джуном под стрессом

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

#свежак

⭐ Что такое теневые DOM деревья

Shadow DOM — это технология из стандарта Web Components, позволяющая создавать изолированные участки DOM с собственными стилями и логикой.

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

Зачем нужен:

➡️ Инкапсуляция: стили и скрипты внутри Shadow DOM не влияют на остальную часть страницы и наоборот.

➡️ Изоляция: элементы внутри Shadow DOM недоступны через document.querySelector, что предотвращает случайные изменения.

➡️ Переиспользуемость: компоненты можно использовать в разных частях приложения без опасений за конфликты стилей.

Пример использования

<!-- HTML -->
<div id="host"></div>

// JavaScript
const host = document.querySelector('#host');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
p { color: blue; }
</style>
<p>Это текст внутри Shadow DOM</p>
`;

console.log(document.querySelector('p')); // null

В этом примере элемент <p> находится внутри Shadow DOM и недоступен через глобальный document.querySelector.

Для более глубокого изучения Shadow DOM и Web Components можно обратиться к следующим ресурсам:

🔗 MDN Web Docs: Using shadow DOM

🔗 Современный учебник JavaScript: Shadow DOM

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

#буст

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

Middle-frontend разработчик — от 280 000 ₽, гибрид (Москва)

Frontend разработчик — от 275 000 до 350 000 ₽, удаленно (Санкт-Петербург)

Frontend-разработчик — от 100 000 до 120 000 ₽, офис/гибрид (Краснодар)

Middle+ Frontend Web3 Developer — от 200 000 до 260 000 ₽, удаленно (Дубай)

Разработчик интерфейсов в Вертикали — гибрид (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

🐱 Шпаргалка: методы работы со строками и RegExp в JavaScript

Кратко и по делу — основные методы работы со строками и регулярными выражениями: search, match, replace, а также полезные шаблоны для замены вроде $&, $', $$ и других.

Отличный инструмент, чтобы освежить знания или быстро найти нужный синтаксис.

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

#буст

🚀 ТОП-38 Hover-эффектов для современного веб-дизайна в 2025 году

Сегодня просто красиво — уже не работает. Люди ожидают деталей, анимации, микровзаимодействий. Именно это и собрал автор: 38 hover-эффектов, которые делают интерфейс живым, современным и цепляющим.

Что в статье:

➡️ Подборка визуально эффектных решений

➡️ Примеры использования и разбор кода

➡️ Акценты на актуальные тренды 2025 года

🔗 Смотреть и вдохновляться

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

😺 Как создавать адаптивные страницы: от медиазапросов до гибких сеток

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

1️⃣ Используем медиазапросы (@media), чтобы адаптировать стили под разные экраны

Применяем медиазапросы для того, чтобы настроить стили в зависимости от ширины экрана. Так мы получаем возможность уменьшать шрифт на мобильных устройствах или добавлять дополнительные отступы, чтобы контент не «слипался».

Пример кода:

/* Для мобильных устройств */
body {
font-size: 14px;
}

/* Для экранов шириной от 768px */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

2️⃣ Применяем гибкие сетки с помощью Flexbox и CSS Grid

Flexbox и CSS Grid дают нам возможность создавать макеты, которые «тянутся» или сжимаются в зависимости от размера экрана.

Пример с Flexbox:

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 30%;
margin: 10px;
}

Пример с CSS Grid:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.item {
background-color: #f0f0f0;
padding: 20px;
}

3️⃣ Используем относительные единицы измерения для гибкости

Вместо фиксированных значений мы выбираем такие единицы измерения, как em, rem, %, чтобы размеры и отступы изменялись в зависимости от размера экрана.

Пример кода:

.container {
width: 80%;
padding: 2rem;
}

4️⃣ Придерживаемся подхода mobile-first

Такой подход позволяет оптимизировать скорость загрузки и повысить производительность для мобильных пользователей.

Пример кода:

Для мобильных устройств

body {
font-size: 14px;
}

Для экранов шириной от 768px
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

5️⃣ Тестируем сайт на разных устройствах

Используем инструменты вроде BrowserStack или проверяем в режиме мобильных устройств в браузерах. Это помогает найти и устранить все проблемы до релиза.

🚀 Советы:

• Используйте max-width для медиазапросов, чтобы стили применялись на экранах с шириной меньше указанного значения.

• Применяйте min-width для добавления стилей на более крупных экранах.

• Активно используйте clamp() для динамической настройки размеров в зависимости от размера экрана.

• Всегда применяйте object-fit: cover; для изображений, чтобы они корректно масштабировались в контейнерах.

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

#буст

😰 Мошенники получается….

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

#развлекалово

💬Промпт для создания формы обратной связи с помощью Tailwind CSS

Если вам нужно быстро и эффективно разработать форму обратной связи с минимальными усилиями — не пренебрегайте Tailwind CSS.

Для удобства можно использовать данный запрос, но обязательно проверяйте на точность (нам выдал без метатега кодировки UTF-8).

PROMPT:

Generate a semantic HTML and Tailwind CSS "Contact Support" form consisting of the user's name, email, issue type, and message. The form elements should be stacked vertically and placed inside a card.

Также вы можете использовать универсальный промпт для других задач:

Generate a semantic and accessible HTML and (framework) CSS [UI component] consisting of [component parts]. The [component parts] should be [layout].

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

#буст

🚀 Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍 Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍 Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍 Использование инструментов: React DevTools, why-did-you-render, профилирование

📍 Практические примеры кода «до» и «после»

📍 Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

🔗 Читать статью

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

🙂 Как не утонуть в дедлайнах и при этом успевать жить

Иногда кажется, что жизнь — это просто список задач в Jira. Только без кнопки “Complete” и с багами в расписании. Когда работаешь фронтендером, особенно в стартапе или на жестком проекте, легко потеряться между фичами, срочными хотфиксами и «вот это надо было ещё вчера».

Моя история:

Был у меня период, когда я всерьёз думал, что «выйти в оффлайн» — это привилегия. Дни сливались в один длинный поток: созвон — коммит — правка — деплой — баг — снова правка.
Я ел на бегу, спал плохо, даже выходные проваливались в режим «да я тут чуть-чуть подфикшу, это на 5 минут» (никогда не 5 минут).

Однажды просто поймал себя на мысли:
«А я вообще живу, или просто существую между спринтами?»

С тех пор стал менять подход:

• Планировать не только работу, но и отдых. Прям в телефоне ставил напоминание «погулять» или «позвонить другу».

• Старался заканчивать день в нормальное время, даже если не всё сделал. Потому что «успеть всё» — это миф.

• Начал говорить честно команде, если не вывозил. Без героизма. Просто по-человечески.

• И главное — напоминал себе, что я не машина. Я не создан быть продуктивным 24/7.

💡 Что понял:

Работа — важна. Но если ты сам выпадаешь из жизни, то и смысла в этих дедлайнах немного. А фронтенд — он никуда не денется. Зато твоё здоровье и счастье — может.

А вы как справляетесь, когда накрывает волной задач? Что помогает не терять себя?

Делитесь в комментариях ⬇️

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

#междусобойчик

😎 Zustand и DevTools: лайфхаки для управления состоянием в React

Интеграция библиотеки Zustand с React DevTools превращает её в мощный инструмент для быстрого отслеживания и отладки состояния в реальном времени.

1️⃣ Сначала установим Zustand

npm install zustand

Или с использованием yarn:

yarn add zustand

Также убедитесь, что у вас установлены React DevTools в браузере.

2️⃣ Теперь добавим поддержку DevTools в ваше хранилище Zustand. Для этого оборачиваем хранилище в devtools middleware:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
})));

Использование Redux DevTools для дополнительных функций

Если вы хотите использовать расширенные возможности, такие как time travel (перемещение по истории состояния), вы можете настроить Redux DevTools с Zustand.

3️⃣ Установим Redux DevTools:

npm install simple-zustand-devtools --dev

Или:

yarn add simple-zustand-devtools --dev

4️⃣ Подключим Redux DevTools:

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

const useStore = create((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
}));

if (process.env.NODE_ENV === 'development') {
mountStoreDevtool('Store', useStore);
}

Какие плюсы это использовать:

➡️ Вы легко увидите, как меняется ваше состояние при каждом действии, что помогает быстро находить ошибки.

➡️ Перемещайтесь по истории состояний, чтобы понять, что именно изменилось, и как это повлияло на приложение.

➡️ React DevTools предоставляет удобный интерфейс, который позволяет отслеживать состояние и взаимодействовать с ним без необходимости писать дополнительный код.

➡️ Если в вашем проекте используется несколько хранилищ Zustand, вы сможете отслеживать их изменения одновременно, что особенно полезно в крупных приложениях.

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

#буст

💧📈 Как сделать гидратацию в React 19 по настоящему эффективной

До выхода React 19 процесс гидратации оставлял желать лучшего: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности тормозили создание быстрых и отзывчивых приложений.

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья 🔗

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

💭 Документация у него в голове

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

#развлекалово