NEW BOT Телеграм, страница - 775292107

Frontend собеседования

1.53K subscribers

383 photos

543 links

Подготовка к собеседованиям на позицию Frontend-разработчик

Еще больше ответов на сайте https://frontview-it.ru

JS собеседования - @frontview_js
Frontend работа - @frontview_vacancies
Все IT вакансии - @frontview_all_vacancies

Download Telegram

About

Blog

Apps

Platform

Frontend собеседования

1.53K subscribers

Frontend собеседования

💡

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

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6💯1

1.01K views07:29

Frontend собеседования

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


interface User {
  name: string; // Имя пользователя
  age: number;  // Возраст пользователя
}

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

✅ В этом примере интерфейс User гарантирует, что объект, передаваемый в функцию greet, будет иметь свойства name и age с соответствующими типами.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥1

1.04K views12:05

Frontend собеседования

🌀

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

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7❤1

1.06K views17:07

Frontend собеседования

➡️ <!DOCTYPE> — это инструкция для браузера, которая указывает, какую версию HTML использовать при отображении страницы. Он всегда должен быть первой строкой в HTML-документе. Использование <!DOCTYPE> важно для обеспечения совместимости и правильного отображения страниц.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <noscript>Document</noscript>
</head>
<body>
    <!-- Содержимое страницы -->
</body>
</html>

➡️ Этот код указывает браузеру использовать стандартный режим отображения HTML5.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8✍1

1.03K views07:27

Frontend собеседования

🔘 Свойство z-index определяет порядок наложения элементов на оси Z, то есть по глубине. Оно работает только для элементов с установленным свойством position отличным от static (например, relative, absolute, `fixed`).

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


.box1 {
    position: absolute;
    z-index: 1; /* Этот элемент будет ниже */
}

.box2 {
    position: absolute;
    z-index: 2; /* Этот элемент будет выше */
}

✔️ В этом примере .box2 будет отображаться поверх .box1.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11⚡1

996 views12:02

Frontend собеседования

♾️ Infinity представляет собой положительную бесконечность и возникает при делении положительного числа на ноль или при превышении максимального числового значения. -Infinity обозначает отрицательную бесконечность и появляется при делении отрицательного числа на ноль или при вычислениях, выходящих за пределы минимального отрицательного значения.

👉

Тут еще больше JS

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9❤2

1.02K views16:55

Frontend собеседования

📝 Индексация, также известная как "staging" или "index", представляет собой промежуточную область, где изменения в файлах подготавливаются перед коммитом. Это позволяет контролировать, какие изменения войдут в следующий коммит.

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


# Добавление файла в индекс
git add filename

# Фиксация изменений из индекса
git commit -m "Сообщение коммита"

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10🔥1

1K views07:49

Frontend собеседования

Директивы — это инструмент для манипуляции DOM. Они позволяют добавлять поведение к элементам, используя специальные атрибуты. Основные директивы включают v-if, v-for, v-bind и v-model.

👉

v-if управляет отображением элементов на основе условия. Например:

<div v-if="isVisible">Показать этот текст</div>

👉

v-for используется для итерации по массивам:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

👉

v-bind связывает атрибуты с данными:

<img v-bind:src="imageSrc" alt="Image">

👉

v-model обеспечивает двустороннюю привязку данных:

<input v-model="userInput">

Директивы делают код более декларативным и управляемым.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6👨‍💻1

987 views12:37

Frontend собеседования

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

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9❤1

1.04K views17:49

Frontend собеседования

👉 DOM (Document Object Model) — это программный интерфейс для страницы, который представляет структуру документа в виде дерева объектов. Каждый элемент HTML, атрибут и текст становятся узлами в этом дереве, что позволяет скриптам динамически изменять содержание, структуру и стиль страницы.

👉 DOM обеспечивает доступ к элементам и их свойствам с помощью JavaScript. Это позволяет создавать интерактивные и динамические интерфейсы.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥3

1.07K views06:35

Frontend собеседования

💥

'use strict' — это директива, которая вводит строгий режим в JavaScript. Строгий режим изменяет семантику JavaScript, делая его более безопасным и предсказуемым.

1⃣ Во-первых, он предотвращает использование необъявленных переменных, что помогает избежать ошибок, связанных с опечатками в именах переменных.

'use strict';
x = 3.14; // Ошибка: x не объявлена

2⃣ Во-вторых, строгий режим запрещает дублирование параметров функции, что улучшает читаемость и поддержку кода.

'use strict';
function sum(a, a, c) { // Ошибка: дублирование параметров
  return a + a + c;
}

🔸 Также он запрещает использование некоторых устаревших и небезопасных функций, таких как with.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11💯2👨‍💻2

1.01K views14:03

Frontend собеседования

Псевдоклассы :hover и :active используются для изменения стиля элементов в зависимости от взаимодействия пользователя.

1⃣

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

button:hover {
  background-color: lightblue; /* Изменение фона кнопки при наведении */
}

2⃣

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

button:active {
  background-color: darkblue; /* Изменение фона кнопки при нажатии */
}

📌 Таким образом, :hover реагирует на наведение, а :active — на нажатие.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥1

1.04K views06:34

Frontend собеседования

📌 Для просмотра истории коммитов в Git используется команда git log. Она выводит список всех коммитов в текущей ветке с информацией о каждом из них, включая хеш, автора, дату и сообщение коммита.

git log

▶️ Для более краткого вывода можно использовать флаг --oneline, который отображает каждый коммит в одну строку.

git log --oneline

▶️ Если необходимо увидеть историю коммитов для конкретного файла, используется:

git log <filename>

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11❤1

964 views12:27

Frontend собеседования

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

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6🔥2💯1

995 views17:12

Frontend собеседования

🔳 Next.js — это фреймворк для React, который упрощает создание SSR приложений. Он предоставляет такие возможности, как автоматическая маршрутизация, оптимизация изображений и статических файлов, а также встроенные функции для работы с API.

🔲 Next.js позволяет сосредоточиться на создании компонентов и логики приложения, обеспечивая при этом высокую производительность и SEO-оптимизацию. Благодаря этому фреймворку можно легко создавать современные веб-приложения с минимальными усилиями по настройке инфраструктуры.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11🔥2❤1💯1

1.06K views07:16

Frontend собеседования

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

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3🔥2

1.04K views10:39

Frontend собеседования

⏩ Тег <main> в HTML5 используется для обозначения основного содержимого документа. Это содержание должно быть уникальным и напрямую связано с основной темой страницы.

➡ Тег <main> помогает улучшить доступность, так как позволяет вспомогательным технологиям, таким как скрин ридеры, быстро находить основное содержание страницы.

💡 Важно помнить, что <main> не должен содержать элементы, такие как навигация или футеры. Этот тег может использоваться только один раз на странице.

<main>
  <!-- Основное содержание страницы -->
  <h1>Заголовок страницы</h1>
  <p>Основной текст статьи или контента.</p>
</main>

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

💯8👍6🤔1

1.07K views16:07

Frontend собеседования

Позиционирование в CSS управляет расположением элементов на веб-странице. Существует несколько видов позиционирования:

1️⃣

Static: Значение по умолчанию. Элементы располагаются в порядке их следования в коде.

2️⃣

Relative: Элемент позиционируется относительно своего обычного положения. Используются свойства top, right, bottom, left.

3️⃣

Absolute: Элемент позиционируется относительно ближайшего предка с position: relative, absolute или fixed.

4️⃣

Fixed: Элемент фиксируется относительно окна браузера и не перемещается при прокрутке.

5️⃣

Sticky: Комбинация relative и fixed. Элемент ведет себя как relative, пока не достигнет заданного порога, после чего становится fixed.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10❤2

1.08K views07:14

Frontend собеседования

🔸 Строгое сравнение — это метод сравнения, который учитывает как значение, так и тип данных. Используется оператор ===. В отличие от нестрогого сравнения ==, строгое сравнение не выполняет приведение типов.


const a = 5;
const b = '5';

console.log(a === b); // false, так как типы данных разные
console.log(a == b);  // true, так как происходит приведение типов

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

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤2

1.05K views12:26

Frontend собеседования

Для создания коммита в Git необходимо сначала добавить изменения в индекс с помощью команды git add, а затем зафиксировать их с описанием, используя команду git commit -m "сообщение коммита". Это позволяет сохранить текущие изменения в истории проекта с пояснением, что именно было изменено.

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10

1.05K views18:17

Frontend собеседования

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

😊 Для использования Lazy Loading применяется функция React.lazy(), которая принимает функцию, возвращающую промис с импортом компонента. Компонент Suspense используется для отображения запасного контента, пока загружается ленивый компонент.

import React, { Suspense } from 'react';

// Ленивый импорт компонента
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Suspense для отображения запасного контента */}
      <Suspense fallback={<div>Загрузка...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

😊 Этот подход особенно полезен для больших приложений с множеством маршрутов или страниц.

Ставь 👍, если было полезно!
Больше ответов на сайте

👈

✈️

Frontend собеседования

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9❤2

1.1K views07:20