Frontend разработчик
Ir al canal en Telegram
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
Mostrar más
Red:📈 Análisis del canal de Telegram Frontend разработчик
El canal Frontend разработчик (@frontend_1) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 10 561 suscriptores, ocupando la posición 11 528 en la categoría Tecnologías y Aplicaciones y el puesto 61 252 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 10 561 suscriptores.
Según los últimos datos del 21 julio, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -73, y en las últimas 24 horas de -2, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 7.54%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 3.35% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 796 visualizaciones. En el primer día suele acumular 354 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 4.
- Intereses temáticos: El contenido se centra en temas clave como css, javascript, программист, интерфейс, developer.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 22 julio, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
10 561
Suscriptores
-224 horas
-197 días
-7330 días
Carga de datos en curso...
Canales Similares
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
julio '26
julio '26
+13
en 0 canales
junio '26
+27
en 0 canales
Get PRO
mayo '26
+70
en 0 canales
Get PRO
abril '26
+27
en 0 canales
Get PRO
marzo '26
+16
en 0 canales
Get PRO
febrero '26
+29
en 0 canales
Get PRO
enero '26
+19
en 0 canales
Get PRO
diciembre '25
+29
en 0 canales
Get PRO
noviembre '25
+45
en 31 canales
Get PRO
octubre '25
+19
en 0 canales
Get PRO
septiembre '25
+58
en 36 canales
Get PRO
agosto '25
+35
en 1 canales
Get PRO
julio '25
+58
en 26 canales
Get PRO
junio '25
+71
en 19 canales
Get PRO
mayo '25
+57
en 45 canales
Get PRO
abril '25
+46
en 37 canales
Get PRO
marzo '25
+82
en 38 canales
Get PRO
febrero '25
+100
en 31 canales
Get PRO
enero '25
+106
en 34 canales
Get PRO
diciembre '24
+85
en 34 canales
Get PRO
noviembre '24
+76
en 32 canales
Get PRO
octubre '24
+83
en 29 canales
Get PRO
septiembre '24
+120
en 28 canales
Get PRO
agosto '24
+70
en 17 canales
Get PRO
julio '24
+53
en 1 canales
Get PRO
junio '24
+109
en 25 canales
Get PRO
mayo '24
+227
en 19 canales
Get PRO
abril '24
+251
en 1 canales
Get PRO
marzo '24
+279
en 21 canales
Get PRO
febrero '24
+256
en 17 canales
Get PRO
enero '24
+282
en 23 canales
Get PRO
diciembre '23
+205
en 23 canales
Get PRO
noviembre '23
+110
en 16 canales
Get PRO
octubre '23
+179
en 17 canales
Get PRO
septiembre '23
+338
en 0 canales
Get PRO
agosto '23
+295
en 0 canales
Get PRO
julio '23
+278
en 0 canales
Get PRO
junio '23
+266
en 0 canales
Get PRO
mayo '23
+257
en 0 canales
Get PRO
abril '23
+234
en 0 canales
Get PRO
marzo '23
+457
en 0 canales
Get PRO
febrero '23
+102
en 0 canales
Get PRO
enero '23
+201
en 0 canales
Get PRO
diciembre '22
+241
en 0 canales
Get PRO
noviembre '22
+102
en 0 canales
Get PRO
octubre '22
+157
en 0 canales
Get PRO
septiembre '22
+189
en 0 canales
Get PRO
agosto '22
+247
en 0 canales
Get PRO
julio '22
+303
en 0 canales
Get PRO
junio '22
+250
en 0 canales
Get PRO
mayo '22
+321
en 0 canales
Get PRO
abril '22
+282
en 0 canales
Get PRO
marzo '22
+225
en 0 canales
Get PRO
febrero '22
+155
en 0 canales
Get PRO
enero '22
+225
en 0 canales
Get PRO
diciembre '21
+162
en 0 canales
Get PRO
noviembre '21
+149
en 0 canales
Get PRO
octubre '21
+309
en 0 canales
Get PRO
septiembre '21
+179
en 0 canales
Get PRO
agosto '21
+399
en 0 canales
Get PRO
julio '21
+90
en 0 canales
Get PRO
junio '21
+159
en 0 canales
Get PRO
mayo '21
+208
en 0 canales
Get PRO
abril '21
+284
en 0 canales
Get PRO
marzo '21
+338
en 0 canales
Get PRO
febrero '21
+380
en 0 canales
Get PRO
enero '21
+493
en 0 canales
Get PRO
diciembre '20
+12 013
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 22 julio | 0 | |||
| 21 julio | +1 | |||
| 20 julio | 0 | |||
| 19 julio | +2 | |||
| 18 julio | 0 | |||
| 17 julio | 0 | |||
| 16 julio | 0 | |||
| 15 julio | +3 | |||
| 14 julio | +1 | |||
| 13 julio | +1 | |||
| 12 julio | 0 | |||
| 11 julio | 0 | |||
| 10 julio | 0 | |||
| 09 julio | +3 | |||
| 08 julio | 0 | |||
| 07 julio | 0 | |||
| 06 julio | 0 | |||
| 05 julio | +1 | |||
| 04 julio | 0 | |||
| 03 julio | +1 | |||
| 02 julio | 0 | |||
| 01 julio | 0 |
Publicaciones del Canal
🔎 Как "убить" ненужный
console.log в проде — элегантно
Многие забывают удалять console.log, warn, error перед продом. Это 💩 и баги безопасности, и просто шум. Есть изящное решение — удаление логов на этапе сборки.
Для Vite / Rollup / esbuild / Terser — добавьте:
🔧 Terser (например, в Vite):
// vite.config.ts
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
}
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 | 349 |
| 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 | 348 |
| 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 | 448 |
| 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 | 492 |
| 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 | 540 |
| 7 |  Совет по HTML 💡
Возможно, ты не знал об этой HTML-сущности для вставки мягких переносов слов 🤩
📲 Мы в MAX
👉 @frontend_1 | 592 |
| 8 |  Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?
На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂
👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.
В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.
И у тебя тоже получится 😎
У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров
И регулярно выкладываю полезное:
▪️ Задачи, на которых валятся кандидаты
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️ 100 вопросов, которые помогут тебе на собеседовании
▪️ Чек-лист для проверки своего резюме
Подписывайся: https://t.me/+rB_VRZXe78xlZTU6
Реклама, erid: 2W5zFHNcK8V ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 646 |
| 9 |  Совет по JavaScript 💡
Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩
📲 Мы в MAX
👉 @frontend_1 | 655 |
| 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 | 789 |
| 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 | 864 |
| 12 |  Совет по HTML 💡
Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩
📲 Мы в MAX
👉 @frontend_1 | 750 |
| 13 |  💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴
📲 Мы в MAX
👉 @frontend_1 | 785 |
| 14 |  Совет по JavaScript 💡
Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅
📲 Мы в MAX
👉 @frontend_1 | 788 |
| 15 |  Совет по CSS 💡
Две строчки кода, чтобы изменить размер любого блочного элемента с помощью CSS.
📲 Мы в MAX
👉 @frontend_1 | 932 |
| 16 |  Совет по CSS 💡
Узнай, как легко можно использовать видео в качестве фона.
📲 Мы в MAX
👉 @frontend_1 | 929 |
| 17 |  Совет по HTML 💡
Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?
📲 Мы в MAX
👉 @frontend_1 | 888 |
| 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 | 771 |
| 19 |  День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.
Реклама, erid: 2W5zFHXhJiu ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 695 |
| 20 |  Cовет💡
Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.
📲 Мы в MAX
👉 @frontend_1 | 719 |
