Какие вопросы задают на собеседованиях.

Короткий ответ — всегда и везде по-разному, угадать тяжело. Некоторые компании составляют собственные уникальные задания, другие берут списки популярных вопросов из интернета. Как повезёт.

Чтобы хоть как-то помочь вам, мы поговорили с коллегами из компаний Affinage и Takeoff-staff, компании Pitch, студии Лепёхина и веб-студии Thmoon. Они рассказали, что спрашивают на собеседованиях, как у них проходит тестовое задание и нужно ли фронтендеру уметь вообще всё, чтобы найти работу.

Посмотреть вопросы.

На какие курсы можно записаться со скидкой на этой неделе 👇

Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.

Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.

Включает 3 курса:

- Дизайн для фронтендеров

- Дизайн-системы

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.

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

🔗 Начать обучение

Скидки будут действовать до 9 июля.

🗂️ Как сверстать доступный сайт.

Что важно учесть, чтобы сайтом смогли пользоваться все — https://tml.io/e262cc

⚙️ Что такое алгоритмы и зачем нужны.

Алгоритм — это набор инструкций для решения какой-то задачи. Всё, что мы делаем: готовим утром кофе, идём на работу, пишем код — это исполнение определённых алгоритмов. У каждого алгоритма есть исполнитель. Например, код, который мы пишем — это набор инструкций, а исполняет его компьютер. Быть исполнителем можете и вы сами, когда занимаетесь любыми повседневными задачами. Например, когда собираетесь на работу.

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

Перечислим часть задач, которые можно решать с помощью алгоритмов (на самом деле их возможности гораздо шире).

Сортировка данных.
Зная алгоритмы, можно выбрать наиболее оптимальный по времени и производительности метод сортировки. Например, если нам нужно вывести десять пользователей с наиболее высоким рейтингом, нет смысла упорядочивать всю многомиллионную базу: это загрузит сервер и займёт немало времени. Достаточно выбрать подходящий метод и, не прибегая к полной сортировке, получить нужные данные.

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

Отрисовка динамических списков и парсинг.
Иногда разработчикам приходится отрисовывать динамические вложенные списки — чаще всего это подобие директорий, в которых хранятся другие директории или файлы. На решение такой задачи уходит немало времени. Но процесс можно ускорить с помощью такого алгоритмического концепта, как рекурсия — вызова функции внутри самой функции.

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

💼 Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR.

☞ Проверьте вакансии на альтернативных площадках.
LinkedIn, GitHub, телеграм-каналах, соцсетях и сайте компании.

☞ Поищите стажировку.

Многие крупные компании предлагают стажировку для новичков, например, «Яндекс», «Тинькофф», «Сбер», «ВК» или «Авито». Где-то такая работа оплачивается, где-то нет. Отличаются и вступительные условия. Однако каждая из этих компаний заявляет, что если стажёр успешно пройдёт обучение, то при наличии вакантных мест сможет попасть в штат.

☞ Познакомьтесь с рекрутёром и расскажите о своём желании работать в компании.

Напишите прямо, что вы хотите работать в компании, объясните причину и коротко расскажите о себе. К сообщению приложите резюме и добавьте ссылку на портфолио. Обязательно укажите контакты и в письме, и в резюме.

Вот один из хороших примеров письма:

✉️ Здравствуйте, Елена! Меня зовут Алексей, я фронтенд-разработчик.

Я не нашёл открытых вакансий в SuperMegaCompany, но очень хочу работать у вас. Я большой фанат продуктов компании: уже 10 лет пользуюсь вашими приложениями и теперь хочу поработать над ними. Особенно интересны сервис подбора игр SuperMegaGames и онлайн-кинотеатр SuperMegaCinema.

У меня есть опыт командной разработки: я создавал новые интерфейсы и дорабатывал уже готовые. Пишу на React и TypeScript. Знаком с библиотекой Redux. Пишу регрессионные и юнит-тесты на Jest.

Ссылка на портфолио. Резюме.

Я готов созвониться с вами, даже если сейчас в компании нет открытых вакансий — возможно, вам понадобятся разработчики в будущем. Если у вас есть вопросы, с удовольствием на них отвечу.

Мои контакты: @alexfrontender 8 911-000-00-00

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

На какие курсы можно записаться со скидкой на этой неделе 👇

Пакет курсов «Креативный» за 15 610₽ или в рассрочку за 1300₽.

Пакет навыков, которые позволят разработчикам эффективно решать типовые задачи, связанные с дизайном.

Включает 3 курса:

- Дизайн для фронтендеров

- Дизайн-системы

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Паттерны проектирования» за 9 900₽ или в рассрочку за 1150₽.

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

🔗 Начать обучение

Скидки будут действовать до 9 июля.

🗂️ Зачем нужен CSS-in-JS.

Новая технология для верстальщиков — https://tml.io/a981df

⚙️ Точность регулярных выражений.
Существуют такие текстовые конструкции, для которых нельзя однозначно составить правило, например, теги или электронная почта.

Стоит ли проводить оптимизацию выражения, чтобы оно совпадало точно? И насколько точно?

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

Разберём на примере адреса электронной почты: какова может быть цена точности.

const checkEmail = (email) => /^[a-z0-9_.-]+@[a-z0-9-]+\\.[a-z0-9-.]+$/i.test(email);


Давайте проговорим правило:

^[a-z0-9_.-]+ — это имя, где от начала строки встречаются латинские буквы, цифры и некоторые знаки;затем символ @ или в простонародье «собака»;дальше идёт доменная часть, которая разбита на доменное имя [a-z0-9-]+ и доменную зону [a-z0-9-.]+. С одной стороны, это необходимый минимум для валидации. Но всегда найдутся перфекционисты, которые скажут, что правило не покрывает абсолютно все варианты адресов по стандарту RFC.

Вот пример корректного адреса электронной почты !#$%&'*+-/=?^_{}|~@example.com

Готовы ли вы в своих проектах поддерживать подобное — решать вам. Стоит лишь помнить, что любое усложнение правил создаёт дополнительные варианты возвратов, и, как следствие, потерю в скорости работы скрипта и излишний расход памяти.

Неплохой обзор проблемы можно прочитать в статье «Никогда не проверяйте e-mail адреса по стандартам RFC».

Мы же, со своей стороны, обязаны показать вам, как проверить адрес по стандарту RFC 5322:

const checkEmail = (email) => /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])/i.test(email);


Так выглядит боль. Попробуйте проговорить правило самостоятельно 🤪

Кроме боли должно быть что-то необычное, и вот вам экзотический вариант:

const checkEmail = (email) => {
let input = document.createElement(`INPUT`);
input.type = `email`
input.value = email;

return input.checkValidity();
};

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

Точность — не всегда хорошо. Если вы не валидируете счёт, на который вам поступает зарплата, то смело можно писать более простые правила. Перфекционизм — всегда затратно.

💼 Как стать мидлом.

Всё самые важные ссылки, докуметация, тренажёры и подборки книг — https://tml.io/d0f849

Правильный ответ 🤖

Тип never — с его помощью можно указать, что вызов функции никогда не завершится (из-за бесконечного цикла или ошибки).

Тип unknown — это безопасный аналог типа any. Прежде чем производить какие-либо операции со значением типа unknown, необходимо выполнить дополнительные проверки.

Тип void — с его помощью можно указать, что функция в результате вызова ничего не возвращает.

Тип any — аннотация этого типа заставляет компилятор TypeScript «отойти в сторону» и отключить все проверки.

На какие курсы можно записаться со скидкой 30% на этой неделе 👇

Пакет курсов «Золотой».

Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.

Включает 3 курса:

- Алгоритмы и структуры данных

- TypeScript

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Git и GitHub».

Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.

🔗 Начать обучение

Скидки будут действовать до 23 июля.

🗂️ Type predicates в TypeScript на примере.

Раз и получилось — https://tml.io/121d98

⚙️ С чего начать делать анимацию.

Давайте рассмотрим порядок действий для создания простой анимации при взаимодействии пользователя с элементами — https://tml.io/d15bb9

💼 Как легко выполнить тестовое задание.

Чеклист, чтобы не переживать — https://tml.io/b7dff4

На какие курсы можно записаться со скидкой 30% на этой неделе 👇

Пакет курсов «Золотой».

Набор популярных и востребованных курсов для роста до разработчика мидл-уровня.

Включает 3 курса:

- Алгоритмы и структуры данных

- TypeScript

- Мастер анимаций: CSS- и JS-анимации

🔗 Начать обучение

Курс «Git и GitHub».

Для разработчиков, которые хотят научиться работать с самой распространённой системой управления версиями — Git.

🔗 Начать обучение

Скидки будут действовать до 23 июля.

🗂️ Зачем нужны анимации в вебе и как их создавать.

Плавно, красиво, на чистом CSS — https://tml.io/0aa457