Greatest common divisor

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

Исходные данные x и y всегда больше или равны 1, поэтому наибольший общий делитель всегда будет целым числом, которое также больше или равно 1.

👉 @frontendInterview

​Как создать и использовать CSS спрайт?

CSS-спрайт – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.

Зачем нужны спрайты?
Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново

Создание CSS-спрайта
Допустим, у нас есть 3 иконки:
icon-home.png
icon-user.png
icon-settings.png
Мы объединяем их в один файл (sprite.png):

Использование спрайта с CSS
Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

👉 @frontendInterview

👉 @frontendInterview

Задаём цвет в зависимости от темы операционной системы пользователя

Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.

Пример

div {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

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

Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.

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

👉 @frontendInterview

Проективные вопросы на собеседованиях: не дайте себя подловить

Вас спрашивали на интервью «Почему люди внезапно увольняются?» или «В каких случаях допустимо опаздывать на работу?»

Знайте, это – проективные вопросы. Замаскированная ловушка. Из-за неё вы расскажете о себе больше, чем хотите.

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

Мне кажется, что проективные вопросы – это «имба». Соискателю заглядывают в душу, а он и не замечает. Такие вопросы противоречат принципам открытости и взаимного уважения. И хотя они вредят карме компаний, их всё равно задают.

Мы с коллегами так не делаем. В статье делюсь мнением, как из-за таких вопросов не потерять оффер.

👉 @frontendInterview

Только 🤫

👉 @frontendInterview

Когда использовать рекурсию, а когда лучше использовать цикл?

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

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

Когда использовать рекурсию
Сама по себе рекурсия — это всего лишь инструмент. Нет чётких правил, когда её надо использовать, а когда — нет. Есть лишь некоторые рекомендации.

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

Когда использовать цикл
- Если рекурсивную функцию сложно читать или отлаживать, можно превратить её в цикл. Код станет менее лаконичным, но сил на отладку будет уходить меньше.
- Если вам жизненно необходимо оптимизировать работу программы, рекурсию можно переписать на цикл. Это почти всегда работает быстрее.

Веб-дизайн для начинающих. HTML, CSS, jаvascript и веб-графика

Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы JS и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

👉 @frontendInterview

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