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

Яндекс Директ Только этой осенью Яндекс Директ добавит до 20 000 ₽ на рекламу для вашего бизнеса ⚡ Узнать больше #реклама yandex.ru О рекламодателе

🤔 Какие правила у работы redux ? Redux — это библиотека для управления состоянием приложений. Она основана на нескольких ключевых принципах, которые помогают поддерживать приложение предсказуемым и управляемым. Эти принципы также можно рассматривать как правила работы с Redux. 🚩Основные принципы 🟠Единый источник правды Все состояние приложения хранится в одном объекте хранилища (store). Это обеспечивает централизованное управление состоянием, что упрощает отладку и тестирование. В приложении должно быть только одно хранилище.

import { createStore } from 'redux';
   import rootReducer from './reducers';

   const store = createStore(rootReducer);   

🟠Состояние доступно только для чтения Единственный способ изменить состояние — это отправить действие (action), описывающее изменение. Действия — это простые объекты, которые имеют свойство type и, возможно, дополнительные данные. Изменения состояния должны происходить только через действия.

const increment = () => ({
     type: 'INCREMENT',
   });

   store.dispatch(increment());

🟠Изменения состояния происходят с помощью чистых функций Для описания того, как действия изменяют состояние, используются редюсеры (reducers). Редюсеры — это чистые функции, которые принимают предыдущее состояние и действие в качестве аргументов и возвращают новое состояние. Редюсеры должны быть чистыми функциями и не должны иметь побочных эффектов.

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

const store = createStore(counterReducer);
   

🚩Дополнительные правила и рекомендации 🟠Избегайте мутаций состояния: Состояние в Redux должно быть неизменяемым. Вместо изменения текущего состояния, редюсеры должны возвращать новые объекты состояния. Используйте методы, которые не изменяют исходные объекты, такие как Array.prototype.map, Array.prototype.filter, и оператор распространения (spread operator) для создания новых объектов и массивов.

const newState = {
  ...state,
  count: state.count + 1,
};

🟠Используйте сериализуемые действия и состояния Для упрощения отладки и поддержки инструментов разработки (например, Redux DevTools), действия и состояния должны быть сериализуемыми (не содержать циклических ссылок и неподдерживаемых типов данных, таких как функции или символы).

const action = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
  },
};

🟠Используйте нормализованные состояния: Храните состояния в нормализованной форме, чтобы избежать избыточности данных и упростить управление состояниями. Например, используйте объекты, где ключами являются идентификаторы, а значениями — данные.

const initialState = {
  todos: {
    byId: {
      1: { id: 1, text: 'Learn Redux' },
      2: { id: 2, text: 'Build an app' },
    },
    allIds: [1, 2],
  },
};

Ставь 👍 и забирай 📚 Базу знаний

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

Обучение на Frontend-разработчика. С нуля за 18 месяцев. На курсе вы получите все навыки, необходимые для старта в профессии Frontend-разработчика уровня middle. Персональный наставник middle/senior уровня. 14 проектов, лайвкодинг, хакатоны, репетиции техсобеседования. Освоите JavaScript, React, TypeScript Официальный диплом и сертификат школы. Поддержка наставника по JS в течение 3-х месяцев после диплома. Гарантия трудоустройства. Если вы не устроитесь, вернём деньги. Это закреплено в договоре п. 6.14 Узнать больше #реклама 16+ result.school О рекламодателе

🤔 Какие преимущества Redux? Redux — это библиотека для управления состоянием приложений, часто используемая с React, но она также может быть использована с другими библиотеками или фреймворками JavaScript. Redux предлагает централизованное хранилище (store) для состояния приложения, что делает управление состоянием более предсказуемым и удобным. Рассмотрим основные преимущества использования Redux: 🚩Преимущества Централизованное управление состоянием: Все состояние приложения хранится в одном централизованном месте, называемом хранилищем (store). Это упрощает управление состоянием и его доступность из любой части приложения. Предсказуемость и детерминизм: Redux использует чистые функции (редюсеры) для обработки изменений состояния. Это делает поведение приложения предсказуемым и детерминированным. Легкость отладки: Redux предоставляет мощные инструменты для отладки, такие как Redux DevTools, которые позволяют разработчикам просматривать состояние приложения, действия и изменения состояния в реальном времени. Тестируемость: Благодаря использованию чистых функций и явных действий, компоненты состояния и логика изменения состояния в Redux легко тестируются. Улучшенная поддержка и масштабируемость: Поскольку состояние и логика изменения состояния централизованы, легче добавлять новые функции и модули в приложение. Управление сложными состояниями: Redux позволяет эффективно управлять сложными состояниями, включая вложенные структуры данных и зависимости между различными частями состояния. Совместимость с серверным рендерингом (SSR): Redux хорошо подходит для серверного рендеринга, так как состояние приложения может быть предварительно заполнено на сервере и передано клиенту для инициализации. Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

Redux предоставляет централизованное хранилище для состояния приложения, делая управление состоянием предсказуемым и детерминированным. Преимущества включают улучшенную отладку, тестируемость, поддержку и масштабируемость, а также эффективное управление сложными состояниями. Redux хорошо подходит для крупных приложений и позволяет легко интегрироваться с серверным рендерингом. Ставь 👍 и забирай 📚 Базу знаний

🚀 Frontend для всех! Ищешь место, где можно учиться, общаться и прокачивать свои навыки в веб-разработке? Тогда тебе сюда: 👥 Reactify | Frontend Разработка — бесплатные курсы, практические проекты и поддержка единомышленников. Теория, примеры кода и свежие IT-новости — всё для твоего роста. 💼 Frontend | Собеседования — разбираем реальные интервью, готовимся к вопросам и делимся полезными материалами. Здесь собрана база знаний для уверенности на любом собеседовании.

В каждом канале тебя ждёт Гайд по Frontend-разработке: подробный Roadmap для изучения, топ вопросов по проектам и soft skills, список технических вопросов, лайвкодинг-задачи и советы по созданию резюме, которое привлечет внимание работодателей. Всё, чтобы уверенно двигаться к своей цели!

Учись. Общайся. Развивайся. Стань частью IT-сообщества! 💪

🤔 Откуда взялся CSS? CSS (Cascading Style Sheets) появился в середине 1990-х годов как стандарт для описания внешнего вида и форматирования веб-страниц. Разработка CSS началась как ответ на необходимость разделения содержимого веб-страниц и их оформления, что улучшило бы управляемость и поддерживаемость веб-контента. Рассмотрим подробнее историю и развитие CSS. 🚩История появления Ранние годы веб-разработки (1991-1994): 🟠В начале 1990-х годов, когда был изобретен HTML (Tim Berners-Lee в 1991 году), веб-страницы были в основном текстовыми документами с гиперссылками. Внешний вид и форматирование определялись в основном с помощью встроенных элементов HTML, таких как <b>, <i>, <font> и другие. 🟠Эти элементы позволяли контролировать только базовые стили и оформление, и не было эффективного способа централизованного управления стилями для всего веб-сайта. Необходимость стандартизации (1994-1996): 🟠С увеличением популярности веба и усложнением веб-страниц, стало ясно, что необходимо разработать стандарт для описания стилей, который позволил бы разделить структуру (HTML) и оформление (стили). 🟠В 1994 году Хокон Виум Ли (Håkon Wium Lie), работавший в CERN (Европейская организация по ядерным исследованиям), предложил концепцию каскадных таблиц стилей (Cascading Style Sheets). Он представил свой проект Тиму Бернерсу-Ли и сообществу разработчиков веб-стандартов. Создание стандарта CSS (1996): 🟠В 1996 году W3C (World Wide Web Consortium), организация, занимающаяся разработкой и продвижением веб-стандартов, опубликовала первую спецификацию CSS, известную как CSS1. 🟠CSS1 определял основные стили для текста, шрифтов, цветов и элементов интерфейса, таких как отступы и границы. Развитие CSS (1998 - настоящее время): 🟠В 1998 году была опубликована спецификация CSS2, которая добавила новые возможности, такие как позиционирование элементов, z-index, стили для различных медиа-типов (например, печать) и улучшенная поддержка таблиц. 🟠CSS3, разработка которого началась в начале 2000-х, был разделен на модули, что позволило быстрее и гибче разрабатывать и внедрять новые возможности. CSS3 включает в себя десятки модулей, таких как Flexbox, Grid, анимации, трансформации, градиенты и многое другое. 🚩Важные вехи CSS1 (1996): 🟠Основные стили для текста и элементов интерфейса. 🟠Поддержка шрифтов, цветов, отступов и границ. CSS2 (1998): 🟠Позиционирование элементов и z-index. 🟠Стили для различных медиа-типов. 🟠Улучшенная поддержка таблиц и других элементов. CSS3 (начало 2000-х): 🟠Модульная структура спецификации. 🟠Новые возможности, такие как Flexbox, Grid, анимации, трансформации и градиенты. В CSS4 (официальной спецификации CSS4 как таковой нет, но многие новые возможности продолжают разрабатываться в рамках модулей CSS3) включены современные инструменты для веб-разработки, такие как переменные (CSS Custom Properties), сложные селекторы, улучшенная типографика и адаптивный дизайн.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Заголовок страницы</h1>
    </header>
    <main>
        <p>Это пример абзаца текста.</p>
    </main>
    <footer>
        <p>&copy; 2024 Все права защищены.</p>
    </footer>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

😒 На одном кодинге уже давно не вывезешь, перспектива 2024 года - Информационная Безопасность Ловите два канала на тему ИБ и хакинга ZeroDay - Уроки по кибербезопасности и хакингу с нуля. Вирусы, взломы, OSINT, криптография и свежие новости Белый Хакер - программное обеспечение, утилиты, OSINT, инструменты, полезная литература и много другое. Совершенно новый формат непохожий на другие каналы.

🤔 Что такое frontend? Frontend — это термин, используемый для описания части веб-приложений и веб-сайтов, с которой взаимодействует пользователь. Это видимая и интерактивная часть приложения, отображаемая в браузере. Frontend включает в себя структуру, дизайн и поведение веб-страниц. 🚩Основные компоненты 🟠HTML (HyperText Markup Language): Отвечает за структуру и содержимое веб-страницы. Это базовый язык разметки, который используется для создания и организации элементов на странице, таких как заголовки, абзацы, изображения, ссылки и формы.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это пример абзаца текста.</p>
</body>
</html>

🟠CSS (Cascading Style Sheets): Отвечает за стилизацию веб-страницы. С его помощью можно управлять внешним видом элементов, включая цвета, шрифты, отступы, размеры и расположение. CSS помогает сделать страницы визуально привлекательными и улучшить пользовательский опыт.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    padding: 10px;
}

🚩Фреймворки и библиотеки Для упрощения разработки и улучшения эффективности существуют различные фреймворки и библиотеки, которые используются во фронтенд-разработке. 🟠React: Разработанный Facebook, это библиотека для создания пользовательских интерфейсов. React позволяет создавать компоненты — переиспользуемые части интерфейса, которые упрощают разработку и поддержку кода.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

🟠Angular: Разработанный Google, это платформа и фреймворк для создания динамичных веб-приложений. Angular предлагает мощные инструменты для управления данными, маршрутизации и разработки сложных приложений. 🚩Инструменты 🟠Webpack: Webpack — это инструмент для сборки модулей, который объединяет различные ресурсы (JavaScript, CSS, изображения) в один или несколько файлов для улучшения производительности и управления зависимостями. 🟠Babel: Babel — это транспайлер, который позволяет использовать современные возможности JavaScript в старых браузерах, преобразуя код в совместимый формат. Ставь 👍 и забирай 📚 Базу знаний

😮 Добавлена новая база слитых курсов на 800ГБ: Python: https://t.me/+QPSH2IcGu4w5ODky Frontend и Web: https://t.me/+MiJVQSyUlDNjODky Программирование: https://t.me/+opj2LZT23ddiZDli Графика и дизайн: https://t.me/+vrZ8dhdUEXM3YmQy

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. Не тратьте время на рутину. Узнать больше #реклама bitrix24.ru О рекламодателе

📌 Что будет если передать функцию по ссылке? 💬 Спрашивают в 3% собеседований Передача функции по ссылке означает, что вы передаете не результат выполнения функции, а саму функцию как объект. Это позволяет вам вызывать эту функцию в другой части программы, возможно, в другом контексте или с другими аргументами. Рассмотрим более подробно, что это значит и какие возможности это предоставляет. 🤔 Определение функции: 1️⃣ Создание функции: ➕ Вы создаете функцию и сохраняете ее в переменной или объявляете ее прямо в качестве аргумента.

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

🤔 Передача функции по ссылке: 1️⃣ Передача функции: ➕ Вы передаете функцию как аргумент другой функции или сохраняете ее в другой переменной.

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

const result = executeFunction(greet, 'Alice');
console.log(result); // "Hello, Alice!"

В этом примере функция greet передается по ссылке в функцию executeFunction, которая затем вызывает greet с аргументом Alice. 🤔 В чем преимущества и возможности передачи 1️⃣ Повторное использование кода: ➕ Вы можете передавать функции по ссылке и использовать их в разных частях программы, что позволяет избегать дублирования кода. 2️⃣ Функции высшего порядка: ➕ Принимают другие функции в качестве аргументов или возвращают функции, называются функциями высшего порядка. Это позволяет создавать более абстрактные и гибкие функции.

function add(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8

3️⃣ Коллбеки: ➕ Это функции, которые передаются как аргументы другим функциям и вызываются позже. Это особенно полезно в асинхронных операциях, таких как обработка событий или запросы к серверу.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(`Received data: ${data.name}`);
}

fetchData(handleData);

4️⃣ Методы массивов: ➕ Многие методы массивов, такие как map, filter, reduce, принимают функции в качестве аргументов для обработки элементов массива.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

🤔 Важные моменты 1️⃣ Контекст выполнения (this): ➕ При передаче функции по ссылке важно помнить, что контекст выполнения (this) может измениться. Это особенно актуально для методов объектов.

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greet = person.greet;
greet(); // undefined, так как контекст потерян

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, Alice

2️⃣ Замыкания: ➕ Передача функции по ссылке позволяет использовать замыкания, где внутренняя функция имеет доступ к переменным внешней функции, даже после того, как внешняя функция завершила выполнение.

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

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

Передача функции по ссылке означает, что вы передаете саму функцию, а не результат ее выполнения. Это позволяет вызывать функцию в другом контексте или с другими аргументами, что полезно для повторного использования кода, создания функций высшего порядка, использования коллбеков и методов массивов. Важно помнить о контексте выполнения и возможностях замыканий при передаче функций. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

⚡ Когда говорят, что JavaScript слишком простой язык, на сцену выходит канал JavaScript Learning Здесь легко научиться: ▪️ Разрабатывать высоконагруженные серверные приложения ▪️ Интегрировать внешние API и базы данных ▪️ Создавать масштабируемые серверные приложения ▪️ Проходить технические собеседования в ведущие IT-компании Самый необычный канал про Java, подписывайся – @JS_per_month

📌 Чем отличаются const и let? 💬 Спрашивают в 3% собеседований В разных языках программирования есть разные ключевые слова для объявления переменных. Два таких ключевых слова — const и let — широко используются. Рассмотрим различия между ними в контексте JavaScript. 🤔 const 1️⃣ Константные значения: ➕ Используется для объявления переменных, которые не могут быть переназначены после их инициализации. ➕ Это не означает, что значения неизменны, если переменная указывает на изменяемый объект (например, массив или объект), вы можете изменять содержимое этого объекта. 2️⃣ Инициализация: ➕ Переменная, объявленная с const, должна быть инициализирована сразу же при объявлении. 3️⃣ Область видимости: ➕ Имеет блочную область видимости, то есть видна только внутри блока {}, в котором объявлена.

const a = 10;
a = 20; // Ошибка: Assignment to constant variable.

const obj = { name: "John" };
obj.name = "Jane"; // Допустимо: изменяемое свойство объекта
console.log(obj.name); // "Jane"

🤔 let 1️⃣ Переменные, которые можно переназначить: ➕ Используется для объявления переменных, которые могут быть переназначены позже в коде. 2️⃣ Инициализация: ➕ Переменная, объявленная с let, не обязательно должна быть инициализирована при объявлении. 3️⃣ Область видимости: ➕ Также имеет блочную область видимости.

let b;
b = 10;
b = 20; // Допустимо: значение переменной изменено
console.log(b); // 20

if (true) {
  let c = 30;
  console.log(c); // 30
}
console.log(c); // Ошибка: c is not defined

🤔 Основные различия 1️⃣ Переназначение: ➕ const: Не позволяет переназначать переменную после ее инициализации. ➕ let: Позволяет переназначать переменную. 2️⃣ Инициализация: ➕ const: Требует обязательной инициализации при объявлении. ➕ let: Не требует обязательной инициализации при объявлении. 3️⃣ Область видимости: ➕ Оба имеют блочную область видимости. 🤔 Когда их использовать ➕ Используйте const для переменных, которые не должны изменяться после их инициализации. Это делает код более предсказуемым и снижает вероятность ошибок. ➕ Используйте let для переменных, которые могут изменяться в процессе выполнения программы. 1️⃣ Использование const для неизменяемых переменных:

const pi = 3.14;
const maxItems = 100;

2️⃣ Использование let для переменных, значение которых будет изменяться:

let count = 0;
count++;
console.log(count); // 1

➕ const используется для объявления переменных, которые не могут быть переназначены после их инициализации. Переменные, объявленные с const, должны быть инициализированы сразу и имеют блочную область видимости. ➕ let используется для объявления переменных, которые могут быть переназначены. Переменные, объявленные с let, могут быть не инициализированы сразу и также имеют блочную область видимости. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых