Senior Frontend - javascript, html, css
الذهاب إلى القناة على Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
إظهار المزيد
الشبكة:📈 نظرة تحليلية على قناة تيليجرام Senior Frontend - javascript, html, css
تُعد قناة Senior Frontend - javascript, html, css (@seniorfront) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 23 778 مشتركاً، محتلاً المرتبة 5 573 في فئة التكنولوجيات والتطبيقات والمرتبة 27 560 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 23 778 مشتركاً.
بحسب آخر البيانات بتاريخ 13 أكتوبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -227، وفي آخر 24 ساعة بمقدار -10، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 6.01%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 2.83% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 1 429 مشاهدة. وخلال اليوم الأول يجمع عادةً 674 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 3.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل css, node.js, api, архитектура, html.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 14 أكتوبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
23 778
المشتركون
-1024 ساعات
-387 أيام
-22730 أيام
جاري تحميل البيانات...
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
أكتوبر '26أكتوبر '26
أكتوبر '26
+50
في 2 قنوات
سبتمبر '26
+100
في 11 قنوات
Get PRO
أغسطس '26
+104
في 0 قنوات
Get PRO
يوليو '26
+91
في 0 قنوات
Get PRO
يونيو '26
+112
في 0 قنوات
Get PRO
مايو '26
+80
في 4 قنوات
Get PRO
أبريل '26
+63
في 0 قنوات
Get PRO
مارس '26
+86
في 0 قنوات
Get PRO
فبراير '26
+123
في 0 قنوات
Get PRO
يناير '26
+121
في 0 قنوات
Get PRO
ديسمبر '25
+140
في 1 قنوات
Get PRO
نوفمبر '25
+186
في 0 قنوات
Get PRO
أكتوبر '25
+214
في 0 قنوات
Get PRO
سبتمبر '25
+208
في 4 قنوات
Get PRO
أغسطس '25
+171
في 0 قنوات
Get PRO
يوليو '25
+243
في 0 قنوات
Get PRO
يونيو '25
+210
في 8 قنوات
Get PRO
مايو '25
+211
في 6 قنوات
Get PRO
أبريل '25
+220
في 0 قنوات
Get PRO
مارس '25
+250
في 0 قنوات
Get PRO
فبراير '25
+223
في 0 قنوات
Get PRO
يناير '25
+402
في 4 قنوات
Get PRO
ديسمبر '24
+304
في 1 قنوات
Get PRO
نوفمبر '24
+318
في 8 قنوات
Get PRO
أكتوبر '24
+570
في 9 قنوات
Get PRO
سبتمبر '24
+483
في 0 قنوات
Get PRO
أغسطس '24
+518
في 0 قنوات
Get PRO
يوليو '24
+413
في 1 قنوات
Get PRO
يونيو '24
+375
في 2 قنوات
Get PRO
مايو '24
+619
في 27 قنوات
Get PRO
أبريل '24
+424
في 0 قنوات
Get PRO
مارس '24
+685
في 14 قنوات
Get PRO
فبراير '24
+610
في 2 قنوات
Get PRO
يناير '24
+706
في 17 قنوات
Get PRO
ديسمبر '23
+940
في 45 قنوات
Get PRO
نوفمبر '23
+919
في 27 قنوات
Get PRO
أكتوبر '23
+1 027
في 29 قنوات
Get PRO
سبتمبر '23
+1 193
في 0 قنوات
Get PRO
أغسطس '23
+515
في 0 قنوات
Get PRO
يوليو '23
+543
في 0 قنوات
Get PRO
يونيو '23
+550
في 0 قنوات
Get PRO
مايو '23
+471
في 0 قنوات
Get PRO
أبريل '23
+682
في 0 قنوات
Get PRO
مارس '23
+868
في 0 قنوات
Get PRO
فبراير '23
+720
في 0 قنوات
Get PRO
يناير '23
+940
في 0 قنوات
Get PRO
ديسمبر '22
+767
في 0 قنوات
Get PRO
نوفمبر '22
+274
في 0 قنوات
Get PRO
أكتوبر '22
+469
في 0 قنوات
Get PRO
سبتمبر '22
+475
في 0 قنوات
Get PRO
أغسطس '22
+504
في 0 قنوات
Get PRO
يوليو '22
+842
في 0 قنوات
Get PRO
يونيو '22
+556
في 0 قنوات
Get PRO
مايو '22
+472
في 0 قنوات
Get PRO
أبريل '22
+776
في 0 قنوات
Get PRO
مارس '22
+212
في 0 قنوات
Get PRO
فبراير '22
+556
في 0 قنوات
Get PRO
يناير '22
+647
في 0 قنوات
Get PRO
ديسمبر '21
+1 040
في 0 قنوات
Get PRO
نوفمبر '21
+448
في 0 قنوات
Get PRO
أكتوبر '21
+842
في 0 قنوات
Get PRO
سبتمبر '21
+606
في 0 قنوات
Get PRO
أغسطس '21
+690
في 0 قنوات
Get PRO
يوليو '21
+1 129
في 0 قنوات
Get PRO
يونيو '21
+769
في 0 قنوات
Get PRO
مايو '21
+771
في 0 قنوات
Get PRO
أبريل '21
+2 657
في 0 قنوات
Get PRO
مارس '21
+945
في 0 قنوات
Get PRO
فبراير '21
+409
في 0 قنوات
Get PRO
يناير '21
+1 729
في 0 قنوات
Get PRO
ديسمبر '20
+11 956
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 14 أكتوبر | +1 | |||
| 13 أكتوبر | 0 | |||
| 12 أكتوبر | +4 | |||
| 11 أكتوبر | +2 | |||
| 10 أكتوبر | +3 | |||
| 09 أكتوبر | +4 | |||
| 08 أكتوبر | +9 | |||
| 07 أكتوبر | +4 | |||
| 06 أكتوبر | +3 | |||
| 05 أكتوبر | +5 | |||
| 04 أكتوبر | +3 | |||
| 03 أكتوبر | +4 | |||
| 02 أكتوبر | +5 | |||
| 01 أكتوبر | +3 |
منشورات القناة
Услуги дата-центра в Москве
Размещение и аренда серверного оборудования в дата-центре.
👍 4 современных дата-центра в Москве.
👍 Лицензированный оператор связи.
👍 Индивидуальные конфигурации выделенных серверов под задачи клиента.
👍 Круглосуточная техническая поддержка в Телеграм, без ботов.
Узнать цену
#реклама 16+
itsoft.ru
О рекламодателе
| 2 |  🔴В 2025 году Россияне заработали 5,3 млрд рублей на арбитраже криптовалют
По данным Минфин 32% граждан покинули своё место работы поскольку уже в первый месяц смогли заработать 250 000 рублей, а через 2-3 месяца с легкостью вышли на семизначные числа.
Самое смешное, что лишь 8% россиян что-то слышали об этой профессии хотя все инструкции бесплатно лежат на канале Арбитраж Криптовалют
Там объясняют, как имея телефон и доступ в интернет заработать свои первые $3000. Причём разжёвывают так доступно, что поймёт даже ребенок. Кстати, на канале сегодня вышла новая рабочая связка!
Ссылка для входа — https://t.me/+GY-3aS-FN5c0Yjhi | 355 |
| 3 |  🪄 Один URL: из списка открывается modal, по прямой ссылке целая страница
Если modal с деталями хранится только в useState, адрес не меняется. Ссылкой не поделиться, после reload снова список.
В Next.js App Router можно иначе. Страница events/[id] работает сама по себе. А рядом в layout живёт слот @modal (в URL он не попадает) с перехватчиком того же адреса:
@modal/
(.)events/
[id]/
page.tsx
Префикс (.) значит «перехватить events/[id] на том же уровне». Переход по Link без перезагрузки перехватывается, и детали рисуются поверх списка. Прямая ссылка или reload перехват не включают: открывается полная страница с metadata и canonical.
Подвох: слоту нужен default.tsx, возвращающий null. Без него при прямом открытии @modal остаётся без маршрута, и можно получить 404.
В статье разобрано, как после закрытия вернуть пользователя на ту же страницу поиска со всеми фильтрами.
👉 @seniorFront | 593 |
| 4 |  🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока файл картинки грузится, тег img занимает на странице ноль места. Потом картинка приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер тратит процессорное время на пересчёт раскладки, а читатель теряет строку, которую читал.
Лечится это заранее заданными пропорциями. У тега указываем width=800 height=600, а в CSS пишем width: 100% и height: auto. Картинка растянется на ширину контейнера, а высоту браузер вычислит из пропорции 800×600 ещё до загрузки файла. Место зарезервировано, ничего не дёргается.
В демо-замере из статьи это сэкономило около 12% процессорного времени.
Не забудьте про height: auto: без него картинки растягиваются неправильно.
В статье ещё разобраны старые трюки с padding-bottom и aspect-ratio и объяснено, почему они проигрывают простым атрибутам.
👉 @seniorFront | 883 |
| 5 |  🔗 Линия между двумя блоками без JavaScript
Линия между двумя карточками сама тянется за ними, когда они двигаются. Скрипт для расчёта координат не нужен.
Это CSS Anchor Positioning: элемент с anchor-name становится якорем, а блок с position: absolute привязывает к нему свои стороны через anchor(), даже при разных родителях.
Главный трюк: привязать противоположные стороны блока к двум разным якорям, и он растянется между ними:
.anchor--one { anchor-name: --a1; }
.anchor--two { anchor-name: --a2; }
.route--one {
position: absolute;
left: anchor(--a1 right);
right: anchor(--a2 left);
top: anchor(--a1 center);
bottom: anchor(--a2 center);
}
В фон кладём SVG с диагональю и background-size: 100% 100%. В самом SVG нужен preserveAspectRatio="none", иначе линия не растянется по обеим осям.
👉 @seniorFront | 1 015 |
| 6 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 874 |
| 7 |  🔍 Почему overflow: hidden не удерживает размытие
Свойство backdrop-filter: blur() размывает всё, что видно сквозь полупрозрачный элемент. Так делают эффект матового стекла. Снимок фона браузер берёт из готовой GPU-текстуры (compositing layer), а не из DOM. Кто чей родитель, ему неважно.
В статье есть живой пример. Карточки с blur(70px) лежат в scroll-контейнере с overflow: hidden, а снаружи стоит яркая кнопка PLAY. Карточка подъезжает к кнопке ближе чем на 70px и начинает светиться её цветом.
Дело в том, что overflow: hidden обрезает на этапе paint, а размытие работает позже, на этапе composite. Помогает clip-path: inset(0) на контейнере: автор называет его единственным надёжным способом.
Только помните, что clip-path обрежет всё содержимое контейнера, включая дочерние элементы, которые выходят за его край.
В статье ещё три бага в Safari и на iPhone и разбор, почему большой радиус blur так дорого обходится GPU.
👉 @seniorFront | 1 434 |
| 8 |  +65 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGdRKcm ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 1 |
| 9 |  🔑 Обработчик postMessage без проверок слушается кого угодно
Виджет в iframe (комментарии, форма оплаты) не может сам растянуться на странице. Поэтому он шлёт родителю сообщение через postMessage, а родитель в обработчике message выставляет iframe новую высоту.
Подвох в том, что браузер доставит сообщение от любого окна, у которого есть ссылка на ваше. Чужая страница одной строкой пришлёт { type: 'resize', height: 1 }, и виджет схлопнется до одного пикселя.
Спасает строгое сравнение event.origin с ожидаемым адресом. Это поле заполняет сам браузер, и отправитель не может его подделать.
if (event.origin !== WIDGET_ORIGIN) return;
Но origin говорит, с какого сайта пришло сообщение, а не из какого окна. Два iframe с одного домена пройдут проверку оба, и сообщение от одного изменит размер другого.
Как это закрыть через event.source и что ещё проверить в самих данных (вроде height: 1e9), автор показывает на живых демо с тремя атаками.
👉 @seniorFront | 1 374 |
| 10 |  📐 Как заменить CSS progress(), пока его поддерживают не везде
Функция progress() показывает, где значение лежит между двумя границами, и возвращает число от 0 до 1. Формула простая: (значение - начало) / (конец - начало).
Но поделить 180px на 880px и получить просто число умеют не все браузеры: Firefox, например, пока нет. Выручает tan(atan2()). Функция atan2() по сути сама делит первый аргумент на второй, а tan() отдаёт обычное число без единиц.
--progress: tan(atan2(500px - 320px, 1200px - 320px));
Так мы узнаём, где 500px между 320px и 1200px. Чтобы результат не выходил за пределы от 0 до 1, как у progress(), оберните его в clamp().
С разными единицами, например vw и px, трюк кроссбраузерно не сработает. Зарегистрируйте ширину экрана через @property как <length>, и браузер сам переведёт её в пиксели.
Как быть, если границы заданы в rem, и какой вариант выбрать под ваши единицы, автор разбирает в статье.
👉 @seniorFront | 1 241 |
| 11 |  📜 Страница скроллится, а window.scrollY показывает 0
У каждой страницы есть главный контейнер прокрутки, root scroller. Только он получает восстановление позиции при возврате «назад», прокрутку пробелом и стрелками, сворачивание адресной строки на телефоне.
Потерять его легко. Вот частая комбинация:
html,
body {
height: 100%;
overflow-x: hidden;
}
Из-за overflow-x: hidden по вертикали у body получается auto. А height: 100% делает body ровно в высоту экрана. Теперь прокручивается body, а не страница. Внешне всё как раньше, ошибок нет.
Проверить просто: прокрутите вниз и выполните в консоли window.scrollY. Ноль значит, что скроллится что-то другое.
Вложенные контейнеры прокрутки сами по себе нормальны, например для сайдбара или чата. Проблема, только когда такой контейнер занимает весь экран.
В статье разобрано, как сделать липкую шапку, футер внизу и блокировку прокрутки под модалкой, не теряя root scroller.
👉 @seniorFront | 1 262 |
| 12 |  ✨ Одна и та же 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 | 1 337 |
| 13 |  🎉 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 622 |
| 14 |  ⚽ Одна обёртка, две стороны сетки: турнирная таблица на 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 506 |
| 15 |  3 дня бесплатного обучения во Frontend-разработке!
Вместо лекций пройди симуляцию настоящего первого заказа. Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент.
За 3 дня ты:
- Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML;
- Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS;
- Добавишь на страницу интерактивность с JavaScript — нажал → сработало;
- Внесёшь финальную правку и сдашь готовый проект;
- Заберёшь сайт себе. Можно оформить как кейс в портфолио.
С нас — задача, подсказки на каждом шаге и разбор, если что-то не получается.
С тебя — 20–30 минут в день.
👉 Начать бесплатно
К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT. | 1 328 |
| 16 |  ✨ Как не оставить один пункт меню одного на новой строке
Когда во флексбоксе включён перенос (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 349 |
| 17 |  📦 Почему карточка ломается на широком мониторе
Медиазапрос @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 416 |
| 18 |  Ищете облачную платформу? Есть Beget
✅ Аптайм 99,98% в дата-центрах Tier III
✅ Техподдержка 24/7 — живые люди, без ботов
✅ Прозрачная оплата без скрытых платежей
✅ Более 200 000 клиентов доверяют Beget
Узнать больше | 818 |
| 19 |  ✅ Свой чекбокс, который не ломает фокус
Родной чекбокс в 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 567 |
| 20 |  +5🤖 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 для фронтенда, присоединяйтесь к сезону.
Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.
👉 Билеты на сезон | 2 057 |
