Get Nth Even Number

Создайте функцию, которая вернет N-ое четное число.

Пример:

1 --> 0 (первое четное число 0)
3 --> 4 (третье четное число 4 (0, 2, 4))
100 --> 198

👉 @frontendInterview

​Как работает setTimeout ?

Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

Синтаксис

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

- function: Будет вызвана после задержки.
- functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).
- delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.
- arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

Пример:

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

Отмена выполнения setTimeout
Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

Особенности поведения
- Минимальная задержка: В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.
- Задержка в неактивных вкладках: Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.
- Асинхронность: setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.

👉 @frontendInterview

CSS Text Fade Out On Scrolling Effect

В этой статье рассказывается про создание эффекта "затухания" текста на границах блока. Для реализации используется полупрозрачный градиент и CSS background-clip.

.text {
    background-image: linear-gradient(transparent 10%, currentColor 30%, currentColor 70%, transparent 90%);
  -webkit-background-clip: text;
    background-clip: text;
    background-attachment: fixed;
  }

👉 @frontendInterview

Улучшение производительности рендеринга с помощью CSS content-visibility

В этой статье рассказывается про CSS свойство content-visibility. Это новая функция CSS, которая позволяет "скрывать" определенные части DOM с точки зрения верстки и рисования. Она в основном не влияет на дерево доступности (поскольку узлы DOM все еще там), не влияет на поиск на странице (⌘+F/Ctrl+F) и не требует виртуализации. Все, что ему нужно, - это оценка размеров внеэкранных элементов, чтобы браузер мог зарезервировать там место.

👉 @frontendInterview

Разработчик фиксит баг:

👉 @frontendInterview

Какая бывает работа с тестами ?

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

Типы:
- Модульное тестирование (Unit Testing): Проверка отдельных модулей или компонентов программы на корректность выполнения их функций. Каждый тест оценивает работу отдельной части кода в изоляции от остальной программы.

- Интеграционное тестирование (Integration Testing): Проверка взаимодействия между различными модулями или внешними системами и сервисами. Цель — убедиться, что компоненты системы корректно работают вместе.

- Функциональное тестирование (Functional Testing): Проверка того, что функциональные требования, предъявляемые к программе, выполняются. Эти тесты фокусируются на пользовательских сценариях и возможностях программы.

- Тестирование производительности (Performance Testing): Оценка скорости, стабильности и масштабируемости приложения под нагрузкой.

- Тестирование безопасности (Security Testing): Проверка на наличие уязвимостей, которые могут быть использованы для несанкционированного доступа или повреждения данных.

Инструменты
Для автоматизации процесса тестирования существует множество инструментов и библиотек. Выбор инструмента зависит от языка программирования, среды разработки и конкретных требований проекта. Например: Mocha, Jest, и Cypress для JavaScript.

Процесс
- Планирование: Определение целей тестирования, выбор инструментов и методик.
- Написание тестов: Создание тестовых сценариев, которые проверяют различные аспекты работы кода.
- Выполнение тестов: Запуск тестов и сбор результатов.
- Анализ результатов: Интерпретация результатов тестирования, выявление и исправление ошибок.
- Рефакторинг: Улучшение структуры и качества кода без изменения его функциональности на основе результатов тестирования.
- Регрессионное тестирование: Повторное тестирование после изменений, чтобы убедиться, что исправления не привели к новым ошибкам.

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

👉 @frontendInterview

Modern CSS with Tailwind

Книга «Современный CSS с Tailwind» (англ. «Modern CSS with Tailwind, Flexible Styling Without the Fuss») от Ноэля Рэппина — исчерпывающее руководство, которое знакомит разработчиков с возможностями и эффективным использованием фреймворка Tailwind CSS в веб-проектах.

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

👉 @frontendInterview

Нечетный или четный?

Дан массив целых чисел, определите, является ли сумма его элементов нечетной или четной
Дайте ответ в виде строки "odd"или "even".
Если входной массив пуст, рассматривайте его как: [0](массив с нулем).

Пример:

[0]  //  "even"
[0, 1, 4]  //  "odd"
[0, -1, -5]  //  "even"

👉 @frontendInterview

​text-wrap

Свойство text-wrap контролирует то, как текст расположится внутри элемента. Можно применять, например, для более сбалансированного вида заголовков, которые не вмещаются в одну строку.

Возможные значения:
- nowrap — текст не переносится по строкам. Он переполнит родительский элемент и выйдет за его пределы, а не перейдёт на новую строку.

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

- stable — результат аналогичен wrap, но при редактировании текста, строки, идущие выше, остаются неподвижными, в то время как при значении по умолчанию будет перерисовываться всё содержимое. Значение поддерживается только в браузерах Safari и Firefox.

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

👉 @frontendInterview

👉 @frontendInterview

Слайдер

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

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

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

👉 @frontendInterview

Плюшки к зарплате: где место бонусов в ИТ и почему это боль HR

Отрасль ИТ, кажется, лидирует по объему дополнительных плюшек, которые предлагают работодатели, нанимая очередного сениора. ДМС зачастую со стоматологией, программы обновления рабочих мест, компенсации занятий спортом, конференции и корпоративное обучение — все предоставляется за счет работодателя.

Красота, правда? Или ловушка, в которую рынок загнал себя сам?

Талантливые разработчики не прибегают в компанию сами только лишь ради ДМС‑а, а отвечая на опросы, указывают, что место плюшек где‑то в конце их списка приоритетов. Но компании настолько задрали планку ожиданий у кандидатов, что теперь так просто даже неиспользуемые HR‑программы не отменишь.

В этой статье — немного о том, почему плюшки это больно и непонятно. А еще о том, какой путь для себя нашли мы.

👉 @frontendInterview

​Для чего нужны альтернативные описания к картинкам и как они влияют на доступность и поисковую оптимизацию?

alt — один из атрибутов тега <img> в HTML. Он передаёт текстовую информацию о картинке, когда она не отображается на сайте. Например, у пользователя нестабильное интернет-соединение или выключено отображение картинок в браузере.

По сути alt — это альтернативное текстовое описание содержания изображения. Отсюда и название атрибута – сокращение от «alternative».

<img
  src="dog.png"
  alt="Шоколадный лабрадор в соломенной шляпе наслаждается
  солнечной погодой на пляже. Рядом лежит кокос с трубочкой
  и миска с собачьим кормом."
>

<a>
  <img src="link-icon.svg" alt="Инструкция по заполнению профиля">
</a>

Нет ничего плохого в пустом alt, если у изображения нет смыслового значения. Пропустить alt можно в нескольких случаях:

- аватарка — имя пользователя и так у нас уже есть;
- превью к статье — уже есть заголовок, и этого будет достаточно;
- иконки в кнопке — есть видимое или скрытое название кнопки.

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

Отталкивайтесь от остального содержимого страницы, но не повторяйте один текст. Допускаются ключевые слова из <h1> или title страницы, когда они поддерживают описание картинки и смотрятся органично. Следите за количеством ключевых слов и случайно не превратите описание в цепочку из них.

Следите за правилами языка описания (пунктуацией, орфографией и другими) и не начинайте описание картинки со слов «картинка», «графика» или «изображение».

Длина текста описания не меньше 3–4 слов и не больше 250 символов с пробелами. Оптимальный вариант – 5-6 слов. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Он может зачитать их как три картинки, хотя это было всего лишь одна длинная строка.

👉 @frontendInterview

Программирование без дураков

Хотите научиться программировать "less wrong"? Тогда эта книга - для вас. Ведь программирование - это во многом коммуникация. Стиль программирования, именование, комментирование, работа с чужим кодом - зачастую соглашения складываются именно там, где строгая регламентация на уровне языка программирования отсутствует.

👉 @frontendInterview

Rot13

ROT13 — это простой шифр замены букв, который заменяет букву буквой, находящейся через 13 букв после нее в алфавите. ROT13 — пример шифра Цезаря.

Создайте функцию, которая принимает строку и возвращает строку, зашифрованную с помощью Rot13. Если в строку включены цифры или специальные символы, их следует вернуть в исходном виде. Смещать следует только буквы латинского/английского алфавита, как в оригинальной «реализации» Rot13

Пример:

"test"  //  "grfg"

👉 @frontendInterview