Как стать автором
Обновить

Заметки с тегами на базе XML, HTML и Javascript

Время на прочтение 2 мин
Количество просмотров 2.5K
UPD (04.01.2009): Проект на Google Code — jsTagNotes.
UPD (03.06.2009): Проект был доработан и переехал на GitHub (wiki).

Хочу описать тот собственноручно изобретённый «велосипед», который я использую для сохранения заметок, ссылок на сайты и прочей достаточно важной информации небольшого объёма. В какой-то мере это альтернатива веб-сервисам типа del.icio.us и традиционным десктопным note-taking приложениям.

Скриншот

В конечном итоге цель этого поста — выяснить, стоит ли выкладывать мой проект в открытый доступ. Ну и принять замечания к реализации, я всё-таки далёк от сферы веб-разработки.

Описание работы


Заметки хранятся в XML-файле. Добавляются и редактируются заметки руками. Нетрудно изобрести для этого утилиту с графическим интерфейсом, было бы желание. Меня же пока вполне устраивает редактирование XML.

После редактирования заметки или добавления новой я запускаю самописный скрипт на Python, который с использованием библиотеки lxml преобразует XML в одну HTML-страницу. Для упрощения кода я использовал шаблонизатор Mako.

UPD (03.01.2009): Во все современные браузеры встроена поддержка XSLT-преобразования, так что я по совету хабрачеловека tenshi написал и XSLT stylesheet. Теперь XML-файл можно открывать сразу в браузере.

Из системы можно было бы исключить XML, Python и XSLT, реализуя редактирование заметок прямо на странице с использованием JavaScript. Способы для сохранения изменений в DOM известны. Стоит взглянуть, скажем, на Tiddly Wiki. Однако объём необходимого для редактирования и сохранения заметок кода на JavaScript меня удручает.

Можно ограничиться полумерами, исключив только Python и XSLT и реализовав преобразование из XML (или что там будет удобнее и эффективнее использовать) в HTML на JavaScript. Но польза от этого, я думаю, не оправдывает увеличения времени задержки при открытии страницы.

Для навигации по заметкам на странице используются теги. Фильтр по тегам я как мог реализовал на JavaScript, причём сделал возможным фильтр по нескольких тегам. В облаке тегов можно просматривать как наиболее популярные теги, так и все сразу. Всё это не без помощи JavaScript-библиотеки, в качестве которой я выбрал jQuery. Библиотеку я таскаю с собой, а не подключаю с официального сайта, чтобы просматривать заметки можно было бы и в отсутствии подключения к Интернету.

Самый значительный недостаток моей системы — производительность. Для построения облака тегов при открытии страницы требуется больше секунды. Предложения об оптимизации JavaScript принимаются в этой теме.

Возможно, что рано или поздно количество заметок вырастет так, что придётся прикручивать и разбивку на страницы. Видимо, и это тоже придётся реализовывать на JavaScript.

UPD (03.01.2009): Привёл текст в соответствие с текущим положением вещей.
Теги:
Хабы:
+10
Комментарии 29
Комментарии Комментарии 29

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн