Building Micro Frontends with React 18

В книге рассматриваются два паттерна построения микрофронтендов - паттерн multi-SPA и паттерн micro apps.Вы узнаете, какие паттерны и когда следует использовать, а также рассмотрите нюансы развертывания этих микрофронтендов с использованием облачных нативных технологий, таких как Kubernetes и Firebase. С помощью этой книги вы получите глубокое понимание управления состояниями, решения проблем с маршрутизацией и стратегий развертывания между различными микрофронтендами.

К концу книги вы научитесь проектировать и создавать микрофронтенд-приложение на основе React с использованием федерации модулей и эффективно развертывать его в облаке.

👉 @frontendInterview

Binary Pyramid 101

Даны два числа m и n, такие, что 0 ≤ m ≤ n : переведите все числа от m до n (включительно) в двоичную систему счисления просуммируйте их, как если бы они были в основании 10 преобразовать результат в двоичную систему вернуть в виде строки.

Пример:

 binaryPyramid(1,6) = "101001101"

👉 @frontendInterview

🧑🏻‍💻Хотите писать фронтенд быстрее, понятнее и без боли? Vue.js решает эту задачу. Фреймворк, который избавляет от лишнего кода и делает разработку удобной. 

На открытом вебинаре 27 марта в 20:00 мск вы увидите разницу между обычным JS и Vue.js. Разберетесь, как директивы упрощают работу с DOM и делают код лаконичнее.

Vue.js уже используют крупнейшие компании, и спрос на разработчиков растет. Освойте фреймворк, который упростит вашу работу и ускорит рост в профессии.

⚡️Регистрируйтесь на вебинар и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3Jbq/?erid=2W5zFJHjP8c 

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

​Когда нужно использовать кнопки, а когда ссылки?

В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение.

Когда использовать `<button>`?
- Когда действие выполняется на странице без перехода на другую
- Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)
- Отправка формы
- Открытие/закрытие модального окна
- Включение/выключение чего-то на странице
- Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

Когда использовать `<a>`?
- Когда нужно перейти на другую страницу (или секцию сайта)
- Когда ссылка ведет на внешний или внутренний ресурс
- Навигация по сайту
- Переход на другую страницу
- Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

👉 @frontendInterview

Throttle на примере изменения страницы при прокрутке

На современных сайтах встречаются элементы, которые обновляются по мере прокрутки страницы или при изменении её размеров.

Просто запускать сложные и дорогостоящие операции на события scroll и resize — расточительно, потому что это может сильно нагрузить браузер и плохо сказаться на производительности.

Вместо этого можно обрабатывать изменения «раз в какое-то количество времени», используя throttle.

👉 @frontendInterview

Почему первые дни новичка решают всё

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

👉 @frontendInterview

👉 @frontendInterview

Палка о двух концах

👉 @frontendInterview

​Для чего скрипт подключают в концe body?

Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.

Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу.

Проблема: блокировка рендеринга
Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.

<head>
  <script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
  <h1>Сайт загружается...</h1>
</body>

Решение: подключение в конце `<body>`
Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.

<body>
  <h1>Контент загрузился!</h1>
  <script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>

Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML

<head>
  <script src="script.js" defer></script>
</head>

async – загрузка и выполнение параллельно

<head>
  <script src="script.js" async></script>
</head>

👉 @frontendInterview

Код, который умещается в голове: эвристики для разработчиков

Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.

👉 @frontendInterview

String Breakers

Вам дана строка и число N. Разбейте строку на подстроки, состоящие из N символов. Пробелы не учитываются.

Пример:

 N = 5;
 String = "This is an example string";

Return value:

  Thisi
  sanex
  ample
  strin
  g

👉 @frontendInterview

​Что знаешь о приоритете селекторов в CSS?

Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.

Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.

A: Инлайновые стили (например, style="color: red;") имеют самую высокую специфичность.
B: Количество ID-селекторов в селекторе (например, #header).
C: Количество классов, атрибутов и псевдоклассов (например, .class, [type="text"], :hover).
D: Количество тегов и псевдоэлементов (например, div, h1, ::before).

Рассмотрим несколько примеров и определим их специфичность:

1. #main-content — (0, 1, 0, 0)
2. .article p — (0, 0, 1, 1)
3. header h1 span — (0, 0, 0, 3)
4. div#main .content .text — (0, 1, 2, 1)

Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример специфичности</title>
    <style>
        p {
            color: black; /* (0, 0, 0, 1) */
        }
        .text {
            color: blue; /* (0, 0, 1, 0) */
        }
        #highlight {
            color: red; /* (0, 1, 0, 0) */
        }
        p#highlight {
            color: green; /* (0, 1, 0, 1) */
        }
    </style>
</head>
<body>
    <p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>

В этом примере на <p> элемент действует несколько селекторов с разной специфичностью:

1. p имеет специфичность (0, 0, 0, 1)
2. .text имеет специфичность (0, 0, 1, 0)
3. #highlight имеет специфичность (0, 1, 0, 0)
4. p#highlight имеет специфичность (0, 1, 0, 1)

Поскольку p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.

Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.

👉 @frontendInterview

👉 @frontendInterview

Как обрабатывать ошибки в JS?

Программа может работать правильно, только если код написан корректно и не содержит ошибок. JavaScript умеет обрабатывать некорректный код и сообщать об ошибке в коде. Существует семь встроенных видов ошибок, также можно создать свои собственные. Встроенные ошибки генерируются самим движком JavaScript при выполнении программы, а пользовательские — создаются с помощью конструктора Error. Оба типа ошибок можно ловить в конструкции try...catch. Подробнее в статье.

👉 @frontendInterview