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

Где получить углубленные навыки JavaScript разработки? 10 марта на демо-занятии «Vue 3» Михаил Кузнецов познакомит вас с возможностями новой версии одного из самых популярных фронтенд фреймворков. На открытом уроке: - рассмотрим ключевые отличия в синтаксисе vue2 от vue3; - разберем как работать с vue-router и VueX в новой версии фреймворка; - cоздадим проект на Vue 3 с нуля с помощью Vue-cli. Демо-урок — возможность познакомиться с онлайн-курсом «JavaScript Developer. Professional» и преподавателем. Пройдите вступительный тест, чтобы принять участие в занятии https://otus.pw/HsLF/

Что такое React.cloneElement()? Функция React.cloneElement() возвращает копию переданного ей элемента. В функцию могут передаваться дополнительные пропы и потомки. Она используется, когда родительский компонент хочет добавить или модифицировать пропы потомков.

 React.cloneElement(element, [props], [...children])

cloneElement() принимает три аргумента: 1. element: элемент, подлежащий клонированию 2. props: пропы, передаваемые клонированному элементу 3. children: мы также можем передавать потомков в клонированный элемент (новые потомки заменяют старых)

Пройдите бесплатный интенсив по веб-разработке и узнайте, как создать крутой сайт всего за день! Вас ждёт 5 часов мощной практики и всего 1 час теории — вы узнаете обо всех этапах создания сайта и в итоге получите полноценный проект для портфолио 🔥 Регистрируйтесь по ссылке: https://clc.am/7pL7Cw ✔️ Изучите основы создания сайтов и научитесь работать с языками программирования — HTML, CSS, JavaScript, PHP и MySQL. ✔️ Вместе с профессиональным разработчиком создадите сайт — от написания кода до публикации в интернете. ✔️ Узнаете, что такое домен, хостинг и как правильно их настраивать. 💬 Спикер: разработчик с 16-летним опытом, руководитель команды разработчиков и директор центра подбора IT-специалистов SymbioWay — Даниил Пилипенко. Ждём вас в прямом эфире 6 марта с 12:00 до 19:00 по московскому времени! Всех участников ждут подарки 🎁

Что такое управляемые и неуправляемые компоненты? В управляемых компонентах данные формы обрабатываются React-компонентом. Альтернативой являются неуправляемые компоненты, где данные формы обрабатываются DOM. Управляемые компоненты В управляемых компонентах данные формы обрабатываются с помощью состояния компонента. Состояние компонента выступает в роли "единственного источника истины" (single source of truth) для "инпутов" компонента. Неуправляемые компоненты Неуправляемые компоненты похожи на обычные HTML-элементы. Данные каждого "инпута" сохраняются в DOM, а не в компоненте. Вместо обработчиков событий для обновления состояния, в таких компонента используются refs (ссылки, references) для извлечения значений из DOM. Ссылки позволяют получать доступ к узлам DOM или элементам React, создаваемым в методе render():

Разделяй и Властвуй Вам дан массив, состоящий из цифр и строковых представлений цифр. Вам нужно вычесть сумму строковых представлений из цифр и вернуть этот результат. Примеры: divCon([9, 3, '7', '3']) => 2 divCon(['5', '0', 9, 3, 2, 1, '9', 6, 7]) => 14 divCon(['3', 6, 6, 0, '5', 8, 5, '6', 2,'0']) => 13

​Почему функция setState() в React является асинхронной, а не синхронной? Даже если состояние обновляется синхронно, пропы - всегда асинхронно. Это означает, что значение пропов является неопределенным до повторного рендеринга родительского компонента. Объекты, предоставляемые React (state, props, refs), согласованы между собой. Если вы реализуете синхронный setState(), то могут возникнуть проблемы. setState() не изменяет state сразу, но создает запрос на изменение состояния (планирует обновление). Поэтому после обновления state теоретически может иметь старое значение. Несколько операций обновления могут объединяться в одну в целях повышения производительности. Это связано с тем, что setState() изменяет состояние и приводит к повторному рендерингу. Если операция обновления состояние будет синхронной и при этом дорогой с точки зрения производительности, то браузер пользователя лишится интерактивности (перестанет отвечать на действия пользователя до завершения операции). Поэтому такие операции являются асинхронными и группируются для обеспечения лучшего пользовательского опыта и повышения производительности.

🤔 Что читать/смотреть чтобы стать профессиональным front-end разработчиком? Админы канала FrontEndDev отбирают лучшие ресурсы по веб разработке На канале найдешь свежие статьи, фишки JS и TS, туториалы по фреймворкам, лучшие практики разработки и многое другое. 🚀 Рекомендуем подписаться!

​Почему виртуальный DOM является более эффективным, чем "грязная" проверка (dirty check)? Виртуальный DOM В React при каждом обновлении DOM или изменении данных, используемых страницей, создается новое объектное представление пользовательского интерфейса. Это всего лишь легковесная копия DOM. Виртуальный DOM имеет почти такие же свойства, что и настоящий DOM, но он не может напрямую модифицировать содержимое (контент) страницы. Манипуляции с виртуальным DOM быстрее, поскольку он ничего не обновляет на экране. Простыми словами, работа с виртуальным DOM - это работа с копией реального DOM, не более того. Обновление виртуального DOM быстрее благодаря следующему: 1. Использованию эффективного алгоритма определения различий 2. Совмещению (группировке, объединению) операций по обновлению 3. Оптимизированному обновлению поддеревьев 4. Использованию наблюдаемых объектов для определения изменений вместо "грязной" проверки 5. Как работает виртуальный DOM При рендеринге JSX-элемента обновляется виртуальный DOM. Это происходит очень быстро. После обновления новая версия виртуального DOM сравнивается со старой (снимком, выполненным перед обновлением). После этого, React определяет отличия между двумя объектами. Данный процесс называется diffing. Затем React обновляет только те части браузерного DOM, которые подверглись изменениям. За счет этого React очень сильно выигрывает в производительности. Если кратко, то вот что происходит при обновлении DOM в React: 1. Обновляется виртуальный DOM 2. Обновленный виртуальный DOM сравнивается с предыдущим 3. Определяются различия между версиями виртуального DOM 4. Обновляются только изменившиеся элементы браузерного DOM 5. Изменения отображаются на экране

Современный JavaScript для нетерпеливых. Данная книга – полное, но при этом лаконичное руководство по версии JavaScript E6 и выше. Вам не потребуется знаний старых версий языка, а сразу предлагается начать с более мощных современных. Автор бестселлеров Кэй С. Хорстман рассказывает обо всем, что вам необходимо знать, излагая материал небольшими порциями, рассчитанными на легкое усвоение. Практические советы и примеры кода помогут эффективно воспользоваться всеми новшествами, избежать подводных камней и устаревших средств и извлечь максимум пользы из надежных инструментов и фреймворков для разработки ПО на современном JavaScript.

IQ Тест Боб готовится сдавать IQ Тест. Самое распространенное задание в этом тесте - найти число, которое чем-то отличается от других. Боб обнаружил, что обычно это число отличается четностью или нечетностью. Помогите Бобу написать программу, которая будет находить это число и возвращать его номер. При этом отсчет начинается не с 0, а с 1. Примеры: iqTest("2 4 7 8 10") => 3 // Третье число нечетное, а остальные четные iqTest("1 2 1 1") => 2 // Второе число четное, а остальные нечетные