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

Frontend meetup (Online) 1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ" В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения 2. Бьем монолит. Основные практики — Гузенко Александр IT ONE Рассмотрим основные подходы к разбиению монолитных фронтедов. 3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций. 4. Beyond Frontend — Алексей Тюльдюков, VK Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером 🗓 12 июля, начало в 19:00 мск, Среда 🚀 Телеграмм канал с анонсами митапов ✅ Регистрация на мероприятие

​Как бы вы реализовали метод String.prototype.indexOf()? Для начала вспомним, что принимает и возвращает эта функция: String.prototype.indexOf(searchString [, position]): number Где: - searchString — строка в которой нужно искать. - position — индекс элемента, с которого начинается поиск. Чтобы реализовать такой поиск воспользуемся скользящим окном, а точнее его частной реализацией, алгоритмом Рабина-Карпа. Скользящее окно — это алгоритм, который использует область фиксированной длины внутри массива. Двигая эту область, можно получать данные о группе рядом стоящих элементов массива. В нашем случае длина окна будет равна длине подстроки, по которой производится поиск. // string - строка по которой ведем поиск // substr - подстрока, которую ищем // pos - стартовая позиция function myIndexOf(string, substr, pos = 0) { // запускаем цикл, от pos до (конца_строки - длина_окна) for (let i = pos; i < string.length - substr.length + 1; i++) { // если наша подстрока === содержимому окна, то заканчиваем работу и возвращаем index if (substr === string.substr(i, substr.length)) { return i; } } // Если ничего не найдено, то возвращаем -1 return -1; } 👉 @frontendInterview

Javascript filter Вы разрабатываете сайт и вдруг обнаруживаете, что некоторые пользователи не могут залогиниться. У всех этих пользователей есть символ "_" в логине. Поэтому вам необходимо написать функцию, которая примет на вход массив из данных пользователей и вернет только те данные, логин в которых имеет символ "_". Пример: Исходные данные: [ [ "foo", "foo@foo.com" ], [ "bar_", "bar@bar.com" ] ] Результат: [ [ "bar_", "bar@bar.com" ] ] 👉 @frontendInterview

React.js Design Patterns: Learn how to build scalable React apps with ease (2023) В начале книги рассказывается о лучших практиках создания архитектуры приложения React. Затем она поможет вам узнать, как создавать чистые, производительные и удобные в обслуживании компоненты React с помощью JavaScript и TypeScript. 👉 @frontendInterview

​Каким будет значение определённого свойства объекта? Это часто встречающаяся группа вопросов на собеседовании. Отличить её можно по таким признакам: вам предлагают два и более JS-объекта, в которых программно меняют свойства по ключам. Спрашивают, что в результате попадёт в консоль при вызове какого-то определённого ключа. Так проверяют ваше знание того, что значения объектов передаются по ссылке и что ключи в объекте — это способ построить связь с конкретными данными. Обычно перед вами будет пример, вроде такого:

 let cat = {
   name: 'Tom',
   isHunter: true
 }

 let mouse = {
   name: 'Jerry',
   isHunter: false
 }

 mouse = cat;
 cat.isHunter = false;
 mouse.isHunter = undefined;

console.log(mouse.isHunter);

Разберёмся, как выполняется этот код. 1. В начале переменные mouse и cat указывают на собственные объекты. 2. В строке mouse = cat мы присваиваем переменной mouse ссылку на объект cat. Можно рассматривать это как "связывание" переменных. Теперь обе переменные указывают на один и тот же объект { name: 'Tom', isHunter: true}. 3. Теперь mouse.name и cat.name будут менять значения свойства одного и того же объекта. 4. Последнее изменение в этом объекте происходит присваиванием значения undefined ключу isHunter. 5. Выводя в консоль значение ключа isHunter, получим последнее его обновление — undefined. 👉 @frontendInterview

👉 @frontendInterview

​Реализуйте функцию compose, которая в качестве аргументов принимает несколько функций одного аргумента и возвращает их композицию. Это тоже будет функция одного аргумента. compose(f, g, ...)(x) == f(g(...(x))). Композиция – основа функционального подхода. Операция композиции в теории категорий определяется для разных сущностей. Но сейчас мы обратим внимание именно на композицию функций. Нам нужно создать функцию, которая принимает массив других функций и возвращает новую функцию. Используем правило «Не думай, просто пиши» 🙂

 const compose = (...fns) => x => // функция которую нам надо реализовать

В условии нам подсказали как это сделать — compose(f,g, ...) = f(g(...(x))). Если сходу решение в голову не приходит, давайте попробуем посмотреть на примерах. Композиция для одной функции — это сама функция:

 compose(f) = f

Композиция для двух функций:

 compose(f,g) = x => {
   const prevResult = g(x) // выполнили g
   return f(prevResult) // выполнили f
 }

Тогда общее решение выглядит так:

 const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x)

Для каждой предыдущей функции из массива вызовите её на результате выполнения следующей. Тут важно что функции выполняются справа налево. 👉 @frontendInterview

Java-разработчик — как архитектор Эйфелевой башни. Он создаёт сервисы и приложения, которые должны выдержать огромное количество посетителей — стриминговые сервисы, маркет-плейсы и другие. Разработчик, как архитектор, мыслит творчески: придумывать, как будет выглядеть и работать его проект. А каждая его идея отражается на пользователях. Если вам интересно работать на стыке творчества и технологии — попробуйте java-разработку. Это можно сделать бесплатно — во вводной части курса Яндекс Практикума. Вот что в ней будет: — Основы языка Java: переменные, условные, выражения и циклы. — Азы объектно-ориентированного программирования: классы, конструкторы и методы. — Ваш первый проект на Java — приложение для учёта финансов. Узнайте, подходит ли вам java-разработка →

Почему JavaScript функции являются объектами первого класса (First-class Objects)? Объект первого класса (first class object или first class citizen) это объект, который может быть передан как аргумент функции, возвращён из функции или присвоен переменной. Функции в JavaScript полностью соответствуют этому определению. Функцию можно присвоить переменной:

 const multipleTwo = (n) => n * 2;

Функция может быть передаваемым аргументом другой функции:

 async function loadData(func) {
   loading = true;
   // другой код относящийся к инициализации статусов загрузки

   await func();

   loading = false;
   // другой код относящийся к обработке статуса загрузки
 }

 function getData() {
   // код получения данных с сервера
 }

 loadData(getData);

Функции могут быть возвращаемым значением другой функции: function makeAdder(x) { return function(y) { return x + y; }; }; 👉 @frontendInterview

Dodge The Birds Герой игры может выполнить две команды. findBirds и jump. findBirds() возвращает массив из птиц на экране jump(height) - заставляет героя прыгнуть на определенную высоту. Напишите функцию controller, которая будет избегать столкновения героя с птицами. 👉 @frontendInterview

Advanced Data Structures and Algorithms: Learn how to enhance data processing with more complex and advanced data structures (2023) Эта книга научит вас анализировать алгоритмы, чтобы справиться с трудностями сложного программирования. Затем она поможет вам понять, как продвинутые структуры данных используются для эффективного хранения и управления данными. Далее, она поможет вам изучить и работать с методами "Разделяй и властвуй", динамическим программированием и жадными алгоритмами. 👉 @frontendInterview

Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании! На канале факультета программирования  вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы. Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования!

​Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности? Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter, а для кнопок — пробелом или Enter. Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой. Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом <a>, то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом <button>. С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link, у кнопок — button. Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров. 👉 @frontendInterview

👉 @frontendInterview