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

👉 @frontendInterview

Чем отличаются PUT- и POST-запросы?

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

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

Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы — нет. То есть — если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса.

Стоит отметить, что описанное выше - это лишь вопрос семантики и договоренностей. На самом деле можно сделать удаление данных на PUT и добавление на DELETE.

👉 @frontendInterview

👉 @frontendInterview