Frontend разработчик
Kanalga Telegram’da o‘tish
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Frontend разработчик analitikasi
Frontend разработчик (@frontend_1) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 10 561 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 11 528-o'rinni va Rossiya mintaqasida 61 252-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 10 561 obunachiga ega bo‘ldi.
21 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -73 ga, so‘nggi 24 soatda esa -2 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 7.54% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 3.35% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 796 marta ko‘riladi; birinchi sutkada odatda 354 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent css, javascript, программист, интерфейс, developer kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 22 Iyul, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
10 561
Obunachilar
-224 soatlar
-197 kunlar
-7330 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Iyul '26
Iyul '26
+13
0 kanalda
Iyun '26
+27
0 kanalda
Get PRO
May '26
+70
0 kanalda
Get PRO
Aprel '26
+27
0 kanalda
Get PRO
Mart '26
+16
0 kanalda
Get PRO
Fevral '26
+29
0 kanalda
Get PRO
Yanvar '26
+19
0 kanalda
Get PRO
Dekabr '25
+29
0 kanalda
Get PRO
Noyabr '25
+45
31 kanalda
Get PRO
Oktabr '25
+19
0 kanalda
Get PRO
Sentabr '25
+58
36 kanalda
Get PRO
Avgust '25
+35
1 kanalda
Get PRO
Iyul '25
+58
26 kanalda
Get PRO
Iyun '25
+71
19 kanalda
Get PRO
May '25
+57
45 kanalda
Get PRO
Aprel '25
+46
37 kanalda
Get PRO
Mart '25
+82
38 kanalda
Get PRO
Fevral '25
+100
31 kanalda
Get PRO
Yanvar '25
+106
34 kanalda
Get PRO
Dekabr '24
+85
34 kanalda
Get PRO
Noyabr '24
+76
32 kanalda
Get PRO
Oktabr '24
+83
29 kanalda
Get PRO
Sentabr '24
+120
28 kanalda
Get PRO
Avgust '24
+70
17 kanalda
Get PRO
Iyul '24
+53
1 kanalda
Get PRO
Iyun '24
+109
25 kanalda
Get PRO
May '24
+227
19 kanalda
Get PRO
Aprel '24
+251
1 kanalda
Get PRO
Mart '24
+279
21 kanalda
Get PRO
Fevral '24
+256
17 kanalda
Get PRO
Yanvar '24
+282
23 kanalda
Get PRO
Dekabr '23
+205
23 kanalda
Get PRO
Noyabr '23
+110
16 kanalda
Get PRO
Oktabr '23
+179
17 kanalda
Get PRO
Sentabr '23
+338
0 kanalda
Get PRO
Avgust '23
+295
0 kanalda
Get PRO
Iyul '23
+278
0 kanalda
Get PRO
Iyun '23
+266
0 kanalda
Get PRO
May '23
+257
0 kanalda
Get PRO
Aprel '23
+234
0 kanalda
Get PRO
Mart '23
+457
0 kanalda
Get PRO
Fevral '23
+102
0 kanalda
Get PRO
Yanvar '23
+201
0 kanalda
Get PRO
Dekabr '22
+241
0 kanalda
Get PRO
Noyabr '22
+102
0 kanalda
Get PRO
Oktabr '22
+157
0 kanalda
Get PRO
Sentabr '22
+189
0 kanalda
Get PRO
Avgust '22
+247
0 kanalda
Get PRO
Iyul '22
+303
0 kanalda
Get PRO
Iyun '22
+250
0 kanalda
Get PRO
May '22
+321
0 kanalda
Get PRO
Aprel '22
+282
0 kanalda
Get PRO
Mart '22
+225
0 kanalda
Get PRO
Fevral '22
+155
0 kanalda
Get PRO
Yanvar '22
+225
0 kanalda
Get PRO
Dekabr '21
+162
0 kanalda
Get PRO
Noyabr '21
+149
0 kanalda
Get PRO
Oktabr '21
+309
0 kanalda
Get PRO
Sentabr '21
+179
0 kanalda
Get PRO
Avgust '21
+399
0 kanalda
Get PRO
Iyul '21
+90
0 kanalda
Get PRO
Iyun '21
+159
0 kanalda
Get PRO
May '21
+208
0 kanalda
Get PRO
Aprel '21
+284
0 kanalda
Get PRO
Mart '21
+338
0 kanalda
Get PRO
Fevral '21
+380
0 kanalda
Get PRO
Yanvar '21
+493
0 kanalda
Get PRO
Dekabr '20
+12 013
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 22 Iyul | 0 | |||
| 21 Iyul | +1 | |||
| 20 Iyul | 0 | |||
| 19 Iyul | +2 | |||
| 18 Iyul | 0 | |||
| 17 Iyul | 0 | |||
| 16 Iyul | 0 | |||
| 15 Iyul | +3 | |||
| 14 Iyul | +1 | |||
| 13 Iyul | +1 | |||
| 12 Iyul | 0 | |||
| 11 Iyul | 0 | |||
| 10 Iyul | 0 | |||
| 09 Iyul | +3 | |||
| 08 Iyul | 0 | |||
| 07 Iyul | 0 | |||
| 06 Iyul | 0 | |||
| 05 Iyul | +1 | |||
| 04 Iyul | 0 | |||
| 03 Iyul | +1 | |||
| 02 Iyul | 0 | |||
| 01 Iyul | 0 |
Kanal postlari
🔎 Как "убить" ненужный
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 |
