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

Open in Telegram

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

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

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

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

📊 Audience metrics and dynamics

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

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

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 7.51%. Within the first 24 hours after publication, content typically collects 3.59% reactions from the total number of subscribers.
Post reach: On average, each post receives 793 views. Within the first day, a publication typically gains 379 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 27 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 554

Subscribers

-224 hours

-107 days

-6430 days

793

Post views

~ 37924 hours

~ 44448 hours

7.51%

Engagement rate

No data

Posts per day

Ads index

beta

Data loading in progress...

Attracting Subscribers

July '26

+23

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
27 July	+2
26 July	0
25 July	+4
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

🔥 React: useEffect с async-функцией — антипаттерн! Многие пишут так:


useEffect(() => {
  async function fetchData() {
    const res = await fetch('/api/data')
    const json = await res.json()
    setData(json)
  }

  fetchData()
}, [])

💥 Это работает, но неявно. Возникают проблемы: - нет отмены запроса при анмаунте; - сложно обрабатывать race conditions; - нельзя обрабатывать ошибки на уровне useEffect. ✅ Лучше — использовать AbortController и обычную функцию:


useEffect(() => {
  const controller = new AbortController()

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err)
    })

  return () => controller.abort()
}, [])

🧠 Профит: - безопасное отключение; - контроль ошибок; - читаемый код. 📲 Мы в MAX 👉 @frontend_1

2	🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин https://max.ru/channel_win_sysadmin Системный Администратор Windows https://max.ru/channel_linux_admin Linux: Системный администратор https://max.ru/channel_linuxmod Linux https://max.ru/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП	340
3	🔎 Как "убить" ненужный 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	596
4	JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript, как данные превращаются в интерфейс и почему для полноценного мини-приложения не всегда нужен фреймворк. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://vk.cc/cZMYJE Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576	597
5	🔥 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	519
6	🔥 Трюк с :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	604
7	🔥 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	610
8	🔥 Трюк с :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	612
9	Совет по HTML 💡 Возможно, ты не знал об этой HTML-сущности для вставки мягких переносов слов 🤩 📲 Мы в MAX 👉 @frontend_1	662
10	Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде. И у тебя тоже получится 😎 У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме Подписывайся: https://t.me/+rB_VRZXe78xlZTU6 Реклама, erid: 2W5zFHNcK8V ИП Галактионов Тихон Витальевич, ИНН 771618975809	717
11	Совет по JavaScript 💡 Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩 📲 Мы в MAX 👉 @frontend_1	720
12	🧠 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	860
13	🎯 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	940
14	Совет по HTML 💡 Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩 📲 Мы в MAX 👉 @frontend_1	844
15	💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴 📲 Мы в MAX 👉 @frontend_1	865
16	Совет по JavaScript 💡 Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅ 📲 Мы в MAX 👉 @frontend_1	819
17	Совет по CSS 💡 Две строчки кода, чтобы изменить размер любого блочного элемента с помощью CSS. 📲 Мы в MAX 👉 @frontend_1	979
18	Совет по CSS 💡 Узнай, как легко можно использовать видео в качестве фона. 📲 Мы в MAX 👉 @frontend_1	970
19	Совет по HTML 💡 Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы? 📲 Мы в MAX 👉 @frontend_1	912
20	Как использовать зависящие от языка кавычки в 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	789

View all posts