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

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

💾 Единицы измерения em и rem используются для задания относительных размеров, таких как шрифты и отступы.

em: Зависит от размера шрифта родительского элемента. Если размер шрифта родителя изменится, то и em изменится. Например, если родитель имеет font-size: 16px, то 2em будет равно 32px.

rem: Зависит от корневого элемента. Независимо от вложенности, rem всегда основывается на font-size корня. Если корень имеет font-size: 16px, то 2rem всегда будет 32px.

⚡️ Использование rem обеспечивает более предсказуемое масштабирование, так как оно не зависит от вложенности элементов.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍13❤4✍1

1.09K views06:25

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

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

1️⃣

Упрощение кода: Хуки позволяют использовать состояние и другие возможности React без написания классов. Это делает код более простым и легким для понимания.

2️⃣

Повторное использование логики состояния: С помощью хуков, таких как useState и useEffect, можно легко разделять и повторно использовать логику состояния между компонентами.

3️⃣

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

4️⃣

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

5️⃣

Управление побочными эффектами: Хук useEffect предоставляет удобный способ управлять побочными эффектами, такими как подписки или изменения DOM, в функциональных компонентах.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥2

1.05K views11:06

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

Директива v-if полностью удаляет или добавляет элемент в DOM в зависимости от условия, что может быть полезно для оптимизации производительности, когда элемент редко отображается. В отличие от нее, v-show управляет видимостью элемента через CSS-свойство display, что делает переключение быстрее, но элемент всегда остается в DOM.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3❤1🔥1

1.08K views17:18

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

1️⃣

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

const value: string | number;
// Переменная value может быть строкой или числом

2️⃣

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

type A = { a: string };
type B = { b: number };
type C = A & B;
// Тип C должен содержать свойства a и b

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10🔥2

1.1K views06:19

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

🟠Для включения JavaScript файла в HTML-документ используется тег <noscript>. Он может быть размещен в <head> или перед закрывающим тегом </body>.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <noscript>Document</noscript>
    <!-- Подключение внешнего JavaScript файла -->
    <noscript src="noscript.js"></noscript>
</head>
<body>
    <h1>Hello World</h1>
    <!-- Подключение JavaScript файла перед закрывающим тегом body -->
    <noscript src="another-noscript.js"></noscript>
</body>
</html>

🟠Атрибут src указывает путь к JavaScript файлу.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥3

1.16K views12:11

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

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥1

1.07K views16:42

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

💥 События в React работают аналогично событиям в DOM, но с некоторыми отличиями. В React события именуются в стиле camelCase, например, onClick вместо onclick. Также в React передаются функции, а не строки, как обработчики событий.

Пример:


function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

В этом примере handleClick вызывается при клике на кнопку.

🟥 React использует систему событий, которая называется SyntheticEvent. Это кроссбраузерная оболочка над нативными событиями браузера, обеспечивающая единое API для всех браузеров.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11🔥2

1.1K views06:08

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

Для преобразования числа в строку в JavaScript можно использовать метод toString(), который вызывается на числовом значении. Также можно воспользоваться функцией String(), передав в неё число в качестве аргумента, что вернёт его строковое представление.

👉

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤1

1.01K views11:20

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

📝 CSS Grid — это система компоновки, которая позволяет создавать сложные макеты с помощью сетки. Она предоставляет возможность размещать элементы в двухмерной сетке, управляя как строками, так и столбцами.

Для использования Grid необходимо задать контейнеру свойство display: grid. Затем с помощью свойств, таких как grid-template-columns и grid-template-rows, можно определить структуру сетки.


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три равные колонки */
  grid-gap: 10px; /* Расстояние между элементами */
}

⚡️В этом примере создаётся сетка из трёх колонок с равной шириной и промежутком в 10 пикселей между элементами.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤1

1.05K views16:25

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

Теги <div> и <span> используются для группировки и стилизации элементов в HTML, но имеют разные цели и свойства.

1️⃣ <div> — блочный элемент. Он занимает всю ширину родительского контейнера и начинается с новой строки. Используется для создания крупных блоков контента, таких как секции или контейнеры.

2️⃣ <span> — строчный элемент. Он занимает только необходимую ширину и не нарушает поток текста. Применяется для стилизации отдельных частей текста или небольших элементов внутри блока.

<div> <!-- Блочный элемент -->
  <span>Текст</span> <!-- Строчный элемент -->
</div>

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍13🔥2

1.04K views06:11

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

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6❤1

1.02K views12:08

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

📝

var, let и const — это ключевые слова для объявления переменных в JavaScript, но они имеют различия в области видимости и изменяемости.

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

👉

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤2

968 views16:22

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

💡Box Model — это фундаментальная концепция CSS, описывающая, как элементы веб-страницы занимают пространство и взаимодействуют друг с другом. Каждый элемент представляется в виде прямоугольника, состоящего из четырех областей: содержимого (content), внутреннего отступа (padding), границы (border) и внешнего отступа (margin).


.element {
  width: 100px; /* Ширина содержимого */
  padding: 10px; /* Внутренний отступ */
  border: 5px solid black; /* Граница */
  margin: 20px; /* Внешний отступ */
}

⏩ Общая ширина элемента рассчитывается как сумма ширины содержимого, внутреннего отступа, границы и внешнего отступа. Box Model позволяет управлять расположением и размером элементов на странице.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6⚡1❤1

980 views06:09

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

Чтобы отменить изменения в файле, которые еще не были закоммичены, можно использовать команду git checkout -- <имя_файла>. Если изменения уже были добавлены в индекс, сначала нужно выполнить git reset HEAD <имя_файла>, а затем git checkout -- <имя_файла>.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7💯1

883 views10:28

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

🔥 React Router — это библиотека для маршрутизации в приложениях на React. Она позволяет создавать одностраничные приложения с навигацией без перезагрузки страницы. Основные компоненты: BrowserRouter, Route, Link, Switch.

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


import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Компонент главной страницы
function Home() {
  return <h2>Home</h2>;
}

// Компонент страницы "О нас"
function About() {
  return <h2>About</h2>;
}

// Основной компонент приложения
function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

BrowserRouter оборачивает приложение, Route определяет путь и компонент, Link создает навигацию.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥1

1.06K views11:57

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

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥1

918 views17:14

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

⏩ Свойство white-space управляет тем, как обрабатываются пробелы в тексте. Оно определяет, сохраняются ли пробелы и переносы строк, а также как текст переносится на новую строку.

Основные значения:

1️⃣

normal: Пробелы сокращаются до одного, текст переносится по необходимости.

2️⃣

nowrap: Пробелы сокращаются, текст не переносится.

3️⃣

pre: Пробелы и переносы сохраняются, текст не переносится.

4️⃣

pre-wrap: Пробелы и переносы сохраняются, текст переносится.

5️⃣

pre-line: Пробелы сокращаются, переносы сохраняются, текст переносится.

p {
  white-space: pre-wrap; /* Сохраняет пробелы и переносы, текст переносится */
}

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11🔥2

1.02K views06:49

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

Цикл while выполняет блок кода до тех пор, пока заданное логическое условие истинно, проверяя его перед каждой итерацией. Если условие становится ложным, выполнение цикла прекращается, и программа продолжает выполнение следующего кода.

👉

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥1

1.01K views12:01

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

▶️ Кортежи позволяют хранить массивы с фиксированным количеством элементов, где каждый элемент может иметь свой тип. Это полезно для работы с данными, где порядок и типы элементов заранее известны.

Для определения кортежа используется синтаксис массива с указанием типов:


// Определение кортежа с двумя элементами: строкой и числом
let user: [string, number];

// Присвоение значений кортежу
user = ["Alice", 25];

// Доступ к элементам кортежа
let name: string = user[0]; // "Alice"
let age: number = user[1]; // 25

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

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7🔥2

1.04K views17:02

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

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10❤5

951 views07:31

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

⏩

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


console.log(typeof 42); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (особенность языка)
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"

Важно помнить, что typeof null возвращает "object", что является исторической ошибкой в языке.

👉

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

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤9👍3

1.07K views10:43

About

Blog

Apps

Platform