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

Зачем необходим dom ?
Спросят с вероятностью 7%

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

Зачем он нужен

1️⃣Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими.
2️⃣Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы.
3️⃣Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей.
4️⃣Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы.
5️⃣Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы.

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

Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами.

Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства

1️⃣Доступ к элементам:
✅document.getElementById(id): Возвращает элемент по его id.
✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом.
✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом.
✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору.
✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору.

2️⃣Создание и удаление элементов:
✅document.createElement(tagName): Создает новый элемент.
✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя.
✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя.

3️⃣Изменение содержимого и атрибутов:
✅element.innerHTML: Изменяет или получает HTML-содержимое элемента.
✅element.textContent: Изменяет или получает текстовое содержимое элемента.
✅element.setAttribute(name, value): Устанавливает значение атрибута элемента.
✅element.getAttribute(name): Получает значение атрибута элемента.

Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

DOM необходим для программного доступа и управления содержимым веб-страницы. Он позволяет изменять текст, структуру, стили и обрабатывать события на странице.

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

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

❤13👍13

6.96K views09:10

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

🤔 Что такое JSX в контексте React?

Anonymous Quiz

75%

Расширение JavaScript

Тип данных

Стиль написания CSS

20%

Функции для манипуляции DOM

👍6🤯6

2.19K voters6.4K views16:10

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

Почему не пишем все стили в style ?
Спросят с вероятностью 7%

Написание всех стилей непосредственно в атрибуте style не является хорошей практикой по ряду причин:

1️⃣Разделение структуры и презентации

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

2️⃣Переиспользование стилей

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

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

3️⃣Упрощение изменений и обновлений

Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

/* CSS файл */
.text-red {
  color: red;
}

HTML:

<p class="text-red">This text is red.</p>
<p class="text-red">This text is also red.</p>

Если нужно изменить цвет, достаточно поменять его в одном месте в CSS-файле.

4️⃣Улучшение производительности

Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть.

5️⃣Семантика и поддержка инструментов разработки

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

6️⃣Поддержка медиа-запросов и адаптивного дизайна

CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.

/* CSS файл */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Плохо vs Хорошо

Плохо (все стили в `style`):

<p style="color: red; font-size: 16px;">This is a paragraph.</p>
<p style="color: red; font-size: 16px;">This is another paragraph.</p>

Хорошо (использование CSS):

/* CSS файл */
.red-text {
  color: red;
  font-size: 16px;
}

HTML:

<p class="red-text">This is a paragraph.</p>
<p class="red-text">This is another paragraph.</p>

Мы не пишем все стили в атрибуте style, потому что это делает код сложным для чтения, поддержания и повторного использования. Вместо этого мы используем CSS-файлы для разделения структуры и стилизации, что упрощает работу с кодом и повышает производительность.

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

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

👍22❤16

6.91K views09:10

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

🤔 Что такое JSX в контексте React?

Anonymous Quiz

86%

Расширение JavaScript

Тип данных

Стиль написания CSS

11%

Функция для манипуляции DOM

👍6🤯5

2.16K voters6.15K views16:10

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

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

Центрирование элементов может быть выполнено несколькими способами, в зависимости от типа элемента (блочный или строчный), его размеров и родительского контейнера. Вот основные методы центрирования элементов по горизонтали и вертикали:

Центрирование по горизонтали

1️⃣Использование `text-align` для строчных и встроенно-блочных элементов

.container {
  text-align: center;
}

2️⃣Использование margin: auto для блочных элементов с фиксированной шириной

.element {
  width: 50%;
  margin: 0 auto;
}

Центрирование по вертикали

1️⃣Использование Flexbox

Позволяет легко центрировать элементы по горизонтали и вертикали.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

2️⃣Использование Grid Layout

Также предоставляет простые способы для центрирования.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

Комбинированное центрирование (по горизонтали и вертикали)

1️⃣Flexbox

Удобен для центрирования по обеим осям.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

2️⃣Grid Layout

Предоставляет способ центрирования по горизонтали и вертикали с использованием place-items.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

3️⃣Абсолютное позиционирование

В сочетании с трансформацией.

.container {
  position: relative;
  height: 100vh; /* Высота контейнера */
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование с учетом размеров элемента */
}

HTML:

<div class="container">
  <div class="element">Центрированный элемент</div>
</div>

Центрировать элементы можно с помощью различных методов: text-align для строчных элементов, margin: auto для блочных элементов, Flexbox и Grid для универсального центрирования, а также абсолютного позиционирования с трансформацией.

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

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

👍28❤2

6.75K views09:10

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

Чем синхронный код отличается от асинхронного ?
Спросят с вероятностью 7%

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

Синхронный код

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

Синхронного кода:

function syncTask() {
  console.log('Начало');
  for (let i = 0; i < 1000000000; i++) { /* Длительная операция */}
  console.log('Конец');
}

syncTask();
console.log('Это будет выполнено после syncTask');

В этом примере, пока длительная операция (цикл) не завершится, программа не продолжит выполнение и следующий console.log не будет вызван.

Асинхронный код

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

С использованием коллбеков:

console.log('Начало');

setTimeout(() => {
  console.log('Асинхронная операция');
}, 1000);

console.log('Конец');

В этом примере setTimeout ставит задачу на выполнение через 1 секунду, но код продолжает выполняться дальше, и console.log('Конец') вызывается до завершения асинхронной операции.

С использованием промисов:

console.log('Начало');

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Асинхронная операция завершена');
  }, 1000);
}).then(message => {
  console.log(message);
});

console.log('Конец');

С использованием async/await:

console.log('Начало');

async function asyncTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Асинхронная операция завершена');
}

asyncTask();
console.log('Конец');

Основные отличия

1️⃣Выполнение:
✅Синхронный код: Выполняется последовательно. Каждая операция должна завершиться до начала следующей.
✅Асинхронный код: Позволяет выполнять другие операции, пока текущая не завершится.

2️⃣Блокировка:
✅Синхронный код: Может блокировать выполнение всей программы, если операция длительная.
✅Асинхронный код: Не блокирует выполнение программы. Другие операции могут выполняться параллельно.

3️⃣Управление временем ожидания:
✅Синхронный код: Время ожидания одной операции может замедлить всю программу.
✅Асинхронный код: Ожидание длительных операций не мешает выполнению других задач.

4️⃣Простота понимания:
✅Синхронный код: Проще для понимания и отладки, так как выполняется последовательно.
✅Асинхронный код: Может быть сложнее для понимания из-за необходимости управления состоянием и ожиданием результатов асинхронных операций.

Примеры

✅Синхронный код: Полезен для простых и коротких операций, где блокировка не является проблемой.
✅Асинхронный код: Необходим для работы с сетевыми запросами, файлами, таймерами и другими длительными операциями, где важно не блокировать выполнение программы.

Синхронный код выполняется последовательно и может блокировать выполнение программы, если операция длительная. Асинхронный код позволяет выполнять другие операции параллельно с длительными, не блокируя выполнение программы.

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

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

👍23❤3

6.65K views09:10

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

В чем разница между get и post ?
Спросят с вероятностью 7%

Методы GET и POST — это два из наиболее часто используемых HTTP-методов для взаимодействия с веб-серверами. Они имеют разные цели и характеристики, которые делают их подходящими для различных задач.

GET

1️⃣Основное использование: Метод используется для запроса данных с сервера. Например, загрузка веб-страницы, получение данных из базы данных и т. д.
2️⃣Параметры в URL: Данные передаются в URL строки в виде параметров. Пример:

      GET /search?query=javascript&page=2 HTTP/1.1
   Host: www.example.com

3️⃣Кеширование: Запросы GET могут быть закешированы браузером и прокси-серверами, что повышает производительность при повторных запросах.
4️⃣Букмарклеты: Запросы GET могут быть сохранены в закладках (букмарклеты) и легко шарятся.
5️⃣Идемпотентность: Запросы GET должны быть идемпотентными, то есть выполнение одного и того же запроса несколько раз не должно изменять состояние сервера.
6️⃣Ограничение по длине: URL имеет ограничение по длине (в зависимости от браузера и сервера, обычно около 2000 символов).

POST

1️⃣Основное использование: Метод используется для отправки данных на сервер, например, при отправке формы, загрузке файла и т. д.
2️⃣Параметры в теле запроса: Данные передаются в теле HTTP-запроса, а не в URL. Пример:

      POST /submit-form HTTP/1.1
   Host: www.example.com
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 27

   username=john&password=1234

3️⃣Безопасность: Данные, передаваемые с помощью POST, не видны в URL, что делает этот метод более безопасным для передачи чувствительных данных (например, паролей). Однако данные все равно могут быть перехвачены, если не используется HTTPS.
4️⃣Кеширование: Запросы POST не кешируются браузером по умолчанию.
5️⃣Нет ограничений по длине: Метод POST не имеет таких же строгих ограничений по длине данных, как GET, что делает его подходящим для отправки больших объемов данных.
6️⃣Неидемпотентность: Запросы POST могут изменять состояние сервера, и выполнение одного и того же запроса несколько раз может привести к разным результатам (например, повторная отправка формы может создать дубликаты данных).

Примеры

GET:

<form action="/search" method="get">
  <input type="text" name="query" />
  <button type="submit">Search</button>
</form>

POST:

<form action="/submit-form" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

Сравнение

| Характеристика | GET | POST |
|--------------------------|-----------------------------------|-----------------------------------|
| Цель | Получение данных | Отправка данных |
| Параметры | В URL | В теле запроса |
| Кеширование | Да | Нет |
| Безопасность | Менее безопасный для чувствительных данных | Более безопасный для чувствительных данных (при использовании HTTPS) |
| Ограничение по длине | Да (обычно около 2000 символов) | Нет |
| Идемпотентность | Да | Нет |
| Возможность закладок | Да | Нет |

GET используется для получения данных и передает параметры в URL, может кешироваться и имеет ограничение по длине URL. POST используется для отправки данных, передает параметры в теле запроса, не кешируется и не имеет строгих ограничений по длине данных.

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

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

👍24❤4✍2🤔2😁1

6.45K views09:10

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

📌

Вопрос из таблицы?

💬

Спрашивают в ЦИФРА% собеседований

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

1️⃣ Клиент-серверные приложения

🤔

Веб-приложения (JavaScript/TypeScript)

Для веб-приложений запросы к серверу обычно выполняются на стороне клиента (в браузере) с использованием JavaScript или TypeScript. Чаще всего это делается с помощью API, таких как fetch или axios.

Пример с использованием fetch:

function fetchData() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

🤔

Веб-приложения с использованием библиотек/фреймворков

Когда вы используете фреймворки, такие как React, Angular или Vue, запросы к серверу обычно выполняются в компонентах или сервисах.

Пример с использованием React:

import React, { useEffect, useState } from 'react';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <div>
            {data ? <div>Data: {data}</div> : <div>Loading...</div>}
        </div>
    );
}

🤔

Мобильные приложения

Для мобильных приложений, разработанных с использованием таких технологий, как React Native, Swift или Kotlin, запросы к серверу также выполняются в коде приложения.

Пример с использованием React Native:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <View>
            {data ? <Text>Data: {data}</Text> : <Text>Loading...</Text>}
        </View>
    );
}

2️⃣

Серверные приложения

🤔

Серверные скрипты (Node.js)

В случае серверных приложений на Node.js запросы к другим серверам могут выполняться для интеграции с внешними API или микросервисами.

Пример с использованием axios:

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

🤔

Бэкенд-фреймворки (Django, Flask)

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

Пример с использованием Django (Python):

import requests
from django.http import JsonResponse

def fetch_data(request):
    response = requests.get('https://api.example.com/data')
    if response.status_code == 200:
        return JsonResponse(response.json())
    else:
        return JsonResponse({'error': 'Failed to fetch data'}, status=response.status_code)

🤔

Заключение

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

🤔

Краткое объяснение

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

🔥

ТОП ВОПРОСОВ С СОБЕСОВ

🔒

База собесов

| 🔒

База тестовых

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16❤2🔥1

5.87K views09:10

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

🤔 Что такое Single Page Application (SPA)?

Anonymous Quiz

43%

Приложение, состоящее из одной HTML страницы

56%

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

Приложение, работающее без подключения к интернету

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

😁10🔥7❤2🎉1

1.97K voters6.12K views16:10

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

Что такое hoisting ?
Спросят с вероятностью 7%

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

Hoisting переменных

Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:

var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5

Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15

Hoisting функций

Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.

hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
  console.log("This function is hoisted");
}

Функции, объявленные как function expression, ведут себя иначе. Только объявление переменной поднимается, но не ее присвоение. Это значит, что вы не можете вызвать такую функцию до ее фактического объявления.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
  console.log("This function is not hoisted");
};

Важные моменты

1️⃣Переменные, объявленные с помощью `var`, поднимаются, но их значение становится undefined до присвоения.
2️⃣Переменные, объявленные с помощью let ито такое поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе.
3️⃣Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления.
4️⃣Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения.

Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, позволяя использовать их до фактического объявления в коде. Однако, переменные, объявленные с let и const, остаются недоступными до их фактического объявления.

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

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

👍30❤5

6.75K views09:10

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

Что такое merge и rebase, в чем отличие друг от друга ?
Спросят с вероятностью 7%

merge и rebase — это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.

1️⃣Предположим, у вас есть две ветки: main и feature.
2️⃣В ветке feature вы сделали несколько коммитов.
3️⃣Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

В результате получается история, включающая коммит слияния:

A---B---C---F---G (main)
     \       /
      D---E (feature)

Где F и G — коммиты в ветке main, а D и E — коммиты в ветке feature. Коммит G — это коммит слияния, который объединяет изменения из feature в main.

Rebase (перебазирование)

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

1️⃣Предположим, у вас есть две ветки: main и feature.
1️⃣В ветке feature вы сделали несколько коммитов.
3️⃣Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

В результате история переписывается, как если бы коммиты из feature были сделаны на основе самой свежей версии main:

A---B---C---F---G (main)
                 \
                  D'---E' (feature)

Где D' и E' — это новые коммиты, созданные при перебазировании, основанные на последних изменениях из main.

Основные отличия

1️⃣История коммитов:
✅Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
✅Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

2️⃣Коммиты слияния:
✅Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
✅Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

3️⃣Конфликты:
✅Merge: Конфликты решаются один раз при слиянии.
✅Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

4️⃣Применение:
✅Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
✅Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

Когда использовать

✅Используйте `merge`, когда вы хотите сохранить всю историю разработки, включая все ветвления и слияния. Это полезно для командной работы, где важно видеть весь контекст изменений.
✅Используйте rebase, когда вы хотите поддерживать чистую и линейную историю. Это особенно полезно для интеграции изменений в основную ветку перед созданием pull request'ов, чтобы история коммитов была более понятной.

Merge объединяет изменения из одной ветки в другую, создавая новый коммит слияния и сохраняя всю историю. Rebase переписывает историю, делая её линейной, перемещая коммиты из одной ветки на базу другой.

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

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

👍32🔥7🤯3❤1

6.84K views09:10

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

Что такое dns ?
Спросят с вероятностью 3%

DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов.

Основные функции

1️⃣Разрешение доменных имен:
✅Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам.

2️⃣Обратное разрешение (Reverse DNS):
✅Обратное разрешение — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики.

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

Процесс разрешения доменного имени включает несколько этапов и компонентов:

1️⃣Введение DNS-кэша:
✅Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес.

2️⃣Запрос к DNS-серверу:
✅Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS).

3️⃣Рекурсивный запрос:
✅DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов:
✅Запрос к корневому DNS-серверу.
✅Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org).
✅Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена.

4️⃣Авторитетные DNS-серверы:
✅Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера.

5️⃣Ответ клиенту:
✅DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе).

6️⃣Доступ к ресурсу:
✅Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных.

Допустим, вы вводите в браузере www.example.com:

1️⃣Браузер проверяет локальный DNS-кэш.
2️⃣Если записи нет, браузер отправляет запрос на DNS-сервер провайдера.
3️⃣DNS-сервер провайдера выполняет рекурсивный запрос:
✅Запрашивает корневой DNS-сервер.
✅Корневой сервер направляет к серверу TLD .com.
✅Сервер TLD направляет к авторитетному DNS-серверу example.com.
4️⃣Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34.
5️⃣DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру.
6️⃣Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу.

DNS (Domain Name System) — это система, которая преобразует доменные имена в IP-адреса и наоборот. Она позволяет пользователям вводить легко запоминаемые доменные имена вместо сложных IP-адресов для доступа к ресурсам в Интернете. DNS включает в себя процессы проверки кэша, рекурсивные запросы к DNS-серверам и использование различных типов записей для разрешения имен и управления ресурсами.

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

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

👍33❤2

6.52K views09:10

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

Какие особенности в js ?
Спросят с вероятностью 3%

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

1️⃣Динамическая типизация

Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

2️⃣Функции первого класса

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

function greet(name) {
  return `Hello, ${name}`;
}

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob

3️⃣Замыкания (Closures)

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

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

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

4️⃣Прототипное наследование

Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

const animal = {
  speak: function() {
    console.log(`${this.name} издает звук`);
  }
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события

Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения.

Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами

Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов.

Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

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

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

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

👍31❤4🤔3

6.53K views09:10

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

🤔 Какой тип CSS-свойства background-clip определяет, что фон будет ограничен контентом элемента?

Anonymous Quiz

👍13

1.69K voters5.79K views16:10

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

📌

Зачем создавались библиотеки react и другие?

💬

Спрашивают в 3% собеседований

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

1️⃣ Повышение эффективности разработки

➕

Проблема: Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.

➕

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

2️⃣ Улучшение производительности

➕

Проблема: Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.

➕

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

3️⃣ Облегчение работы с состоянием приложения

➕

Проблема: Управление состоянием больших и сложных приложений может стать хаотичным.

➕

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

4️⃣ Улучшение масштабируемости и поддерживаемости кода

➕

Проблема: По мере роста приложения, код может стать сложным для понимания и изменения.

➕

Решение: Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.

5️⃣ Сообщество и экосистема

➕

Проблема: Наличие обширного сообщества и инструментов для разработки.

➕

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

Пример использования React:

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

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

export default Counter;

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

🤔

Краткий ответ

React и другие библиотеки создавались для упрощения разработки, улучшения производительности, управления состоянием, масштабируемости и поддерживаемости кода.

🔥

ТОП ВОПРОСОВ С СОБЕСОВ

🔒

База собесов

| 🔒

База тестовых

Please open Telegram to view this post

VIEW IN TELEGRAM

👍23❤2🔥2

6.21K views09:10

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

🤔 Какой метод JavaScript используется для удаления первого элемента из массива?

Anonymous Quiz

👍18

2.12K voters5.75K views16:10

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

📌

Какие минусы у React?

💬

Спрашивают в 3% собеседований

Несмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них:

1️⃣ Крутая кривая обучения

➕

Проблема: Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием.

➕

Последствия: Требуется время и усилия для освоения всех особенностей и возможностей библиотеки.

2️⃣ Быстрая эволюция

➕

Проблема: React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки.

➕

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

3️⃣ Неисчерпывающая документация для продвинутых тем

➕

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

➕

Последствия: Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем.

4️⃣ Ограниченные возможности для SEO

➕

Проблема: Приложения на React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами.

➕

Последствия: Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO.

5️⃣ Сложность в конфигурировании и настройке

➕

Проблема: В отличие от некоторых фреймворков, React не предоставляет единого "из коробки" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта.

➕

Последствия: Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек.

6️⃣ Производительность при большом количестве компонентов

➕

Проблема: При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.

➕

Последствия: Требуется оптимизация кода и использование таких инструментов, как мемоизация (React.iss.onemo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок.

🤔

Пример проблемы с производительностью:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const computedValue = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < num * 1000; i++) {
      sum += i;
    }
    return sum;
  }, [num]);

  return <div>Computed Value: {computedValue}</div>;
}

function App() {
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase</button>
      <ExpensiveComponent num={num} />
    </div>
  );
}

export default App;

В этом примере показана оптимизация вычислений с использованием useMemo.

🤔

Краткий ответ

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

🔥

ТОП ВОПРОСОВ С СОБЕСОВ

🔒

База собесов

| 🔒

База тестовых

Please open Telegram to view this post

VIEW IN TELEGRAM

👍23❤8

6.53K views09:10

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

🤔 Что такое JSX в React?

Anonymous Quiz

Язык программирования для создания компонентов

94%

Расширение синтаксиса JavaScript для создания элементов React

Способ стилизации компонентов

Метод управления состоянием

👍9😁3❤1

2K voters5.9K views16:10

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

📌

Как часто происходит рендер?

💬

Спрашивают в 3% собеседований

В React рендеринг компонента происходит в нескольких ситуациях. Давайте рассмотрим основные из них:

1️⃣

Первоначальный рендеринг:

➕ Когда компонент впервые монтируется в DOM.

2️⃣

Обновление состояния (state):

➕ Если состояние компонента изменяется с помощью this.setState в классовых компонентах или useState в функциональных компонентах.

3️⃣

Обновление пропсов (props):

➕ Когда компонент получает новые пропсы от родительского компонента.

4️⃣

Обновление контекста (context):

➕ Когда значение контекста, используемого компонентом, изменяется.

5️⃣

Обновление при изменении ключа (key):

➕ Если ключ компонента изменяется (например, в списках), React будет рассматривать это как удаление старого компонента и добавление нового.

Теперь разберём каждый случай подробнее:

1️⃣ Первоначальный рендеринг

Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.

Пример:

function App() {
  return <MyComponent />;
}

2️⃣. Обновление состояния

Когда состояние компонента изменяется, React вызывает рендеринг компонента. Это позволяет компоненту отобразить новые данные.

Пример:

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3️⃣ Обновление пропсов

Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.

Пример:

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Change Value</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  return <p>{value}</p>;
}

4️⃣ Обновление контекста

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

Пример:

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue('updated')}>Update Context</button>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
}

5️⃣ Обновление при изменении ключа

Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.

Пример:

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
      <button onClick={() => setItems([4, 5, 6])}>Change Items</button>
    </ul>
  );
}

🤔 Оптимизация рендеринга

Чтобы уменьшить количество ненужных рендеров, можно использовать:

➕

PureComponent и React.iss.onemo для функциональных компонентов.

➕

shouldComponentUpdate для классовых компонентов.

➕

useMemo и useCallback для мемоизации значений и функций в функциональных компонентах.

🤔 Резюме:
Компоненты React рендерятся при первоначальном монтировании, изменении состояния, изменении пропсов, изменении контекста и изменении ключа. Оптимизация рендеринга может быть достигнута с помощью PureComponent, React.iss.onemo, shouldComponentUpdate, useMemo и useCallback.

🔥

ТОП ВОПРОСОВ С СОБЕСОВ

🔒

База собесов

| 🔒

База тестовых

Please open Telegram to view this post

VIEW IN TELEGRAM

👍30❤4🔥4

6.2K views09:10

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

🤔 Какой метод JavaScript используется для поиска всех элементов по имени класса?