Frontend Interview - собеседования по Javascript / Html / Css
Open in Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Show more
Network:📈 Analytical overview of Telegram channel Frontend Interview - собеседования по Javascript / Html / Css
Channel Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) in the Russian language segment is an active participant. Currently, the community unites 10 316 subscribers, ranking 11 784 in the Technologies & Applications category and 61 499 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 10 316 subscribers.
According to the latest data from 25 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -115 over the last 30 days and by -1 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 6.37%. Within the first 24 hours after publication, content typically collects 3.45% reactions from the total number of subscribers.
- Post reach: On average, each post receives 658 views. Within the first day, a publication typically gains 356 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 1.
- Thematic interests: Content is focused on key topics such as javascript, браузер, html, css, видимость.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Thanks to the high frequency of updates (latest data received on 26 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
10 316
Subscribers
-124 hours
-397 days
-11530 days
Posts Archive
FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на "что выведет консоль"? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡️ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
22 октября - прожарка технического опыта в резюме. Обсудим, как работают алгоритмы аггрегаторов в 26-м году, как собирать опыт, чтобы пройти ИИ-фильтры и как подать потом на собесах;
28 октября - консольный блиц. Будем публично решать и разбирать сложные консольные задачи и нарабатывать уверенность с ними;
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Erid 2SDnjcvfJoW
✨ Любой кусок страницы в окне поверх всех окон
Обычный 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));@media (display-mode: picture-in-picture).
Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.
В статье есть полный код кнопки и разбор опций окна.
👍 - если было полезно
👉 @frontendInterview
Опять у меня работает, а у коллеги нет?
Знакомая картина для проектов с несколькими зависимостями: версии пакетов расходятся, окружения живут своей жизнью, и время уходит на поиск причины там, где ее нет.
29 октября в 20:00 пройдет открытый урок «uv как инструмент управления зависимостями Python-проекта». Поговорим о том, как навести порядок в пакетах и окружении.
На уроке:
- разберем, как устанавливать пакеты с помощью uv
- посмотрим, как фиксировать версии зависимостей
- обсудим, как вести окружение проекта
📱Урок проходит в рамках курса «Python-разработчик. Продвинутый уровень». Регистрируйтесь!
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе
🧩 Один инпут в Angular для строки, функции, шаблона или компонента
Когда компонент принимает кастомный контент, приходится заранее решать: хватит строки или нужен TemplateRef? Потом тип проверяют через @if и ветвят шаблон.
Библиотека Polymorpheus от команды Taiga UI убирает этот выбор. Директива *polymorpheusOutlet одинаково отрисует любой из четырёх вариантов в переданном контексте:
<ng-container *polymorpheusOutlet="content as primitive; context: { $implicit: user }">
{{ primitive }}
</ng-container>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
🚀 Предзагрузка, которая грузит не те данные
В TanStack Router у маршрута есть loader: он запускает запрос ещё до рендера, а компонент забирает готовые данные из кеша TanStack Query. Но параметры запроса тогда описаны дважды, и если они разойдутся, ошибки никто не покажет.
Пример из статьи. В дашборд добавили ?asOf=дата, но только в компоненте. По ссылке loader грузит данные «на сегодня», а компонент потом запрашивает снимок заново. Лишний запрос и лишнее ожидание.
Автор предлагает класть
queryOptions в контекст маршрута. Их создаёт одна функция context, а loader и компонент через useRouteContext() берут один и тот же объект. Разойтись им просто негде.
Учтите, что функция context на момент статьи была новой и не описанной в документации.
В статье ещё о том, как контекст наследуют дочерние маршруты и почему лишних ререндеров не будет.
👍 - если было полезно
👉 @frontendInterview
Бесплатный 14-дневный онлайн-курс по дизайну интерьеров
Давно хочешь работать в творческой сфере и иметь доход от 100 тыс/мес? Тебе не нужно уметь рисовать или прямо сейчас принимать решение. Просто приходи и попробуй! Вдруг понравится создавать уютные интерьеры и ты найдешь в этом себя.
Регистрируйся на практический курс по дизайну интерьера с личным наставником. Осталось 7 мест!⚡
Зарегистрироваться
#реклама 16+
diskill-traning.ru
О рекламодателе
+4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew
⚡️ В сети начали массово сливать 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
✨ Рамка, которая рисует себя сама, на чистом 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
🧩 Как сделать, чтобы фоновый узор не обрезался снизу
У секции повторяющийся фоновый узор, плитка 52×44px. Высота блока зависит от текста, поэтому нижний ряд плиток часто обрезается на середине.
Можно поставить background-repeat: round. Но тогда браузер сжимает или растягивает саму плитку, чтобы она уместилась целиком.
Решение аккуратнее: взять автоматическую высоту через calc-size() и округлить её функцией round() до кратного высоте плитки. Высота плитки лежит в переменной --tile-height.
.section {
height: calc-size(auto, round(up, size, var(--tile-height)));
}
АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться
✨ Скроллбар, который следит за прокруткой без 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;
}
+4Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду
frontendInterview
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
✨ 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;
}
}
+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
🧮 Поле ввода, в которое можно вписать формулу
Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент
<calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.
Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.
Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".
Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront
🎨 Текст, который сам подбирает цвет под фон
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
.card {
--bg: var(--brand-color);
background: var(--bg);
color: contrast-color(var(--bg));
}
🔍 Убрал повтор в скринридере и сломал кнопку
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «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
🌈 Свечение внутри элемента, но из любого фона
Подсветить элемент изнутри проще всего через 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%
);