Frontender's notes [ru]

2023-05-17 20:07:22 ​​ NgDoc — Cоздание документации для Angular проектов

В этой статье автор расскажет, какая библиотека для приложения Angular, может устанавливается и интегрироваться в существующее приложение, что бы генерировать и отображать в нем документацию, и почему NgDoc автоматически соберет все файлы из которых состоит ваше демо и отобразит их в виде вкладок, а также вы узнаете почему Playgrounds - довольно мощный вид демо который может быть использован для компонентов и директив.

Читать... Открыть/Комментировать

2023-05-17 15:07:31 Новая фича CSS - Nesting

Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.

Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:

Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого

.link {
color: red;
}

.link:hover,
.link:focus {
color: blue;
}

С нововведением мы сможем написать так:

.link {
color: red;

&:hover,
&:focus {
color: blue;
}
}

В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился. Открыть/Комментировать

2023-05-16 20:07:27 ​​ Расширенный мониторинг производительности Vue.js

В этой статье автор расскажет, почему даже самые лучшие разработчики сталкиваются с проблемами производительности своих приложений и сайтов, и как можно подобрать комбинацию метрик из различных категорий, чтобы охватить процесс мониторинга производительности со всех сторон, а также вы узнаете почему метрики, основанные на правилах, рассчитывают показатели производительности исходя из взвешенного набора измерений, как, например, показатели Lighthouse или PageSpeed.

Читать... Открыть/Комментировать

2023-05-16 15:08:06 ​​ Кастомный select для React

В этой статье автор расскажет, как написать минималистичный кастомный select компонент для React приложения, и почему основное назначения нашего селекта это скрывать и показывать наш выпадающий список для пользователя, а также вы узнаете зачем для удобной стилизации всех этих состояний, нам понадобится использовать data атрибуты.

Читать... Открыть/Комментировать

2023-05-15 20:07:31 ​​ Экосистема фронтенд-разработчика на JavaScript: полезный инструментарий для начинающих

В этой статье автор расскажет, почему если вы начинающий JS-разработчик, вам лучше иметь под рукой краткий список самых необходимых и полезных в работе инструментов, и почему до определенного момента внешний вид элементов, созданных с использованием JavaScript, различался в разных браузерах, а также вы узнаете почему многие фреймворки работают с собственными сборщиками — например, Webpack используется в Vue.js.

Читать... Открыть/Комментировать

2023-05-15 15:07:09 ​​ Микрофронтенды — универсальное решение всех проблем или просто удобный подход

В этой статье автор расскажет, зачем нам микрофронтенды, если есть микросервисы или монолит, и стоит ли тащить микрофронтенды в свой проект только потому, что это модно, а также вы узнаете о трёх способах организации микрофронтендов: Podium, Single-SPA и Module Federation.

Читать... Открыть/Комментировать

2023-05-15 11:37:58 ​​Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC

18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем:
— Плюсы и минусы микросервисного подхода
— Как мигрировать монолит на микросервисы
— Решение на базе NodeJS + протокола GRPC.

В результате у вас будет база для создания своего микросервиса на NodeJS.

Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты. 

Для участия пройдите вступительный тест https://otus.pw/VDUh/

Нативная интеграция. Информация о продукте www.otus.ru Открыть/Комментировать

2023-05-14 20:07:25 ​​ Кешируем API ответы для frontend приложения с помощью Yakbak

В этой статье автор расскажет, почему для создания кеширующей прослойки можно воспользоваться библиотекой yakbak, слегка обогатив её новой хеширующей функцией, и почему если немного попользоваться таким решением, то приходит понимание, что лучше использовать читабельные названия файлов, а также вы узнаете почему API запросы идут на локальный прокси, расположенный по адресу localhost:4200, а оттуда уже на гитхаб.

Читать... Открыть/Комментировать

2023-05-14 15:07:13 ​​ Архитектура frontend приложений — react, react native, angular

В этой статье автор расскажет, почему структура и правила не должны зависеть от бизнес логики проекта, и как сделать так, чтобы при разделении на модули все компоненты и логика находилися рядом друг с другом, а также вы узнаете почему основой для разделения проекта на компоненты является не их техническое происхождение, а бизнес логика.

Читать... Открыть/Комментировать

2023-05-13 20:07:50 ​​ Устраняем недостаток микрофронтендов: четыре способа коммуникации между frontend-приложениями

В этой статье автор расскажет, как для коммуникации между абсолютно не несвязанными приложениями можно использовать iFrame, и почему при передаче данных между frontend-приложениями, которые находятся на разных доменах, у iFrame практически нет альтернатив, а также вы узнаете как CustomEvent API позволяет разработчикам не только создавать кастомные события, но и инициировать их на элементах DOM, передавая данные по цепочке.

Читать... Открыть/Комментировать