👉 @frontendInterview

​Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter, а для кнопок — пробелом или Enter. Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.

Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом <a>, то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом <button>.

С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link, у кнопок — button. Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

👉 @frontendInterview

Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!

На канале факультета программирования  вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.

Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования!

Advanced Data Structures and Algorithms: Learn how to enhance data processing with more complex and advanced data structures (2023)

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

👉 @frontendInterview

Dodge The Birds

Герой игры может выполнить две команды. findBirds и jump.

findBirds() возвращает массив из птиц на экране
jump(height) - заставляет героя прыгнуть на определенную высоту.

Напишите функцию controller, которая будет избегать столкновения героя с птицами.

👉 @frontendInterview

Почему 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

​Реализуйте функцию 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

👉 @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

React.js Design Patterns: Learn how to build scalable React apps with ease (2023)

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

👉 @frontendInterview

Javanoscript filter

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

Пример:
Исходные данные:
[ [ "foo", "foo@foo.com" ], [ "bar_", "bar@bar.com" ] ]

Результат:
[ [ "bar_", "bar@bar.com" ] ]

👉 @frontendInterview

​Как бы вы реализовали метод 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

Frontend meetup (Online)

1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения

2. Бьем монолит. Основные практики — Гузенко Александр IT ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.

3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.

4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером

🗓 12 июля, начало в 19:00 мск, Среда

🚀 Телеграмм канал с анонсами митапов

✅ Регистрация на мероприятие