Frontend Interview - собеседования по Javascript / Html / Css
Ir al canal en Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Mostrar más
Red:📈 Análisis del canal de Telegram Frontend Interview - собеседования по Javascript / Html / Css
El canal Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 10 316 suscriptores, ocupando la posición 11 784 en la categoría Tecnologías y Aplicaciones y el puesto 61 499 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 10 316 suscriptores.
Según los últimos datos del 25 octubre, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -115, y en las últimas 24 horas de -1, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 6.37%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 3.45% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 658 visualizaciones. En el primer día suele acumular 356 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 1.
- Intereses temáticos: El contenido se centra en temas clave como javascript, браузер, html, css, видимость.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 26 octubre, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
10 316
Suscriptores
-124 horas
-397 días
-11530 días
Cargando datos
Canales Similares
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
octubre '26oct '26
octubre '26
+4
en 0 canales
septiembre '26
+10
en 9 canales
Get PRO
agosto '26
+8
en 0 canales
Get PRO
julio '26
+12
en 0 canales
Get PRO
junio '26
+17
en 0 canales
Get PRO
mayo '26
+13
en 4 canales
Get PRO
abril '26
+11
en 0 canales
Get PRO
marzo '26
+4
en 0 canales
Get PRO
febrero '26
+5
en 0 canales
Get PRO
enero '26
+8
en 0 canales
Get PRO
diciembre '25
+4
en 1 canales
Get PRO
noviembre '25
+15
en 0 canales
Get PRO
octubre '25
+19
en 0 canales
Get PRO
septiembre '25
+52
en 4 canales
Get PRO
agosto '25
+8
en 0 canales
Get PRO
julio '25
+13
en 0 canales
Get PRO
junio '25
+20
en 8 canales
Get PRO
mayo '25
+49
en 5 canales
Get PRO
abril '25
+52
en 0 canales
Get PRO
marzo '25
+64
en 0 canales
Get PRO
febrero '25
+67
en 1 canales
Get PRO
enero '25
+162
en 3 canales
Get PRO
diciembre '24
+73
en 0 canales
Get PRO
noviembre '24
+78
en 9 canales
Get PRO
octubre '24
+204
en 8 canales
Get PRO
septiembre '24
+95
en 0 canales
Get PRO
agosto '24
+81
en 0 canales
Get PRO
julio '24
+144
en 2 canales
Get PRO
junio '24
+112
en 0 canales
Get PRO
mayo '24
+267
en 27 canales
Get PRO
abril '24
+151
en 0 canales
Get PRO
marzo '24
+313
en 13 canales
Get PRO
febrero '24
+156
en 1 canales
Get PRO
enero '24
+299
en 17 canales
Get PRO
diciembre '23
+412
en 44 canales
Get PRO
noviembre '23
+390
en 28 canales
Get PRO
octubre '23
+308
en 29 canales
Get PRO
septiembre '23
+246
en 0 canales
Get PRO
agosto '23
+256
en 0 canales
Get PRO
julio '23
+299
en 0 canales
Get PRO
junio '23
+282
en 0 canales
Get PRO
mayo '23
+294
en 0 canales
Get PRO
abril '23
+443
en 0 canales
Get PRO
marzo '23
+352
en 0 canales
Get PRO
febrero '23
+492
en 0 canales
Get PRO
enero '23
+539
en 0 canales
Get PRO
diciembre '22
+483
en 0 canales
Get PRO
noviembre '22
+158
en 0 canales
Get PRO
octubre '22
+445
en 0 canales
Get PRO
septiembre '22
+229
en 0 canales
Get PRO
agosto '22
+648
en 0 canales
Get PRO
julio '22
+376
en 0 canales
Get PRO
junio '22
+469
en 0 canales
Get PRO
mayo '22
+186
en 0 canales
Get PRO
abril '22
+357
en 0 canales
Get PRO
marzo '22
+117
en 0 canales
Get PRO
febrero '22
+323
en 0 canales
Get PRO
enero '22
+349
en 0 canales
Get PRO
diciembre '21
+579
en 0 canales
Get PRO
noviembre '21
+96
en 0 canales
Get PRO
octubre '21
+363
en 0 canales
Get PRO
septiembre '21
+614
en 0 canales
Get PRO
agosto '21
+285
en 0 canales
Get PRO
julio '21
+578
en 0 canales
Get PRO
junio '21
+501
en 0 canales
Get PRO
mayo '21
+840
en 0 canales
Get PRO
abril '21
+1 491
en 0 canales
Get PRO
marzo '21
+531
en 0 canales
Get PRO
febrero '21
+350
en 0 canales
Get PRO
enero '21
+1 398
en 0 canales
Get PRO
diciembre '20
+4 802
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 26 octubre | 0 | |||
| 25 octubre | 0 | |||
| 24 octubre | 0 | |||
| 23 octubre | 0 | |||
| 22 octubre | 0 | |||
| 21 octubre | 0 | |||
| 20 octubre | 0 | |||
| 19 octubre | 0 | |||
| 18 octubre | 0 | |||
| 17 octubre | 0 | |||
| 16 octubre | 0 | |||
| 15 octubre | 0 | |||
| 14 octubre | 0 | |||
| 13 octubre | 0 | |||
| 12 octubre | +2 | |||
| 11 octubre | 0 | |||
| 10 octubre | 0 | |||
| 09 octubre | 0 | |||
| 08 octubre | 0 | |||
| 07 octubre | 0 | |||
| 06 octubre | +1 | |||
| 05 octubre | +1 | |||
| 04 octubre | 0 | |||
| 03 octubre | 0 | |||
| 02 octubre | 0 | |||
| 01 octubre | 0 |
Publicaciones del Canal
FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на "что выведет консоль"? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡️ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
22 октября - прожарка технического опыта в резюме. Обсудим, как работают алгоритмы аггрегаторов в 26-м году, как собирать опыт, чтобы пройти ИИ-фильтры и как подать потом на собесах;
28 октября - консольный блиц. Будем публично решать и разбирать сложные консольные задачи и нарабатывать уверенность с ними;
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Erid 2SDnjcvfJoW
| 2 |  ✨ Любой кусок страницы в окне поверх всех окон
Обычный Picture-in-Picture выносит в плавающее окошко только видео. Оно остаётся на экране, даже если переключиться на другую вкладку или программу.
Document Picture-in-Picture API делает то же самое с любым HTML: тикер акций, чат, список дел. По сути, получается веб-виджет.
Окно создаёт requestWindow(), и внутри у него свой пустой document. В статье туда клонируют тикер:
/* Select the component */
const stock = document.querySelector("#stock");
/* Clone the component and append it to the DPIP <body> */
DPIP.document.body.append(stock.cloneNode(true));
Стили сами не переедут, их копируют в head окна отдельно. А поправить вид только внутри окна поможет @media (display-mode: picture-in-picture).
Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.
В статье есть полный код кнопки и разбор опций окна.
👍 - если было полезно
👉 @frontendInterview | 329 |
| 3 |  Опять у меня работает, а у коллеги нет?
Знакомая картина для проектов с несколькими зависимостями: версии пакетов расходятся, окружения живут своей жизнью, и время уходит на поиск причины там, где ее нет.
29 октября в 20:00 пройдет открытый урок «uv как инструмент управления зависимостями Python-проекта». Поговорим о том, как навести порядок в пакетах и окружении.
На уроке:
- разберем, как устанавливать пакеты с помощью uv
- посмотрим, как фиксировать версии зависимостей
- обсудим, как вести окружение проекта
📱Урок проходит в рамках курса «Python-разработчик. Продвинутый уровень». Регистрируйтесь!
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе | 399 |
| 4 |  🧩 Один инпут в Angular для строки, функции, шаблона или компонента
Когда компонент принимает кастомный контент, приходится заранее решать: хватит строки или нужен TemplateRef? Потом тип проверяют через @if и ветвят шаблон.
Библиотека Polymorpheus от команды Taiga UI убирает этот выбор. Директива *polymorpheusOutlet одинаково отрисует любой из четырёх вариантов в переданном контексте:
<ng-container *polymorpheusOutlet="content as primitive; context: { $implicit: user }">
{{ primitive }}
</ng-container>
Строка или результат функции попадает в primitive.
Пример с тултипом: обычно в нём просто текст. Когда понадобится ссылка или кнопка, пользователь передаст шаблон, и API тултипа переделывать не придётся.
Оговорка: функцию от конструктора компонента не отличить, поэтому компонент оборачивают в PolymorpheusComponent.
А в статье ещё и трюк, как сделать иконку, которую можно задать просто по имени или целым шаблоном.
👍 - если было полезно
👉 @frontendInterview | 490 |
| 5 |  5 офферов получили наши ребята на прошлой неделе
Оффер на 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: 2W5zFH1gVgd ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 469 |
| 6 |  🚀 Предзагрузка, которая грузит не те данные
В TanStack Router у маршрута есть loader: он запускает запрос ещё до рендера, а компонент забирает готовые данные из кеша TanStack Query. Но параметры запроса тогда описаны дважды, и если они разойдутся, ошибки никто не покажет.
Пример из статьи. В дашборд добавили ?asOf=дата, но только в компоненте. По ссылке loader грузит данные «на сегодня», а компонент потом запрашивает снимок заново. Лишний запрос и лишнее ожидание.
Автор предлагает класть queryOptions в контекст маршрута. Их создаёт одна функция context, а loader и компонент через useRouteContext() берут один и тот же объект. Разойтись им просто негде.
Учтите, что функция context на момент статьи была новой и не описанной в документации.
В статье ещё о том, как контекст наследуют дочерние маршруты и почему лишних ререндеров не будет.
👍 - если было полезно
👉 @frontendInterview | 529 |
| 7 |  Бесплатный 14-дневный онлайн-курс по дизайну интерьеров
Давно хочешь работать в творческой сфере и иметь доход от 100 тыс/мес? Тебе не нужно уметь рисовать или прямо сейчас принимать решение. Просто приходи и попробуй! Вдруг понравится создавать уютные интерьеры и ты найдешь в этом себя.
Регистрируйся на практический курс по дизайну интерьера с личным наставником. Осталось 7 мест!⚡
Зарегистрироваться
#реклама 16+
diskill-traning.ru
О рекламодателе | 370 |
| 8 |  +4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew | 522 |
| 9 |  ⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(117 видео, 53 книги) — ВАЙБКОД
(174 видео, 91 книги) — DevOps
(415 видео, 68 книги) — Frontend
(137 видео, 93 книги) — DS/ML
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram | 556 |
| 10 |  ✨ Рамка, которая рисует себя сама, на чистом CSS
Свойство border-image позволяет сделать рамкой элемента градиент вместо обычной линии. Но анимировать градиент напрямую не выйдет: браузер не умеет плавно двигать проценты внутри него.
Это обходится так: регистрируем свою переменную через @property и указываем её тип. Такую переменную браузер уже плавно меняет:
@property --p {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}
Дальше она встаёт в градиент рамки: linear-gradient(-45deg, red var(--p), transparent 0%). Пока --p равна 0%, рамка прозрачная. При наведении --p становится 100%, красный заполняет рамку, и кажется, что её рисуют на глазах.
Есть подвох: border-image не изгибается по форме элемента, так что скруглённые углы он не повторит.
В статье тот же приём крутят дальше: conic-gradient, анимация border-image-slice и ещё куча вариаций.
👍 - если было полезно
👉 @frontendInterview | 573 |
| 11 |  🧩 Как сделать, чтобы фоновый узор не обрезался снизу
У секции повторяющийся фоновый узор, плитка 52×44px. Высота блока зависит от текста, поэтому нижний ряд плиток часто обрезается на середине.
Можно поставить background-repeat: round. Но тогда браузер сжимает или растягивает саму плитку, чтобы она уместилась целиком.
Решение аккуратнее: взять автоматическую высоту через calc-size() и округлить её функцией round() до кратного высоте плитки. Высота плитки лежит в переменной --tile-height.
.section {
height: calc-size(auto, round(up, size, var(--tile-height)));
}
Выглядит как фиксированная высота, но работает скорее как min-height. Блок по-прежнему подстраивается под контент, просто его высота всегда кратна высоте плитки, и узор не режется.
Оговорка: на момент написания статьи это работает только в Chrome.
В оригинале есть живые демо, разбор округления вверх и вниз и то, как подогнать под узор ещё и padding.
👉 @seniorFront | 712 |
| 12 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться | 706 |
| 13 |  ✨ Скроллбар, который следит за прокруткой без JavaScript
Свой скроллбар обычно рисуют так: нативный прячут, а размер и положение ползунка считают в JS на каждое событие scroll. Это дорого: scroll летит много раз в секунду, а чтение scrollHeight может вызвать reflow.
Разработчик библиотеки Taiga UI отдал эту работу CSS через scroll-driven animations. Их прогресс зависит не от времени, а от прокрутки контейнера.
Хитрее всего с высотой ползунка. Анимации его краёв растягивают на высоту контейнера (100cqb) за конец прокрутки, и в крайней точке они замирают ровно там, где нужно:
.bar {
animation-range: 0% calc(100% + 100cqb), calc(0% - 100cqb) 100%;
animation-fill-mode: both;
}
JS остаётся только для перетаскивания ползунка мышью.
Учтите, что на момент статьи Firefox умел это лишь в Nightly, поэтому в Taiga UI новая схема включается только там, где браузер её поддерживает.
Отдельно красиво решено, как прибить ползунки к краю контейнера: через anchor positioning.
👉 @seniorFront | 734 |
| 14 |  +4Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду frontendInterview
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446 | 677 |
| 15 |  ✨ CSS может заметить, что элементы вот-вот столкнутся
Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.
Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.
Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:
.decor {
@container style(--touching: 1) {
opacity: 0;
}
}
Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.
В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.
👉 @seniorFront | 638 |
| 16 |  +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 | 831 |
| 17 |  🧮 Поле ввода, в которое можно вписать формулу
Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент <calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.
Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.
Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".
Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront | 536 |
| 18 |  🎨 Текст, который сам подбирает цвет под фон
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
.card {
--bg: var(--brand-color);
background: var(--bg);
color: contrast-color(var(--bg));
}
Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.
Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.
В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.
👉 @seniorFront | 585 |
| 19 |  🔍 Убрал повтор в скринридере и сломал кнопку
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.
VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.
JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.
Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».
Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.
В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.
👉 @seniorFront | 667 |
| 20 |  🌈 Свечение внутри элемента, но из любого фона
Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?
Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.
Маска для левого и правого краёв (black в маске значит «видно»):
--inset: 30px;
mask-image: linear-gradient(
to right,
black 0%,
transparent var(--inset),
transparent calc(100% - var(--inset)),
black 100%
);
Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.
Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.
В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.
👉 @seniorFront | 785 |
