Как работает 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. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какую проблему решает асинхронность в 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 разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое 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 разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как работает браузер ?
Спросят с вероятностью 7%

Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:

1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с https:// или 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 разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое селектор ?
Спросят с вероятностью 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 разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Привет, ребят, хочу сделать так, чтобы для каждого вопроса было поясняющее видео в reels/shorts формате.

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

Если интересует такая подработка напишите мне @kivaiko

Что такое адаптивная верстка ?
Спросят с вероятностью 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 разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Для чего служат vh, vw при указании размеров ?
Спросят с вероятностью 7%

vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.

Определения:
✅`vh` (viewport height): 1 vh равен 1% от высоты области просмотра.
✅`vw` (viewport width): 1 vw равен 1% от ширины области просмотра.

Примеры:

1️⃣Указание высоты элемента в `vh`:

        .full-height {
        height: 100vh; /* Элемент будет занимать 100% высоты области просмотра */
    }

В этом примере элемент с классом full-height всегда будет занимать всю высоту области просмотра, независимо от высоты окна браузера.

2️⃣Указание ширины элемента в vw:

        .full-width {
        width: 100vw; /* Элемент будет занимать 100% ширины области просмотра */
    }

В этом примере элемент с классом full-width всегда будет занимать всю ширину области просмотра, независимо от ширины окна браузера.

3️⃣Создание адаптивного текста:

        .responsive-text {
        font-size: 2vw; /* Размер шрифта будет 2% от ширины области просмотра */
    }

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

Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.

Пример с vh и vw:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример использования vh и vw</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .header {
            height: 10vh; /* Высота заголовка - 10% от высоты области просмотра */
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main {
            height: 80vh; /* Высота основного контента - 80% от высоты области просмотра */
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3vw; /* Размер шрифта - 3% от ширины области просмотра */
        }

        .footer {
            height: 10vh; /* Высота подвала - 10% от высоты области просмотра */
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="header">
        Заголовок
    </div>
    <div class="main">
        Основной контент
    </div>
    <div class="footer">
        Подвал
    </div>
</body>
</html>

vh и vw в CSS используются для указания размеров элементов относительно высоты и ширины окна браузера. Это позволяет создавать адаптивные дизайны, которые автоматически подстраиваются под размеры экрана.

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

🔐 База собесов | 🔐 База тестовых

Из чего строится размер элементы ?
Спросят с вероятностью 7%

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

1️⃣Content (Содержимое):
✅`width`: задает ширину содержимого элемента.
✅`height`: задает высоту содержимого элемента.

        .element {
        width: 200px;
        height: 100px;
    }

2️⃣Padding (Внутренние отступы):
✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).

        .element {
        padding: 10px; /* Внутренние отступы со всех сторон */
    }

3️⃣Border (Рамка):
✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.

        .element {
        border: 2px solid black; /* Толщина, стиль и цвет рамки */
    }

4️⃣Margin (Внешние отступы):
✅`margin`: задает пространство между элементом и соседними элементами.

        .element {
        margin: 20px; /* Внешние отступы со всех сторон */
    }

Совокупность всех этих свойств определяет общий размер элемента:
✅Размер содержимого (width + height)
✅Внутренние отступы (padding)
✅Рамка (border)
✅Внешние отступы (margin)

Полная модель:
✅Content: фактическое содержимое элемента.
✅Padding: пространство вокруг содержимого.
✅Border: рамка вокруг padding.
✅Margin: пространство вокруг border, отделяющее элемент от других элементов.

Box Model (Модель коробки):
Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример Box Model</title>
    <style>
        .element {
            width: 200px; /* Ширина содержимого */
            height: 100px; /* Высота содержимого */
            padding: 10px; /* Внутренние отступы */
            border: 2px solid black; /* Рамка */
            margin: 20px; /* Внешние отступы */
        }
    </style>
</head>
<body>
    <div class="element">Пример элемента</div>
</body>
</html>

Рассчет общего размера элемента:
✅Content: 200px (width) x 100px (height)
✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте)
✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте)
✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов)

Итоговый размер элемента, включая padding и border:
✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px
✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px

Box-sizing:
Позволяет изменять расчет размеров элемента. Значение border-box включает padding и border в свойства width и height.

.element {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
}

В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры.

Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице.

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

🔐 База собесов | 🔐 База тестовых

Какой смысл замыканий, если бы не было функций высшего порядка ?
Спросят с вероятностью 3%

Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают.

Основные сценарии использования замыканий

1️⃣Сохранение состояния
✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".

      function createCounter() {
     let count = 0;
     return function() {
       count++;
       return count;
     };
   }

   const counter = createCounter();
   console.log(counter()); // 1
   console.log(counter()); // 2
   console.log(counter()); // 3
   

В этом примере функция createCounter создает счетчик, который сохраняет свое состояние между вызовами.

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

      function createPrivateCounter() {
     let count = 0;
     return {
       increment: function() {
         count++;
       },
       getValue: function() {
         return count;
       }
     };
   }

   const privateCounter = createPrivateCounter();
   privateCounter.increment();
   console.log(privateCounter.getValue()); // 1
   console.log(privateCounter.count); // undefined (count недоступен)
   

Здесь мы инкапсулируем переменную count и предоставляем методы для ее изменения и получения значения.

Почему замыкания полезны даже без функций высшего порядка

1️⃣Лексическое окружение
✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.

      function outer() {
     let outerVariable = 'I am outside!';
     function inner() {
       console.log(outerVariable);
     }
     inner();
   }

   outer(); // 'I am outside!'
   

Здесь функция inner имеет доступ к переменной outerVariable, даже если она вызывается вне ее лексической области видимости.

2️⃣Создание частных данных
✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.

function Person(name) {
  let _name = name;
  return {
    getName: function() {
      return _name;
    },
    setName: function(newName) {
      _name = newName;
    }
  };
}

const person = Person('John');
console.log(person.getName()); // 'John'
person.setName('Doe');
console.log(person.getName()); // 'Doe'
console.log(person._name); // undefined (_name is not accessible)

В этом примере _name является частной переменной и доступна только через методы getName и setName.

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

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

🔐 База собесов | 🔐 База тестовых

За что отвечает z-index ?
Спросят с вероятностью 7%

z-index — это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.

Как он работает?

✅Контекст наложения (stacking context): Чтобы z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться.
✅Числовое значение: z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример z-index</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 80px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного.

Почему это важно?

✅Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
✅Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.

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

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

🔐 База собесов | 🔐 База тестовых

Что знаешь о приоритете селекторов ?
Спросят с вероятностью 7%

Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.

Как она вычисляется?

Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.

✅A: Инлайновые стили (например, style="color: red;") имеют самую высокую специфичность.
✅B: Количество ID-селекторов в селекторе (например, #header).
✅C: Количество классов, атрибутов и псевдоклассов (например, .class, [type="text"], :hover).
✅D: Количество тегов и псевдоэлементов (например, div, h1, ::before).

Рассмотрим несколько примеров и определим их специфичность:

1️⃣#main-content — (0, 1, 0, 0)
2️⃣.article p — (0, 0, 1, 1)
3️⃣header h1 span — (0, 0, 0, 3)
4️⃣div#main .content .text — (0, 1, 2, 1)

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

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример специфичности</title>
    <style>
        p {
            color: black; /* (0, 0, 0, 1) */
        }
        .text {
            color: blue; /* (0, 0, 1, 0) */
        }
        #highlight {
            color: red; /* (0, 1, 0, 0) */
        }
        p#highlight {
            color: green; /* (0, 1, 0, 1) */
        }
    </style>
</head>
<body>
    <p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>

В этом примере на <p> элемент действует несколько селекторов с разной специфичностью:

1️⃣p имеет специфичность (0, 0, 0, 1)
2️⃣.text имеет специфичность (0, 0, 1, 0)
3️⃣#highlight имеет специфичность (0, 1, 0, 0)
4️⃣p#highlight имеет специфичность (0, 1, 0, 1)

Поскольку p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.

Почему это важно?

✅Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
✅Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
✅Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.

Специфичность селекторов определяет, какие CSS-стили будут применяться к элементу. Специфичность основывается на типах селекторов и их количестве. Чем более специфичный селектор, тем выше его приоритет.

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

🔐 База собесов | 🔐 База тестовых

Какие псевдоэлементы знаешь и используешь ?
Спросят с вероятностью 7%

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

Основные псевдоэлементы

1️⃣::before
2️⃣::after
3️⃣::first-line
4️⃣::first-letter
5️⃣::selection

Описание и примеры использования

1️⃣`::before` и `::after`:
Эти псевдоэлементы позволяют добавлять содержимое до и после содержимого выбранного элемента. Их часто используют для декоративных целей.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::before и ::after</title>
    <style>
        .button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            text-transform: uppercase;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }
        .button::before, .button::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transition: all 0.3s;
        }
        .button::before {
            top: 0;
            left: 0;
        }
        .button::after {
            bottom: 0;
            right: 0;
        }
        .button:hover::before {
            width: 0;
        }
        .button:hover::after {
            width: 0;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Кнопка</a>
</body>
</html>

В этом примере ::before и ::after используются для добавления анимационных линий к кнопке.

2️⃣`::first-line`:
Этот псевдоэлемент позволяет стилизовать первую строку текста внутри блока.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-line</title>
    <style>
        p::first-line {
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <p>Это пример параграфа. Первая строка этого текста будет стилизована жирным шрифтом и красным цветом.</p>
</body>
</html>

3️⃣`::first-letter`:
Этот псевдоэлемент позволяет стилизовать первую букву блока текста.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример ::first-letter</title>
    <style>
        p::first-letter {
            font-size: 2em;
            color: blue;
            float: left;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <p>Это пример параграфа. Первая буква этого текста будет увеличена и окрашена в синий цвет.</p>
</body>
</html>

Почему это важно?

✅Стилизация без изменения HTML: Псевдоэлементы позволяют добавлять и стилизовать части содержимого без необходимости изменять HTML-разметку.
✅Декоративные эффекты: С их помощью можно создавать сложные визуальные эффекты и улучшать пользовательский интерфейс.
✅Удобство и гибкость: Псевдоэлементы облегчают реализацию многих задач, таких как добавление иконок, создания кастомных подчеркиваний и т.д.

Псевдоэлементы добавляют и стилизуют части содержимого элементов. Основные псевдоэлементы: ::before, ::after, ::first-line, ::first-letter и ::selection. Они позволяют улучшать дизайн и удобство интерфейсов без изменения HTML-кода.

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

🔐 База собесов | 🔐 База тестовых