Pull to refresh
76
Karma
0
Rating
Александр Инкин @Waterplea

Google Developer Expert | Angular

Taiga UI: год в Open Source

TINKOFF corporate blog Website development *Open source *Angular *TypeScript *

Taiga UI — это огромная библиотека компонентов на Angular. Мы в Тинькофф разрабатывали ее внутри пару лет, прежде чем выпустили вторую, мажорную версию на публику. С тех пор прошел год, и я хочу подвести итоги и обозначить планы на 2022 год.

Поехали!
Total votes 26: ↑26 and ↓0 +26
Views 6.9K
Comments 8

Телеграф на RxJS

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

На днях я смотрел кино, где оператор использовал телеграф. Он знал наизусть азбуку Морзе и очень быстро нажимал свою единственную кнопку. Я задумался: с RxJS мы способны на большее! Давайте запилим телеграф, используя единственный fromEvent и массу интересных трюков. Потренируемся с Dependency Injection, директивами и операторами RxJS, чтобы собрать демо, которое выглядит круто и звучит аутентично.

Поехали!
Total votes 28: ↑25 and ↓3 +22
Views 6.2K
Comments 7

Ленивая подгрузка библиотек из CDN в Angular

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.

Давайте
Total votes 26: ↑26 and ↓0 +26
Views 4.1K
Comments 3

Самосохраняющийся компонент выбора

TINKOFF corporate blog Website development *Angular *TypeScript *

Недавно Бхарат Рави опубликовал статью о директиве самосохраняющегося select-элемента на InDepth. Это интересная концепция изолирования логики в директиве, что в целом идея хорошая.

Однако в этом случае у меня есть сомнения, которые я хочу подсветить. Я предлагаю свою версию компонента, исправляющую эти моменты. Начнем с того, что назовем проблемы текущего решения.

Поехали!
Total votes 17: ↑17 and ↓0 +17
Views 2.7K
Comments 4

OnPush — ваш новый Default

TINKOFF corporate blog Website development *Angular *TypeScript *

В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.

Поехали!
Total votes 21: ↑21 and ↓0 +21
Views 14K
Comments 37

Небинарный *ngIf

TINKOFF corporate blog Website development *Angular *

Вам когда-нибудь хотелось отобразить состояние загрузки, пока ngIf ждет ответа от async-пайпа? Или, может, вы мечтали передать в ngFor шаблон для пустого массива? Возможно, вы бросили это, потому что вам не хотелось реализовывать базовую логику этих директив самому. На самом деле в этом нет нужды! Один и тот же селектор может подцепить несколько директив, что позволяет расширить функциональность встроенных директив дополнительной логикой.

Читать далее
Total votes 26: ↑25 and ↓1 +24
Views 5.1K
Comments 2

Bindon: малоизвестные фишки шаблонов Angular

TINKOFF corporate blog Website development *HTML *Angular *TypeScript *

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

Давайте!
Total votes 21: ↑21 and ↓0 +21
Views 6.8K
Comments 2

RxJS Challenge: Неделя 1

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Работая с Angular волей-неволей будешь использовать RxJS, ведь он лежит в основе фреймворка. Это очень мощный инструмент для обработки событий и не только. Однако далеко не каждый проект использует его по полной. Часто это просто запросы на бэк, нехитрые преобразования данных и подписка. Мы с Ромой очень любим RxJS и решили собрать несколько интересных кейсов из нашей практики. Мы сделали из этого что-то вроде челленджа на 20 задачек, которые мы предлагаем решить с помощью RxJS и попрактиковать свои навыки.

Каждая задачка будет иметь некий бойлерплейт, чтобы вам было просто начать. Под спойлером я положу ссылку на свое решение и небольшое пояснение к нему. В целом задачи будут идти от простого к сложному, а полное собрание с ответами и пояснениями на английском доступно на GitHub.

Решить челлендж!
Total votes 14: ↑14 and ↓0 +14
Views 8.7K
Comments 9

Глобальные объекты в Angular

TINKOFF corporate blog JavaScript *Angular *TypeScript *

В JavaScript мы часто используем сущности, вроде window, navigator, requestAnimationFrame или location. Некоторые из этих объектов существуют испокон веков, некоторые являются частью вечно растущего набора Web API. Возможно вы встречали класс Location или токен DOCUMENT в Angular. Давайте обсудим, для чего они нужны и чему мы можем у них научиться, чтобы сделать наш код чище и более гибким.

Давайте!
Total votes 21: ↑20 and ↓1 +19
Views 8K
Comments 0

Учим HostBinding работать с Observable

TINKOFF corporate blog Website development *Open source *Angular *TypeScript *

Как и многие другие Angular-разработчики, я мирился с одним ограничением. Если мы хотим использовать Observable в шаблоне, мы можем взять знакомый всем async-пайп. Но его нельзя применить к @HostBinding. Давным-давно это было возможно по ошибке, но это быстро исправили. Все потому, что хост байндинг относится к родительскому view и в нем этот пайп может быть не подключен. Это довольно желанная фича. Давайте посмотрим, как мы можем ее реализовать, пока нет официального решения.

Читать далее
Total votes 23: ↑23 and ↓0 +23
Views 7K
Comments 8

Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

TINKOFF corporate blog Website development *Open source *Angular *TypeScript *

Мой коллега Роман недавно объявил о выходе нашей новой библиотеки компонентов под Angular Taiga UI. В инструкциях Getting started сказано, что приложение нужно обернуть в некий tui-root. Давайте разберемся, что он делает, узнаем, как и зачем мы используем порталы и что это вообще такое.

Разобраться
Total votes 26: ↑24 and ↓2 +22
Views 5.2K
Comments 4

Декларативный подход в Angular

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Когда я впервые услышал про compliant-механизмы, был весьма впечатлен. Хоть они и окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я
Total votes 35: ↑35 and ↓0 +35
Views 9K
Comments 5

5 советов для прокачки своих навыков в Angular

TINKOFF corporate blog JavaScript *Angular *TypeScript *

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

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

Читать далее
Total votes 28: ↑27 and ↓1 +26
Views 17K
Comments 9

Как писать хорошие библиотеки под Angular

TINKOFF corporate blog Open source *JavaScript *Angular *TypeScript *

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


Angular — превосходная платформа с одними из лучших инструментов во фронтэнд-среде. И, конечно, есть определенный способ делать «по-ангуляровски». Что лично мне особенно нравится в этом фреймворке — это то чувство удовлетворенности, которое испытываешь, когда все сделано как надо: аккуратный код, четкая архитектура. Давайте разберемся, что делает код правильно написанным под Angular.


Total votes 28: ↑28 and ↓0 +28
Views 7.2K
Comments 5

Нативный способ покрасить SVG-иконки

TINKOFF corporate blog CSS *Vector graphics *HTML *Angular *
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.


Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Views 18K
Comments 22

Лабаем на MIDI-клавиатуре в Angular

TINKOFF corporate blog Open source *JavaScript *Angular *TypeScript *

Web MIDI API — интересный зверь. Хоть он и существует уже почти пять лет, его все еще поддерживает только Chromium. Но это не помешает нам создать полноценный синтезатор в Angular. Пора поднять Web Audio API на новый уровень!


Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Views 3.9K
Comments 7

Кастомный скроллбар в Angular

TINKOFF corporate blog Website development *CSS *JavaScript *Angular *

После вступления Edge в доблестные ряды Chromium-браузеров кастомизация скроллбаров через CSS отсутствует только в Firefox. Это здорово, но кроме Firefox у CSS-решения есть масса ограничений. Посмотрите, какую черную магию приходится применять для плавного исчезновения. Чтобы получить полный контроль над внешним видом, по-прежнему нужно прибегать к JavaScript. Давайте разберемся, как это по-хорошему сделать через компонент Angular.


Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Views 7.4K
Comments 12

Пишем Ретровейв на Angular

TINKOFF corporate blog Open source *JavaScript *Angular *TypeScript *
Tutorial

Web Audio API существует уже давно, и про него есть немало статей. Поэтому про сам API много говорить не будем. Расскажем, что Web Audio и Angular могут стать лучшими друзьями, если их правильно познакомить. Давайте сделаем это!


Читать дальше →
Total votes 30: ↑29 and ↓1 +28
Views 5.5K
Comments 0

Прокачиваем работу с событиями в Angular

TINKOFF corporate blog Open source *JavaScript *Angular *TypeScript *
Tutorial

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


Однако описанный мною метод громоздкий и сложный для восприятия. Пришло время переписать фильтрацию на декораторы.


Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Views 11K
Comments 2

Пишем свою стратегию для виртуального скролла из Angular CDK

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *
Tutorial

Привет!


В Angular CDK в седьмой версии появился виртуальный скролл.


Он отлично работает, когда размер каждого элемента одинаков, — причем прямо «из коробки». Мы просто задаем размер в пикселях и указываем, к какому элементу нужно прокрутить контейнер, сделать ли это плавно, а также можем подписаться на индекс текущего элемента. Однако что делать, если размер элементов меняется? Для этого в CDK предусмотрен интерфейс VirtualScrollStrategy, реализовав который мы научим скролл работать с нашим списком.


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


image

Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Views 9.7K
Comments 2
1

Information

Rating
Does not participate
Location
Нижний Новгород, Нижегородская обл., Россия
Works in
Date of birth
Registered
Activity

Specialization

Frontend Developer, Web Developer
Lead
From 1,000,000 ₽
Angular
JavaScript
TypeScript
Web development
CSS
HTML
LESS