Frontend | Вопросы собесов

Что такое адаптивная верстка ? Спросят с вероятностью 7% Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами. Основные техники и принципы адаптивной верстки включают: 1️⃣Медиа-запросы (Media Queries): ✅Это CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.

        /* Стили по умолчанию для мобильных устройств */
    body {
        font-size: 16px;
    }

    /* Стили для планшетов */
    @media (min-width: 768px) {
        body {
            font-size: 18px;
        }
    }

    /* Стили для настольных компьютеров */
    @media (min-width: 1024px) {
        body {
            font-size: 20px;
        }
    }

2️⃣Гибкие макеты (Fluid Grids): ✅Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана.

        .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .column {
        float: left;
        width: 50%;
    }

3️⃣Гибкие изображения (Flexible Images): ✅Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.

        img {
        max-width: 100%;
        height: auto;
    }

4️⃣Использование фреймворков: ✅Существуют популярные CSS-фреймворки, такие как Bootstrap и Foundation, которые предоставляют готовые решения для адаптивной верстки.

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <div class="container">
        <div class="row">
            <div class="col-md-6">Контент 1</div>
            <div class="col-md-6">Контент 2</div>
        </div>
    </div>

5️⃣Мобильный подход (Mobile-First): ✅Разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов. Это позволяет сосредоточиться на ключевом контенте и функциональности.

        /* Стили для мобильных устройств */
    body {
        font-size: 16px;
    }

    /* Стили для более крупных экранов */
    @media (min-width: 768px) {
        body {
            font-size: 18px;
        }
    }

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Привет, ребят, хочу сделать так, чтобы для каждого вопроса было поясняющее видео в reels/shorts формате. Ищу человека который с этим поможет, работу оплачу. Вопросы есть, нужен простой монтаж и озвучка. Все видосы делаются по шаблону. Если интересует такая подработка напишите мне @kivaiko

Что такое селектор ? Спросят с вероятностью 7% Селектор — это шаблон, который используется для выбора элементов HTML на веб-странице, к которым будут применяться стили. Селекторы позволяют разработчикам точно указывать, какие элементы должны быть стилизованы, используя различные критерии. Вот основные типы селекторов и их примеры: 1️⃣Селекторы по тегу: ✅Выбирает все элементы с определённым тегом.

        p {
        color: blue;
    }
    

2️⃣Селекторы по классу: ✅Выбирает элементы с определённым классом. Класс указывается с помощью точки ..

        .example {
        font-size: 16px;
    }
    

3️⃣Селекторы по идентификатору (ID): ✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #. ✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #.

        #uniqueElement {
        background-color: yellow;
    }
    

4️⃣Комбинированные селекторы: ✅Позволяют выбирать элементы, используя комбинацию различных критериев. ✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.

        div p {
        margin: 20px;
    }

✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.

        div > p {
        margin: 20px;
    }

✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.

        h1 + p {
        margin-top: 10px;
    }

✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.

        a[href] {
        color: red;
    }

5️⃣Псевдоклассы: ✅Позволяют выбирать элементы в определённом состоянии.

        a:hover {
        color: green;
    }

6️⃣Псевдоэлементы: ✅Позволяют стилизовать определённые части элементов.

        p::first-line {
        font-weight: bold;
    }

Примеры:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример селекторов</title>
    <style>
        /* Селектор по тегу */
        h1 {
            color: blue;
        }
        /* Селектор по классу */
        .highlight {
            background-color: yellow;
        }
        /* Селектор по ID */
        #main {
            font-size: 20px;
        }
        /* Селектор по атрибуту */
        a[target="_blank"] {
            color: red;
        }
        /* Псевдокласс */
        a:hover {
            text-decoration: underline;
        }
        /* Псевдоэлемент */
        p::first-letter {
            font-size: 200%;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Заголовок</h1>
    <p class="highlight">Это пример текста с подсветкой.</p>
    <p id="main">Это основной текст.</p>
    <a href="https://example.com" target="_blank">Ссылка</a>
</body>
</html>

Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

В чём разница между видами замыкания ? Спросят с вероятностью 3% Замыкание (closure) — это функция, которая имеет доступ к переменным из своей внешней области видимости даже после завершения выполнения этой внешней функции. Однако, замыкания могут принимать разные формы в зависимости от их использования и контекста. Рассмотрим различные виды замыканий и их особенности. Виды 1️⃣Простое замыкание Возникает, когда внутренняя функция имеет доступ к переменным внешней функции.

function outerFunction() {
  let outerVariable = 'I am outside!';
  function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}

const inner = outerFunction();
inner(); // 'I am outside!'

Здесь innerFunction замыкается на переменной outerVariable из внешней функции outerFunction. 2️⃣Замыкание с доступом к аргументам внешней функции Внутренняя функция может также замыкаться на аргументах внешней функции.

function greet(greeting) {
  return function(name) {
    console.log(`${greeting}, ${name}!`);
  };
}

const sayHello = greet('Hello');
sayHello('Alice'); // 'Hello, Alice!'

Здесь функция, возвращаемая greet, замыкается на аргументе greeting. 3️⃣Инкапсуляция данных Часто используются для инкапсуляции данных, скрывая переменные и предоставляя доступ к ним только через функции.

function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1

В этом примере переменная count инкапсулирована и доступна только через методы increment и getCount. 4️⃣Частично применённые функции Можно использовать для создания частично применённых функций, которые фиксируют некоторые аргументы.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

Здесь функция multiply создаёт частично применённую функцию, фиксируя аргумент a. 5️⃣Фабрика функций Позволяют создавать функции, которые генерируют другие функции с определённым поведением.

function createGreeter(greeting) {
  return function(name) {
    console.log(`${greeting}, ${name}!`);
  };
}

const helloGreeter = createGreeter('Hello');
helloGreeter('Bob'); // 'Hello, Bob!'

const hiGreeter = createGreeter('Hi');
hiGreeter('Charlie'); // 'Hi, Charlie!'

Здесь createGreeter создаёт новые функции для различных приветствий. 6️⃣Асинхронные замыкания Играют ключевую роль в асинхронном программировании, так как позволяют сохранять контекст между асинхронными вызовами.

function fetchData(url) {
  let data = null;

  setTimeout(() => {
    data = 'Data from ' + url;
    console.log(data); // 'Data from example.com'
  }, 1000);

  return function() {
    return data;
  };
}

const getData = fetchData('example.com');
setTimeout(() => {
  console.log(getData()); // 'Data from example.com'
}, 1500);

В этом примере замыкание сохраняет переменную data и позволяет к ней доступ после асинхронной операции. 7️⃣Рекурсивные замыкания Могут быть использованы для создания рекурсивных функций, которые запоминают контекст и могут вызывать себя.

function createFactorial() {
  return function factorial(n) {
    if (n <= 1) {
      return 1;
    }
    return n * factorial(n - 1);
  };
}

const factorial = createFactorial();
console.log(factorial(5)); // 120

Здесь factorial замыкается на самой себе, что позволяет реализовать рекурсивное вычисление факториала. Замыкания (closures) — это функции, которые "запоминают" контекст, в котором они были созданы. Они могут использоваться для сохранения состояния, инкапсуляции данных, создания частично применённых функций, фабрики функций, работы с асинхронным кодом и рекурсией. Эти особенности делают замыкания мощным инструментом для управления данными и логикой. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как работает браузер ? Спросят с вероятностью 7% Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку: 1️⃣Запрос ресурса: ✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с http:// или https://, браузер отправляет запрос на сервер.

        GET /index.html HTTP/1.1
    Host: example.com

2️⃣DNS-разрешение: ✅Браузер преобразует доменное имя (например, example.com) в IP-адрес с помощью DNS-сервера. 3️⃣Установка соединения: ✅Браузер устанавливает TCP-соединение с сервером, а если используется https, то устанавливает также SSL/TLS-соединение для безопасной передачи данных. 4️⃣Отправка HTTP-запроса: ✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.

        GET /index.html HTTP/1.1
    Host: example.com

5️⃣Получение HTTP-ответа: ✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.

        HTTP/1.1 200 OK
    Content-Type: text/html

    <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

6️⃣Разбор (парсинг) HTML: ✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.

        <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

7️⃣Обработка CSS: ✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).

       h1 {
        color: blue;
    }

8️⃣Построение рендер-дерева: ✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице. 9️⃣Визуализация (рендеринг): ✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка). 🔟Обработка JavaScript: ✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.

document.querySelector('h1').textContent = 'Hello, JavaScript!';

1️⃣1️⃣Асинхронные операции: ✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы. Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу. Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое стек вызовов ? Спросят с вероятностью 3% Стек вызовов (call stack) — это структура данных, используемая для управления вызовами функций в программах. В контексте выполнения, стек вызовов помогает интерпретатору отслеживать, какая функция выполняется в данный момент, какие функции вызвали текущую функцию и какие функции будут вызваны далее. Как он работает 1️⃣Добавление вызова функции в стек (Push): ✅Когда вызывается новая функция, она добавляется в верхнюю часть стека вызовов. Этот процесс называется "push". 2️⃣Удаление вызова функции из стека (Pop): ✅Когда функция завершает свое выполнение, она удаляется из верхней части стека вызовов. Этот процесс называется "pop". 3️⃣Последовательность выполнения: ✅Стек вызовов работает по принципу LIFO (Last In, First Out), что означает, что последняя добавленная функция будет завершена первой. Рассмотрим простой пример с несколькими вложенными вызовами функций:

function firstFunction() {
  console.log('Начало firstFunction');
  secondFunction();
  console.log('Конец firstFunction');
}

function secondFunction() {
  console.log('Начало secondFunction');
  thirdFunction();
  console.log('Конец secondFunction');
}

function thirdFunction() {
  console.log('Начало thirdFunction');
  // Третья функция не вызывает других функций
  console.log('Конец thirdFunction');
}

firstFunction();

Пошаговое выполнение и изменения в стеке вызовов 1️⃣Вызов `firstFunction`: ✅Стек вызовов: [firstFunction] ✅Вывод: Начало firstFunction 2️⃣Вызов stack) — это струизо такое стек вызо ✅Стек вызовов: [firstFunction, secondFunction] ✅Вывод: Начало secondFunction 3️⃣Вызов thirdFunction изо такое стек вызов ✅Стек вызовов: [firstFunction, secondFunction, thirdFunction] ✅Вывод: Начало thirdFunction ✅Вывод: Конец thirdFunction 4️⃣Завершение thirdFunction: ✅Стек вызовов: [firstFunction, secondFunction] ✅Вывод: Конец secondFunction 5️⃣Завершение secondFunction: ✅Стек вызовов: [firstFunction] ✅Вывод: Конец firstFunction 6️⃣Завершениеck) — это структу ✅Стек вызовов: [] ✅Все функции завершены. Важные моменты 1️⃣Переполнение стека (Stack Overflow): ✅Если функция вызывает саму себя бесконечно (рекурсия без базового случая), стек вызовов будет заполняться до тех пор, пока не закончится память, выделенная для стека. Это приведет к ошибке переполнения стека (stack overflow).

      function recursiveFunction() {
     recursiveFunction();
   }

   recursiveFunction(); // Это вызовет ошибку переполнения стека
   

2️⃣Асинхронные вызовы: ✅Не блокируют основной поток выполнения и не добавляются в стек вызовов. Вместо этого они управляются очередью задач (task queue) и циклом событий (event loop).

      function asyncFunction() {
     console.log('Начало asyncFunction');
     setTimeout(() => {
       console.log('Выполнение асинхронной задачи');
     }, 1000);
     console.log('Конец asyncFunction');
   }

   asyncFunction();
   // Вывод:
   // Начало asyncFunction
   // Конец asyncFunction
   // Выполнение асинхронной задачи (через 1 секунду)
   

Стек вызовов — это структура данных, которая управляет вызовами функций в JavaScript. Он работает по принципу LIFO (Last In, First Out), добавляя вызовы функций в верхнюю часть стека и удаляя их по завершении. Это помогает отслеживать последовательность выполнения функций и управлять текущим состоянием программы. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Привет, я Леха. Вопросы собеседований берутся с моего сайта easyoffer.ru. Его я делал как пет-проект, чтобы устроиться на работу, но сейчас проект уже перерастает в стартап и я пишу об этом в своем TG блоге Идущий к IT и на YouTube.

"Как считается вероятность вопросов?"

Об этом писал в статье на Habr ➖Если нашли ошибку в посте пишите @aurumsunset ➖Если хотите купить рекламу на канале пишите @easyoffer_adv ➖Чтобы получить доступ к приватной группе, где мы выкладываем реальные записи собеседований переходите в бота ➖Аналогично для тестовых заданий вот этот бот

Что такое solid ? Спросят с вероятностью 7% Принципы SOLID — это набор из пяти принципов ООП, которые помогают разработчикам создавать более понятный, гибкий и поддерживаемый код. Эти принципы были популяризированы Робертом Мартином (Robert C. Martin), также известным как "дядя Боб". Вот что обозначает каждый принцип: 1️⃣Single Responsibility Principle (Принцип единственной ответственности): ✅Каждый класс должен иметь одну и только одну причину для изменения, то есть одну ответственность. ✅Это помогает сделать код более понятным и облегчает его поддержку, так как каждая часть кода отвечает только за одну конкретную задачу.

        // Пример плохого кода
    class User {
        void saveToDatabase() {
            // сохраняет пользователя в базу данных
        }
        
        void sendEmail() {
            // отправляет приветственное письмо пользователю
        }
    }

    // Пример хорошего кода
    class UserRepository {
        void save(User user) {
            // сохраняет пользователя в базу данных
        }
    }
    
    class EmailService {
        void sendWelcomeEmail(User user) {
            // отправляет приветственное письмо пользователю
        }
    }
    

2️⃣Open/Closed Principle (Принцип открытости/закрытости): ✅Программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации. ✅Это означает, что мы должны иметь возможность добавлять новый функционал без изменения существующего кода.

        // Пример плохого кода
    class Rectangle {
        void draw() {
            // рисует прямоугольник
        }
    }

    class Circle {
        void draw() {
            // рисует круг
        }
    }

    class GraphicEditor {
        void drawShape(Object shape) {
            if (shape instanceof Rectangle) {
                ((Rectangle) shape).draw();
            } else if (shape instanceof Circle) {
                ((Circle) shape).draw();
            }
        }
    }

    // Пример хорошего кода
    interface Shape {
        void draw();
    }

    class Rectangle implements Shape {
        public void draw() {
            // рисует прямоугольник
        }
    }

    class Circle implements Shape {
        public void draw() {
            // рисует круг
        }
    }

    class GraphicEditor {
        void drawShape(Shape shape) {
            shape.draw();
        }
    }
    

3️⃣Liskov Substitution Principle (Принцип подстановки Барбары Лисков): ✅Объекты в программе должны быть заменяемы экземплярами их подклассов без изменения правильности выполнения программы. ✅То есть, подклассы должны дополнять, а не изменять поведение базового класса.

        // Пример плохого кода
    class Bird {
        void fly() {}
    }

    class Ostrich extends Bird {
        void fly() {
            throw new UnsupportedOperationException();
        }
    }

    // Пример хорошего кода
    class Bird {}
    
    class FlyingBird extends Bird {
        void fly() {}
    }

    class Ostrich extends Bird {}
    
    class Sparrow extends FlyingBird {
        void fly() {
            // реализация полета для воробья
        }
    }

Принципы SOLID помогают писать код, который легко поддерживать и расширять. Это набор правил, которые говорят о том, как разделять обязанности между классами, как правильно наследовать и как строить интерфейсы и зависимости. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Какую проблему решает асинхронность в js ? Спросят с вероятностью 3% Асинхронность решает проблему блокировки основной нити выполнения (main thread) при выполнении длительных операций. Основная нить выполнения отвечает за обработку пользовательского интерфейса, а также за выполнение кода. Если длительные операции, такие как сетевые запросы, таймеры или ввод/вывод, выполняются синхронно, они могут блокировать пользовательский интерфейс, делая приложение неотзывчивым и неудобным для пользователя. Асинхронность позволяет выполнять такие операции параллельно, не блокируя основную нить. Основные проблемы 1️⃣Блокировка пользовательского интерфейса (UI) ✅Синхронные операции, такие как загрузка данных из сети, чтение файлов или выполнение сложных вычислений, могут блокировать основной поток, замораживая интерфейс и делая приложение неотзывчивым. ✅Асинхронные операции позволяют избежать этой блокировки, выполняя задачи в фоновом режиме и возвращаясь к основному потоку, когда результаты готовы.

function fetchData() {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://api.example.com/data', false); // false для синхронного запроса
  request.send();
  if (request.status === 200) {
    console.log(request.responseText);
  }
}

fetchData();
console.log('Этот код выполнится только после завершения fetchData');

2️⃣Параллельное выполнение задач ✅Асинхронные операции позволяют выполнять несколько задач параллельно, что повышает производительность и эффективность приложения. ✅Например, загрузка нескольких ресурсов (изображений, скриптов, стилей) одновременно может значительно ускорить время загрузки страницы.

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

Promise.all(urls.map(url => fetch(url).then(response => response.json())))
  .then(results => {
    console.log('All data fetched:', results);
  })
  .catch(error => console.error('Error fetching data:', error));

3️⃣Обработка событий и таймеров ✅Асинхронные функции, такие как setTimeout и setInterval, позволяют выполнять задачи с задержкой или периодически, не блокируя основной поток. ✅Это полезно для выполнения задач по расписанию, создания анимаций, обработки пользовательских событий и многого другого.

console.log('Start');
setTimeout(() => {
  console.log('Executed after 2 seconds');
}, 2000);
console.log('End');

4️⃣Работа с I/O (ввод/вывод) ✅Асинхронные операции ввода/вывода позволяют эффективно обрабатывать задачи чтения и записи данных, например, при работе с файлами или базами данных. ✅Это важно для серверных приложений, обрабатывающих множество одновременных запросов без блокировки.

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File content:', data);
});

console.log('This code runs while the file is being read');

Основные механизмы 1️⃣Коллбэки (Callbacks) ✅Функции обратного вызова, которые вызываются по завершении асинхронной операции.

function fetchData(callback) {
  setTimeout(() => {
    const data = 'Some data';
    callback(data);
  }, 1000);
}

fetchData(data => {
  console.log('Data received:', data);
});

Асинхронность решает проблему блокировки основной нити выполнения при выполнении длительных операций, таких как сетевые запросы, таймеры и операции ввода/вывода. Она позволяет выполнять эти задачи параллельно, не блокируя пользовательский интерфейс и обеспечивая более отзывчивое и эффективное поведение приложений. Асинхронность реализуется с помощью коллбэков, промисов и синтаксиса async/await. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно. Подписывайся: @frontend

Как работает react ? Спросят с вероятностью 7% React — это библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные, интерактивные UI из маленьких, изолированных частей кода, называемых компонентами. Он основывается на нескольких ключевых концепциях, которые обеспечивают его эффективность и гибкость. 1️⃣ Компонентный подход: Приложения состоят из компонентов. Компонент — это кусочек пользовательского интерфейса, который можно использовать повторно. Каждый компонент имеет своё состояние и пропсы (параметры, которые передаются от родительского компонента), что делает его независимым и способным к самостоятельной работе. 2️⃣ JSX: Использует JSX — синтаксис, похожий на HTML, для описания структуры интерфейса. Он делает код компонентов более читабельным и упрощает процесс их создания.

      function App() {
     return <div>Привет, мир!</div>;
   }
   

3️⃣ Виртуальный DOM: Одной из главных особенностей является использование виртуального DOM — лёгкой копии реального DOM. Это позволяет React оптимизировать обновления интерфейса, сначала применяя изменения к виртуальному DOM, а затем, после вычисления наиболее эффективных изменений, к реальному DOM. Это существенно повышает производительность, особенно при работе с большими объёмами данных. 4️⃣ Однонаправленный поток данных: Данные течут строго от родителей к детям через пропсы, что упрощает отладку и понимание приложений, так как знаешь, откуда пришли данные и как они изменяются. 5️⃣ Хуки: С появлением хуков он стал ещё более мощным и гибким. Хуки позволяют использовать состояние и другие его возможности без написания классов. Например, хук useState позволяет добавить состояние к функциональному компоненту.

      import { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>Вы кликнули {count} раз</p>
         <button onClick={() => setCount(count + 1)}>
           Нажми на меня
         </button>
       </div>
     );
   }
   

React предлагает мощный набор инструментов для быстрой и эффективной разработки интерактивных пользовательских интерфейсов. Он позволяет разрабатывать компоненты независимо, управлять их состоянием и пропсами, а также эффективно обновлять интерфейс, минимизируя взаимодействие с реальным DOM. React помогает создавать веб-страницы, которые быстро реагируют на действия пользователя, делая взаимодействие с сайтом плавным и приятным, не перезагружая страницу при каждом действии. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

🔓 Топовое обучение теперь доступно каждому! 😎 IT Syndicate — лучшее место для поиска курсов по IT-технологиям совершенно бесплатно. У нас ты найдешь материал по любым специальностям и уровням подготовки! 🔥 Заходи прямо сейчас, чтобы не потерять — IT Syndicate!

Зачем создавались библиотеки react и другие ? Спросят с вероятностью 3% Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для решения проблем и улучшения процессов разработки веб-приложений. Веб-разработка эволюционировала, и требования к производительности, масштабируемости, поддержке и интерактивности веб-приложений значительно возросли. Эти инструменты помогают разработчикам создавать более сложные, быстрые и поддерживаемые приложения. Рассмотрим основные причины создания таких библиотек и фреймворков: 1️⃣Управление состоянием и реактивность React Был создан для решения проблем управления состоянием и реактивности в пользовательских интерфейсах. Он предоставляет компонентный подход к построению UI и использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса. ✅Компонентный подход: Разделение пользовательского интерфейса на переиспользуемые компоненты улучшает структуру кода и его поддерживаемость. ✅Виртуальный DOM: Минимизирует прямые обновления реального DOM, используя виртуальный DOM для вычисления необходимых изменений и оптимизации производительности.

// Пример компонента React
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

2️⃣Обработка сложных данных и взаимодействий Angular Предоставляет комплексный фреймворк для построения крупных приложений с сложными взаимодействиями и управлением состоянием. ✅Двусторонняя привязка данных: Позволяет синхронизировать данные между моделью и представлением автоматически. ✅Встроенные инструменты и решения: Включает маршрутизацию, HTTP-клиент, формы и многое другое, что упрощает создание сложных приложений.

// Пример компонента Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class AppComponent {
  name = 'World';
}

3️⃣Простота и гибкость Vue.js Созданный Эваном Ю (Evan You), стремится предоставить простой и гибкий инструмент для построения пользовательских интерфейсов, который легко интегрируется с существующими проектами. ✅Легкий в освоении: Имеет простую и интуитивно понятную структуру. ✅Реактивность: Предоставляет мощную систему реактивности, которая автоматически отслеживает изменения данных и обновляет представление.

// Пример компонента Vue.js
<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'World',
    };
  },
};
</script>

4️⃣Повышение производительности Современные библиотеки и фреймворки разработаны с учетом производительности. Они оптимизируют работу с DOM, минимизируют количество перерисовок и предлагают механизмы для эффективного управления состоянием и обработкой данных. ✅Виртуальный DOM (React): Обновления в DOM происходят только тогда, когда это необходимо, что снижает нагрузку на браузер. ✅Change Detection (Angular): Оптимизированный механизм обнаружения изменений позволяет эффективно обновлять представление. Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для упрощения разработки сложных и интерактивных веб-приложений. Они решают проблемы управления состоянием, оптимизации производительности, модульности, улучшения процесса разработки и тестирования, а также предоставляют мощные инструменты и методологии для построения масштабируемых и поддерживаемых приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

💡 Огромная база актуальной теории для Frontend Разработчиков: Что такое TDD? Что такое AbortController в JS? Что такое SSE(Server-Sent Events)? Что такое Proxy в JavaScript? Что такое Каррирование? Что такое Mutation Observer? Для чего используется ключевое слово super() в дочерних классах? Какие есть коды ответа HTTP? Что такое блочная модель в CSS? Канал ведут опытные Frontend Разработчики, которые еженедельно проводят собеседования. Подпишись на @frontend_questions

Зачем нужны разные хештеги ? Спросят с вероятностью 7% Хештеги (#) в веб-разработке используются по-разному, в зависимости от контекста их применения. Во-первых, они могут использоваться в социальных сетях для группировки контента по определенным темам, что облегчает поиск информации. Во-вторых, в URL-адресах веб-страниц хештеги служат для навигации к определенной части страницы без перезагрузки (якорные ссылки). 1️⃣ Хештеги в социальных сетях: (#пример) помогают пользователям находить сообщения и контент по определенным темам или интересам в социальных сетях. Когда вы добавляете хештег к своему посту, он автоматически становится кликабельным, и любой может кликнуть по нему, чтобы увидеть другие посты с ним же. Это способствует объединению контента по схожим интересам и упрощает поиск нужной информации.

      #пример - делает ваш пост видимым для всех, кто ищет посты с этим хештегом.
   

2️⃣ Хештеги в URL (якорные ссылки): В веб-разработке они используются в URL для навигации к определенному разделу или элементу на странице без перезагрузки страницы. Это называется якорная ссылка. Когда пользователь кликает по такой ссылке, браузер прокручивает страницу к элементу, который имеет соответствующий идентификатор (id).

      Перейти к разделу 1
   <div id="section1">Содержимое раздела 1</div>
   

В этом примере, когда пользователь кликает на ссылку "Перейти к разделу 1", страница прокручивается к <div id="section1">. Разные хештеги нужны для организации и упрощения поиска контента в социальных сетях, а также для навигации по веб-страницам без перезагрузки, направляя пользователя к определенному разделу или элементу страницы. Это делает информацию более доступной и интерактивной. Хештеги помогают нам быстро находить интересующую информацию в интернете и перемещаться по веб-страницам, не перезагружая их целиком. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Как id может участвовать в ссылке ? Спросят с вероятностью 3% id атрибут элемента может использоваться для создания якорных ссылок (anchor links), которые позволяют переходить к определённому разделу или элементу на странице. Это особенно полезно для навигации по длинным страницам, позволяя пользователям быстро перейти к интересующему их контенту без необходимости прокручивать страницу вручную. Как это работает: 1️⃣ Установите атрибут id для целевого элемента на странице. Должен быть уникальным в пределах страницы.

<div id="section1">Это целевая секция</div>

2️⃣ Создайте ссылку с атрибутом href, значение которого начинается с символа #, за которым следует id целевого элемента.

Перейти к целевой секции

3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.

<!DOCTYPE html>
<html>
<head>
    <title>Пример страницы с якорными ссылками</title>
</head>
<body>

<h2>Перейти к Секции 1</h2>
<h2>Перейти к Секции 2</h2>

<div style="height:600px;">
    <p>Прокрутите вниз</p>
</div>

<h2 id="section1">Секция 1</h2>
<p>Некоторый контент...</p>

<div style="height:500px;">
    <p>Прокрутите вниз</p>
</div>

<h2 id="section2">Секция 2</h2>
<p>Ещё некоторый контент...</p>

</body>
</html>

В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице. Дополнительные применения: ✅ Создание навигационного меню: Используется для быстрого доступа к разделам на одностраничных сайтах или длинных лендингах. ✅ Ссылки на заметки: Позволяет создавать внутренние ссылки в документах или статьях, упрощая навигацию по тексту. Использование id в ссылках делает веб-страницы более удобными для пользователей, облегчая доступ к нужной информации и улучшая общий пользовательский опыт. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Собрал для тебя больше 1000 джуниор вакансий и стажировок. По ссылке ниже ты получишь доступ к: 1) Агрегатору сотен Junior вакансий и стажировок с разных источников: телеграм каналы, hh, linkedIn и многие другие. 2) Списку из 60 разных источников вакансий и стажировок. 👉 Переходи по этой ссылке и пользуйся!

Для чего нужен cors ? Спросят с вероятностью 3% CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак. Основные задачи 1️⃣Обеспечение безопасности ✅CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов. 2️⃣Разрешение легитимного кросс-доменного обмена данными ✅CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах. Как он работает Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов. 1️⃣HTTP-заголовки, используемые для CORS ✅Access-Control-Allow-Origin: Определяет, какие домены могут обращаться к ресурсам сервера. ✅Access-Control-Allow-Methods: Определяет, какие HTTP-методы (например, GET, POST, PUT, DELETE) разрешены для кросс-доменных запросов. ✅Access-Control-Allow-Headers: Определяет, какие заголовки могут быть использованы в кросс-доменных запросах. ✅Access-Control-Allow-Credentials: Указывает, разрешено ли отправлять куки и авторизационные данные вместе с запросом. ✅Access-Control-Max-Age: Указывает, как долго результаты проверки могут кэшироваться. 2️⃣Процесс CORS-запроса Простой запрос (Simple Request) ✅Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую. Предварительный запрос (Preflight Request) ✅Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ. ✅Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос. Пример простого запроса: Запрос:

GET /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com

Ответ:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json

{"message": "Success"}

Пример предварительного запроса: Предварительный запрос:

OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Ответ на предварительный запрос:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://anotherdomain.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Основной запрос (если предварительный запрос успешен):

POST /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Content-Type: application/json

{"data": "Some data"}

Ответ на основной запрос:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json

{"message": "Data received"}

CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он помогает защитить данные от межсайтовых атак и разрешает легитимные кросс-доменные запросы, обеспечивая взаимодействие между веб-приложениями и API, размещенными на разных серверах. CORS добавляет специальные HTTP-заголовки для управления доступом и может включать предварительные запросы для проверки разрешений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal