Frontend Interview - собеседования по Javascript / Html / Css

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: 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));
}

Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.

Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.

В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.

👉 @seniorFront

🔍 Убрал повтор в скринридере и сломал кнопку

Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «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%
);

Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.

Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.

В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.

👉 @seniorFront

Ищем новичков, готовых взять свой первый заказ на разработку сайта. Опыт не нужен.
 
Заказ: лендинг для AI-сервиса NOVA AI
Срок: 3 дня
Занятость: 20–30 минут в день
Оплата: 10 000 ₽
Опыт: не нужен
 
Как это устроено:
1. Получаете сообщение от клиента и задачу на разработку лендинга.
2. Собираете структуру сайта на HTML — часть кода мы уже подготовили.
3. Оформляете страницу с помощью CSS и сами выбираете цветовую палитру с ИИ.
4. Добавляете JavaScript, чтобы заработали кнопки и форма генерации текста.
5. Получаете последнюю правку от клиента, адаптируете сайт под смартфон и сдаёте проект.
 
Если раньше не писали код — не страшно. Перед каждой задачей будет короткое объяснение, готовые фрагменты и подсказки.
 
Весь путь проходится за 3 дня, от первого сообщения клиента до сданного проекта. Справляются 10 из 10, проверено на сварщиках, кассирах, курьерах и мамах в декрете.

10 000 рублей можно потратить на продукты Айтилогии.
 
Главное за 3 дня вы поймёте, каково это на самом деле: сидеть с задачей от клиента, доводить её до результата и зарабатывать хорошие деньги, не выходя из дома.
 
👉 Проскочить на практикум бесплатно

Реклама. ИП Чернова О. А., ИНН:771399721044

🚀 Два атрибута у картинки, и страница перестаёт прыгать

Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку.

Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.

Одна тонкость: в CSS картинке нужно задать width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся.

А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.

👉 @seniorFront

📏 Высота блока в строках, а не в пикселях

В CSS есть единица lh: 1lh равен вычисленному line-height, то есть высоте одной строки текста. Она давно существует, но о её применении рассказывают редко.

Пример: список надо обрезать по пяти строкам и плавно растворить низ. С max-height: 120px стоит увеличить шрифт, и всё ломается: строки растут, а пиксели нет. С lh размер считается в строках:

.list {
  max-height: 5lh;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 1lh),
    transparent 100%
  );
}

Теперь при любом шрифте видно пять строк, а последняя плавно тает.

Оговорка: lh берётся от line-height самого элемента. Чтобы расчёт на родителе совпал со строками детей, задайте шрифт на родителе, а детям оставьте наследование.

В статье ещё отступы между абзацами, «тетрадные» линейки, картинки с float точно по строкам и иконки по размеру текста.

👉 @seniorFront

🤖 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 для фронтенда, присоединяйтесь к сезону.

Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.

👉 Билеты на сезон