С каждым годом собеседования становятся все сложнее и сложнее, а количество вопросов, которые могут спросить, не укладывается в голове.

Именно поэтому я решил создать небольшой чеклист, в котором собрал темы, по которым задавали вопросы либо мне, либо моим друзьям задавали на собеседованиях на Frontend разработчика. Эти темы почти не попадаются в стандартных списках по подготовке к собеседованиям, поэтому я решил сделать свой.

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

Я разбил на 4 основных топика: HTML, CSS, JS, общие вопросы по Frontend/Программированию.

Ну что, поехали!

База, HTML

По HTML обычно немного спрашивают, потому что подразумевается, что если ты уже на собесе, то формочку сверстать сможешь. Однако есть пару тем, которые иногда могут поставить в тупик:

• Доступность: важность семантических элементов, различных атрибутов у элементов, может ли div быть семантичным, какие css свойства могут влиять на скринридеры.
  Советую отдельно почитать про атрибуты role, aria, зачем и где они применяются, а остальное хорошо расписано вот тут - тык.
  Также советую почитать статьи и исследования на эту тему(в т.ч. на хабре), очень интересно, как некоторые маленькие штуки, делают жизнь людей с ограниченными возможностями лучше.

• SEO: спрашивают редко, но полезно про это знать, по этой теме можно почитать про то, зачем нужен robots.txt, noindex, nofollow и sitemap.xml (как закрыть ту или иную страницу от индексации, как добавить страницы в индекс), и про микроразметку (breadcrumbs, article, faq и тд).

• Не уверен, что это именно можно отнести к HTML, но оставлю это здесь, этапы построения страницы(Render Tree, Layout, Paint, Reflow/Repaint), довольно популярный вопрос про который редко что-то помнят.

• Семантика и какие семантические теги, когда применять - тык.

• Web Components, Shadow DOM, как они работают, что с помощью них можно делать.

CSS

Тут тоже довольно редко бывают сложные вопросы, но я нашел парочку:

• Контекст наложения, вроде бы простая тема, но есть вещи, которые забываешь(например, когда формируется новый контекст наложения) - тык

• Что такое вендорные префиксы и зачем их использовать - тык

• CSS animation, какие есть свойства, как с помощью keyframes создать свою анимацию - тык

Javascript

В этом разделе обычно больше всего веселья и интересных тем, на которые можно порассуждать.

• Сборщик мусора и работа с памятью - тык

• Когда разговор заходит о толстом клиенте, часто вспоминают Web Workers, зачем используются, как поднять производительность, чем могут быть полезны, какие есть ограничения - тык, тык1.

• В последнее время, в связи с хайпом PWA, часто начал слышать про Service Workers, зачем используются, чем могут быть полезны, какие есть ограничения - тык, тык1.

• Часто когда говорят о фреймворках и о концепции реактивности, всплывает Proxy про него тоже стоит вспомнить, про то, какие хендлеры есть, что с помощью него можно делать - тык

• Структуры данных Set и Map и когда их можно использовать.

• WeakMap и WeakSet в чем отличие от Set и Map и как с ними работает сборщик мусора.

• Генераторы - как работают, где используются.

• Не совсем полностью про JS, но Websocket, SSE - что это и зачем нужно

Typescript

Тут не сильно много советов, так как довольно редко спрашивают что-то сложное и необычное про typescript(история меня и моих друзей, может у кого-то иначе).

• Как-то на собеседовании меня спросили решение одной из задач из этого списка, и я вам скажу задачки тут сложные, так что если хотите прокачать свой ts порешайте эти задачки - тык.

• Пробежаться по handbook и посмотреть темы, которые уже подзабыл.

Общие темы

Тут все подряд, что-то на программирование, не обязательно про Frontend, но довольно часто мелькающее на собеседованиях, что-то про Frontend, но относящаяся сразу к нескольким категориям.

• Разница между CSR, SSR, SSG, ISR, что лучше использовать для SEO, какие ресурсы нужны для каждого из подходов.

• Пару раз спрашивали, про то, какие паттерны проектирования знаю, и какие из них применяются во Frontend(например observer - event listener, intersection observer; singleton - vuex store), советую почитать тут довольно просто с картинками и примерами кода, объясняются почти все популярные паттерны - тык(ссылка работает только с VPN).

• Web Perfomance, какие есть метрики(LCP, FID, CLS, FCP, INP, TTFB), которые влияют на производительность, как с ними работать, какие есть best practices - тык

• Что такое TDD/BDD, какие плюсы/минусы есть у подходов.

• Инструменты для тестирование во Frontend, какие виды тестирования можно реализовывать(unit, e2e, integration) - тык.

• Webpack, разбиение на чанки, tree shaking, plugins - тык.
  В чем отличие Webpack vs Vite.

• Вопросы про ci/cd уже база - что это такое, зачем нужно, как написать базовый скрипт для деплоя.

• Однажды был интересный кейс: меня попросили составить свою книгу по изучению Frontend, попросили начать с базы и до фреймворков и других инструментов, нужно было рассказать про темы, которые я туда включил бы. Всем советую попробовать и посмотреть, что у вас получится - довольно интересный экспириенс.

Итого

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

Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.