Pull to refresh
12
0
Иван @IPri

инженер-программист

Send message

Как не проиграть с производительностью в длительном скроллинге

Reading time12 min
Views4.3K

Меня зовут Михаил Кириченко. Я разрабатываю клиентскую часть в компании Bimeister.

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

Читать далее
Total votes 11: ↑10 and ↓1+9
Comments6

Паттерны реактивности в современном JavaScript

Level of difficultyHard
Reading time12 min
Views11K



"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.


Паттерны реактивности являются ключевыми для веб-разработки


Мы работаем с большим количеством JS на сайтах и в веб-приложениях, поскольку браузер — это полностью асинхронная среда. Мы должны реагировать на действия пользователя, взаимодействовать с сервером, отправлять отчеты, мониторить производительность и т.д. Это включает в себя обновление UI, сетевые запросы, изменения навигации и URL в браузере, что делает каскадное обновление данных ключевым аспектом веб-разработки.


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


Изучение паттернов приводит к уменьшению количества кода и повышению производительности веб-приложений, независимо от используемого фреймворка.

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

Читать дальше →
Total votes 14: ↑12 and ↓2+10
Comments8

JavaScript: управление содержимым веб-страницы с помощью жестов

Reading time19 min
Views8.3K


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


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


В данном туториале мы рассмотрим 5 примеров:


  • получение данных с видеокамеры и их отрисовка на холсте (canvas);
  • обнаружение и отслеживание кисти руки;
  • управление "курсором" с помощью указательного пальца;
  • определение жеста "щипок" (pinch);
  • нажатие кнопки с помощью щипка.

Все примеры будут реализованы на чистом JavaScript.


Источником вдохновения для меня послужила эта замечательная статья.


Для обнаружения и отслеживания руки и жестов будет использоваться MediaPipe. Для работы с зависимостями — Yarn.


Код примеров можно найти в этом репозитории.

Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments6

Что такое NFT на самом деле, сколько обмана может скрывать, и в каких сферах реально применим

Reading time5 min
Views120K

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

Единственная проблема заключается в том, что очень немногие знают, что такое NFT и как это работает на самом деле.

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

Публикация основана на эксклюзивном переводе статьи: «NFT Madness — What they are and what they are not. Why they're great, and why they suck» для моего telegram-канала Clawed Project

Давайте начнем.

Что такое NFT на самом деле?

Всем известна аналогия с предметами коллекционирования. К сожалению, эта аналогия в лучшем случае совершенно неадекватна, а в худшем — явно вредна.

NFT (Non Fungible Tokens, не взаимозаменяемый токен) как термин означает, что каждый цифровой токен в сети уникален. Каждый токен содержит небольшое количество данных, которые уникальны для данного токена. Вот и все. Это просто небольшие контейнеры данных, которые перемещаются по блокчейну между адресами.

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

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments1

Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular

Reading time6 min
Views11K

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

Мы справились с помощью хитрых директив, которые назвали контроллерами. Они полностью решили проблему вложенности и сократили вес библиотеки.

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

Посмотреть
Total votes 26: ↑26 and ↓0+26
Comments14

Упрощаем работу с Angular с помощью @taiga-ui/cdk: 5 наших лучших практик

Reading time5 min
Views8.4K

CDK — базовый пакет библиотеки компонентов Taiga UI. Он не имеет никакой привязки к визуальной составляющей библиотеки, а скорее служит набором полезных инструментов для упрощения создания Angular-приложений.

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

Заглянуть в мультитул
Total votes 18: ↑18 and ↓0+18
Comments5

Возможности Angular DI, о которых почти ничего не сказано в документации

Reading time6 min
Views37K

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

Читать далее
Total votes 31: ↑31 and ↓0+31
Comments10

Знакомство с Sass модулями

Reading time12 min
Views38K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Introducing Sass Modules» автора Miriam Suzanne.

Недавно в Sass появилась функциональность, которая вам знакома по другим языкам: модульная система. Это большой шаг вперед для @import, одной из наиболее часто используемых функций в Sass. Несмотря на то, что существующая директива @import позволяет вам подключать сторонние пакеты и разделять ваши стили на поддерживаемые элементы, у неё всё же есть несколько ограничений
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments0

Свои Custom Controls в Angular

Reading time6 min
Views33K

Пролог


Поговорим о реактивных формах в angular, узнаем за кастомные контролы, как их создавать, использовать и валидировать. Статья предполагает что вы уже знакомы с фреймворком angular, но хотите больше погрузиться в её специфику. Хорошее желание, начнем.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments10

$mol: 4 года спустя

Level of difficultyMedium
Reading time30 min
Views35K

nano


Здравствуйте, меня зовут Дмитрий Карловский и я… люблю плевать против ветра. Утираться и снова плевать. Хобби у меня такое. И всё, что я создаю, делаю я без оглядки на тенденции, стараясь решать проблемы системно, а не как привычно. Зачастую бывает, что основная сложность даже не в том, чтобы придумать решение, а в том, чтобы объяснить другим, что проблема вообще существует.


Знаю, я всех уже заколебал, но сегодня, хотелось быть рассказать про разработанный мной 4 года назад фреймворк, какой путь он прошёл, где он сейчас, и куда прокладывает новые пути. Пройдёмся мы и по конкурентам, и по крупным игрокам, и даже по мне самому. Так что никто не уйдёт не обиженным. Статья, как обычно, длинная. Мужайтесь.

Читать дальше →
Total votes 48: ↑35 and ↓13+22
Comments126

Современные стандарты идентификации: OAuth 2.0, OpenID Connect, WebAuthn

Reading time13 min
Views75K
Пускать или не пускать? Вот в чем вопрос…

Сейчас на многих сайтах мы видим возможность зарегистрироваться или войти с помощью соцсетей, а некоторые сайты предлагают использовать внешние ключи безопасности или отпечатки пальцев. Что это? Стандарты с хорошо проработанной безопасностью или проприетарные реализации? Можем ли мы доверять этим технологиям и использовать их для разработки сайтов и в повседневной жизни? Давайте разбираться. Итак, сейчас существуют несколько стандартов и технологий для идентификации пользователей OAuth 2.0,OpenID Connect, WebAuthn, SAML 2.0, Credential Management API и др. В статье я расскажу о трех наиболее перспективных протоколах OAuth 2.0, OpenID Connect и WebAuthn. И чтобы понять как их применять на практике, сделаем три лабораторные работы. В качестве платформ для идентификации пользователей будем использовать GitHub и Google, на которых у большинства есть аккаунты.

image
Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments21

Асинхронное программирование с async/await

Reading time9 min
Views27K
Доброго времени суток, друзья!

Сравнительно новыми дополнениями JavaScript являются асинхронные функции и ключевое слово await. Эти возможности в основном являются синтаксическим сахаром над обещаниями (промисами), облегчая написание и чтение асинхронного кода. Они делают асинхронный код похожим на синхронный. Данная статья поможет вам разобраться, что к чему.

Условия: базовая компьютерная грамотность, знание основ JS, понимание азов асинхронного кода и обещаний.
Цель: понять, как устроены обещания, и как они используются.
Читать дальше →
Total votes 15: ↑10 and ↓5+5
Comments2

Проекция контента в Angular или затерянная документация по ng-content

Reading time5 min
Views42K
При изучении Angular очень часто упускают или уделяют недостаточное внимание такому понятию, как проекция контента. Это очень мощный инструмент для создания гибких и переиспользуемых компонентов. Но в документации о нем упоминается лишь пару абзацев в разделе Lifecycle hooks. Попробуем исправить данное упущение.


Читать дальше →
Total votes 14: ↑14 and ↓0+14
Comments14

Yew — Rust&WebAssembly-фреймворк для фронтенда

Reading time14 min
Views17K
Yew — аналог React и Elm, написанный полностью на Rust и компилируемый в честный WebAssembly. В статье Денис Колодин, разработчик Yew, рассказывает о том, как можно создать фреймворк без сборщика мусора, эффективно обеспечить immutable, без необходимости копирования состояния благодаря правилам владения данными Rust, и какие есть особенности при трансляции Rust в WebAssembly.



Пост подготовлен по материалам доклада Дениса на конференции HolyJS 2018 Piter. Под катом — видео и текстовая расшифровка доклада.
Total votes 53: ↑50 and ↓3+47
Comments22

Подходы к управлению модулями в Angular (и не только)

Reading time8 min
Views18K

Понимание организации сущностей, с которыми работаешь — не то, что сразу получается у разработчика, пишущего свои первые проекты на Angular.


И одна из проблем, к которой можно прийти — неэффективное использование Angular модулей, в частности — излишне перегруженный app модуль: создали новую компоненту, забросили в него, сервис — тоже туда. И вроде всё здорово, всё работает. Однако со временем такой проект станет тяжело поддерживать и оптимизировать.


Благо, Angular предоставляет разработчикам возможность создавать свои модули, и ещё называет их feature модулями.



Читать дальше →
Total votes 25: ↑25 and ↓0+25
Comments16

Разбор задачи с собеседования Google: поиск соотношения

Reading time21 min
Views39K


Добро пожаловать в очередную из серии статей с разбором задачек, которые я задавал на собеседованиях в Google, прежде чем их запретили после утечки. С тех пор я оставил работу инженера-программиста в Google и перешёл на должность менеджера по разработке в Reddit, но у меня всё ещё осталось несколько замечательных тем. К настоящему моменту мы разобрали динамическое программирование, возведение матриц в степень и синонимичность запросов. На этот раз совершенно новый вопрос.
Читать дальше →
Total votes 47: ↑41 and ↓6+35
Comments73

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

Reading time3 min
Views73K


C момента своего появления в декабре 2017-го дипфейки, видео с почти идеальной заменой лица, созданные нейросетью, наводили на экспертов панику. Многие, например, тогда боялись, что теперь еще проще станет «порно-месть», когда бывший бойфренд с достаточно мощным ПК может смастерить любое грязное порно с подругой. А Натали Портман и Скарлетт Йоханссон, о которых порно с deepfake снимали особенно много, публично прокляли интернет.


Чтобы бороться с подступающей угрозой, Facebook и Microsoft недавно собрали коалицию для борьбы с дипфейками, объявив призовой фонд $10 млн тем разработчикам, которые придумают лучшие алгоритмы для их обнаружения. Это помимо DARPA, управления исследованиями Министерства обороны США, выделившего на эту цель $68 млн за последние два года.


Ну так вот, уже поздно. Первое deepfake-преступление уже состоялось.

Читать дальше →
Total votes 65: ↑63 and ↓2+61
Comments252

SVG в реальной жизни. Доклад Яндекса

Reading time7 min
Views16K
Привет, меня зовут Артём, я руководитель одной из групп разработки интерфейсов в Яндексе. Неделю назад на Я.Субботнике я рассказал, как мы использовали SVG для создания внутреннего календаря. Это расшифровка моего доклада, несколько историй из реализации виджета календаря: масштабирование, заливка паттерном, маски, символы и особенности формата.



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

Читать дальше →
Total votes 49: ↑46 and ↓3+43
Comments10

Quasar 1.0: новый полезный инструмент для Vue-разработчиков и не только для них

Reading time6 min
Views25K
Автор материала, перевод которого мы публикуем сегодня, занимается работой над фреймворком Quasar. Это — полнофункциональный расширяемый опенсорсный инструмент для разработки современных приложений различного назначения. Он построен на базе популярного фронтенд-фреймворка Vue.js и использует возможности Node.js, Webpack и Babel. Совсем недавно, в начале июля сего года, вышел первый стабильный релиз Quasar.

Читать дальше →
Total votes 31: ↑30 and ↓1+29
Comments18

Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

Reading time8 min
Views47K
С момента релиза CodyHouse Framework, пару месяцев назад, многие пользователи спрашивали нас, почему мы выбрали переменные CSS вместо переменных SASS, хотя мы используем SASS в этой среде. В этой статье я расскажу о преимуществах использования пользовательских свойств и о том, почему они стали решающими в нашем рабочем процессе.


Total votes 24: ↑24 and ↓0+24
Comments5

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity