Anonymous Quiz
18%
push()
40%
unshift()
15%
pop()
27%
shift()
👍12❤1
Когда брать абсолютные величины а когда относительные ?
Спросят с вероятностью 7%
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Когда использовать:
1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
Относительные величины (например, %, em, rem, vw, vh)
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Когда использовать:
1️⃣Проценты (`%`):
✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
2️⃣Эм (`em`):
✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
3️⃣Рем (`rem`):
✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно
✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
4️⃣Вьюпорт (`vw`, `vh`):
✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
Комбинированное использование
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
Абсолютные величины (
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Когда использовать:
1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}Относительные величины (например, %, em, rem, vw, vh)
Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Когда использовать:
1️⃣Проценты (`%`):
✅Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
✅Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}2️⃣Эм (`em`):
✅Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
✅Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}3️⃣Рем (`rem`):
✅Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно
<html>), что обеспечивает более предсказуемое масштабирование.✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}4️⃣Вьюпорт (`vw`, `vh`):
✅Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
✅Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}Комбинированное использование
Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}Абсолютные величины (
px) используются для точных размеров и фиксированных элементов. Относительные величины (%, em, rem, vw, vh) подходят для адаптивных макетов и элементов, которые должны изменяться в зависимости от размеров родителя или вьюпорта.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍26🔥1
Anonymous Quiz
26%
document.location
46%
window.location
13%
navigator.url
15%
document.href
👍11
Что думаешь про ssr ?
Спросят с вероятностью 7%
Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере.
Преимущества
1️⃣Улучшение SEO:
✅Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код.
✅SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO.
2️⃣Быстрое время до первого отрисовки (First Paint):
✅Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML.
✅Это может улучшить восприятие производительности и снизить показатель отказов.
3️⃣Социальные сети и предварительный просмотр:
✅SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге.
4️⃣Лучший пользовательский опыт на медленных устройствах:
✅Так как большая часть вычислений выполняется на сервере, клиентские устройства с низкой производительностью быстрее отображают контент.
Недостатки
1️⃣Увеличение нагрузки на сервер:
✅Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR.
✅Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика.
2️⃣Увеличение времени отклика сервера:
✅Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных.
✅Это может привести к увеличению времени ответа сервера.
3️⃣Сложность настройки и поддержки:
✅Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR.
✅Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте.
4️⃣Гибридные решения могут быть сложными:
✅Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения.
Когда его использовать
1️⃣Контент, зависящий от SEO:
✅Блоги, новостные сайты, интернет-магазины и другие ресурсы, для которых важно быстрое и эффективное индексирование поисковыми системами.
2️⃣Быстрая первая отрисовка (First Paint):
✅Приложения, где важно быстрое отображение контента для улучшения пользовательского опыта и снижения показателя отказов.
3️⃣Социальные приложения:
✅Сайты, которые активно шарятся в социальных сетях и нуждаются в корректном отображении предварительных просмотров страниц.
Примеры
1️⃣Next.js для React:
✅Популярный фреймворк, который облегчает создание SSR-приложений на основе React.
✅Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия.
2️⃣Nuxt.js для Vue.js:
✅Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js.
✅Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR.
SSR рендерит страницы на сервере, улучшая SEO и скорость начальной загрузки, но увеличивает нагрузку на сервер и сложность настройки. Подходит для сайтов с критичным SEO и быстрым отображением контента, например, блоги и интернет-магазины.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере.
Преимущества
1️⃣Улучшение SEO:
✅Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код.
✅SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO.
2️⃣Быстрое время до первого отрисовки (First Paint):
✅Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML.
✅Это может улучшить восприятие производительности и снизить показатель отказов.
3️⃣Социальные сети и предварительный просмотр:
✅SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге.
4️⃣Лучший пользовательский опыт на медленных устройствах:
✅Так как большая часть вычислений выполняется на сервере, клиентские устройства с низкой производительностью быстрее отображают контент.
Недостатки
1️⃣Увеличение нагрузки на сервер:
✅Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR.
✅Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика.
2️⃣Увеличение времени отклика сервера:
✅Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных.
✅Это может привести к увеличению времени ответа сервера.
3️⃣Сложность настройки и поддержки:
✅Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR.
✅Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте.
4️⃣Гибридные решения могут быть сложными:
✅Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения.
Когда его использовать
1️⃣Контент, зависящий от SEO:
✅Блоги, новостные сайты, интернет-магазины и другие ресурсы, для которых важно быстрое и эффективное индексирование поисковыми системами.
2️⃣Быстрая первая отрисовка (First Paint):
✅Приложения, где важно быстрое отображение контента для улучшения пользовательского опыта и снижения показателя отказов.
3️⃣Социальные приложения:
✅Сайты, которые активно шарятся в социальных сетях и нуждаются в корректном отображении предварительных просмотров страниц.
Примеры
1️⃣Next.js для React:
✅Популярный фреймворк, который облегчает создание SSR-приложений на основе React.
✅Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия.
2️⃣Nuxt.js для Vue.js:
✅Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js.
✅Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR.
SSR рендерит страницы на сервере, улучшая SEO и скорость начальной загрузки, но увеличивает нагрузку на сервер и сложность настройки. Подходит для сайтов с критичным SEO и быстрым отображением контента, например, блоги и интернет-магазины.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍18❤3🔥2
Anonymous Quiz
12%
document
84%
window
4%
screen
0%
history
👍9😁3
Что такое слоты ?
Спросят с вероятностью 7%
Слоты — это механизм, используемый во фронтенд-разработке, особенно в компонентах, для предоставления гибких способов вставки содержимого в компоненты. Слоты позволяют передавать HTML-контент в компоненты и определять, где этот контент должен быть отрендерен. Они особенно полезны в библиотеке Vue.js, а также в других современных фреймворках, таких как Svelte.
Vue.js
Слоты используются для создания динамических и гибких компонентов.
1️⃣Базовый слот:
✅Позволяет вставлять произвольное содержимое в компонент.
2️⃣Именованные слоты:
✅Позволяют вставлять содержимое в конкретные места внутри компонента.
3️⃣Слоты с областью видимости (Scoped Slots):
✅Позволяют передавать данные из дочернего компонента в родительский через слот.
Преимущества
1️⃣Гибкость:
✅Слоты позволяют создавать более гибкие и многоразовые компоненты, которые можно адаптировать под различные контексты использования.
2️⃣Повторное использование:
✅Компоненты со слотами можно легко переиспользовать в различных частях приложения с разным содержимым.
3️⃣Читаемость и структурирование кода:
✅Использование слотов помогает лучше структурировать код, разделяя шаблоны компонентов и их содержимое.
4️⃣Поддержка различных сценариев рендеринга:
✅Слоты позволяют легко поддерживать различные сценарии рендеринга, такие как именованные и scoped слоты, что делает компоненты более мощными и универсальными.
Svelte
В нем слоты также используются для вставки содержимого в компоненты.
Слоты — это механизм для вставки контента в компоненты, который делает компоненты гибкими и многоразовыми. Они позволяют определять, где именно внутри компонента должно быть размещено передаваемое содержимое.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Слоты — это механизм, используемый во фронтенд-разработке, особенно в компонентах, для предоставления гибких способов вставки содержимого в компоненты. Слоты позволяют передавать HTML-контент в компоненты и определять, где этот контент должен быть отрендерен. Они особенно полезны в библиотеке Vue.js, а также в других современных фреймворках, таких как Svelte.
Vue.js
Слоты используются для создания динамических и гибких компонентов.
1️⃣Базовый слот:
✅Позволяет вставлять произвольное содержимое в компонент.
<!-- Родительский компонент -->
<my-component>
<p>Это вставленное содержимое!</p>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>
2️⃣Именованные слоты:
✅Позволяют вставлять содержимое в конкретные места внутри компонента.
<!-- Родительский компонент -->
<my-component>
<template v-slot:header>
<h1>Заголовок</h1>
</template>
<template v-slot:footer>
<p>Подвал</p>
</template>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> <!-- Слот по умолчанию -->
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>
3️⃣Слоты с областью видимости (Scoped Slots):
✅Позволяют передавать данные из дочернего компонента в родительский через слот.
<!-- Родительский компонент -->
<my-component>
<template v-slot:default="slotProps">
<p>{{ slotProps.message }}</p>
</template>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<slot :message="message"></slot>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Привет из дочернего компонента!',
};
},
};
</script>
Преимущества
1️⃣Гибкость:
✅Слоты позволяют создавать более гибкие и многоразовые компоненты, которые можно адаптировать под различные контексты использования.
2️⃣Повторное использование:
✅Компоненты со слотами можно легко переиспользовать в различных частях приложения с разным содержимым.
3️⃣Читаемость и структурирование кода:
✅Использование слотов помогает лучше структурировать код, разделяя шаблоны компонентов и их содержимое.
4️⃣Поддержка различных сценариев рендеринга:
✅Слоты позволяют легко поддерживать различные сценарии рендеринга, такие как именованные и scoped слоты, что делает компоненты более мощными и универсальными.
Svelte
В нем слоты также используются для вставки содержимого в компоненты.
<!-- Родительский компонент -->
<ChildComponent>
<p>Это вставленное содержимое!</p>
</ChildComponent>
<!-- Дочерний компонент (ChildComponent.svelte) -->
<script>
export let name;
</script>
<slot></slot>
Слоты — это механизм для вставки контента в компоненты, который делает компоненты гибкими и многоразовыми. Они позволяют определять, где именно внутри компонента должно быть размещено передаваемое содержимое.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍12😁3
Anonymous Quiz
94%
<img>
6%
<image>
0%
<pic>
0%
<graphics>
👍11😁4🤯3❤2
В чем различие между строчными и блочными элементами ?
Спросят с вероятностью 7%
Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами.
Блочные элементы (Block Elements)
Основные характеристики:
1️⃣Занимают всю доступную ширину:
✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию.
2️⃣Можно задавать размеры:
✅Для блочных элементов можно задавать ширину (
3️⃣Вложенные элементы:
✅Блочные элементы могут содержать другие блочные и строчные элементы.
✅
✅
✅
✅
✅
Пример:
Строчные элементы (Inline Elements)
Основные характеристики:
1️⃣Не занимают всю ширину:
✅Строчные элементы не начинаются с новой строки и занимают только необходимое для их содержимого пространство. Они располагаются рядом с другими строчными элементами на одной строке.
2️⃣Размеры и отступы:
✅Для строчных элементов нельзя задавать ширину и высоту. Внутренние отступы (
3️⃣Только строчные вложенные элементы:
✅Внутрь строчных элементов можно вкладывать только другие строчные элементы.
Примеры строчных элементов:
✅
✅
✅
✅
✅
✅
Пример:
Сравнение элементов
1️⃣Размещение на странице:
✅Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину.
✅Строчные элементы размещаются в строку с другими строчными элементами и занимают только необходимое пространство.
2️⃣Вложенность:
✅Блочные элементы могут содержать как блочные, так и строчные элементы.
✅Строчные элементы могут содержать только строчные элементы.
3️⃣Размеры и отступы:
✅Для блочных элементов можно задавать любые размеры и отступы.
✅Для строчных элементов можно задавать только горизонтальные отступы, ширину и высоту задавать нельзя.
Блочные элементы:
Строчные элементы:
✅Блочные элементы занимают всю ширину контейнера, начинаются с новой строки и могут содержать любые другие элементы.
✅Строчные элементы занимают только необходимое пространство, располагаются в одной строке с другими строчными элементами и могут содержать только другие строчные элементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами.
Блочные элементы (Block Elements)
Основные характеристики:
1️⃣Занимают всю доступную ширину:
✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию.
2️⃣Можно задавать размеры:
✅Для блочных элементов можно задавать ширину (
width), высоту (height), внутренние отступы (padding), внешние отступы (margin).3️⃣Вложенные элементы:
✅Блочные элементы могут содержать другие блочные и строчные элементы.
✅
<div>✅
<p>✅
<h1>, <h2>, ..., <h6>✅
<ul>, <ol>, <li>✅
<header>, <footer>, <section>, <article>Пример:
<div style="background-color: lightblue;">
Это блочный элемент.
</div>
<p style="background-color: lightgreen;">
Это тоже блочный элемент.
</p>
Строчные элементы (Inline Elements)
Основные характеристики:
1️⃣Не занимают всю ширину:
✅Строчные элементы не начинаются с новой строки и занимают только необходимое для их содержимого пространство. Они располагаются рядом с другими строчными элементами на одной строке.
2️⃣Размеры и отступы:
✅Для строчных элементов нельзя задавать ширину и высоту. Внутренние отступы (
padding) и внешние отступы (margin) применяются только по горизонтали, вертикальные отступы не изменяют размер строчного элемента, но могут влиять на расстояние между элементами.3️⃣Только строчные вложенные элементы:
✅Внутрь строчных элементов можно вкладывать только другие строчные элементы.
Примеры строчных элементов:
✅
<span>✅
<a>✅
<img>✅
<strong>✅
<em>✅
<input>Пример:
<span style="background-color: lightcoral;">
Это строчный элемент.
</span>
<a href="#" style="background-color: lightgoldenrodyellow;">
Это тоже строчный элемент.
</a>
Сравнение элементов
1️⃣Размещение на странице:
✅Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину.
✅Строчные элементы размещаются в строку с другими строчными элементами и занимают только необходимое пространство.
2️⃣Вложенность:
✅Блочные элементы могут содержать как блочные, так и строчные элементы.
✅Строчные элементы могут содержать только строчные элементы.
3️⃣Размеры и отступы:
✅Для блочных элементов можно задавать любые размеры и отступы.
✅Для строчных элементов можно задавать только горизонтальные отступы, ширину и высоту задавать нельзя.
Блочные элементы:
<div>
<h1>Заголовок</h1>
<p>Параграф текста внутри блочного элемента.</p>
</div>
Строчные элементы:
<p>
Этот текст содержит <a href="#">ссылку</a> и <strong>жирный текст</strong>, которые являются строчными элементами.
</p>
✅Блочные элементы занимают всю ширину контейнера, начинаются с новой строки и могут содержать любые другие элементы.
✅Строчные элементы занимают только необходимое пространство, располагаются в одной строке с другими строчными элементами и могут содержать только другие строчные элементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍33❤3🔥3🤔1
Anonymous Quiz
2%
font-style
6%
font-weight
91%
font-size
1%
font-family
👍17😁11✍1
Какие методы http запросов знаешь ?
Спросят с вероятностью 7%
HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:
1️⃣GET
Описание: Запрашивает данные с сервера.
Особенности:
✅Не изменяет состояние сервера (идемпотентный).
✅Параметры запроса передаются в URL.
✅Кэшируется.
✅Можно сохранить в закладках браузера.
2️⃣POST
Описание: Отправляет данные на сервер для создания ресурса или выполнения действия.
Особенности:
✅Изменяет состояние сервера.
✅Данные передаются в теле запроса.
✅Не кэшируется по умолчанию.
3️⃣PUT
Описание: Отправляет данные на сервер для создания или замены ресурса.
Особенности:
✅Идемпотентный.
✅Данные передаются в теле запроса.
4️⃣DELETE
Описание: Удаляет ресурс на сервере.
Особенности:
✅Идемпотентный.
5️⃣PATCH
Описание: Частично обновляет ресурс на сервере.
Особенности:
✅Не является идемпотентным, хотя в некоторых случаях может быть.
✅Данные передаются в теле запроса.
6️⃣HEAD
Описание: Запрашивает только заголовки ресурса, без тела.
Особенности:
✅Идемпотентный.
✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.
7️⃣OPTIONS
Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса.
Особенности:
✅Идемпотентный.
✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.
8️⃣CONNECT
Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов.
Особенности:
✅Не используется в обычных RESTful API.
9️⃣TRACE
Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе.
Особенности:
✅Используется для диагностики или отладки.
Резюме
✅GET: Запрашивает данные, не изменяет состояние сервера.
✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера.
✅PUT: Создает или заменяет ресурс, идемпотентный.
✅DELETE: Удаляет ресурс, идемпотентный.
✅PATCH: Частично обновляет ресурс.
✅HEAD: Запрашивает заголовки ресурса, без тела.
✅OPTIONS: Запрашивает поддерживаемые методы для ресурса.
✅CONNECT: Устанавливает туннель к серверу.
✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики.
Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:
1️⃣GET
Описание: Запрашивает данные с сервера.
Особенности:
✅Не изменяет состояние сервера (идемпотентный).
✅Параметры запроса передаются в URL.
✅Кэшируется.
✅Можно сохранить в закладках браузера.
GET /api/users?id=123 HTTP/1.1
Host: www.example.com
2️⃣POST
Описание: Отправляет данные на сервер для создания ресурса или выполнения действия.
Особенности:
✅Изменяет состояние сервера.
✅Данные передаются в теле запроса.
✅Не кэшируется по умолчанию.
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "[email protected]"
}
3️⃣PUT
Описание: Отправляет данные на сервер для создания или замены ресурса.
Особенности:
✅Идемпотентный.
✅Данные передаются в теле запроса.
PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "[email protected]"
}
4️⃣DELETE
Описание: Удаляет ресурс на сервере.
Особенности:
✅Идемпотентный.
DELETE /api/users/123 HTTP/1.1
Host: www.example.com
5️⃣PATCH
Описание: Частично обновляет ресурс на сервере.
Особенности:
✅Не является идемпотентным, хотя в некоторых случаях может быть.
✅Данные передаются в теле запроса.
PATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"email": "[email protected]"
}
6️⃣HEAD
Описание: Запрашивает только заголовки ресурса, без тела.
Особенности:
✅Идемпотентный.
✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.
HEAD /api/users/123 HTTP/1.1
Host: www.example.com
7️⃣OPTIONS
Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса.
Особенности:
✅Идемпотентный.
✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.
OPTIONS /api/users HTTP/1.1
Host: www.example.com
8️⃣CONNECT
Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов.
Особенности:
✅Не используется в обычных RESTful API.
CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com
9️⃣TRACE
Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе.
Особенности:
✅Используется для диагностики или отладки.
TRACE /api/users HTTP/1.1
Host: www.example.com
Резюме
✅GET: Запрашивает данные, не изменяет состояние сервера.
✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера.
✅PUT: Создает или заменяет ресурс, идемпотентный.
✅DELETE: Удаляет ресурс, идемпотентный.
✅PATCH: Частично обновляет ресурс.
✅HEAD: Запрашивает заголовки ресурса, без тела.
✅OPTIONS: Запрашивает поддерживаемые методы для ресурса.
✅CONNECT: Устанавливает туннель к серверу.
✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики.
Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍24❤6🔥4
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤1
Ставь 👍 если знал ответ
Please open Telegram to view this post
VIEW IN TELEGRAM
👍56🤯13🎉2
Anonymous Quiz
2%
Язык программирования
94%
Библиотека JavaScript для упрощения манипуляций с DOM, событиями и анимацией
3%
Серверная технология
1%
Новый стандарт HTML
😁20👍5❤1
Что такое ооп ?
Спросят с вероятностью 7%
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом.
Основные концепции
1️⃣Классы и объекты
✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.
2️⃣Инкапсуляция
✅Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.
3️⃣Наследование
✅Позволяет одному классу наследовать свойства и методы другого класса, что способствует повторному использованию кода и улучшает его организацию.
Преимущества
1️⃣Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части.
2️⃣Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода.
3️⃣Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами.
4️⃣Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода.
ООП — это метод, который организует код в виде объектов и классов. Основные принципы ООП включают инкапсуляцию, наследование, полиморфизм и абстракцию. Это помогает создавать модульный, повторно используемый и легко управляемый код.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом.
Основные концепции
1️⃣Классы и объекты
✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
speak() {
console.log(`${this.name} издает звук.`);
}
}
const dog = new Animal('Рекс', 'Собака');
dog.speak(); // Рекс издает звук.2️⃣Инкапсуляция
✅Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.
class Person {
constructor(name, age) {
this.name = name;
let _age = age; // Приватное свойство
this.getAge = function() {
return _age;
}
this.setAge = function(newAge) {
if (newAge > 0) {
_age = newAge;
} else {
console.log('Возраст должен быть положительным числом.');
}
}
}
}
const person = new Person('Иван', 30);
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 353️⃣Наследование
✅Позволяет одному классу наследовать свойства и методы другого класса, что способствует повторному использованию кода и улучшает его организацию.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} издает звук.);
}
}
class Dog extends Animal {
speak() {
console.log(${this.name} лает.);
}
}
const dog = new Dog('Рекс');
dog.speak(); // Рекс лает.
4️⃣
✅
```javascript
class Animal {
speak() {
console.log('Животное издает звук.');
}
}
class Dog extends Animal {
speak() {
console.log('Собака лает.');
}
}
class Cat extends Animal {
speak() {
console.log('Кошка мяукает.');
}
}
const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.
Преимущества
1️⃣Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части.
2️⃣Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода.
3️⃣Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами.
4️⃣Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода.
ООП — это метод, который организует код в виде объектов и классов. Основные принципы ООП включают инкапсуляцию, наследование, полиморфизм и абстракцию. Это помогает создавать модульный, повторно используемый и легко управляемый код.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍37❤4
👾 1429 вопросов собесов на Frontend Developer
🔒 База реальных собесов
🔒 База тестовых заданий
👾 Список менторов
🖥 Frontend
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Тестировщик
├ Вопросы собесов
├ Вакансии
└ Тесты
🖥 Python
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Java
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 С/С++
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Kotlin
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 С#
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 Swift
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
👩💻 PHP
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Data Science
├ Вопросы собесов
├ Вакансии
└ Тесты
👩💻 DevOps
├ Вопросы собесов
├ Вакансии
└ Тесты
👣 Golang
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
⚙ Backend
└ Вопросы собесов
👾 Список менторов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
└ Тесты
├ Вопросы собесов
├ Вакансии
├ LeetCode ответы
└ Тесты
└ Вопросы собесов
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤10🔥4
Frontend | Вопросы собесов pinned «👾 1429 вопросов собесов на Frontend Developer 🔒 База реальных собесов 🔒 База тестовых заданий 👾 Список менторов 🖥 Frontend ├ Вакансии ├ LeetCode ответы └ Тесты 🖥 Тестировщик ├ Вопросы собесов ├ Вакансии └ Тесты 🖥 Python ├ Вопросы собесов ├ Вакансии ├ LeetCode…»
Anonymous Quiz
89%
<style>
3%
<css>
1%
<script>
7%
<link>
👍11😁6🤯4👀1
Как взаимодействуют front-end и back-end ?
Спросят с вероятностью 3%
Веб-разработка состоит из двух основных частей: фронтенда (frontend) и бэкенда (backend). Эти две части взаимодействуют между собой для создания полнофункциональных веб-приложений, предоставляя пользователям интерфейсы и обеспечивая работу бизнес-логики и управления данными на сервере. Рассмотрим, как они взаимодействуют.
1️⃣Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.
Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как Node.js, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.
2️⃣HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.
1️⃣Запрос данных:
✅Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
✅Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.
2️⃣Отправка данных:
✅Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
✅Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.
3️⃣WebSocket
Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.
4️⃣RESTful API и GraphQL
RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.
GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер, который обрабатывает их и отправляет ответы обратно. Также можно использовать WebSocket для двустороннего взаимодействия в реальном времени. Для организации взаимодействия часто применяются RESTful API и GraphQL.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Веб-разработка состоит из двух основных частей: фронтенда (frontend) и бэкенда (backend). Эти две части взаимодействуют между собой для создания полнофункциональных веб-приложений, предоставляя пользователям интерфейсы и обеспечивая работу бизнес-логики и управления данными на сервере. Рассмотрим, как они взаимодействуют.
1️⃣Архитектура взаимодействия
Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности.
Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как Node.js, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API.
2️⃣HTTP-запросы и ответы
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд.
1️⃣Запрос данных:
✅Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные.
✅Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.
// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data); // Обработка данных на фронтенде
})
.catch(error => {
console.error('Error:', error);
});
2️⃣Отправка данных:
✅Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса.
✅Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.
// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data); // Обработка ответа на фронтенде
})
.catch(error => {
console.error('Error:', error);
});
3️⃣WebSocket
Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.
// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => {
console.log('WebSocket is open now.');
socket.send(JSON.stringify({ message: 'Hello Server!' }));
};
socket.onmessage = (event) => {
console.log('Received:', event.data);
};
socket.onclose = () => {
console.log('WebSocket is closed now.');
};
4️⃣RESTful API и GraphQL
RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML.
GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными.
Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер, который обрабатывает их и отправляет ответы обратно. Также можно использовать WebSocket для двустороннего взаимодействия в реальном времени. Для организации взаимодействия часто применяются RESTful API и GraphQL.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍27🔥6❤3
Anonymous Quiz
3%
WebSQL
51%
LocalStorage
30%
SessionStorage
16%
Cookies
🤔18👍8❤2💊2🤯1
Git — это система контроля версий, которая позволяет отслеживать изменения в коде, работать совместно над проектами и управлять различными версиями кода. Взаимодействие с Git происходит через командную строку с использованием различных команд. Рассмотрим основные этапы и команды, используемые для работы с Git.
Основные команды и этапы работы
Создание нового локального репозитория или клонирование существующего удаленного репозитория.
git init
git clone <url>
Добавление новых или измененных файлов в индекс (стейджинг).
git status
git add <file>
git add .
Сохранение изменений в истории репозитория с комментарием.
git commit -m "Сообщение коммита"
Создание, переключение и слияние веток.
git branch <branch-name>
git checkout <branch-name>
git checkout -b <branch-name>
git merge <branch-name>
Добавление удаленного репозитория, отправка и получение изменений.
git remote add origin <url>
git push origin <branch-name>
Пример:
git push origin main
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42❤2😁1
varconstСтавь 👍 если знал ответ и 🔥 если нет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥8😁1