Pull to refresh
99
2
Алексей Бойко @Alex_BBB

Инженер

Send message

UI. Нюансы реализации маркера в редакторе блок-схем DGRM.net

Level of difficulty Easy
Reading time 2 min
Views 488

Редактор схем DGRM.net

Задача маркера - комментирование скриншотов.

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

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

WebRTC. Как установить p2p соединение между браузерами

Level of difficulty Easy
Reading time 3 min
Views 4K

WebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные. Установить WebRTC соединение можно разными способами. В статье описано как WebRTC соединение устанавливается между пользователями редактора схем dgrm.net.

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

JavaScript. WebRTC. Соединение браузеров напрямую без сервера, peer-to-peer

Level of difficulty Easy
Reading time 2 min
Views 9.3K

WebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные.

Читать далее
Total votes 13: ↑9 and ↓4 +5
Comments 13

UI. Интерфейс не должен отвлекать

Level of difficulty Easy
Reading time 2 min
Views 3.4K

Dgrm.net

Стараюсь сделать хороший редактор блок-схем. Вот что получается.

Человек может одновременно держать в памяти 7 элементов: 7 цифр, 7 слов. Если в меню 7 пунктов - это удобно. Если больше - нужно разбивать на блоки. Так сделано во всех программах.

Читать далее
Total votes 15: ↑13 and ↓2 +11
Comments 24

JavaScript. Работа с буфером, Ctrl+C Ctrl+V

Level of difficulty Easy
Reading time 3 min
Views 6.7K

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

Читать далее
Total votes 14: ↑13 and ↓1 +12
Comments 2

JavaScript: Zoom как в картах для SVG/HTML

Reading time 3 min
Views 8.4K

dgrm.net | GitHub

Как сделан zoom в редакторе блок-схем dgrm.net.
Zoom-ить можно:

колесиком мышки,
touchpad-ом
и двумя пальцами на телефонах и планшетах.

Готовая функция zoom-а SVG для ваших проектов прилагается. Для HTML можно переделать.

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

JavaScript редактор диаграмм, который открывает диаграммы из PNG картинок (open source)

Reading time 3 min
Views 7.7K

dgrm.net | GitHub

dgrm.net - это редактор диаграмм, с прицелом на трансформацию в карту знаний.

Отличительные особенности:
- аскетичность,
- работает на телефонах (одно из немногих web-решений),
- открытый исходный код.

В процессе разработки появляются интересные моменты. Статья про один из таких моментов: чтение данных из PNG.
Исходный код для использования в своих проектах прилагается.

Читать далее
Total votes 36: ↑36 and ↓0 +36
Comments 20

JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap (библиотека с открытым исходным кодом)

Reading time 4 min
Views 14K

Demo | GitHub

Эксперименты с созданием редактора диаграмм на Blazor Webassembly (Blazor WebAssembly: Drag and Drop в SVG, Blazor WebAssembly: соединительные линии в SVG) показали что технология не годится для интенсивных манипуляций с DOM.

То что будут проседания было известно заранее: WebAssembly не имеет доступа к DOM, любые изменения только через вызовы JavaScript. Задержки оказались такими большими, что перетаскивание на мобильном тормозило уже после добавления третьей фигуры.

Читать далее
Total votes 41: ↑39 and ↓2 +37
Comments 17

Blazor WebAssembly: соединительные линии в SVG

Reading time 4 min
Views 3.9K

Demo | GitHub

В статье описан способ реализации соединительных линий между SVG объектами. Соединительные линии автоматически перестраиваются при изменении положения объектов. Попутно рассмотрен метод OnParametersSet.

Читать далее
Total votes 10: ↑10 and ↓0 +10
Comments 5

Blazor WebAssembly: Drag and Drop в SVG

Reading time 9 min
Views 4.6K

Demo | GitHub

В статье описан способ реализации перетаскивания SVG объектов.

Попутно рассмотрены следующие моменты разработки на Blazor:

Шаблонные компоненты. Содержимое шаблонного компонента можно задавать в родительском компоненте.

Передача событий от родительского компонента дочернему (Parent -> Child);

Проблема перезаписи входных параметров компонента внутри самого компонента (Overwritten parameters problem);

Двухсторонний биндинг между родителем и дочерним компонентом. Т.е. входной параметр дочернего компонента может менять и родительский компонент и дочерний;

Как сделать stopPropagation на Blazor.

Читать далее
Total votes 10: ↑10 and ↓0 +10
Comments 2

Blazor WebAssembly: динамическое создание компонентов по JSON описанию

Reading time 4 min
Views 4.7K

В заметке описан способ динамического добавления на страницу компонентов по JSON-описанию с помощью DynamicComponent из ASP.NET Core 6.0 (в настоящее время в статусе Preview).

Динамическое создание компонентов пригодится например при реализации конструктора форм:

• Форма описывается JSON-ом;

• Элементы (или контролы) формы не ограничены предустановленным набором. Контролы можно добавлять, в том числе подгружать из других dll-библиотек.

Читать далее
Total votes 4: ↑4 and ↓0 +4
Comments 1

Cоздание переиспользуемых Linq фильтров (построителей предикатов для Where), которые можно применять для разных типов

Reading time 4 min
Views 4.4K

Способ создания переиспользуемых Linq фильтров (построителе предикатов для условия Where), которые можно применять для разных типов объектов. Поля объектов для фильтрации указываются с помощью MemberExpression.

Способ подходит для Entity Framework, включая Async операции.

Читать далее
Total votes 1: ↑1 and ↓0 +1
Comments 5

“Связность” кода на примере генератора ASCII графиков, утилита для операций с интервалами и demo на Blazor WebAssembly

Reading time 13 min
Views 2.7K

Работа с периодами может быть запутанной. Представьте, что у вас бухгалтерское приложение. И вам нужно получить периоды, когда сотрудник работал по графику “2 через 2” до индексации зарплаты. При этом нужно учитывать отпуска, смены графиков работы, увольнения/восстановления, переходы в другие отделы и прочие кадровые мероприятия. Эта информация хранится в виде приказов, у которых есть “Дата начала действия” и “Дата конца”, т.е. у вас есть периоды времени, с которыми нужно производить операции.

Например найти пересечение всех интервалов:

Читать далее
Total votes 8: ↑7 and ↓1 +6
Comments 2

Про книгу Дэвида Огилви “Огилви о рекламе”

Reading time 4 min
Views 12K
На фото Дэвид Огилви. Хабр не позволяет следовать одной из его рекомендаций: размещать фото над заголовком.
На фото Дэвид Огилви. Хабр не позволяет следовать одной из его рекомендаций: размещать фото над заголовком.

Что делает эту книгу особенной? “На самом деле никакой магии, просто она про Америку 60-х”, говорит арт-директор новостного портала.

Дэвид Огилви — основатель одного из самых успешных рекламных агентств. Скорее всего вы видели их ролики. Например про шоколад, детское питание или китайский автопром с Василием Вакулеко (Баста). 40 лет назад Огилви написал книгу “Огилви о рекламе”. Материал для книги еще старше — из 50/60-х годов. Не смотря на солидный возраст, книга до сих пор издается. Будет ли “Огилви о рекламе” полезна современному ИТ-предпринимателю?

Кстати, реклама китайского внедорожника сделана не по правилам: Огилви активно против использования звезд в рекламе.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Comments 1

Big O

Reading time 5 min
Views 213K
Примечание. Сокращенный перевод, скорее пересказ своими словами.
UPD: как отметили в комментариях, примеры не идеальны. Автор не ищет лучшее решение задачи, его цель объяснить сложность алгоритмов «на пальцах».


Big O нотация нужна для описания сложности алгоритмов. Для этого используется понятие времени. Тема для многих пугающая, программисты избегающие разговоров о «времени порядка N» обычное дело.

Если вы способны оценить код в терминах Big O, скорее всего вас считают «умным парнем». И скорее всего вы пройдете ваше следующее собеседование. Вас не остановит вопрос можно ли уменьшить сложность какого-нибудь куска кода до n log n против n^2.

Структуры данных


Выбор структуры данных зависит от конкретной задачи: от вида данных и алгоритма их обработки. Разнообразные структуры данных (в .NET или Java или Elixir) создавались под определенные типы алгоритмов.

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

Здесь мы будем использовать только массивы чисел (прямо как на собеседовании). Примеры на JavaScript.
Читать дальше →
Total votes 39: ↑30 and ↓9 +21
Comments 30

Office 365. Пример работы с Microsoft Graph API в Angular5 с помощью ADAL JS. ADAL JS vs MSAL JS

Reading time 5 min
Views 4.5K
В прошлый раз мы обсудили механизм авторизации для работы с Office 365 API (в частности с Microsoft Graph API):

  • при каждом вызове API нужно передать token. Token имеет ограниченный срок жизни
  • token выдает сервис Microsoft, так называемый “Azure AD Authorization Endpoint”
  • получить token можно без серверной части используя только JavaScript в браузере. Для этого Microsoft сделал JavaScript библиотеку ADAL JS, которая упрощает коммуникацию с “Azure AD Authorization Endpoint” для получения token.

Тогда мы сделали простую статичную HTML-страницу, на которой наш vanilla JavaScript делал запрос к Microsoft Graph API и отображал список писем из Office 365. В данной заметке разовьем пример и сделаем тоже самое на Angular5.

angular5 office 365 adal js

Также поговорим о различиях рабочих (Work or school account) и персональных (Personal Account) аккаунтов при использовании Office 365 API.

Пример на GitHub.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 2

Принцип работы потокового шифра с примерами на C#. От Одноразового блокнота до потокового шифра на основе хеш-ф-и и CTR

Reading time 7 min
Views 20K
По ходу статьи, развивая идею «Одноразового блокнота», «изобретем» потоковый шифр на основе хеш-функции. Узнаем, что такое Counter Mode Encryption CTR.

Знание терминов «хеш-функция» и «Одноразовый блокнот» для чтения не обязательно.

Одноразовый блокнот


В «Одноразовом блокноте» шифротекст получается путем наложения ключа на открытый текст. Наложение можно сделать, например, с помощью побитового XOR: каждый бит открытого текста XOR-ится с соответствующим (таким же по порядку) битом ключа.

Каждый бит открытого текста XOR-ится с таким же по порядку битом ключа

Рис 1. Каждый бит открытого текста XOR-ится с таким же по порядку битом ключа
Читать дальше →
Total votes 14: ↑14 and ↓0 +14
Comments 3

Office 365. Разработка web-приложения. Авторизация ADAL JS, новый Microsoft Graph API

Reading time 4 min
Views 7.7K
office-365-app-launcher В данной статье сделаем введение в разработку web-приложений для Office 365:
— регистрация приложения в корпоративном Azure
— авторизация пользователей
— получение данных из сервисов Office 365

Основная цель: научиться делать приложения Office 365 которые можно продавать в магазине Microsoft AppSource Marketplace.

Для примера сделаем минималистичное Single Page web-приложение на JavaScript, отображающее список писем. Без Angular, TypeScript, без сборщиков, без командных строк и без серверного кода.
Читать дальше →
Total votes 14: ↑14 and ↓0 +14
Comments 0
1

Information

Rating
1,094-th
Location
Москва и Московская обл., Россия
Registered
Activity