Loop Array

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

Примеры:

 loopArr([1, 5, 87, 45, 8, 8], 'left', 2);

вернет результат: [87, 45, 8, 8, 1, 5]



 loopArr([1, 5, 87, 45, 8, 8], 'right', 2);

вернет результат: [8, 8, 1, 5, 87, 45]

👉 @frontendInterview

Чем отличаются события input и change?

Различие есть для текстовых полей ввода:
input — срабатывает при каждом изменении значения в поле;
change — срабатывает когда изменяемый элемент теряет фокус: например, при переходе к другому полю или клику на другую часть страницы.

Для прочих полей ввода они работают одинаково

👉 @frontendInterview

Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений.

На профессии «Фронтенд-разработчик» вы за 10 месяцев:

✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
 ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.

Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!

Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid: 2RanykwK5Sx

👉 @frontendInterview

Напишите простую функцию, чтобы проверить, является ли число целым

function isInteger(num) {
return num % 1 === 0;
}

Эта функция принимает число в качестве аргумента и возвращает true, если число является целым, и false, если число имеет дробную часть.

Например:
console.log(isInteger(4)); // true
console.log(isInteger(4.2)); // false
console.log(isInteger(-3)); // true

👉 @frontendInterview

👉 @frontendInterview

Курс «Английский для разработчиков» Яндекс Практикума

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

Обучение построено не вокруг абстрактной теории, а вокруг рабочих ситуаций и полезных для карьеры навыков:

✋ Стендапы. Подготовитесь обсуждать задачи, задавать вопросы и просить о помощи.
👨‍💻 Работа с заказчиками. Научитесь презентовать решения, говорить про баги и фичи.
📣 Митапы. Сможете понимать на слух доклады и выступать сами.
😎 Собеседования. Научитесь рассказывать про свой опыт, понимать вопросы и тактично переспрашивать.
👯 Неформальное общение с коллегами. Сможете рассказать о своих интересах, опыте, планах на будущее.
💻 Код-ревью. Сможете описать сделанное, дать обратную связь, тактично отстоять своё мнение.

Запишитесь на бесплатную консультацию. Кураторы определят ваш уровень языка и расскажут подробнее про обучение.

👉 @frontendInterview

​Сотрудничество для фронтендеров: Яндекс Практикум набирает наставников на курс по веб-разработке для подростков. Готовы уделить время и силы новому IT-поколению и получать за это дополнительных доход?

Формат: удалёнка, парт-тайм, можно совмещать с основной работой. 

Что нужно будет делать: проводить вебинары, отвечать на вопросы в чатах, давать обратную связь, помогать, поддерживать и мотивировать студентов.

От кандидата ожидают: 
• опыт в фронтенд-разработке от полугода (подойдут фриланс, pet-проекты),
• образование по любой технической/педагогической специальности или в процессе его получения (3 курс и старше),
• опыт с Node.js, Express.js, MongoDB,
• владение актуальными подходами к вёрстке на HTML и CSS.

Вознаграждение и бонусы: 
• ежемесячная оплата за ведение групп до 30 человек (количество групп можно определить самостоятельно)
• бесплатное обучение на интенсиве по коммуникациям и эффективному преподаванию,
• сертификаты о социально-полезной деятельности для портфолио,
• прокачка лидерских, менторских и soft skills, нетворкинг.

Узнать детали и откликнуться на вакансию наставника по веб-разработке.

​В чем разница между «сбросом» и «нормализацией» CSS

Сброс и нормализация — это два разных подхода к обнулению стилей веб-страницы.

Сброс — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах. Пример кода:

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

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

 html {
   font-size: 62.5%;
 }
 body {
   font-size: 1.6rem;
   line-height: 1.5;
   font-family: Arial, sans-serif;
 }

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

👉 @frontendInterview

State Management with React Query: Improve developer and user experience by mastering server state in React (2023)

Начиная с краткой истории управления состоянием в экосистеме React, вы узнаете, что послужило причиной перехода от глобального состояния к состоянию клиента и сервера и, таким образом, поймете необходимость создания React Query. По мере продвижения по главам вы увидите, как React Query позволяет выполнять задачи, связанные с состоянием сервера, такие как выборка, кэширование, обновление и синхронизация данных с сервером. Но это еще не все: освоив React Query, вы сможете применить эти знания для работы с состоянием сервера в серверных фреймворках рендеринга. Вы также будете работать с паттернами для тестирования вашего кода, используя библиотеку тестирования и Mock Service Worker.

👉 @frontendInterview

Boolean Шредингера

Создайте переменную omniBool так, чтобы выполнялись следующие выражения:
omniBool == true && omniBool == false

👉 @frontendInterview

​Веб-разработчики создают сайты и приложения — от простых лендингов до продвинутых маркетплейсов и стриминговых сервисов. Эти IT-специалисты разрабатывают frontend — видимую часть сайтов, и backend — внутреннюю логику, которая находится на сервере и скрыта от пользователей.

Регистрация на бесплатный мини-курс по веб-разработке: https://epic.st/i-Yk7x

За 5 дней вы:
— узнаете, сколько зарабатывают веб-разработчики и как попасть в профессию с нуля;
— попробуете себя в одной из самых востребованных IT-специальностей, разберёте типовые задачи frontend- и backend-разработчиков;
— создадите свои первые проекты — сайт, приложение и сервис — и на практике убедитесь, что стать веб-разработчиком реально в любом возрасте, независимо от опыта и знаний.

Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах.

Всех участников ждут подарки!
— Сертификат на скидку 10 000 рублей на любой курс.
— Доступ к изучению английского языка на год.
— Персональная карьерная консультация

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

​Как реализовать отложенную загрузку изображений?

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

Lazy Loading — техника, которая позволяет отложить загрузку изображений, находящихся за пределами видимой области. Для этого можно использовать библиотеки, такие как Lazysizes или Intersection Observer API.

Атрибуты data- — Вы можете использовать атрибут data- вместе с атрибутом src, чтобы отложить загрузку изображения:
<img data-src="path-to-image.jpg" alt="Alt text">

Затем вы можете использовать JavaScript, чтобы загрузить изображение, когда оно станет видимым:
const img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src'));

Начиная с Chrome 76, можно использовать атрибут loading для отложенной загрузки изображений без необходимости писать собственный код отложенной загрузки или использовать отдельную библиотеку JavaScript.
<img loading=lazy>

👉 @frontendInterview

👉 @frontendInterview

​Что такое Event loop и как он работает?

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

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

Когда JavaScript выполняет код, все синхронные операции помещаются в очередь. Когда очередь становится пустой, Event loop проверяет, есть ли в очереди асинхронные операции. Если есть, они выполняются в порядке их добавления в очередь.

Например, если мы вызываем setTimeout с задержкой в 1 секунду, функция setTimeout помещает колбэк функцию в очередь и устанавливает таймер на 1 секунду. Когда таймер сработает, колбэк функция будет добавлена в очередь, и Event loop выполнит ее.

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

Event loop является важным концептом в асинхронном программировании на JavaScript, поэтому важно понимать, как он работает, чтобы писать эффективный и предсказуемый асинхронный код.

👉 @frontendInterview