FRONTEND FLOW

Заголовок страницы – это текст, который отображается на вкладке браузера рядом с иконкой сайта (favicon). Установка правильного заголовка страницы улучшает навигацию пользователя и оптимизацию для поисковых систем (SEO). Самый простой способ задать заголовок страницы в Angular — это использовать сервис Title, предоставляемый пакетом @angular/platform-browser. Этот сервис позволяет динамически устанавливать заголовок документа. Проблемы: Начиная с версии Angular 14, стало проще обновлять заголовок страницы...

Иногда нам нужно использовать существующий элемент для управления формы, а не создавать лишнюю обертку для доступа к значению. Один из частых случаев — создание пользовательских компонентов ввода. Следующее изображение описывает нашу цель: Мы хотим использовать элементы управления формы, переданные через директивы formControl, formControlName или ngModel, в нашем пользовательском компоненте ввода и перенаправить их на внутренний элемент ввода. Давайте рассмотрим два способа, как это можно сделать:...

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

1. Инжектим Firestore и нашу коллекцию из БД (по имени) 2. Получить данные коллекции, вернется Observable 3. Добавить документ в коллекцию (в data передается объект документа) 4. Удалить документ из коллекции по id...

Псевдоэлементы - это специальные конструкции в CSS, которые позволяют создавать виртуальные элементы и добавлять к ним стили. Псевдоэлементы начинаются со знака двоеточия и указываются после селектора элемента. Они не существуют в DOM, но могут быть использованы для добавления дополнительных эффектов на страницу. Два наиболее часто используемых псевдоэлемента - это ::before и ::after. Псевдоэлемент ::before позволяет добавить контент перед содержимым элемента, а псевдоэлемент ::after - после содержимого...

Псевдоклассы в CSS позволяют выбирать элементы на основе их текущего состояния или положения в документе. Это может быть полезно для стилизации элементов при определенных действиях пользователя, таких как наведение курсора на элемент или выбор элемента в форме. Псевдоклассы начинаются со знака двоеточия и указываются после селектора элемента. Например, псевдокласс ":hover" выбирает элемент, когда курсор мыши находится над ним: В этом примере мы выбрали все ссылки, на которые наведен курсор мыши, и установили для них красный цвет...

Привет! В этой подборке материалов я хочу познакомить Вас с Angular 17, рассказать о его прелестях и сделать простенькое приложение - трекер задач. Почему Angular? Не буду здесь разводить войну между фреймворками и не писать заголовки вроде "Angular vs React" или "Какой фреймворк лучше". Мой выбор пал на Angular, когда я, будучи стажером в стартапе, услышал: "У нас используется Angular. Не знаком? Ничего, мы научим!". С тех пор я понял, что это было везение, потому что Angular - действительно крутой фреймворк, особенно в 2024 году...

Метод filter() является одним из наиболее полезных и часто используемых методов массивов в JavaScript. Он позволяет фильтровать элементы массива на основе заданных условий и возвращать новый массив, содержащий только те элементы, которые соответствуют условиям. Синтаксис метода filter() выглядит следующим образом: Здесь array - это массив, который нужно отфильтровать, а callback - это функция, которая будет применена к каждому элементу массива. Функция callback принимает три параметра: element - текущий элемент массива, index - индекс текущего элемента и array - сам массив...

Переменные в CSS - это именованные значения, которые могут быть повторно использованы в коде. Они могут содержать цвета, шрифты, отступы и другие значения, что делает их очень полезными для упрощения кода и повторного использования стилей. Создание переменных в CSS начинается с использования ключевого слова "var", за которым следует имя переменной, которую вы хотите создать. Здесь мы создали переменную "primary-color" и установили ее значение равным голубому цвету (#007bff). Обратите внимание, что...

position: absolute - это свойство CSS, которое позволяет задать позицию элемента относительно его первого родительского элемента, который имеет позиционирование, отличное от значения static. Элемент, установленный с position: absolute, не занимает места в потоке документа, и другие элементы могут занимать его место. Для того, чтобы понять, как работает position: absolute, нужно знать еще несколько свойств CSS: Давайте рассмотрим пример: Здесь мы установили position: relative для родительского элемента ...

В JavaScript есть несколько способов перевернуть строку. Рассмотрим некоторые из них. 1. Используя метод split() и reverse(): Метод split() разбивает строку на массив символов, а метод reverse() меняет порядок элементов в массиве на обратный. Затем мы объединяем массив обратно в строку с помощью метода join(): 2. Используя цикл for: Мы можем перебирать символы в строке с помощью цикла for и добавлять их в новую строку в обратном порядке: 3...

Переменные - это контейнеры, которые хранят значение и имеют имя, которое вы используете для ссылки на это значение. В JavaScript переменные объявляются с помощью ключевых слов var, let или const. Ключевое слово var было использовано в старых версиях JavaScript, но в современном стандарте let и const используются чаще. Ключевое слово let используется для объявления переменных, которые могут изменяться. В этом примере переменная myVariable сначала содержит строку "Hello world!", а затем значение изменяется на "Hi there!"...