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

Инженер

Send message

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

Level of difficultyEasy
Reading time2 min
Views511

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

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

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

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

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

Level of difficultyEasy
Reading time3 min
Views4K

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

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

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

Level of difficultyEasy
Reading time2 min
Views9.3K

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

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

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

Level of difficultyEasy
Reading time2 min
Views3.4K

Dgrm.net

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

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

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

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

Level of difficultyEasy
Reading time3 min
Views6.8K

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

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

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

Reading time3 min
Views8.4K

dgrm.net | GitHub

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

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

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

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

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

Reading time3 min
Views7.7K

dgrm.net | GitHub

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

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

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

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

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

Reading time4 min
Views14K

Demo | GitHub

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

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

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

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

Reading time4 min
Views3.9K

Demo | GitHub

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

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

Blazor WebAssembly: Drag and Drop в SVG

Reading time9 min
Views4.6K

Demo | GitHub

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

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

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

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

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

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

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

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

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

Reading time4 min
Views4.7K

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

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

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

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

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

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

Reading time4 min
Views4.5K

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

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

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

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

Reading time13 min
Views2.7K

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

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

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

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

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

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

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

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

Big O

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


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

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

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


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

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

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

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

Reading time5 min
Views4.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
Comments2

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

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

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

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


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

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

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

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

Reading time4 min
Views7.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
Comments0
1

Information

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