Frontend Interview - собеседования по Javascript / Html / Css

Building Vue.js Applications with GraphQL (2021) С момента своего выпуска Facebook в 2012 году GraphQL покорил Интернет штурмом. Огромные компании, такие как Airbnb и Audi, начали применять его, в то время как малые и средние компании теперь осознают его потенциал. С помощью рецептов, приведенных в этой книге, вы узнаете, как создать полноценное приложение-чат в реальном времени с нуля, используя GraphQL и Vue.js. 👉 @frontendInterview

👉 @frontendInterview

​Назовите методы жизненного цикла в React версии 16.3+ getDerivedStateFromProps: запускается перед вызовом метода render() и при каждом повторном рендеринге. Он используется в редких случаях, когда нам требуется производное состояние. Для получения более подробной информации смотрите если вам требуется производное состояние componentDidMount: выполняется после первого рендеринга, здесь выполняются AJAX-запросы, обновляется DOM или состояние компонента, регистрируются обработчики событий shouldComponentUpdate: определяет, должен ли компонент обновляться. Значением по умолчанию является true. Если вы уверены в том, что компонент не нуждается в повторном рендеринге при изменении состояния или пропов, тогда можете вернуть ложное значение. Это подходящее место для улучшения производительности, позволяющее предотвратить ненужные рендеринги при получении компонентом новых пропов getSnapshotBeforeUpdate: выполняется перед применением результатов рендеринга к DOM. Любое значение, возвращенное этим методом, передается в componentDidUpdate(). Это может быть полезным для получения информации из DOM, например, позиции курсора или величины прокрутки componentDidUpdate: в основном, используется для обновления DOM в соответствии с изменением состояния или пропов. Не выполняется, если shouldComponentUpdate() возвращает false componentWillUnmount используется для отмены сетевых запросов или удаления обработчиков событий, связанных с компонентом 👉 @frontendInterview

​Что такое Объединение (Union Types) в TypeScript? Объединение (Union), это механизм позволяющий создавать из множества существующих типов данных логическое условие, по которому данные могут принадлежать к одному из указанных типов. Объединение указывается с помощью оператора прямой черты |, по обе стороны которой, располагаются типы данных.

 let v1: T1 | T2 | T3;

Переменной, которой был указан тип объединения A или B или C может быть присвоено значение принадлежащие к одному из трех типов. Поскольку значение может принадлежать ко множеству, порой несовместимых, типов, компилятор, без вмешательства разработчика, расценивает принадлежность значения к типу, который наделен общими для всех типов признаками. class Bird { fly(): void {} toString(): string { return 'bird'; } } class Fish { swim(): void {} toString(): string { return 'fish'; } } class Insect { crawl(): void {} toString(): string { return 'insect'; } } function move(animal: Bird | Fish | Insect): void { animal.fly(); // Error animal.swim(); // Error animal.crawl(); // Error animal.toString(); // Ok, declared in all types } 👉 @frontendInterview

👉 @frontendInterview

Реальные макеты для вёрстки - это канал, где собраны примеры реальных макетов, которые заказчики присылают верстальщику. Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами!

В чем разница между createElement() и cloneElement() в React? JSX транспилируется в функции createElement() для создания элементов React, которые используются для объектного представления пользовательского интерфейса. А cloneElement() используется для клонирования элемента и передачи ему новых свойств. 👉 @frontendInterview

👉 @frontendInterview

​Современная разработка — многоуровневый и сложный процесс, состоящий из двух частей: серверной и клиентской. Всё, что видит пользователь, открывая веб-страницу, как раз является клиентской частью и результатом усилий фронтенд-разработчика. Как из кода для машин получается сайт для людей, узнаете на бесплатном интенсиве от GeekBrains. Мы покажем реальную картину, с чем имеют дело front-end-разработчики: ➖посмотрим на сайт глазами разработчика, ➖разберёмся с HTML-тегами и CSS-свойствами, ➖посмотрим блочную модель, ➖попробуем сделать свою страницу. Ещё не знакомы с HTML & CSS и не определились, какое направление в программировании выбрать? Подключайтесь к бесплатному интенсиву от GeekBrains, регистрация здесь ⟶ https://gb.ru/link/Cuxwk0

Степени двойки Напишите функцию, которая принимает неотрицательное целое число и возвращает массив из степеней двойки от 0 до входного числа. Примеры n = 0 ==> [1] # [2^0] n = 1 ==> [1, 2] # [2^0, 2^1] n = 2 ==> [1, 2, 4] # [2^0, 2^1, 2^2] 👉 @frontendInterview

Что такое Пересечение (Intersection) в TypeScript? Пересечение (Intersection) - мощный механизм TypeScript, который позволяет рассматривать множество типов данных, как один. Пересечение указывается с помощью оператора амперсанда &, по обе стороны от которого указываются типы данных. Переменной, которой был указан тип пересечение A и B и С может быть присвоено значение, которое принадлежит к типам A и B и C одновременно. type A = { x: number y: number } type B = { y: number z: number } type I = A & B Переменная типа пересечения I может содержать объекты со свойствами типа A AND типа B (т. е. x, y и z; отсюда символ & ), который соответствует объединению свойств двух типов

👉 @frontendInterview

Что такое React Fiber и для чего он предназначен? Fiber (волокно) - это новый движок согласования, изменение основного алгоритма в React 16. Основной задачей React Fiber является повышения производительности в таких областях, как анимация, создание макета страницы, обработка жестов, возможность приостанавливать, прерывать или повторно запускать выполнение операций, предоставление приоритета определенным типам обновлений, а также новые примитивы параллелизма. Цель React Fiber - повышение производительности в таких областях, как анимация, создание макета страницы и обработка жестов. Основной его особенностью является incremental rendering (инкрементальный рендеринг, используется Angular): возможность разделения процесса рендеринга на части и их объединение через различные фреймы. 👉 @frontendInterview

Как управлять большой командой ? Сложно. С ростом команды возникают проблемы коммуникации и согласований. Добавьте к этому сложность управления процессами в разработке, и результат будет отличаться от изначального. Если вы работаете с программистами или руководите компанией, то обязательно загляните на канал Будни КТС Ребята из KTS занимаются разработкой высоконагруженных сервисов для таких крупных организаций как :Mail, X5, ПИК, Роснефть и тд. На канале они рассказывают про: - Выгорание - Карьерный путь менеджера - Зачем нужен системный архитектор? Без инфомусора. Практика, опыт, анализ, подписка – @ktsdaily