Frontend разработчик
رفتن به کانال در Telegram
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
نمایش بیشتر
شبکه:📈 تحلیل کانال تلگرام Frontend разработчик
کانال Frontend разработчик (@frontend_1) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 10 562 مشترک است و جایگاه 11 556 را در دسته فناوری و برنامهها و رتبه 61 218 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 10 562 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 23 ژوئیه, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -71 و در ۲۴ ساعت گذشته برابر -1 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 8.01% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 3.36% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 846 بازدید دریافت میکند. در اولین روز معمولاً 355 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 4 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, javascript, программист, интерфейс, developer تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 24 ژوئیه, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
10 562
مشترکین
-124 ساعت
-197 روز
-7130 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
ژوئیه '26
ژوئیه '26
+17
در 0 کانالها
ژوئن '26
+27
در 0 کانالها
Get PRO
مه '26
+70
در 0 کانالها
Get PRO
آوریل '26
+27
در 0 کانالها
Get PRO
مارس '26
+16
در 0 کانالها
Get PRO
فوریه '26
+29
در 0 کانالها
Get PRO
ژانویه '26
+19
در 0 کانالها
Get PRO
دسامبر '25
+29
در 0 کانالها
Get PRO
نوامبر '25
+45
در 31 کانالها
Get PRO
اکتبر '25
+19
در 0 کانالها
Get PRO
سپتامبر '25
+58
در 36 کانالها
Get PRO
اوت '25
+35
در 1 کانالها
Get PRO
ژوئیه '25
+58
در 26 کانالها
Get PRO
ژوئن '25
+71
در 19 کانالها
Get PRO
مه '25
+57
در 45 کانالها
Get PRO
آوریل '25
+46
در 37 کانالها
Get PRO
مارس '25
+82
در 38 کانالها
Get PRO
فوریه '25
+100
در 31 کانالها
Get PRO
ژانویه '25
+106
در 34 کانالها
Get PRO
دسامبر '24
+85
در 34 کانالها
Get PRO
نوامبر '24
+76
در 32 کانالها
Get PRO
اکتبر '24
+83
در 29 کانالها
Get PRO
سپتامبر '24
+120
در 28 کانالها
Get PRO
اوت '24
+70
در 17 کانالها
Get PRO
ژوئیه '24
+53
در 1 کانالها
Get PRO
ژوئن '24
+109
در 25 کانالها
Get PRO
مه '24
+227
در 19 کانالها
Get PRO
آوریل '24
+251
در 1 کانالها
Get PRO
مارس '24
+279
در 21 کانالها
Get PRO
فوریه '24
+256
در 17 کانالها
Get PRO
ژانویه '24
+282
در 23 کانالها
Get PRO
دسامبر '23
+205
در 23 کانالها
Get PRO
نوامبر '23
+110
در 16 کانالها
Get PRO
اکتبر '23
+179
در 17 کانالها
Get PRO
سپتامبر '23
+338
در 0 کانالها
Get PRO
اوت '23
+295
در 0 کانالها
Get PRO
ژوئیه '23
+278
در 0 کانالها
Get PRO
ژوئن '23
+266
در 0 کانالها
Get PRO
مه '23
+257
در 0 کانالها
Get PRO
آوریل '23
+234
در 0 کانالها
Get PRO
مارس '23
+457
در 0 کانالها
Get PRO
فوریه '23
+102
در 0 کانالها
Get PRO
ژانویه '23
+201
در 0 کانالها
Get PRO
دسامبر '22
+241
در 0 کانالها
Get PRO
نوامبر '22
+102
در 0 کانالها
Get PRO
اکتبر '22
+157
در 0 کانالها
Get PRO
سپتامبر '22
+189
در 0 کانالها
Get PRO
اوت '22
+247
در 0 کانالها
Get PRO
ژوئیه '22
+303
در 0 کانالها
Get PRO
ژوئن '22
+250
در 0 کانالها
Get PRO
مه '22
+321
در 0 کانالها
Get PRO
آوریل '22
+282
در 0 کانالها
Get PRO
مارس '22
+225
در 0 کانالها
Get PRO
فوریه '22
+155
در 0 کانالها
Get PRO
ژانویه '22
+225
در 0 کانالها
Get PRO
دسامبر '21
+162
در 0 کانالها
Get PRO
نوامبر '21
+149
در 0 کانالها
Get PRO
اکتبر '21
+309
در 0 کانالها
Get PRO
سپتامبر '21
+179
در 0 کانالها
Get PRO
اوت '21
+399
در 0 کانالها
Get PRO
ژوئیه '21
+90
در 0 کانالها
Get PRO
ژوئن '21
+159
در 0 کانالها
Get PRO
مه '21
+208
در 0 کانالها
Get PRO
آوریل '21
+284
در 0 کانالها
Get PRO
مارس '21
+338
در 0 کانالها
Get PRO
فوریه '21
+380
در 0 کانالها
Get PRO
ژانویه '21
+493
در 0 کانالها
Get PRO
دسامبر '20
+12 013
در 0 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 24 ژوئیه | +3 | |||
| 23 ژوئیه | +1 | |||
| 22 ژوئیه | 0 | |||
| 21 ژوئیه | +1 | |||
| 20 ژوئیه | 0 | |||
| 19 ژوئیه | +2 | |||
| 18 ژوئیه | 0 | |||
| 17 ژوئیه | 0 | |||
| 16 ژوئیه | 0 | |||
| 15 ژوئیه | +3 | |||
| 14 ژوئیه | +1 | |||
| 13 ژوئیه | +1 | |||
| 12 ژوئیه | 0 | |||
| 11 ژوئیه | 0 | |||
| 10 ژوئیه | 0 | |||
| 09 ژوئیه | +3 | |||
| 08 ژوئیه | 0 | |||
| 07 ژوئیه | 0 | |||
| 06 ژوئیه | 0 | |||
| 05 ژوئیه | +1 | |||
| 04 ژوئیه | 0 | |||
| 03 ژوئیه | +1 | |||
| 02 ژوئیه | 0 | |||
| 01 ژوئیه | 0 |
پستهای کانال
🔎 Как "убить" ненужный
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 | 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 |
