От чего зависит успех собеседования?

Front End Team Lead BCS Денис Воронин отвечает на этот и другие вопросы о прохождении и проведении интервью на своем youtube-канале.

«Собесы. В чем смысл?» — это не рецепт успеха, а рефлексия разработчика с 10-летним опытом о том, что собеседования — это в первую очередь про человеческие отношения.

👉 @frontendInterview

👉 @frontendInterview

​Что такое Shadow DOM?

Shadow DOM (Shadow Document Object Model) - это технология, которая позволяет создавать и изолировать компоненты веб-страницы. Она предоставляет возможность создавать и использовать собственные элементы и стили, которые не будут влиять на остальную часть страницы.

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

Основные преимущества использования Shadow DOM:
1. Изоляция: Компоненты, созданные с использованием Shadow DOM, не могут быть непреднамеренно изменены или повреждены извне. Это позволяет разработчикам создавать надежные и независимые компоненты.

2. Локальные стили: Стили, заданные внутри Shadow DOM, применяются только к элементам внутри компонента. Это позволяет избежать конфликтов стилей с другими частями страницы.

3. Повторное использование: Компоненты, созданные с использованием Shadow DOM, могут быть повторно использованы на разных страницах или в разных проектах без влияния на другие части кода.

4. Инкапсуляция: Shadow DOM позволяет скрыть внутреннюю структуру и детали реализации вашего компонента, что способствует лучшей абстракции и модульности кода.

👉 @frontendInterview

JavaScript с нуля

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

👉 @frontendInterview

Recursive Replication

Создайте рекурсивную функцию replicate, которая принимает два аргумента: times и number и возвращает массив, состоящий из number, повторенного times раз.

Пример:
replicate(3, 5) вернёт [5,5,5]

👉 @frontendInterview

​Работали ли вы с мемоизоваными селекторами в React (memoized selectors)? Для чего их используют и какой принцип работы?

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

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

Вот пример, как можно создать мемоизованный селектор с помощью библиотеки Reselect:

 import { createSelector } from 'reselect';

 const getUsers = state => state.users;

 const getActiveUsers = createSelector(
   getUsers,
   users => users.filter(user => user.isActive)
 );

 // Использование мемоизованного селектора
 const activeUsers = getActiveUsers(state);

В этом примере createSelector создает мемоизованный селектор getActiveUsers, который фильтрует список пользователей и возвращает только активных пользователей. Если состояние users не изменилось, мемоизованный селектор вернет закэшированный результат без повторных вычислений.

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

👉 @frontendInterview

Хочешь получить оффер из-за границы?

• Как выбрать страну?
• Как составить CV?
• На что обращают внимание на каждом из этапов собеседования?
• Как нужно себя вести на собеседовании с инженерами (и какие лайфхаки можно применить)?

🧠 Канал Передаёт Австралия рассказывает как пройти все этапы трудоустройства в заграничную компанию - от отклика на вакансию до торга по зарплате.

Автор канала проходил интервью в десятках IT-компаний Австралии 🇦🇺, Сингапура 🇸🇬 и Европы 🇪🇺, получил обширный опыт трудоустройства и релокейтов, занимался наймом программистов, а теперь делится своим опытом и знаниями с читателями.

⚡️ Есть вопросы? Добро пожаловать: @australia_reporting

Как получить высоту блока? Его положение относительно границ документа?

Чтобы получить координаты относительно видимой части документа — .getBoundingClientRect(). Этот метод также возвращает ширину и высоту элемента.
Пример:

 document.querySelector('button').onclick = function() {
   var c = this.getBoundingClientRect()
   alert('top:' + c.top + ' left: ' + c.left +'');
 }

Чтобы получить координаты относительно начала документа — значение .scrollTop / .scrollLeft + .getBoundingClientRect().top / .getBoundingClientRect().left

Пример:
document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect(),
scrolltop = document.body.scrollTop + c.top,
scrollleft = document.body.scrollLeft + c.left;
alert('top:' + scrolltop + ' left: ' + scrollleft + '');
}

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Как упростить написание кросс-браузерных стилей?

1. Некоторые CSS свойства требуют префиксов, чтобы работать в разных браузерах. Вы можете использовать автопрефиксеры, такие как Autoprefixer, чтобы автоматически добавить необходимые префиксы к вашему CSS коду. Это позволит вам писать стили без префиксов, а затем автоматически генерировать кросс-браузерный код.

2. CSS-фреймворки, такие как Bootstrap или Foundation, предоставляют готовые компоненты и стили, которые уже учитывают кросс-браузерные различия. Вы можете использовать эти фреймворки для быстрого создания стилей, минимизируя необходимость вручную управлять кросс-браузерными проблемами.

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

4. Использование нормализации стилей: Различные браузеры имеют свои собственные стандарты и стилевые правила по умолчанию. Иногда это может приводить к различиям в отображении элементов на странице. Для решения этой проблемы можно использовать CSS-нормализацию, такую как Normalize.css. Нормализация стилей помогает создать более предсказуемую и консистентную базовую стилизацию для всех элементов на странице.

👉 @frontendInterview

Next.js Cookbook: Learn how to build scalable and high-performance apps from scratch (2023)

В начале книги будут рассмотрены основы Next.js, включая настройку среды и создание вашего первого приложения. Затем вы узнаете, как использовать паттерны проектирования для оптимизации процесса разработки приложения. Далее книга поможет вам познакомиться с возможностями Next.js по рендерингу на стороне сервера, предоставив знания и навыки, необходимые для использования этой мощной функции для повышения производительности и удобства работы с ERP-приложением. Кроме того, книга поможет вам провести сквозное тестирование с помощью Cypress и Playwright, а также развернуть приложение в продакшн с помощью AWS Amplify. Наконец, вы узнаете, как оптимизировать ваше веб-приложение для поисковых систем, что позволит улучшить видимость и увеличить посещаемость вашего сайта.

👉 @frontendInterview

Представить массив чисел в виде промежутка

Ваша задача - написать функцию, которая принимает массив чисел и преобразует соседние числа в промежутки

Пример:
числа 5, 6, 7, 8, 9 преобразуются в "5_9"
число 6 останется "6"
числа 3,4,5,6,9 станут "3_6,9"

👉 @frontendInterview

Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?

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

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

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

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

👉 @frontendInterview