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