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

🤔Что такое цепочка прототипов ? Цепочка прототипов (prototype chain) — это механизм в JavaScript, с помощью которого объекты могут наследовать свойства и методы друг у друга. Этот механизм лежит в основе объектно-ориентированной модели JavaScript. 🚩Основные концепции 🟠Прототипы Каждый объект в JavaScript имеет свойство __proto__ (или скрытое свойство [[Prototype]]), которое указывает на его прототип. Прототип — это другой объект, от которого объект наследует свойства и методы. Объекты могут быть созданы с использованием конструктора, и все объекты, созданные одним и тем же конструктором, наследуют от одного и того же прототипа. 🟠Цепочка прототипов Если свойство или метод не найдено у объекта, JavaScript будет искать его в прототипе объекта. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype). Если свойство не найдено в цепочке прототипов, результатом будет undefined. Рассмотрим простой пример, чтобы проиллюстрировать, как работает цепочка прототипов: В этом примере myDog наследует метод speak от Animal.prototype и метод bark от Dog.prototype. Когда вызывается myDog.speak(), JavaScript сначала ищет метод speak в myDog. Поскольку его там нет, он переходит к Dog.prototype, где тоже его не находит, и затем переходит к Animal.prototype, где метод speak найден и выполняется.

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

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

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog; // Восстановление конструктора Dog

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

🚩Особенности 🟠Прототипы по умолчанию Все объекты, созданные с использованием литерала объекта {}, имеют в качестве прототипа Object.prototype. Все функции, включая функции-конструкторы, имеют свойство prototype, которое указывает на прототип объектов, созданных этой функцией. 🟠Методы исодит к Animal.pro. Методы, такие как toString(), hasOwnProperty(), isPrototypeOf(), находятся в Object.prototype и доступны всем объектам через цепочку прототипов.

const obj = {};
console.log(obj.toString()); // [object Object]
console.log(obj.hasOwnProperty('toString')); // false, т.к. метод унаследован

🟠Изменение прототипа объекта Прототип объекта можно изменить с помощью метода Object.setPrototypeOf(), но это не рекомендуется из-за потенциальных проблем с производительностью.

const cat = {
  meow() {
    console.log('Мяу!');
  }
};

const myCat = Object.create(cat);
myCat.name = 'Мурка';
myCat.meow(); // Мурка мяукает.

Object.setPrototypeOf(myCat, {});
myCat.meow(); // Ошибка, так как метод больше не существует в цепочке прототипов

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

Большая конференция Яндекс Рекламы на ВТБ Арене 22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут: ✅ Как развиваться специалистам в сфере рекламы ✅ Как продвигаться и продавать в интернете ✅ Какие тренды в маркетинге появляются сейчас Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга. Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично. Конференция бесплатная, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

🤔 Как развернуть строку в js ? Есть несколько способов развернуть строку. Один из наиболее распространенных способов — это преобразование строки в массив, разворот массива и затем преобразование массива обратно в строку. Использование методов массива split, reverse и join Преобразование строки в массив символов с помощью split(''). Разворот массива с помощьюпросят с веро Преобразование массива обратно в строку с помощью join('').

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello')); // 'olleh'

Использование цикла for Создание пустой строки для результата. Проход по исходной строке с конца к началу и добавление каждого символа в результат.

function reverseString(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString('hello')); // 'olleh'

Использование рекурсии Рекурсивное разбиение строки и объединение символов в обратном порядке.

function reverseString(str) {
  if (str === '') {
    return '';
  } else {
    return reverseString(str.substr(1)) + str[0];
  }
}

console.log(reverseString('hello')); // 'olleh'

Использование деструктуризации и метода reduce Преобразование строки в массив с помощью оператора распространения (spread operator)

function reverseString(str) {
  return [...str].reduce((acc, char) => char + acc, '');
}

console.log(reverseString('hello')); // 'olleh'

Использование Array.from и reduceRight Преобразование строки в массив с помощью Array.from.

function reverseString(str) {
  return Array.from(str).reduceRight((acc, char) => acc + char, '');
}

console.log(reverseString('hello')); // 'olleh'

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

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔Что нужно сделать, чтобы поменять данные в хранилище redux ? Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно. 🚩Шаги для изменения данных в хранилище 🟠Создание действия (action) Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

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

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

export const setValue = (value) => ({
  type: 'SET_VALUE',
  payload: value,
});

🟠Создание редюсера (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,
      };
    case 'SET_VALUE':
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

export default counterReducer;

🟠Создание хранилища (store): Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

🟠Подключение Redux к React (или другому фреймворку): Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

🟠Использование состояния и отправка действий в компонентах: Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, setValue } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>
    </div>
  );
};

export default App;

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

Яндекс Директ Только этой осенью Яндекс Директ добавит до 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 в старых браузерах, преобразуя код в совместимый формат. Ставь 👍 и забирай 📚 Базу знаний