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

🚀 Хотите стать экспертом в Angular? Пройдите тест и узнайте, готовы ли вы к нашему курсу!

Перед тем как погрузиться в мир Angular, проверьте свои знания JavaScript с помощью нашего вступительного теста. Это не только отличный способ оценить ваш уровень, но и первый шаг к освоению одного из самых востребованных фреймворков для веб-разработки. 🌍

Что вас ждёт на курсе Angular Developer?

- Создание SPA приложений с использованием лучших практик.
- Работа с TypeScript для создания чистого и поддерживаемого кода.
- Глубокие знания Angular для реальных проектов.
- Освоение реактивного программирования с помощью RxJS.
- Оптимизация производительности приложений.

👨‍💻 Для кого этот курс?

- JavaScript-разработчики, желающие углубить свои знания и освоить Angular.
- Backend-разработчики, стремящиеся стать Fullstack-разработчиками.
- Начинающие фронтендеры, готовые освоить строгий и структурированный фреймворк.

Что даст вам курс?

- Вы научитесь создавать высококачественные приложения с Angular.
- Освоите современные подходы в разработке с использованием TypeScript и RxJS.
- Станете уверенным в написании масштабируемого и легко поддерживаемого кода.

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

Тест и подробнее о курсе Angular Developer - https://clck.ru/3N4Z2n

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Erid 2SDnjc5sRWe

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

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

📌 Вам нужно масштабируемое приложение с высокой отказоустойчивостью? Устали от ограничений монолита и хотите перейти на микросервисную архитектуру?

Приглашаем на открытый урок «Создаём масштабируемый микросервис с Nest.js и Kubernetes».

🗓 24 июля в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer».

На открытом уроке мы покажем, как с помощью Nest.js и Kubernetes создавать быстрые и масштабируемые микросервисы. Мы научим вас правильно развертывать приложение, использовать контейнеризацию и обеспечить отказоустойчивость.

🎯Изучите, как организовать Dev/Stage/Prod окружения с Kubernetes, как эффективно использовать HPA для масштабирования и как обеспечить стабильность с помощью readiness и liveness проб. Погрузитесь в практику и разверните свой первый микросервис!

🔗 Ссылка на регистрацию: https://clck.ru/3N8tuP

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
erid 2SDnjeEbUXp

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

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

👉 @frontendInterview

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

👉 @frontendInterview