Frontend Interview - собеседования по Javascript / Html / Css
الذهاب إلى القناة على Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
إظهار المزيد
الشبكة:📈 نظرة تحليلية على قناة تيليجرام Frontend Interview - собеседования по Javascript / Html / Css
تُعد قناة Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 10 316 مشتركاً، محتلاً المرتبة 11 784 في فئة التكنولوجيات والتطبيقات والمرتبة 61 499 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 10 316 مشتركاً.
بحسب آخر البيانات بتاريخ 25 أكتوبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -115، وفي آخر 24 ساعة بمقدار -1، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 6.37%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 3.45% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 658 مشاهدة. وخلال اليوم الأول يجمع عادةً 356 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 1.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل javascript, браузер, html, css, видимость.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 26 أكتوبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
10 316
المشتركون
-124 ساعات
-397 أيام
-11530 أيام
جارٍ تحميل البيانات
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
أكتوبر '26أكتوبر '26
أكتوبر '26
+4
في 0 قنوات
سبتمبر '26
+10
في 9 قنوات
Get PRO
أغسطس '26
+8
في 0 قنوات
Get PRO
يوليو '26
+12
في 0 قنوات
Get PRO
يونيو '26
+17
في 0 قنوات
Get PRO
مايو '26
+13
في 4 قنوات
Get PRO
أبريل '26
+11
في 0 قنوات
Get PRO
مارس '26
+4
في 0 قنوات
Get PRO
فبراير '26
+5
في 0 قنوات
Get PRO
يناير '26
+8
في 0 قنوات
Get PRO
ديسمبر '25
+4
في 1 قنوات
Get PRO
نوفمبر '25
+15
في 0 قنوات
Get PRO
أكتوبر '25
+19
في 0 قنوات
Get PRO
سبتمبر '25
+52
في 4 قنوات
Get PRO
أغسطس '25
+8
في 0 قنوات
Get PRO
يوليو '25
+13
في 0 قنوات
Get PRO
يونيو '25
+20
في 8 قنوات
Get PRO
مايو '25
+49
في 5 قنوات
Get PRO
أبريل '25
+52
في 0 قنوات
Get PRO
مارس '25
+64
في 0 قنوات
Get PRO
فبراير '25
+67
في 1 قنوات
Get PRO
يناير '25
+162
في 3 قنوات
Get PRO
ديسمبر '24
+73
في 0 قنوات
Get PRO
نوفمبر '24
+78
في 9 قنوات
Get PRO
أكتوبر '24
+204
في 8 قنوات
Get PRO
سبتمبر '24
+95
في 0 قنوات
Get PRO
أغسطس '24
+81
في 0 قنوات
Get PRO
يوليو '24
+144
في 2 قنوات
Get PRO
يونيو '24
+112
في 0 قنوات
Get PRO
مايو '24
+267
في 27 قنوات
Get PRO
أبريل '24
+151
في 0 قنوات
Get PRO
مارس '24
+313
في 13 قنوات
Get PRO
فبراير '24
+156
في 1 قنوات
Get PRO
يناير '24
+299
في 17 قنوات
Get PRO
ديسمبر '23
+412
في 44 قنوات
Get PRO
نوفمبر '23
+390
في 28 قنوات
Get PRO
أكتوبر '23
+308
في 29 قنوات
Get PRO
سبتمبر '23
+246
في 0 قنوات
Get PRO
أغسطس '23
+256
في 0 قنوات
Get PRO
يوليو '23
+299
في 0 قنوات
Get PRO
يونيو '23
+282
في 0 قنوات
Get PRO
مايو '23
+294
في 0 قنوات
Get PRO
أبريل '23
+443
في 0 قنوات
Get PRO
مارس '23
+352
في 0 قنوات
Get PRO
فبراير '23
+492
في 0 قنوات
Get PRO
يناير '23
+539
في 0 قنوات
Get PRO
ديسمبر '22
+483
في 0 قنوات
Get PRO
نوفمبر '22
+158
في 0 قنوات
Get PRO
أكتوبر '22
+445
في 0 قنوات
Get PRO
سبتمبر '22
+229
في 0 قنوات
Get PRO
أغسطس '22
+648
في 0 قنوات
Get PRO
يوليو '22
+376
في 0 قنوات
Get PRO
يونيو '22
+469
في 0 قنوات
Get PRO
مايو '22
+186
في 0 قنوات
Get PRO
أبريل '22
+357
في 0 قنوات
Get PRO
مارس '22
+117
في 0 قنوات
Get PRO
فبراير '22
+323
في 0 قنوات
Get PRO
يناير '22
+349
في 0 قنوات
Get PRO
ديسمبر '21
+579
في 0 قنوات
Get PRO
نوفمبر '21
+96
في 0 قنوات
Get PRO
أكتوبر '21
+363
في 0 قنوات
Get PRO
سبتمبر '21
+614
في 0 قنوات
Get PRO
أغسطس '21
+285
في 0 قنوات
Get PRO
يوليو '21
+578
في 0 قنوات
Get PRO
يونيو '21
+501
في 0 قنوات
Get PRO
مايو '21
+840
في 0 قنوات
Get PRO
أبريل '21
+1 491
في 0 قنوات
Get PRO
مارس '21
+531
في 0 قنوات
Get PRO
فبراير '21
+350
في 0 قنوات
Get PRO
يناير '21
+1 398
في 0 قنوات
Get PRO
ديسمبر '20
+4 802
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 26 أكتوبر | 0 | |||
| 25 أكتوبر | 0 | |||
| 24 أكتوبر | 0 | |||
| 23 أكتوبر | 0 | |||
| 22 أكتوبر | 0 | |||
| 21 أكتوبر | 0 | |||
| 20 أكتوبر | 0 | |||
| 19 أكتوبر | 0 | |||
| 18 أكتوبر | 0 | |||
| 17 أكتوبر | 0 | |||
| 16 أكتوبر | 0 | |||
| 15 أكتوبر | 0 | |||
| 14 أكتوبر | 0 | |||
| 13 أكتوبر | 0 | |||
| 12 أكتوبر | +2 | |||
| 11 أكتوبر | 0 | |||
| 10 أكتوبر | 0 | |||
| 09 أكتوبر | 0 | |||
| 08 أكتوبر | 0 | |||
| 07 أكتوبر | 0 | |||
| 06 أكتوبر | +1 | |||
| 05 أكتوبر | +1 | |||
| 04 أكتوبر | 0 | |||
| 03 أكتوبر | 0 | |||
| 02 أكتوبر | 0 | |||
| 01 أكتوبر | 0 |
منشورات القناة
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 |
