Senior Frontend - javascript, html, css
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
نمایش بیشتر📈 تحلیل کانال تلگرام Senior Frontend - javascript, html, css
کانال Senior Frontend - javascript, html, css (@seniorfront) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 23 831 مشترک است و جایگاه 5 460 را در دسته فناوری و برنامهها و رتبه 27 342 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 23 831 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 05 اکتبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -240 و در ۲۴ ساعت گذشته برابر -10 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 5.75% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 2.80% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 1 371 بازدید دریافت میکند. در اولین روز معمولاً 667 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 5 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, node.js, api, архитектура, html تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 06 اکتبر, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
در حال بارگیری داده...
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 07 اکتبر | +2 | |||
| 06 اکتبر | +3 | |||
| 05 اکتبر | +5 | |||
| 04 اکتبر | +3 | |||
| 03 اکتبر | +4 | |||
| 02 اکتبر | +5 | |||
| 01 اکتبر | +3 |
html,
body {
height: 100%;
overflow-x: hidden;
}
Из-за overflow-x: hidden по вертикали у body получается auto. А height: 100% делает body ровно в высоту экрана. Теперь прокручивается body, а не страница. Внешне всё как раньше, ошибок нет.
Проверить просто: прокрутите вниз и выполните в консоли window.scrollY. Ноль значит, что скроллится что-то другое.
Вложенные контейнеры прокрутки сами по себе нормальны, например для сайдбара или чата. Проблема, только когда такой контейнер занимает весь экран.
В статье разобрано, как сделать липкую шапку, футер внизу и блокировку прокрутки под модалкой, не теряя root scroller.
👉 @seniorFront| 2 | ✨ Одна и та же CSS-переменная может дать 1, а может 2
Кастомные свойства вроде --index по умолчанию хранятся как кусок текста. Вычисляется он там, где переменную подставили через var(), а не там, где объявили.
Пример Джейка Арчибальда. У второго div задано --index: sibling-index() (номер элемента среди соседей, с единицы). Его первый ребёнок, абзац, получает scale: var(--index). Масштаб будет 1: функция считается уже для абзаца.
Теперь зарегистрируем свойство с типом:
@property --index { syntax: '<number>'; inherits: true; initial-value: 0;}
Значение вычислится прямо на div и станет числом 2, абзац увеличится вдвое. С em, lh и единицами контейнерных запросов то же правило.
Но var() внутри значения подставляется сразу при любом типе. Если в --index есть var(--multiplier), переопределять --multiplier у ребёнка бесполезно.
А что при этом происходит с URL из разных таблиц стилей, разобрано в статье.
👉 @seniorFront | 888 |
| 3 | 🎉 iframe, который сам подстраивается под содержимое
Обычно у <iframe> фиксированный размер. Встроенная форма или виджет комментариев выросли, и появляется полоса прокрутки.
В Chrome 154 фрейм умеет брать размер из встроенного документа. Нужно согласие обеих сторон. Внешняя страница задаёт фрейму свойство frame-sizing:
/* In styles.css for index.html */
iframe {
frame-sizing: content-height;
width: 100%;
}
А документ внутри фрейма кладёт в head мета-тег responsive-embedded-sizing. Его параметр allow-origins ограничивает, каким сайтам можно сообщать размер.
Размер передаётся после загрузки. Если содержимое изменилось, документ вызывает window.requestResize().
Пока это есть только в Chrome 154, в Firefox и Safari поддержки нет.
В статье есть демо: многошаговая форма во фрейме, которая меняет размер на каждом шаге без единой полосы прокрутки.
👉 @seniorFront | 1 223 |
| 4 | ⚽ Одна обёртка, две стороны сетки: турнирная таблица на subgrid
Турнирную сетку плей-офф рисуют симметрично: часть пар раунда слева, часть справа. На сайте FIFA каждая такая половина свёрстана отдельным div, и разметка просто повторяет картинку.
Есть вариант чище. Раунд остаётся одним элементом с детьми .start и .end. Он растягивается на всю общую сетку .rounds и через subgrid получает её колонки и строки:
.round-of-8 {
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
Теперь .start встаёт в первую колонку, а .end в последнюю, хотя в DOM они соседи.
Подвох в выравнивании: align-items: center не ставит матчи соседних раундов друг напротив друга. Помогает flex: 1 у каждого матча внутри flex-колонок .start и .end, чтобы матчи делили высоту поровну.
А в статье видно, как та же разметка на узком экране перестраивается так, что каждый раунд занимает одну колонку.
👉 @seniorFront | 1 220 |
| 5 | 3 дня бесплатного обучения во Frontend-разработке!
Вместо лекций пройди симуляцию настоящего первого заказа. Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент.
За 3 дня ты:
- Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML;
- Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS;
- Добавишь на страницу интерактивность с JavaScript — нажал → сработало;
- Внесёшь финальную правку и сдашь готовый проект;
- Заберёшь сайт себе. Можно оформить как кейс в портфолио.
С нас — задача, подсказки на каждом шаге и разбор, если что-то не получается.
С тебя — 20–30 минут в день.
👉 Начать бесплатно
К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT. | 1 075 |
| 6 | ✨ Как не оставить один пункт меню одного на новой строке
Когда во флексбоксе включён перенос (flex-wrap: wrap), элементы уходят на следующую строку, как только перестают помещаться. Бывает, что там оказывается ровно один: пять пунктов меню сверху и одинокий «Speaking» снизу.
Обычно это чинят медиазапросом, но он легко ломается, стоит поменять текст. Новое значение flex-wrap: balance делает иначе: браузер сам раскладывает элементы по строкам ровнее, без расчётов ширины.
.channels {
display: flex;
flex-wrap: balance;
justify-content: center;
gap: 1rem;
}
Для сравнения: тот же ряд иконок соцсетей без balance приходится выравнивать обходными путями, от контейнерных запросов до display: contents. Все четыре варианта из разбора заметно длиннее.
Оговорка: на момент публикации это работает только в Chrome, начиная со 150-й версии.
Рядом появилось ещё свойство flex-line-count, которое задаёт минимальное число строк, и на нём получается даже экспериментальная masonry-раскладка.
👉 @seniorFront | 1 091 |
| 7 | 📦 Почему карточка ломается на широком мониторе
Медиазапрос @media знает только ширину окна. Положите карточку в колонку 300px на экране 1920px, и правило min-width: 1024px всё равно сработает. Карточка получит широкую раскладку и начнёт сжиматься и вылезать за края.
Контейнерный запрос @container спрашивает другое: сколько места у компонента именно здесь. Обёртку объявляем контейнером, а стили карточки завязываем на её ширину:
.card-wrapper {
container-name: card;
container-type: inline-size;
}
@container card (min-width: 450px) {
.card {
display: flex;
flex-direction: row;
}
}
Теперь карточка встаёт в ряд, только если у обёртки есть 450px по горизонтали. Хоть на телефоне, хоть в узком сайдбаре десктопа.
Подвох: контейнер не может запрашивать сам себя. Чтобы менять .card, её нужно обернуть ещё одним элементом.
В статье ещё типографика на единицах cqi и способ поймать перенос строки во flexbox без JavaScript.
👉 @seniorFront | 1 148 |
| 8 | Ищете облачную платформу? Есть Beget
✅ Аптайм 99,98% в дата-центрах Tier III
✅ Техподдержка 24/7 — живые люди, без ботов
✅ Прозрачная оплата без скрытых платежей
✅ Более 200 000 клиентов доверяют Beget
Узнать больше | 818 |
| 9 | ✅ Свой чекбокс, который не ломает фокус
Родной чекбокс в CSS почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают.
Приём простой: настоящий <input> не прячут, а кладут внутрь span с рамкой, снимают родной вид и растягивают поверх коробки:
.checkbox input {
margin: 0;
width: 100%;
height: 100%;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-radius: 0.2em;
}
Его не видно, но он по-прежнему получает фокус и рисует кольцо фокуса. Галочка — отдельная SVG рядом, появляется по селектору input:checked + svg.
Оговорка: для промежуточного состояния нужна ещё одна SVG, которую переключают.
Тот же код подходит для радиокнопок и масштабируется одним font-size.
👉 @seniorFront | 1 263 |
| 10 | 🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew
AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы.
Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.
💬 Какие темы ждут участников сезона с 5 по 9 октября:
🔴 AI Coding и подготовка репозитория к работе с AI
🔴 Spec Kit для разработки интерфейсов
🔴 Агентная разработка в закрытом контуре
🔴 WebMCP как дополнительный harness
🔴 AI-дизайн и его место в процессе разработки.
Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами.
Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону.
Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.
👉 Билеты на сезон | 1 549 |
| 11 | C# есть — не хватает целостности веб-разработки?
Курс «C# ASP.NET Core-разработчик» — это практическое обучение созданию современных web-приложений и API. Вы разберётесь, как проектировать backend и frontend, строить высоконагруженные сервисы, работать с базами данных, безопасностью и инфраструктурой. В программе — ASP.NET Core, ReactJS, GraphQL, gRPC, SignalR, Docker, Kubernetes и CI/CD.
Обучение построено вокруг командной работы и Scrum-подхода. Вы не просто изучаете технологии, а проходите полный цикл разработки: от архитектуры и бизнес-логики до деплоя и масштабирования. Преподаватели — практикующие разработчики, программа регулярно обновляется под реальные требования рынка.
Старт курса уже 26 сентября.
Узнать больше | 763 |
| 12 | 🎯 Иконка в списке съезжает, когда подпись переносится на вторую строку
Иконка и текст стоят в flex-контейнере с align-items: center. Когда текст переносится, иконка встаёт посередине всего блока, а не напротив первой строки.
С align-items: start она поднимается выше букв: у строки есть пустое место от шрифта. Сдвиг на фиксированные 3px ломается, как только меняется шрифт или размер иконки.
Надёжнее считать сдвиг через CSS-единицу lh, она равна высоте строки:
.icon {
/* --icon-size is defined via JS. */
--size: var(--icon-size);
--offset: calc((1lh - var(--size)) / 2);
transform: translateY(var(--offset));
}
Иконка сдвигается на половину разницы между высотой строки и своим размером и встаёт по центру первой строки при любом шрифте. Подвох в том, что размер иконки нужно знать заранее.
А для иконки в ::before понадобятся ещё aspect-ratio и height: auto, и это отдельная история.
👉 @seniorFront | 1 613 |
| 13 | Кто сказал, что начинать надо с малого?
Тестировать цифровых двойников или настраивать проход по лицу в метро — неплохо для старта карьеры, правда? А еще это отличный способ обнаружить у себя новую ИТ-суперспособность.
Т1 — это бигтех для бизнеса и одна из крупнейших аккредитованных ИТ-компаний России. Здесь молодые специалисты получают реальные задачи: можно работать с большими данными, участвовать в разработке решений для ритейла, создавать инструменты для обучения и общения и многое другое.
И все это:
✅ онлайн из любой точки страны;
✅ под руководством наставника;
✅ удобно совмещать с учебой.
Для старта карьеры ИТ-холдинг выбрали уже более 4 000 студентов из 300+ вузов.
⚡ Присоединяйся и узнай, какая суперспособность в ИТ твоя.
Перейти на сайт
#реклама 16+
career.t1.ru
О рекламодателе | 904 |
| 14 | 📱 Быстро жмёте кнопку на телефоне, а страница вдруг зумится
На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.
Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.
Лечится одной строкой CSS:
.button {
touch-action: manipulation;
}
Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.
Есть соблазн вместо этого дописать в viewport maximum-scale=1.0, user-scalable=no. Не надо: так зум пропадает целиком, а это нарушение WCAG.
В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.
👉 @seniorFront | 1 691 |
| 15 | Работай с топом Т-Банка над стратегическими проектами
⚡В программе «Мини-СЕО» ты получаешь индивидуальный трек, погружаешься в стратегию компании и работаешь над проектами — от анализа данных до создания новых продуктов.
Наставники — топ-менеджеры, которые руководят целыми направлениями.
Они передадут знания, которые сложно найти в интернете, помогут выстроить индивидуальный трек карьеры и защитить собственный проект в финале программы.
Если ты студент или выпускник с опытом в ИТ, математике или аналитике, подай заявку и начни разгонять карьеру!
Зарегистрироваться
#реклама 16+
t-miniceo.ru
О рекламодателе | 1 013 |
| 16 | Ищете облачную платформу? Есть Beget
✅ Аптайм 99,98% в дата-центрах Tier III
✅ Техподдержка 24/7 — живые люди, без ботов
✅ Прозрачная оплата без скрытых платежей
✅ Более 200 000 клиентов доверяют Beget
Узнать больше
#реклама 16+
beget.com
О рекламодателе | 734 |
| 17 | 🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!
[+ разбор 50 сложных вопросов в подарок ]
17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!
Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,
Как это будет:
📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе
📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью
📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ
Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы
И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!
🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥
Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot
Реклама.
О рекламодателе. | 3 234 |
| 18 | Работай с топом Т-Банка над стратегическими проектами
⚡В программе «Мини-СЕО» ты получаешь индивидуальный трек, погружаешься в стратегию компании и работаешь над проектами — от анализа данных до создания новых продуктов.
Наставники — топ-менеджеры, которые руководят целыми направлениями.
Они передадут знания, которые сложно найти в интернете, помогут выстроить индивидуальный трек карьеры и защитить собственный проект в финале программы.
Если ты студент или выпускник с опытом в ИТ, математике или аналитике, подай заявку и начни разгонять карьеру!
Зарегистрироваться
#реклама 16+
t-miniceo.ru
О рекламодателе | 979 |
| 19 | Розыгрыш Яндекс Станции уже в боте
Любимые блогеры, розыгрыши, новости и анонсы в одном боте!
Узнать больше
#реклама 16+
refer.id
О рекламодателе | 919 |
| 20 | Телеграм канал AI для бизнеса
AI - не будущее. Это настоящее вашего бизнеса.
Телеграм-канал "AI для бизнеса" знает все о внедрении и использовании искусственного интеллекта в бизнесе в России и мира. Только со своими подписчиками канал делится:
- как внедрить искусственный интеллект в реальные бизнес-процессы,
- разборами кейсов: как компании сократили затраты на 30-50% с помощью AI,
- лайфхаками по автоматизации рутинных задач,
- новостями мира AI и разборами трендов.
Сами давно читаем и вам советуем подписаться.
Подписаться
#реклама 16+
О рекламодателе | 862 |
