Web Design in easy steps, 7th Edition (2023)

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

👉 @frontendInterview

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