Frontend разработчик
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
Показати більше📈 Аналітичний огляд Telegram-каналу Frontend разработчик
Канал Frontend разработчик (@frontend_1) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 10 607 підписників, посідаючи 11 534 місце в категорії Технології та додатки та 61 205 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 10 607 підписників.
За останніми даними від 29 червня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -69, а за останні 24 години на -1, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 8.02%. Протягом перших 24 годин після публікації контент зазвичай збирає 3.80% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 851 переглядів. Протягом першої доби публікація в середньому набирає 403 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 4.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як css, javascript, программист, интерфейс, developer.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
Завдяки високій частоті оновлень (останні дані отримано 30 червня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
Триває завантаження даних...
| Дата | Залучення підписників | Згадування | Канали | |
| 30 червня | +1 | |||
| 29 червня | 0 | |||
| 28 червня | 0 | |||
| 27 червня | 0 | |||
| 26 червня | +3 | |||
| 25 червня | 0 | |||
| 24 червня | 0 | |||
| 23 червня | +4 | |||
| 22 червня | 0 | |||
| 21 червня | 0 | |||
| 20 червня | 0 | |||
| 19 червня | 0 | |||
| 18 червня | +1 | |||
| 17 червня | 0 | |||
| 16 червня | +2 | |||
| 15 червня | +3 | |||
| 14 червня | 0 | |||
| 13 червня | 0 | |||
| 12 червня | +1 | |||
| 11 червня | +1 | |||
| 10 червня | 0 | |||
| 09 червня | +3 | |||
| 08 червня | +1 | |||
| 07 червня | +1 | |||
| 06 червня | +1 | |||
| 05 червня | +2 | |||
| 04 червня | 0 | |||
| 03 червня | +2 | |||
| 02 червня | +1 | |||
| 01 червня | 0 |
<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| 2 | День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.
Реклама, erid: 2W5zFHXhJiu ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 260 |
| 3 | Cовет💡
Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.
📲 Мы в MAX
👉 @frontend_1 | 381 |
| 4 | 📌Как работает Javascript: шпаргалка для разработчика
🔹 Интерпретируемый язык
JavaScript выполняется браузером или движком JavaScript, а не компилируется заранее в машинный код. Это делает его высоко портируемым между платформами. Современные движки, такие как V8, используют технологию Just-In-Time (JIT) для компиляции кода непосредственно в исполняемый машинный код.
🔹 Функции — объекты первого класса
В JavaScript функции рассматриваются как объекты первого класса, что означает, что их можно хранить в переменных, передавать в качестве аргументов другим функциям и возвращать из функций.
🔹 Динамическая типизация
JavaScript — это язык с динамической (слабой) типизацией, что означает, что тип переменной можно не объявлять заранее, и он может изменяться во время выполнения программы.
🔹 Клиентская (асинхронная) обработка
JavaScript поддерживает асинхронное программирование, позволяя выполнять операции, такие как чтение файлов, HTTP-запросы или взаимодействие с базами данных, в фоновом режиме. Эти операции запускают коллбэки или промисы по завершении, что особенно полезно для веб-разработки, повышая производительность и удобство использования.
🔹 Прототипное ООП
В отличие от классического объектно-ориентированного программирования, JavaScript использует прототипное наследование. Это означает, что объекты могут наследовать свойства и методы от других объектов, а не от классов.
🔹 Автоматическая сборка мусора
JavaScript автоматически управляет памятью, удаляя объекты, которые больше не используются программой. Это помогает предотвращать утечки памяти и оптимизировать производительность приложения.
🔹 Сравнение с другими языками
JavaScript отличается от таких языков, как Python или Java, своей ключевой ролью в веб-разработке.
- Python известен своей читаемостью кода и универсальностью.
- Java славится строгой структурой и надежностью.
- JavaScript, в свою очередь, является интерпретируемым языком, который работает непосредственно в браузере без необходимости компиляции, что делает его гибким и динамичным.
🔹 Связь с TypeScript
TypeScript является надмножеством JavaScript, добавляя в него новые возможности, в том числе аннотации типов. Это означает, что любой корректный JavaScript-код также будет валидным TypeScript-кодом.
🔹 Популярные фреймворки JavaScript
- React — гибкий, с большим количеством плагинов, созданных сообществом.
- Vue — чистый и интуитивно понятный, с хорошо интегрированными реактивными возможностями.
- Angular — строгий в плане структуры, идеально подходит для корпоративной разработки.
📲 Мы в MAX
👉 @frontend_1 | 438 |
| 5 | 🚀 Подборка полезных 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 Типичный Сисадмин
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
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 Обучающие видео, книги по Физике и Математике
Вакансии 📌
https://max.ru/progjob Вакансии в IT
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП | 401 |
| 6 | Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀.
📲 Мы в MAX
👉 @frontend_1 | 546 |
| 7 | Card :hover spotlight effect with background-attachment 🤙
Используем background-attachment, чтобы прикрепить фон к области просмотра
https://codepen.io/jh3y/pen/RwqZNKa
📲 Мы в MAX
👉 @frontend_1 | 661 |
| 8 | CSS Совет 💡
Возможно, ты не знал об этом более удобном и понятном синтаксисе для диапазонов в медиазапросах 🤩
📲 Мы в MAX
👉 @frontend_1 | 656 |
| 9 | Синхронизация React с API браузера
📲 Мы в MAX
👉 @frontend_1 | 686 |
| 10 | 📌 Как работать с em и rem в CSS?
Данный пост о двух важных единицах измерения в CSS — em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна!
🔹 em — зависит от родительского элемента
em — это относительная единица, которая зависит от размера шрифта родителя. Например:
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
Здесь 1.5em означает 1.5 * 20px = 30px.
⚠️ Будьте осторожны! Использование em для вложенных элементов может привести к неожиданному увеличению шрифта.
🔹 rem — зависит от корневого элемента
В отличие от em, rem (root em) всегда рассчитывается относительно font-size у <html>. Например:
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 24px */
}
Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя!
🧐 Что выбрать?
✔ rem — удобен для глобального масштабирования (например, для всей страницы).
✔ em — полезен для элементов внутри компонентов (например, padding, margin).
А вы чаще используете em или rem? Напишите в комментариях!
📲 Мы в MAX
👉 @frontend_1 | 678 |
| 11 | Сохрани эти 4 CSS-анимации для своего следующего проекта 👨💻
📲 Мы в MAX
👉 @frontend_1 | 619 |
| 12 | День сурка frontend-разработчика
Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.
Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.
И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.
Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂
А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.
Реклама, erid: 2W5zFJkdcAV ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 618 |
| 13 | 💡 Простой кейс создания закругленных углов в CSS
📲 Мы в MAX
👉 @frontend_1 | 576 |
| 14 | 7 способов скрыть элемент с помощью CSS 🎨💻
Разбираем 7 различных методов скрытия элементов в CSS и их особенности! 🔥
1️⃣ Использование display
.hide {
display: none;
}
❌ Не видно скринридерам
❌ Не занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется
📌 Использование: Полное скрытие элементов, например, скрытие полей в зависимости от выбранного метода оплаты.
2️⃣ Использование visibility
.hide {
visibility: hidden;
}
✅ Видимо скринридерам
✅ Занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется
📌 Использование: Для скрытия сообщений об ошибках под формами.
3️⃣ Использование opacity
.hide {
opacity: 0;
}
✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
✅ Принимает события мыши
✅ Анимируется
📌 Использование: Например, для скрытия ссылок, которые появляются при наведении.
4️⃣ Использование scale
.hide {
transform: scale(0);
}
✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется
📌 Использование: Для скрытия элементов в анимации увеличения.
5️⃣ Использование translate
.hide {
transform: translateX(-9999px);
}
✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется
📌 Использование: Например, для бокового меню на мобильных сайтах в сочетании с position: absolute.
6️⃣ Использование clip-path
.hide {
clip-path: circle(0);
}
✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется
📌 Использование: Можно скрывать элементы полностью, но они остаются доступными для скринридеров.
7️⃣ Использование position absolute
.hide {
position: absolute;
left: -9999px;
}
✅ Видимо скринридерам
❌ Не занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется
📌 Использование: Полезно для навигации скринридеров (например, ссылка «Пропустить к содержимому»).
🔥 Бонус: скрытие элемента визуально, но доступность для скринридеров!
Используем CSS-хак, чтобы элемент был скрыт, но оставался доступным:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
clip-path: circle(0);
clip: rect(0 0 0 0); /* для IE */
}
📌 Использование: Например, для скрытия <h1>, если логотип используется в качестве заголовка.
💡 Подписывайтесь, чтобы получать больше полезных лайфхаков по CSS и фронтенду! 🚀✨
📲 Мы в MAX
👉 @frontend_1 | 519 |
| 15 | Совет по Javascript 💡
Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.
📲 Мы в MAX
👉 @frontend_1 | 604 |
| 16 | 🚀 Подборка полезных 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 Типичный Сисадмин
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
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 Обучающие видео, книги по Физике и Математике
Вакансии 📌
https://max.ru/progjob Вакансии в IT
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП | 601 |
| 17 | Шпаргалка по выравниванию в CSS Grid 👨💻
📲 Мы в MAX
👉 @frontend_1 | 805 |
| 18 | 🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot | 840 |
| 19 | Совет по JavaScript 💡
Упрощайте группировку данных с помощью Object.groupBy() или Map.groupBy() 🤩
📲 Мы в MAX
👉 @frontend_1 | 950 |
| 20 | Runtime Compatibility: Инструмент для проверки совместимости JavaScript-кода с окружением
Это полезный инструмент, который позволяет проверить, какие JavaScript-фичи поддерживаются в разных средах выполнения (Node.js, браузеры и т. д.).
Что он умеет?
🔹 Анализирует ваш код и определяет, какие функции и синтаксис могут быть несовместимы с заданным окружением.
🔹 Поддерживает Node.js, браузеры, Cloudflare Workers, Deno и другие рантаймы.
🔹 Может использоваться как CLI или в виде онлайн-инструмента.
Кому это полезно?
✅ Разработчикам, которым нужно убедиться, что их код работает на разных платформах.
✅ Тем, кто использует ES модули, топ-уровневый await, новые API и хочет избежать проблем с несовместимостью.
✅ Разработчикам библиотек, чтобы проверять поддержку своих пакетов.
Если пишете код, который должен работать в разных окружениях — попробуйте Runtime Compatibility! 🚀
https://runtime-compat.unjs.io/
📲 Мы в MAX
👉 @frontend_1 | 860 |
Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
