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

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

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

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

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

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

👉 @frontendInterview

👉 @frontendInterview

В чём разница между .call и .apply?

Методы .call() и .apply() используются для вызова функции с заданным значением this, а также для передачи аргументов в функцию. Основная разница между ними заключается в способе передачи аргументов.

Метод .call() принимает список аргументов, переданных в функцию через запятую. В то же время, метод .apply() принимает массив аргументов, переданных в функцию.

Вот пример использования методов .call() и .apply():

 function greet(name, age) {
   console.log(`Hello, my name is ${name} and I am ${age} years old.`);
 }

 greet.call(null, 'John', 30);
 // выводит: Hello, my name is John and I am 30 years old.

 greet.apply(null, ['Jane', 25]);
 // выводит: Hello, my name is Jane and I am 25 years old.

В обоих случаях мы вызываем функцию greet() с this равным null. В первом случае мы передаем два аргумента в функцию через запятую, а во втором случае мы передаем массив из двух аргументов в функцию.

React Programming: The Big Nerd Ranch Guide (2023)

Используйте React для написания надежного, декларативного кода, создания корзин и других функций электронной коммерции, оптимизации производительности, а также для получения опыта компонентного и сквозного тестирования. Попутно вы научитесь использовать такие инструменты, как Create React App, функциональные компоненты, хуки, ESLint, React Router, вебсокеты, библиотека React Testing Library и Cypress.

👉 @frontendInterview

String incrementer

Создайте функцию, которая принимает строку. Если на конце строки есть цифра, то она должна увеличиться на 1. Если цифры нет, то к строке приписывается цифра 1.

Примеры:
foo -> foo1

foobar23 -> foobar24

foo0042 -> foo0043

foo9 -> foo10

foo099 -> foo100

👉 @frontendInterview

​Для чего используется атрибут srcset в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.

Вы должны использовать атрибут srcset, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:

 500 / 320 = 1.5625
 1000 / 320 = 3.125
 2000 / 320 = 6.25

Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и 500w соответствующее small.jpg будет отображено в браузере.

Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).

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

👉 @frontendInterview