Frontend разработчик
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
Больше📈 Аналитический обзор Telegram-канала Frontend разработчик
Канал Frontend разработчик (@frontend_1) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 10 482 подписчиков, занимая 11 356 место в категории Технологии и приложения и 60 685 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 10 482 подписчиков.
Согласно последним данным от 27 августа, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -66, а за последние 24 часа — -3, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 6.88%. В первые 24 часа после публикации контент обычно набирает 3.14% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 721 просмотров. В течение первых суток публикация набирает 329 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 4.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как css, javascript, программист, интерфейс, developer.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
Благодаря высокой частоте обновлений (последние данные получены 28 августа, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.
Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 https://t.me/frontend_punks Реклама, erid: 2W5zFGwDoJH ИП Галактионов Тихон Витальевич, ИНН 771618975809
place-items
Центрировать элемент — базовая задача, но многие до сих пор пишут лишнее:
❌ Старый способ с Flexbox:
display: flex;
justify-content: center;
align-items: center;
✅ Новый минималистичный способ с Grid:
display: grid;
place-items: center;
📌 place-items — это сокращение для align-items + justify-items. Работает только с CSS Grid, но зато:
* Меньше кода
* Более читаемо
* Идеально для одиночных элементов в контейнере
💡 Подходит для модалок, карточек, лоадеров и др.
⚙️ Поддержка: все современные браузеры (даже IE11 частично поддерживает place-items как -ms-grid)
Пробуй — и забудь про лишние строки!
📲 Мы в MAX
👉 @frontend_1useEffect: ловушка зависимости на функцию!
В React легко попасть в ловушку, передавая функции внутрь useEffect, не задумываясь об их зависимости.
useEffect(() => {
fetchData(); // ⚠️ Эта функция может пересоздаваться на каждый рендер!
}, [fetchData]);
Если fetchData определена внутри компонента, она будет новой при каждом рендере, и эффект снова выполнится. Это может вызвать бесконечные циклы или лишние вызовы.
🛠 Решения:
1. Вынести функцию наружу, если она не зависит от пропов/стейта.
2. Обернуть в useCallback:
const fetchData = useCallback(() => {
// ...
}, []);
📌 Всегда проверяй зависимости в useEffect. Полагайся на ESLint-плагин react-hooks — он поможет не попасть в ловушку.
📲 Мы в MAX
👉 @frontend_1children правильно!
Часто можно увидеть вот так:
type Props = {
children: React.ReactNode;
}
Но это слишком широкий тип. Он допускает что угодно: строки, числа, фрагменты, null…
📌 Лучше — использовать ReactElement:
import { ReactElement } from 'react';
type Props = {
children: ReactElement;
}
👉 Это значит: ожидаем ровно один React-элемент, и никаких строк/чисел/массивов.
Если нужно несколько элементов — используем:
type Props = {
children: ReactElement | ReactElement[];
}
🎯 Это даёт жёсткую и предсказуемую типизацию, особенно полезно для обёрток и layout-компонентов.
⚠️ А если хочешь прям универсальность — тогда ReactNode ок. Но осознанно.
Пиши типы как профи 💪
📲 Мы в MAX
👉 @frontend_1JSON.stringify():
const isEqual = (a: object, b: object) =>
JSON.stringify(a) === JSON.stringify(b);
📌 Подходит для:
* Простых объектов без методов и undefined;
* Сравнения кеша/props в memo;
* Быстрой проверки изменений формы.
⚠️ Не подходит:
* Для вложенных объектов с разным порядком ключей ({a:1,b:2} !== {b:2,a:1});
* Когда есть Date, Map, Set, функции, undefined, symbol.
🧠 Альтернатива:
Если важен порядок и типы — используй lodash.isEqual.
👉 Пример использования:
if (!isEqual(prevForm, currentForm)) {
saveChanges();
}
⚡ Просто. Эффективно. Для 80% кейсов — 🔥
📲 Мы в MAX
👉 @frontend_1z-index, о котором часто забывают
Если у вас не работает z-index — причина может быть не в его значении, а в контексте наложения (stacking context).
❗️Вот что его создаёт (неочевидное):
* position: fixed | absolute | relative + z-index ≠ auto
* transform, filter, perspective, opacity < 1
* will-change, mix-blend-mode, contain: layout и другие
📦 Пример:
.parent {
transform: translateZ(0); /* создаёт stacking context */
z-index: 10;
}
.child {
position: absolute;
z-index: 999; /* но не выйдет за пределы .parent */
}
🧠 Вывод: z-index работает только внутри текущего контекста наложения. Чтобы перекрыть что-то выше — нужно изменить контекст.
📚 Подробнее: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Stacking_context
📲 Мы в MAX
👉 @frontend_1:focus-visible вместо :focus для изменения стиля обводки ✅
📲 Мы в MAX
👉 @frontend_1:last-child и упростить отступы
Когда нужно задать отступ между элементами, но не последнему, часто пишут:
.item:not(:last-child) {
margin-bottom: 16px;
}
Но есть современный способ без селекторов и костылей 👇
✅ Используй gap с flex или grid:
.container {
display: flex;
flex-direction: column;
gap: 16px;
}
📌 Преимущества:
– Нет нужды в :last-child
– Чище HTML и CSS
– Работает одинаково в любом направлении (row, column)
– Поддерживается во всех современных браузерах
Итог: если ты всё ещё пишешь :not(:last-child) — пришло время обновить подход.
📲 Мы в MAX
👉 @frontend_1:where()? 🤩
📲 Мы в MAX
👉 @frontend_1useMemo, думая, что так улучшают производительность. На деле — часто наоборот: добавляют лишние вычисления и усложняют отладку.
📌 Когда useMemo реально нужен:
- 🧠 Тяжёлые вычисления (парсинг, сортировка, фильтрация больших массивов);
- 🧱 Объекты/массивы в props, чтобы избежать лишних ререндеров memo-компонентов;
- 🖼️ Стабильность зависимостей в useEffect.
❌ Когда НЕ нужен:
- 💨 Простые вычисления (арифметика, строковые конкатенации);
- 🧹 "на всякий случай" — без профилирования.
📊 Как проверить, помогает ли useMemo?
Открой DevTools → вкладка Profiler → замерь рендер до и после — часто разница нулевая (или хуже).
🛠️ Альтернатива: начни с чистого компонента, профилируй, оптимизируй только узкие места.
📲 Мы в MAX
👉 @frontend_1v-if и v-for
Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇
<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
{{ item.name }}
</li>
Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if.
✅ Лучше так:
<li v-for="item in visibleItems">
{{ item.name }}
</li>
А в computed:
computed: {
visibleItems() {
return this.items.filter(item => item.visible);
}
}
💡 Это улучшит производительность и избавит от неожиданных багов при больших списках.
Подробнее — в оф. доках:
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if
📲 Мы в MAX
👉 @frontend_1В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ База по микрофронтам ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме А ещё у меня куча успешных кейсов и отзывов — все они в канале. Подписывайся: https://t.me/+CYoHn4u9_BgyOGEy Реклама, erid: 2W5zFHNcK8V ИП Галактионов Тихон Витальевич, ИНН 771618975809
