Извлечь домен из URL

Напишите функцию, которая принимает URL-адрес в виде строки и возвращает доменное имя из этого адреса.

Примеры:
"http://github.com/carbonfive/raygun" => "github"
"https://www.cnet.com" => "cnet"

👉 @frontendInterview

Войти в IT создали годный проект для всех Frontend разработчиков:

1️⃣ Прокачай свои навыки программирования без особых усилий
2️⃣ Каждый день на канале выходят курсы и статьи от ведущих специалистов на рынке IT
3️⃣ Больше не нужно тратить кучу времени на поиск хороших, бесплатных обучающих материалов в интернете

P.S. Мы сами уже давно подписаны и иногда берем контент у них 😏

​Какие основные функции Next.js вы знаете?

- getStaticProps: этот метод используется для получения данных во время сборки и предварительного рендеринга страницы в виде статического HTML. Он гарантирует, что данные будут доступны во время сборки и не будут изменяться при последующих запросах.

 export async function getStaticProps() {
   const res = await fetch('https://api.example.com/data');
   const data = await res.json();

   return {
     props: {
       data
     }
   };
 }

- getServerSideProps: Этот метод используется для получения данных по каждому запросу и предварительного рендеринга страницы на сервере. Его можно использовать, когда вам нужно получить данные, которые могут часто изменяться или зависят от пользователя.

 export async function getServerSideProps() {
   const res = await fetch('https://api.example.com/data');
   const data = await res.json();

   return {
     props: {
       data
     }
   };
 }

- getStaticPaths: этот метод используется в динамических маршрутах для указания списка путей, которые должны быть предварительно отрисованы во время сборки. Обычно используется для получения данных для динамических маршрутов с параметрами.
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

const paths = posts.map((post) => ({
params: { id: post.id }
}));

return {
paths,
fallback: false
};
}

👉 @frontendInterview

Все кто выбрал вариант 1 - молодцы 👍

Остальным рекомендую с этим разобраться в первую очередь!

Это простые и очень мощные инструменты для адаптивных макетов

Например, чтобы расположить элементы как на картинке достаточно добавить 2 свойства для родительского блока:

flex;
align-items: (один из вариантов)


Но это только верхушка айсберга, чтобы понастоящему разобраться - поиграйтесь с этим тренажером

Ребята разложили все по полочкам, а задания можно выполнять прямо в браузере

😼 P.S. выравнивать нужно будет в основном котов

👉 @frontendInterview

​Какие хуки React вы знаете?

- useState: используется для управления состоянием в функциональных компонентах.
- useEffect: используется для выполнения побочных эффектов в функциональных компонентах, таких как получение данных или подписка на события.
- useContext: используется для доступа к значению контекста React в функциональном компоненте.
- useRef: Используется для создания изменяемых ссылок на элементы или значения, которые сохраняются между рендерами.
- useCallback: Используется для мемоизации функций, чтобы предотвратить ненужные повторные рендеры.
- useMemo: используется для мемоизации значений с целью повышения производительности за счет кэширования ресурсоемких вычислений.
- useReducer: Используется для управления состоянием с помощью функции редьюсера, аналогично тому, как работает Redux.
- useLayoutEffect: похож на useEffect, но эффект выполняется синхронно после всех мутаций DOM.

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

👉 @frontendInterview

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем 18 января.

👉 @frontendInterview

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!

🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати.

💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.

Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉

Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

👉 @frontendInterview

​Что такое prop drilling?

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

// Parent component
const Parent = () => {
const data = "Hello, World!";

return (
<div>
<ChildA data={data} />
</div>
);
};

// Intermediate ChildA component
const ChildA = ({ data }) => {
return (
<div>
<ChildB data={data} />
</div>
);
};

// Leaf ChildB component
const ChildB = ({ data }) => {
return <div>{data}</div>;
};

В этом примере проп data передается из компонента Parent в ChildA, а затем из ChildA в ChildB, даже если ChildA не использует проп напрямую. Это может стать проблемой при наличии множества уровней вложенности или когда доступ к данным должен осуществляться компонентами, находящимися ниже по дереву компонентов. Это может усложнить поддержку и понимание кода.
Проп дриллинг можно смягчить, используя другие шаблоны, такие как библиотеки управления контекстом или состоянием, такие как Redux или MobX. Эти подходы позволяют компонентам получать доступ к данным без необходимости передачи входных параметров через каждый промежуточный компонент.

👉 @frontendInterview

Web Application Security

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

👉 @frontendInterview

Заменить букву на ее позицию в алфавите

В этой задаче вам нужно, имея строку, заменить каждую букву на ее позицию в алфавите.
Если что-то в тексте не является буквой, игнорируйте это и не возвращайте его.
"a" = 1, "b" = 2, и т.д.

Пример:
alphabetPosition("abc.")
вернет "1 2 3"

👉 @frontendInterview

В чем разница между spread-оператором и rest-оператором?
Spread-оператор и rest-оператор - это два разных оператора, которые используются в JavaScript для работы с массивами и объектами.

Spread-оператор (...):

- Распространяет элементы массива или свойства объекта.
- Используется для создания нового массива или объекта, содержащего элементы или свойства исходного массива или объекта.
- Распаковывает элементы массива или свойства объекта, позволяя передавать их в другие функции или объединять с другими массивами или объектами.
Пример:

 const numbers = [1, 2, 3];
 const newArray = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]
 const person = { name: 'John', age: 30 };
 const newPerson = { ...person, city: 'New York' }; // { name: 'John', age: 30, city: 'New York' }

Rest-оператор (...):
- Собирает оставшиеся аргументы функции в массив.
- Используется для объявления параметра функции, который будет содержать все оставшиеся аргументы, переданные при вызове функции.
Пример:
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

function printNames(first, last, ...middle) {
console.log('First name:', first);
console.log('Last name:', last);
console.log('Middle names:', middle);
}

printNames('John', 'Doe', 'Smith', 'Johnson', 'Williams');
// First name: John
// Last name: Doe
// Middle names: ['Smith', 'Johnson', 'Williams']

👉 @frontendInterview