🧩 Компоненты или все в одном

Когда разрабатываете интерфейс, всегда возникает вопрос: стоит ли разделять его на маленькие, атомарные компоненты или проще собрать всё в одном?

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

✅ Преимущества разделения на компоненты:

— Маленькие компоненты легко переиспользуются, что упрощает поддержку и расширение проекта.

— Компоненты легче тестировать и изменять, что делает код более гибким и читаемым.

— Когда каждый работает над своим компонентом, это упрощает взаимодействие в команде.

⛔️ Почему всё в одном тоже имеет смысл:

— В небольших проектах бывает проще не заморачиваться на создание множества компонентов, а просто сделать один большой.

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

— Когда всё в одном компоненте, проще контролировать логику и избежать излишней абстракции.

Что для вас удобнее: дробить интерфейс на множество маленьких компонентов или работать с одним большим?

Поделитесь в комментариях! ✏️

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

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

📌 От прототипа до класса: как устроено наследование в JS

Как JavaScript находит методы, кто у кого что наследует и зачем нужен extends. 5 статей, которые расставят всё по полочкам.

1. Прототипное наследование

Подробно рассказывает про механизм [[Prototype]], цепочку прототипов и делегирование свойств через proto.

2. Наследование классов

Разбирает синтаксис class и extends, эффективность и подводные камни ES6-наследования.

3. Prototypal Inheritance Explained

Свежая статья с простыми объяснениями, примерами и визуальными схемами цепочек прототипов.

4. 7 способов реализации наследования в JavaScript

Обзор альтернатив и техник: от Object.create до работы со ссылочными типами, плюсы и минусы каждого подхода.

5. MDN: Inheritance & the prototype chain

Официальная документация MDN: простое объяснение чего искать JavaScript при обращении к свойству, как работает цепочка наследования.

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

#свежак

🤔 Задача: как должен вести себя интерфейс при удалении

Вы создаёте SPA для управления задачами. У каждой задачи есть id, title и status. Удаление реализовано так:

await fetch(`/api/tasks/${id}`, { method: 'DELETE' });

Далее замечаете следующую проблему: после клика по «Удалить» задача исчезает из интерфейса, но при ошибке сервера (например, 500) остаётся в базе.

Пользователь думает, что задача удалена, но при обновлении страницы она возвращается 😭

❓ Как улучшить UX и корректно реализовать удаление задачи?

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

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

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

Frontend Engineer — от 3000 $, удаленно (Лондон)

Middle React Native разработчик — офис (Москва)

Frontend Developer (React JS) Middle — 1 100 $, удаленно (Астана)

Frontend разработчик на Angular — от 100 000 до 200 000 ₽, офис (Казань)

Frontend-разработчик — от 150 000 до 180 000 ₽, удаленно (Москва)

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

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

#свежак

🌸 Box Model, с которым не больно верстать

— display, float, clear, width/height, margin — простые, но коварные

— auto, %, inherit — ведут себя по-разному в зависимости от контекста

— даже один auto может всё сломать, если не учесть родителя

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

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

#буст

🐟 Как оптимизировать фронтенд с помощью Web Vitals

Web Vitals — это метрики от Google, которые измеряют реальное восприятие производительности пользователями.

Особенно важны:

* LCP — скорость загрузки главного контента

* INP — отзывчивость при взаимодействии

* CLS — стабильность интерфейса

Зачем прокачивать Web Vitals:

📍 Сайт загружается быстрее — пользователь видит контент без ожидания

📍 Интерфейс становится стабильным — ничего не дергается и не мешает восприятию

📍 Растёт SEO-трафик — Google любит быстрые и стабильные страницы

Как внедрить в проект:

1️⃣ Отслеживание метрик в коде:

import { getCLS, getINP, getLCP } from 'web-vitals';

getCLS(console.log);
getINP(console.log);
getLCP(console.log);

2️⃣ Анализ с помощью Lighthouse:

— Откройте DevTools → вкладка Lighthouse

— Запустите аудит и смотрите рекомендации по улучшению

3️⃣ Улучшения в реальном коде:

— Используйте loading="lazy" для изображений

— Добавьте font-display: swap к шрифтам

— Минимизируйте и разбивай JS на чанки

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

#буст

Бедный кролик - бедный ты 💻

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

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

👍 Промпт, который превращает макет в HTML + CSS

ChatGPT с этим промптом превращается в мощный парсинг-инструмент: скрин → код.

Что нужно сделать:

➡️ Загрузить скриншот интерфейса, макета или сайта

➡️ Вставить промпт ниже

Промпт:

You're a professional web developer and UI/UX expert.

I’m going to upload an image of a website design or component. Please:
1. Analyze the layout and design from the image.
2. Generate clean, responsive HTML and CSS (Tailwind is fine too).
3. Add comments in the code to explain your logic.
4. Ask me any questions if something in the image isn’t clear.

Output everything inside code blocks and make sure it's mobile-friendly.

Работает отлично для:

— hero‑секций
— форм логина/регистрации
— табличек с ценами
— админок и портфолио

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

#буст

🫠 Как я отловил «утечку» стилей через CSS-in-JS в крупном SPA

Наш подписчик работал над крупным корпоративным SPA на React с использованием Emotion для стилизации компонентов. В какой-то момент приложение стало заметно «тормозить» после нескольких переключений между разделами:

«Заглянув в DevTools, увидел, что <head> заполняется дублирующимися <style>-тегами. Оказалось, я каждый раз создавал новый Emotion-cache при рендере, и старые стили не удалялись — вечером перенёс провайдер кеша в корень приложения, и лаги исчезли.»

❓ А вы сталкивались с такими «утечками»?

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

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

🛠 Фишка библиотеки: why-did-you-render

why-did-you-render — это дебаг-библиотека для React, которая показывает, что именно вызвало лишний ререндер компонента.

В консоли видно, какие пропсы или состояние изменились — даже если данные по сути остались теми же. Это помогает быстро вычислить узкие места 👍

Что умеет:

— Сравнивает старые и новые пропсы/стейт

— Подсвечивает !==-сравнения, где изменения фиктивны

— Работает с функциями и классами, включая memo, useMemo, useCallback

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

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

whyDidYouRender(React, {
  trackAllPureComponents: true
});

🔗 GitHub проекта

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

#буст