Pull to refresh
12
0
Александр Шатилов @alexbraun

Tech Lead using Angular & .net

Send message

Параметрическая модель движения ног в анимации

Reading time3 min
Views2.3K

В любой нетривиальной мультипликации существуют двигающиеся персонажи. Для их создания требуется отображать элементы ходьбы. В принципе, известно простое решение этой проблемы с помощью ключевых кадров. Автор рисует несколько ключевых положений ног, а компьютер создаёт промежуточные положения. Разнообразить полученные решения можно с помощью кривых, определяющих движение отдельных точек. Приложив определённые усилия, всегда можно добиться желаемого результата. Однако такой подход не всегда удобен. Предположим, что имеется несколько персонажей, и требуется придать каждому из них индивидуальную походку. В этой ситуации удобно пользоваться параметрической моделью, когда походка задаётся с помощью малого числа параметров. В этом случае достаточно хранить параметры для каждого характера и использовать их в нужном эпизоде для поделирования. Решение этой задачи предлагается в данной статье. Аналогичная модель строится для моделирования движения рук, поэтому ограничимся лишь анализом движения ног.

Читать далее

Доступный дизайн компонентов на примерах. Дизайнеру про ARIA-атрибуты, порядок фокуса и другое

Reading time11 min
Views17K

В статье я расскажу о том, как разрабатывать дизайн доступных (т. е. отвечающих требованиям доступности) компонентов, об основных руководствах по доступности и о ключевых моментах, на которые стоит обратить внимание, а именно: о порядке фокуса, о клавиатурном взаимодействии и об ARIA-атрибутах.

Читать далее

Как избавиться от position: absolute в CSS

Reading time8 min
Views28K

Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще.

Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS.

Читать далее

Веб-анимация: где, зачем и почему

Reading time6 min
Views51K
Качественная и уместная анимация веб-страниц радует глаз и помогает в работе. Это – одна из основ веб-дизайна наших дней. Взаимодействие пользователей с современными веб-сайтами серьёзно завязано именно на анимации. Она способна сообщать о неких состояниях страницы, направлять внимание. Анимация помогает пользователю увидеть результат его действий и может влиять на его поведение.

image

Когда анимация способна улучшить впечатления пользователя от работы со страницами? Что именно стоит «оживить» для того, чтобы взаимодействие с ресурсом стало бы более удобным, понятным, увлекательным?
Читать дальше →

Easing Functions – функции плавности для CSS-анимации и переходов

Reading time10 min
Views23K

Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

Узнать больше

Обращение к Javascript-сообществу: перестаньте писать квадраты

Reading time7 min
Views68K

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

Read more

Div на div’е не сидит и div’ом не погоняет: пишем семантически верные индикаторы загрузки на Angular

Reading time7 min
Views9K

Сверстать собственный индикатор загрузки — одна из самых простых задач, с которой может столкнуться веб-разработчик. Для получения рабочего решения пригодятся базовые знания HTML и CSS, а JS будет нужен лишь для управления процентом выполненной задачи.

Однако эта простота обманчива. Интернет наполнен множеством решений, в которых индикатор загрузки анатомически состоит из кучи вложенных друг в друга div-контейнеров, приправленных щепоткой CSS. Не нужно так! В мире грустит один котенок, когда вы игнорируете семантику верстки и забываете про доступность (a11y).

В этой статье я расскажу, как мы в проекте Taiga UI подошли к написанию собственных Angular-компонентов ProgressBar и ProgressCircle.

Читать далее

Линейная алгебра для разработчиков игр

Reading time19 min
Views801K
Эта статья является переводом цикла из четырёх статей «Linear algebra for game developers», написанных David Rosen и посвящённых линейной алгебре и её применению в разработке игр. С оригинальными статьями можно ознакомиться тут: часть 1, часть 2, часть 3 и часть 4. Я не стал публиковать переводы отдельными топиками, а объединил все статьи в одну. Думаю, что так будет удобнее воспринимать материал и работать с ним. Итак приступим.
Читать дальше →

Как читать математику

Reading time16 min
Views63K
Математика — это «язык, который ни читать, ни понять невозможно без инициации» (Эдвард Ротштейн, «Эмблемы ума»)

Протокол чтения — набор стратегий, которые должен использовать читатель для получения всех преимуществ от чтения текста. Набор стратегий для поэзии отличается от художественной литературы, а стратегии чтения художественной литературы отличаются от научных статей. Будет нелепо читать художественную книгу и задаваться вопросом, какие источники позволили автору утверждать, что главный герой — загорелый блондин; но будет неправильно читать научную литературу и не задать такой вопрос. Этот протокол чтения расширяется на протоколы просмотра и прослушивания в живописи и музыке. На самом деле большинство вводных курсов по литературе, музыке и искусству посвящено изучению этих протоколов.

Для математики существует особый протокол чтения. Как мы учимся читать литературу, так и математику мы должны научиться читать. Школьникам следует изучать протокол чтения для математики так же, как они учатся правилам чтения романа или стихотворения, учатся понимать музыку и живопись. Замечательная книга «Эмблемы ума» Эдварда Ротштейна выявляет взаимосвязь между математикой и музыкой, неявно затрагивая протоколы чтения для математики.
Читать дальше →

Ультра быстрый Cron с шагом в миллисекунду, или когда тестовые задания такими прикидываются

Reading time25 min
Views23K

Давным-давно наш коллега @novar разместил на Хабре статью с описанием вот такого незатейливого ТЗ, полученного им от потенциального работодателя:

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

Хочу предложить алгоритм, приближающийся к O(1) во всех возможных ситуациях, вместо оригинального O(n). Интересующихся прошу под кат.

Ах да. Если вы тот самый работодатель, вот готовый код под ваше ТЗ. Правда на Java, а не на C#. Но вы же не думали, что всё будет так просто?

Читать далее

Оптимизация обработки событий в Angular

Reading time8 min
Views16K

Введение


Angular предоставляет удобный декларативный способ подписки на события в шаблоне, с помощью синтаксиса (eventName)="onEventName($event)". Вместе с политикой проверки изменений ChangeDetectionStrategy.OnPush подобный подход автоматически запускает цикл проверки изменений только по интересующему нас пользовательскому вводу. Иными словами, если мы слушаем (input) событие на <input> элементе, то проверка изменений не будет запускаться, если пользователь просто кликает по полю ввода. Это значительно улучшает
производительность, по сравнению с политикой по умолчанию (ChangeDetectionStrategy.Default). В директивах мы также можем подписаться на события на хост-элементе через декоратор @HostListener('eventName').


В моей практике нередко встречаются случаи, когда обработка конкретного события требуется только при выполнении какого-либо условия. т.е. обработчик выглядит примерно так:

Читать дальше →

10 эвристик юзабилити, которые должен знать каждый дизайнер

Reading time8 min
Views23K

25 лет назад Якоб Нильсен описал 10 основных принципов проектирования взаимодействия. Эти принципы были разработаны на основе многолетнего опыта в области юзабилити-инженерии и стали правилами для взаимодействия человека и компьютера.

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

Читать далее

JavaScript: заметка о requestAnimationFrame и requestIdleCallback

Reading time10 min
Views66K


Привет, друзья!


Можете ли вы ответить на вопрос о том, в чем заключается разница между requestAnimationFrame и requestIdleCallback?


Если можете, то я завидую глубине ваших знаний. Я не смог, когда меня об этом спросили. Более того, в тот момент я даже не знал о существовании интерфейса requestIdleCallback. Теперь знаю и хочу с вами этими знаниями поделиться.


Сразу уточним, что названные интерфейсы предоставляются браузером и к ECMAScript отношения не имеют.


Что касается поддержки, то с requestAnimationFrame все хорошо, а с requestIdleCallback, в основном из-за Safari, этого современного IE, ситуация хуже.


Рассматриваемые интерфейсы позволяют разработчикам получать доступ к процессу рендеринга страницы. Также они очень тесно связаны с циклом событий (event loop) браузера.

Читать дальше →

Как я «напрограммировал» себе скилл рисования диаграмм в скетч-стиле

Reading time5 min
Views27K

По работе мне часто приходится рисовать разные схемы, диаграммы процессов и графики, в том числе и те, которые потом используются в качестве иллюстраций для сайта, статей и презентаций. Всё бы ничего, но есть у диаграмм и графиков, сделанных в популярных онлайн-сервисах наподобие draw.io или lucidcharts одна беда — они выглядят как-то слишком уныло и «олдскульно», в духе «90-х». Всю эту инфографику хотелось бы сделать более заметной, привлекательной и душевной (и, желательно, без привлечения дизайнера).

Так у меня возникла идея создания инструмента для отрисовки диаграмм и графиков в стиле «нарисовано от руки». Об истории создания сервиса и «подводных камнях» я расскажу в этой заметке.

Читать далее

Дженерики в TypeScript

Reading time10 min
Views168K

Привет, я Сергей Вахрамов, занимаюсь фронтенд-разработкой на Angular в компании Тинькофф. Во фронтенд-разработку вошел напрямую с тайпскрипта, просто перечитав всю документацию. С того момента и спецификация ECMAScript расширилась, и TypeScript сильно подрос. Казалось бы, почему разработчики могут бояться дженериков, ведь бояться там нечего? Мой опыт общения с джуниор-разработчиками говорит, что во многом ребята не используют обобщенные типы просто потому, что кто-то пустил легенду об их сложности.

Эта статья для тех, кто не использует generic-типы в TypeScript: не знают о них, боятся использовать или используют вместо реальных типов — any.

Перестать везде использовать тип "any"

Разбираемся в сортах реактивности

Reading time27 min
Views39K

Здравствуйте, меня зовут Дмитрий Карловский и я… прилетел к вам на турбо-реактивном самолёте. Основная суть реактивного двигателя изображена на картинке.



Тут, казалось бы, хаотичное взаимодействие между молекулами, приводит к тому, что улетающие молекулы опосредованно передают импульс корпусу двигателя. Что ж, давайте подумаем, как реактивные принципы решают или наоборот усугубляют проблемы в программировании. Сравним различные подходы к реактивному программированию. И вытащим на поверхность все их подводные камни.


Это — текстовая расшифровка выступления на SECON.Weekend Frontend'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

Читать дальше →

Деревья выражений в C# на примере нахождения производной (Expression Tree Visitor vs Pattern matching)

Reading time18 min
Views47K
Доброго времени суток. Деревья выражений, особенно в сочетании с паттерном Visitor, всегда являлись довольно запутанной темой. Поэтому чем больше разнообразной информации по этой теме, чем больше примеров, тем легче интересующимся будет найти что-то, что им понятно и полезно.


Читать дальше →

Алексей Бородкин и Виталий Мазуревич 9 июля принимают участие в онлайн-конференции UX-марафон

Reading time1 min
Views796
Друзья, привет!

Алексей Бородкин и Виталий Мазуревич, Product Lead’ы в Росбанке, 9 июля примут участие в онлайн-конференции UX-марафон.

image

В своем выступлении «8 наколок UX-менеджера» ребята расскажут, почему работа UX-менеджера с пользовательским опытом (User Experience) не ограничивается только визуальным отображением (макетами, интерфейсами и так далее). И поделятся как в UХ оценивать влияние таких продуктовых факторов как бизнес-требования к продукту, особенности технической платформы, системная архитектура, функциональность; а также влияние текстов и, конечно же, визуальной составляющей.

Алексей Бородкин и Виталий Мазуревич, признанные UX/CX-эксперты, основатели Гильдии вольных проектировщиков, преподаватели ФРИИ и Британской высшей школы дизайна.

Будет интересно и полезно. Приходите!

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

Reading time4 min
Views5.1K

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

Давайте

Дайджест свежих материалов из мира фронтенда за последнюю неделю №490 (18 — 24 октября 2021)

Reading time3 min
Views8.5K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity