С каждым годом собеседования становятся все сложнее и сложнее, а количество вопросов, которые могут спросить, не укладывается в голове.
Именно поэтому я решил создать небольшой чеклист, в котором собрал темы, по которым задавали вопросы либо мне, либо моим друзьям задавали на собеседованиях на 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, попросили начать с базы и до фреймворков и других инструментов, нужно было рассказать про темы, которые я туда включил бы. Всем советую попробовать и посмотреть, что у вас получится - довольно интересный экспириенс.
Итого
В этой статье, я постарался рассказать про необычные темы и вопросы по ним, которые были собраны с различных собеседований меня и моих друзей. Надеюсь они помогут пройти вам собеседование и устроиться на работу мечты, главное, чтобы не было так, как на обложке статьи)))
Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.
