Frontend разработчик

Open in Telegram

Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk

Network:Книги для программистов Russia61 218 Technologies & Applications11 556...

📈 Analytical overview of Telegram channel Frontend разработчик

Channel Frontend разработчик (@frontend_1) in the Russian language segment is an active participant. Currently, the community unites 10 562 subscribers, ranking 11 556 in the Technologies & Applications category and 61 218 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 562 subscribers.

According to the latest data from 23 July, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -71 over the last 30 days and by -1 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 8.01%. Within the first 24 hours after publication, content typically collects 3.36% reactions from the total number of subscribers.
Post reach: On average, each post receives 846 views. Within the first day, a publication typically gains 355 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as css, javascript, программист, интерфейс, developer.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk”

Thanks to the high frequency of updates (latest data received on 24 July, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

10 562

Subscribers

-124 hours

-197 days

-7130 days

846

Post views

~ 35524 hours

~ 42448 hours

8.01%

Engagement rate

No data

Posts per day

Ads index

beta

Data loading in progress...

Attracting Subscribers

July '26

+17

in 0 channels

June '26

+27

in 0 channels

Get PRO

May '26

+70

in 0 channels

Get PRO

April '26

+27

in 0 channels

Get PRO

March '26

+16

in 0 channels

Get PRO

February '26

+29

in 0 channels

Get PRO

January '26

+19

in 0 channels

Get PRO

December '25

+29

in 0 channels

Get PRO

November '25

+45

in 31 channels

Get PRO

October '25

+19

in 0 channels

Get PRO

September '25

+58

in 36 channels

Get PRO

August '25

+35

in 1 channels

Get PRO

July '25

+58

in 26 channels

Get PRO

June '25

+71

in 19 channels

Get PRO

May '25

+57

in 45 channels

Get PRO

April '25

+46

in 37 channels

Get PRO

March '25

+82

in 38 channels

Get PRO

February '25

+100

in 31 channels

Get PRO

January '25

+106

in 34 channels

Get PRO

December '24

+85

in 34 channels

Get PRO

November '24

+76

in 32 channels

Get PRO

October '24

+83

in 29 channels

Get PRO

September '24

+120

in 28 channels

Get PRO

August '24

+70

in 17 channels

Get PRO

July '24

+53

in 1 channels

Get PRO

June '24

+109

in 25 channels

Get PRO

May '24

+227

in 19 channels

Get PRO

April '24

+251

in 1 channels

Get PRO

March '24

+279

in 21 channels

Get PRO

February '24

+256

in 17 channels

Get PRO

January '24

+282

in 23 channels

Get PRO

December '23

+205

in 23 channels

Get PRO

November '23

+110

in 16 channels

Get PRO

October '23

+179

in 17 channels

Get PRO

September '23

+338

in 0 channels

Get PRO

August '23

+295

in 0 channels

Get PRO

July '23

+278

in 0 channels

Get PRO

June '23

+266

in 0 channels

Get PRO

May '23

+257

in 0 channels

Get PRO

April '23

+234

in 0 channels

Get PRO

March '23

+457

in 0 channels

Get PRO

February '23

+102

in 0 channels

Get PRO

January '23

+201

in 0 channels

Get PRO

December '22

+241

in 0 channels

Get PRO

November '22

+102

in 0 channels

Get PRO

October '22

+157

in 0 channels

Get PRO

September '22

+189

in 0 channels

Get PRO

August '22

+247

in 0 channels

Get PRO

July '22

+303

in 0 channels

Get PRO

June '22

+250

in 0 channels

Get PRO

May '22

+321

in 0 channels

Get PRO

April '22

+282

in 0 channels

Get PRO

March '22

+225

in 0 channels

Get PRO

February '22

+155

in 0 channels

Get PRO

January '22

+225

in 0 channels

Get PRO

December '21

+162

in 0 channels

Get PRO

November '21

+149

in 0 channels

Get PRO

October '21

+309

in 0 channels

Get PRO

September '21

+179

in 0 channels

Get PRO

August '21

+399

in 0 channels

Get PRO

July '21

+90

in 0 channels

Get PRO

June '21

+159

in 0 channels

Get PRO

May '21

+208

in 0 channels

Get PRO

April '21

+284

in 0 channels

Get PRO

March '21

+338

in 0 channels

Get PRO

February '21

+380

in 0 channels

Get PRO

January '21

+493

in 0 channels

Get PRO

December '20

+12 013

in 0 channels

Date	Subscriber Growth	Mentions	Channels
24 July	+3
23 July	+1
22 July	0
21 July	+1
20 July	0
19 July	+2
18 July	0
17 July	0
16 July	0
15 July	+3
14 July	+1
13 July	+1
12 July	0
11 July	0
10 July	0
09 July	+3
08 July	0
07 July	0
06 July	0
05 July	+1
04 July	0
03 July	+1
02 July	0
01 July	0

Channel Posts

🔎 Как "убить" ненужный console.log в проде — элегантно Многие забывают удалять console.log, warn, error перед продом. Это 💩 и баги безопасности, и просто шум. Есть изящное решение — удаление логов на этапе сборки. Для Vite / Rollup / esbuild / Terser — добавьте: 🔧 Terser (например, в Vite):


// vite.config.ts
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true,
  },
}

⚙️ Esbuild:


esbuild: {
  drop: ['console', 'debugger'],
}

💡 Совет: Если используете логгер типа logger.info(...), настройте статический анализ через Babel plugin или tree-shaking. Важно: не отключайте console.error на деве — это может скрыть критичные баги. 🧼 Чистый прод = меньше багов + быстрее загрузка 📲 Мы в MAX 👉 @frontend_1

2	JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript, как данные превращаются в интерфейс и почему для полноценного мини-приложения не всегда нужен фреймворк. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://vk.cc/cZMYJE Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576	474
3	🔥 useDeferredValue: плавный UX без костылей При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе. useDeferredValue из React решает эту проблему ✨ 🧠 Как это работает? Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно. const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); const filteredData = useMemo(() => { return heavyList.filter(item => item.includes(deferredQuery)); }, [deferredQuery]); ⚠️ Важно: useDeferredValue не откладывает сет стейт — он откладывает только чтение значения внутри зависимостей. 🚀 Идеально для: – Автокомплитов – Фильтрации больших списков – Любых дорогих вычислений при вводе 📚 Подробнее: https://react.dev/reference/react/useDeferredValue 📲 Мы в MAX 👉 @frontend_1	436
4	🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее. Вот пример, как улучшить UX форм без JS 👇 form:has(input:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } 📌 Что делает: Если в форме есть невалидный input, сабмит-кнопка становится неактивной. 💡 Применения :has(): - Показывать/прятать элементы в зависимости от вложенности; - Делать UI реактивным без JS; - Улучшать доступность форм и состояний. ✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй! 📲 Мы в MAX 👉 @frontend_1	521
5	🔥 useMemo vs useCallback — не путай! Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся: 🤯 В чём разница? - useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn(). - useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn. 💡 Когда использовать? - useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта: const filtered = useMemo(() => data.filter(i => i.active), [data]); - useCallback — если передаёшь функцию в дочерний компонент, чтобы избежать лишних ререндеров: const handleClick = useCallback(() => { console.log('clicked'); }, []); ⚠️ Антипаттерн const memoized = useMemo(() => () => doSomething(), []); Это просто useCallback(doSomething, []). Не усложняй 😄 🔁 Используй по назначению — и код будет быстрее и понятнее! 📲 Мы в MAX 👉 @frontend_1	550
6	🔥 Трюк с :has() в CSS: "Родительская магия" Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS! Пример: подсветить div, если внутри есть заполненный input: div:has(input:valid) { border: 2px solid green; } Или показать ошибку, если инпут невалиден: form:has(input:invalid) .error-message { display: block; } 📌 Зачем это нужно: - 💡 Упрощает логику UI без JS - 🚫 Убирает необходимость в лишних классах и хендлерах - 💪 Делает компоненты декларативнее и чище Проверить поддержку: https://caniuse.com/css-has 📲 Мы в MAX 👉 @frontend_1	583
7	Совет по HTML 💡 Возможно, ты не знал об этой HTML-сущности для вставки мягких переносов слов 🤩 📲 Мы в MAX 👉 @frontend_1	627
8	Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде. И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+rB_VRZXe78xlZTU6 Реклама, erid: 2W5zFHNcK8V ИП Галактионов Тихон Витальевич, ИНН 771618975809	697
9	Совет по JavaScript 💡 Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩 📲 Мы в MAX 👉 @frontend_1	702
10	🧠 KeyUX — это легковесный JavaScript-фреймворк для описания пользовательских интерфейсов через "ключи внимания". Он помогает разработчикам сосредоточиться на UX-логике, а не на структурной разметке UI. 🔹 Минимум кода 🔹 Управление вниманием пользователя через декларативные ключи 🔹 Подходит для сложных интерфейсов без необходимости создавать бесконечные состояния UI Пример кода: import { createApp } from 'keyux' createApp({ keys: { search: { on: 'input', effect: ({ value }) => console.log('Search:', value) } } }) https://github.com/ai/keyux 📲 Мы в MAX 👉 @frontend_1	847
11	🎯 CSS @scope: способ ограничить область действия стилей До сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть @scope. Что такое @scope? @scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM. @scope (.card) { h2 { color: red; } } Этот код применит красный цвет только к h2, находящимся внутри .card. Всё просто. Почему это важно? Ограничение области действия стилей: - делает код изолированным и предсказуемым, - предотвращает конфликты между компонентами, - упрощает поддержку и масштабирование CSS. Более сложный пример @scope (.card) to (.card-footer) { a { text-decoration: none; } } Здесь мы ограничиваем действие от .card до .card-footer. Стили будут применяться только к a, находящимся между этими двумя элементами в иерархии. Итого @scope — это шаг вперёд для масштабируемого CSS. Больше не нужно изобретать велосипеды с уникальными классами и перегрузками. Пишите локализованные стили — просто и прозрачно. https://12daysofweb.dev/2023/css-scope/ 📲 Мы в MAX 👉 @frontend_1	885
12	Совет по HTML 💡 Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩 📲 Мы в MAX 👉 @frontend_1	766
13	💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴 📲 Мы в MAX 👉 @frontend_1	852
14	Совет по JavaScript 💡 Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅ 📲 Мы в MAX 👉 @frontend_1	807
15	Совет по CSS 💡 Две строчки кода, чтобы изменить размер любого блочного элемента с помощью CSS. 📲 Мы в MAX 👉 @frontend_1	967
16	Совет по CSS 💡 Узнай, как легко можно использовать видео в качестве фона. 📲 Мы в MAX 👉 @frontend_1	956
17	Совет по HTML 💡 Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы? 📲 Мы в MAX 👉 @frontend_1	902
18	Как использовать зависящие от языка кавычки в CSS HTML имеет встроенную поддержку автоматических кавычек, которые зависят от языка. Вот пример: <q lang="en">Hello</q> <q lang="de">Hallo</q> <q lang="fr">Bonjour</q> Визуально результат будет таким: "Hello" „Hallo“ «Bonjour» И это работает и в CSS! Если вы используете селектор ::before и хотите добавить кавычки вручную, вы можете использовать значение open-quote для свойства content. q::before { content: open-quote; } q::after { content: close-quote; } Совместно с HTML-атрибутом lang, браузер сам позаботится о корректных кавычках. Это особенно полезно для многоязычных сайтов и повышает доступность. https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/ 📲 Мы в MAX 👉 @frontend_1	780
19	День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы. Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть! 👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFHXhJiu ИП Галактионов Тихон Витальевич, ИНН 771618975809	702
20	Cовет💡 Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы. 📲 Мы в MAX 👉 @frontend_1	728

View all posts