Как стать автором
Обновить
99
1
Алексей Бойко @Alex_BBB

Инженер

Отправить сообщение

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

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров514

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

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

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

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

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

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4.1K

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

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии5

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

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров9.3K

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

Читать далее
Всего голосов 13: ↑9 и ↓4+5
Комментарии13

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

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.4K

Dgrm.net

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

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

Читать далее
Всего голосов 15: ↑13 и ↓2+11
Комментарии24

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

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров6.8K

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

Читать далее
Всего голосов 14: ↑13 и ↓1+12
Комментарии2

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

Время на прочтение3 мин
Количество просмотров8.4K

dgrm.net | GitHub

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

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

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

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии7

UI редактора блок-схем

Время на прочтение1 мин
Количество просмотров13K

Придумывать интерфейс интересно. Похоже на головоломку. Вот что получается для Dgrm.net.

Читать далее
Всего голосов 64: ↑64 и ↓0+64
Комментарии50

JavaScript редактор текста для SVG

Время на прочтение3 мин
Количество просмотров4.8K

Demo | GitHub

Статья про редактор текста как на рисунке. Исходный код прилагается.

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии5

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

Время на прочтение3 мин
Количество просмотров7.7K

dgrm.net | GitHub

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

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

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

Читать далее
Всего голосов 36: ↑36 и ↓0+36
Комментарии20

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

Время на прочтение4 мин
Количество просмотров14K

Demo | GitHub

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

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

Читать далее
Всего голосов 41: ↑39 и ↓2+37
Комментарии17

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

Время на прочтение4 мин
Количество просмотров3.9K

Demo | GitHub

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии5

Blazor WebAssembly: Drag and Drop в SVG

Время на прочтение9 мин
Количество просмотров4.6K

Demo | GitHub

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

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

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

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

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

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

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии2

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

Время на прочтение4 мин
Количество просмотров4.7K

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

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

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

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

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии1

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

Время на прочтение4 мин
Количество просмотров4.5K

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

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

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии5

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

Время на прочтение13 мин
Количество просмотров2.7K

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

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

Читать далее
Всего голосов 8: ↑7 и ↓1+6
Комментарии2

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

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

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

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

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

Big O

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


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

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

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


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

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

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

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

Время на прочтение5 мин
Количество просмотров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.
Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии2

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

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

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

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


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

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

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

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

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

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

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

Информация

В рейтинге
1 269-й
Откуда
Москва и Московская обл., Россия
Зарегистрирован
Активность