Two Sum

Создайте функцию, которая принимает массив чисел и целевое число. Найдите в массиве два числа, которые в сумме дадут целевое число.

Пример:

 twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0]

👉 @frontendInterview

​Зачем нужен https?

HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации.

Главные причины использовать HTTPS

Шифрование данных (Защита от перехвата)
Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты.
В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi).
В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать.

Защита от атак "Человек посередине" (MITM)
Без HTTPS злоумышленник может подменить содержимое сайта.
Опасные сценарии:
Хакер в Wi-Fi кафе встраивает вредоносный код в сайт.
Вредоносный провайдер заменяет рекламу или ворует куки.

Google даёт больше доверия к HTTPS-сайтам
Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные".

Обязателен для онлайн-платежей и авторизации
Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей).
Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных.

👉 @frontendInterview

​Как сделать плавные анимации при переходе между страницами?

view-transition — это CSS-директива для создания плавных анимаций перехода между страницами сайта.
Настроить переход можно в одно правило. Браузер применит дефолтную cross-fade анимацию:

@view-transition {
  navigation: auto;
}

Если нужно закастомить, можно добавить свою:

::view-transition-old(root) {
  animation: 0.3s ease-in-out both slideOut;
}

::view-transition-new(root) {
  animation: 0.3s ease-in-out both zoomIn;
}

Пара советов по использованию:

- Если у вас простой сайт и все переходы стандартизированы, удобно описать их в глобальном стилевом файле.
- Если хотите использовать разные переходы для разных страниц в иерархии, описывайте их в стилевых файлах соответствующих страниц.
- Переходы отдельных элементов подчиняются той же логике: общие для всех страниц — в глобальном стилевом файле, специфичные — рядом с местом использования.
- Заботьтесь о своих пользователях: не пичкайте красивостями пользователей, которым они не нужны, и проверяйте корректность анимаций на разных устройствах.

👉 @frontendInterview

Доморощенный OSINT для соискателя. Краткая инструкция

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

👉 @frontendInterview

Тревожное утро

👉 @frontendInterview

​Настраиваем внешний вид клавиши ввода.

Глобальный атрибут enterkeyhint применяется к элементам формы (например, <input>, <textarea>) или для любых элементов с атрибутом contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре.

Пример

<input type="text" enterkeyhint="search">
<p contenteditable enterkeyhint="enter"></p>

Атрибут enterkeyhint принимает одно из следующих значений:
enter - Значение по умолчанию. Метка будет изменена на текст return или иконку ↵. Означает переход на новую строку.

done - Метка изменится на текст done или иконку ✓. Означает, что больше нечего вводить и виртуальная клавиатура закроется.

go - Метка изменится на текст go или иконку →. Означает переход к следующему целевому объекту введённого текста.

next - Метка изменится на текст next или иконку ⇥. Означает переход к следующему полю ввода.

previous - Метка изменится на текст return или иконку ⇤. Означает переход к предыдущему полю ввода.

search - Метка изменится на текст search или иконку 🔍. Означает переход к результатам поиска.

send - Метка изменится на текст send. Означает отправку текста.

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

👉 @frontendInterview

Pearls of Algorithm Engineering (2023)

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

👉 @frontendInterview

Square Every Digit

Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.

👉 @frontendInterview

Сколько есть способов что-то сделать асинхронно?

В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.

Коллбеки (Callbacks)
Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.

function fetchData(callback) {
  setTimeout(() => {
    const data = "some data";
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

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

Как используется
Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.

Промисы (Promises)
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

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

async/await
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Почему это нужно:
async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.

👉 @frontendInterview

👉 @frontendInterview

Скелетон

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

Скелетон выполняет ту же роль, что и спиннер, но воспринимается приятнее. Пользователь не только видит, что страница загружается, но и примерно понимает, какой контент появится после загрузки.

В рецепте разберём создание анимированного скелетона для карточки статьи.

👉 @frontendInterview

Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда?

В 1985 году учёный Питер Нур будто зрил в будущее, написав свою работу под названием «Programming as Theory Building», которая сегодня стала весьма актуальной. Мы всё чаще видим, как начинающие разработчики бездумно принимают сгенерированный ИИ код, который толком не понимают, а кодовые базы разрастаются лишёнными теоретических основ реализациями. В свете всего этого чётко вырисовывается основная идея Нура: «программа — это не её исходный код».

👉 @frontendInterview

Доверяй, но проверяй

👉 @frontendInterview

​env()

Если «бровки» и «чёлки» устройства заслоняют контент — env() придёт на помощь.

Функция env() используется для вставки значения переменной среды, определенной юзер-агентом, в ваш CSS. Это почти то же самое, что и var() в CSS, но env() переменные определяются агентом пользователя, не самим пользователем. Эти переменные имеют глобальную область действия.

🕵️Агентами пользователя часто называют браузеры.

Свойство уже поддерживается во всех современных браузерах. А если нужно добавить поддержку для старых версий, можно использовать плагин PostCSS Preset Env – он преобразует современные CSS-функции в полифилы.

Пример

.element {
  margin-bottom: env(safe-area-inset-bottom, 16px);
}

Второе значение в скобках — запасное. Если переменная не определена, значение будет равно 16px.

Переменные safe-area-inset-* изначально появились в iOS, чтобы разработчики могли располагать контент в безопасной зоне — там, где его точно не обрежет экран. Сейчас они полезны и на других устройствах с необычными формами экрана.

Частая проблема, которую решает env() — это всплывающие уведомления (пуши), которые могут перекрывать элементы интерфейса. Если задавать фиксированные блоки с учётом env(), они останутся в видимой области и не будут перекрыты.

env() можно применять и в PWA. Такие приложения используют пространство окна по максимуму, включая область, где обычно находится заголовок окна. Переменные titlebar-area-* позволяют размещать элементы прямо в этой зоне, не мешая системным кнопкам.

А переменные keyboard-inset-* сообщают, где на экране появилась виртуальная клавиатура. С их помощью можно узнать отступы от краёв и адаптировать интерфейс так, чтобы элементы не прятались за клавиатуру.

👉 @frontendInterview

Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)

Вы хотите писать красивый, структурированный и удобный JavaScript, применяя современные паттерны проектирования? Вам нужен чистый, эффективный, управляемый код? Хотите быть в курсе последних передовых практик? Если да, то это обновленное второе издание книги - идеальное место для начала работы.

👉 @frontendInterview