Как стать автором
Обновить
76
Карма
0
Рейтинг
Александр Инкин @Waterplea

Google Developer Expert | Angular

Taiga UI: год в Open Source

Блог компании TINKOFF Разработка веб-сайтов *Open source *Angular *TypeScript *

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

Поехали!
Всего голосов 26: ↑26 и ↓0 +26
Просмотры 6.9K
Комментарии 8

Телеграф на RxJS

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

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

Поехали!
Всего голосов 28: ↑25 и ↓3 +22
Просмотры 6.2K
Комментарии 7

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

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

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

Давайте
Всего голосов 26: ↑26 и ↓0 +26
Просмотры 4.1K
Комментарии 3

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

Блог компании TINKOFF Разработка веб-сайтов *Angular *TypeScript *

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

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

Поехали!
Всего голосов 17: ↑17 и ↓0 +17
Просмотры 2.7K
Комментарии 4

OnPush — ваш новый Default

Блог компании TINKOFF Разработка веб-сайтов *Angular *TypeScript *

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

Поехали!
Всего голосов 21: ↑21 и ↓0 +21
Просмотры 14K
Комментарии 37

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

Блог компании TINKOFF Разработка веб-сайтов *Angular *

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

Читать далее
Всего голосов 26: ↑25 и ↓1 +24
Просмотры 5.1K
Комментарии 2

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

Блог компании TINKOFF Разработка веб-сайтов *HTML *Angular *TypeScript *

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

Давайте!
Всего голосов 21: ↑21 и ↓0 +21
Просмотры 6.8K
Комментарии 2

RxJS Challenge: Неделя 1

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

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

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

Решить челлендж!
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 8.7K
Комментарии 9

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

Блог компании TINKOFF JavaScript *Angular *TypeScript *

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

Давайте!
Всего голосов 21: ↑20 и ↓1 +19
Просмотры 8K
Комментарии 0

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

Блог компании TINKOFF Разработка веб-сайтов *Open source *Angular *TypeScript *

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

Читать далее
Всего голосов 23: ↑23 и ↓0 +23
Просмотры 7K
Комментарии 8

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

Блог компании TINKOFF Разработка веб-сайтов *Open source *Angular *TypeScript *

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

Разобраться
Всего голосов 26: ↑24 и ↓2 +22
Просмотры 5.2K
Комментарии 4

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

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *

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

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

Узнать, к чему это я
Всего голосов 35: ↑35 и ↓0 +35
Просмотры 9K
Комментарии 5

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

Блог компании TINKOFF JavaScript *Angular *TypeScript *

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

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

Читать далее
Всего голосов 28: ↑27 и ↓1 +26
Просмотры 17K
Комментарии 9

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

Блог компании TINKOFF Open source *JavaScript *Angular *TypeScript *

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


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


Всего голосов 28: ↑28 и ↓0 +28
Просмотры 7.2K
Комментарии 5

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

Блог компании TINKOFF CSS *Работа с векторной графикой *HTML *Angular *
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

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

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

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


Читать дальше →
Всего голосов 24: ↑23 и ↓1 +22
Просмотры 18K
Комментарии 22

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

Блог компании TINKOFF Open source *JavaScript *Angular *TypeScript *

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


Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 3.9K
Комментарии 7

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

Блог компании TINKOFF Разработка веб-сайтов *CSS *JavaScript *Angular *

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


Читать дальше →
Всего голосов 26: ↑25 и ↓1 +24
Просмотры 7.4K
Комментарии 12

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

Блог компании TINKOFF Open source *JavaScript *Angular *TypeScript *
Туториал

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


Читать дальше →
Всего голосов 30: ↑29 и ↓1 +28
Просмотры 5.5K
Комментарии 0

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

Блог компании TINKOFF Open source *JavaScript *Angular *TypeScript *
Туториал

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


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


Читать дальше →
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 11K
Комментарии 2

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

Блог компании TINKOFF Разработка веб-сайтов *JavaScript *Angular *TypeScript *
Туториал

Привет!


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


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


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


image

Читать дальше →
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 9.7K
Комментарии 2
1

Информация

В рейтинге
Не участвует
Откуда
Нижний Новгород, Нижегородская обл., Россия
Работает в
Дата рождения
Зарегистрирован
Активность

Специализация

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