Что вы думаете о применении микрофронтендов?

Микрофронтенды — это практика разбиения большого приложения на несколько независимых, связанных между собой микро-приложений. Это позволяет уменьшить количество кода, повысить производительность и упростить масштабирование. Они могут быть полезны для больших приложений, где требуется разделить функциональность на отдельные модули

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

👉 @frontendInterview

GitHub For Dummies, 2nd Edition (2023)

Написанная инженером GitHub, эта книга содержит подробную информацию о том, как работает GitHub и как вы можете использовать его, чтобы стать более эффективным, результативным и ценным членом любой совместной команды программистов.

👉 @frontendInterview

React counter

Ваша задача дописать данный React код - а именно написать функции increment, decrement и reset для счетчика. Кроме того, вам нужно создать функцию getRandomColor, которая будет применяться к компоненту каждый раз при изменении счетчика. Эта функция должна изменять цвет границы элемента.

👉 @frontendInterview

Что такое модули в TypeScript и каковы их особенности?

В TS, как и в ECMAScript2015, любой файл, содержащий import или export верхнего уровня (глобальный), считается модулем.
Файл, не содержащий указанных ключевых слов, является глобальным скриптом.

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

👉 @frontendInterview

alert()
Разработчики делают красивые модальные окна неделю, но у нас всегда есть готовое некрасивое.

При помощи директивы alert() можно вывести на экран пользователя модальное окно с каким-нибудь текстом.

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​В чём разница между null, undefined и объявленной переменной без начального значения? (let foo;)

null обычно задаётся переменной явно и означает, что она ничего не содержит. undefined показывает, что значение переменной «не определено». undefined обычно присваивается переменной, когда она была объявлена, но не было определено её начальное значение. Также, undefined может возвращаться и из функции — это происходит, если функции явно не возвращает ничего другого. null же обычно возвращают из функции явно, чтобы показать, что результат функции равен «ничему».

Без начального значения можно оставлять только переменную объявленную через let или var. Если объявить переменную через const и не задать ей начального значения, будет ошибка: Uncaught SyntaxError: Missing initializer in const declaration.

Оператор typeof для null работает странно. typeof(null) выдаст нам строку 'object'. Это официально признанная ошибка в языке, сохраняемая для совместимости. Ошибка тут в том, что null это отдельный тип данных, а не объект. С undefined всё куда лучше и typeof(undefined) выдаст нам 'undefined'. Почитать ещё о typeof можно здесь.

👉 @frontendInterview

Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition (2022)

Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях.

👉 @frontendInterview

Уникальные по порядку

Создайте функцию, которая принимает строку или массив и возвращает все уникальные элементы входного значения по порядку.

Примеры:
uniqueInOrder('AAAABBBCCDAABBB')
// ['A', 'B', 'C', 'D', 'A', 'B']

uniqueInOrder('ABBCcAD')
//['A', 'B', 'C', 'c', 'A', 'D']

uniqueInOrder([1,2,2,3,3])
//[1,2,3]

👉 @frontendInterview

В первом случае просто была вызвана функция, которая ничего не возвращает. Значение переменной будет равно undefined

 const animal = Animal() // ❌
 console.log(animal) // undefined

Во втором случае перед функцией Animal стоит оператор new. Функция Animal становится конструктором. Она выполняется, но так как this внутри функции не используется, и сама функция ничего не возвращает, то ничего не происходит. Результатом операции становится новый объект, который ссылается на функцию Animal как на конструктор. Этот объект присваивается переменной animal

 const animal = new Animal() // ✅

Если Animal имеет вид:

 function Animal() {
 this.name = 'Cat'
 }

То переменная animal, созданная с помощью new, будет иметь доступ к полю name:
console.log(animal)
// Animal { name: 'Cat' }
// Если мы явно не возвращаем ничего из конструктора,
// то получаем сам объект в качестве результата.

👉 @frontendInterview

​Почему принято размещать <link> со стилями внутри <head>, а <noscript> перед закрывающим тегом </body>? Когда можно нарушить это правило?

Когда мы размещаем стили внутри тега <head>, браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега <link> co стилями в начало документа предотвращает повторную перерисовку.

Тег <noscript> обычно идёт перед закрывающимся тегом </body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.

Мы можем размещать скрипт в <head>, если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу <noscript>. Про их отличия можно почитать подробнее в доке про <noscript>.

defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.

Ещё один способ — указать атрибут <noscript type="module">, который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть <noscript type="module" defer> равносильно <noscript type="module">, и указание defer не будет иметь никакого эффекта.

👉 @frontendInterview

👉 @frontendInterview