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

На странице есть набор элементов типа А, которые можно по одному или группой перетащить в элемент типа Б. Пользователь должен видеть, перетаскивает он один элемент или несколько. Перетаскивать один элемент просто, достаточно присвоить свойству draggable значение true, наверняка, все это делали.

Это небольшой учебный пример редактора карты памяти. За счёт очень подробных комментариев и простого кода, понять его не составит проблем. Статья предназначена для знающих и изучающих Javascript.

Я опишу особенности создания редактора карты памяти, который использует базу данных браузера. Причём, это будет не LocalStorage, который не может превышать 5 мегабайт. Объём данных сможет превысить 100-200 мегабайт, так как используется IndexedDB или webSQL, смотря что доступно в конкретном браузере.

Исходники выложены в открытый доступ на Github.

Мы уложимся в 520 строк кода, при этом в нашей карте можно будет перетаскивать узлы между собой, удалять, переименовывать и создавать новые. А также можно будет назначать одну из 120 иконок через контекстное меню.

Секрет минимализма в том, что мы будем использовать проверенные в бою плагины:

1. Ydn.db — хранение информации в базе данных браузера с автоматическим выбором лучшего метода и единым API
2. jQuery context menu — контекстное меню, которое можно наполнять динамически при помощи Javascript
3. jsPlumb — расширение позволяющее рисовать линии между HTML элементами
4. jQuery UI — Drag&drop — перетаскивание элементов между собой

PS: Также мы научимся создавать «синглтон», облегчать себе асинхронное программирование при помощи jQuery и встроенного объекта $.Deferred(), а также при помощи плагина LiveReload, сохраним краску на клавише F5 при изменении свойств CSS и кода в HTML и Javascript.

Чуть больше двух месяцев тому назад (11 апреля 2013 г.) в новости «Роскомнадзор занялся мультипликационной порнографией» на сайте «Известий» можно было прочесть, что москвич Владимир Голованов, действуя под влиянием убеждения в том, что «стиль японских порномультфильмов хентай изначально предполагает персонажей неясного возраста с кукольными, детскими лицами» (это цитата), подал в Роскомнадзор жалобу с просьбою признать эти анимационные произведения относящимися к разряду порнографии с участием несовершеннолетних. Тогда же и там же можно было прочесть, что эксперты Лиги безопасного Интернета (ЛБИ) считают, что хентай — это и есть детское порно. («Если Роскомнадзор попросит провести экспертизу, то наш экспертный центр подготовит заключение. Мы, скорее всего, будем говорить, что это детская порнография», — объявил директор ЛБИ Денис Давыдов.)

Так и вышло. Вчера (13 июня) в новости «Роскомнадзор признал мультфильмы детской порнографией» на сайте «Известий» стало можно прочесть, что «у экспертов не вызвало сомнения, что анимированные герои представлены в образе несовершеннолетних и при этом участвуют в порнографических сценах». Ведомство попросило москвича Голованова подать повторную жалобу: Роскомнадзор объявил, что после этого анимационные видеозаписи, признанные детской порнографией, будут внесены в реестр запрещённых ресурсов. Упоминается также намерение Антона Коробкова-Землянского (члена Общественной палаты) внести изменения в закон «О защите детей от информации, причиняющей вред их здоровью и развитию», в понятие порнографии добавив анимацию (в том числе — трёхмерную).

Это изменение в правоприменительной практике можно и нужно считать качественным изменением. Не видеозапись факта полового сношения с реальным ребёнком и даже не какое-либо игровое кино с участием живых актёров, а всего лишь графическое художественное изображение, причём основанное не на реальных событиях (допустим, полученное ротоскопированием фотографий или зарисовкою детей-натурщиков), а являющееся плодом свободной фантазии изобразителей, всё же было признано аналогичным детскому порно. Юридически аналогичным.

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

Существует множество причин, из-за которых программист может начать работать над сторонним проектом. Это хороший способ держать руку на пульсе современных технологий, которые сейчас на пике популярности в отрасли. Это может помочь вам отточить свои навыки программирования. И это весело! Ну или должно быть весело.
Но то, что мы привыкли называть “жизнью” может не только усложнить вам завершение проекта, но даже не дать начать работать над ним. Мы часто тратим много времени чтобы придерживаться напряженного графика, и может показаться невозможным использовать хотя бы минутку для личного проекта.
Я начал работать на моим первым сайд-проектом два года назад, и я не эксперт в этом вопросе, чтобы это не значило. Спустя два года, я сделал несколько наблюдений о начале работы над сторонними проектами, которые я начал, почему я смог некоторые закончить, а некоторые нет. То, что я попытаюсь описать не претендует на новаторство, ни на пошаговое руководство, а является исключительно лишь наблюдениями, которые могут оказаться полезными.

В определенный момент мне стало некомфортно использовать стандартный контрол WebBrowser, предлагаемый Visual Studio.
Причин было несколько:
1. Использовался IE-движок, что само по себе уже сильный аргумент.
2. Кривая работа с JS.
3. Отсутствие масштабирования.
4. Если запустить на машине, где стоит IE6, то все его «достоинства» переносятся на приложение.

В итоге был начат поиск альтернативных решений.
Было рассмотрено 2 SDK. xulrunner(Mozilla) и Awesomium(Chrome)

Подключение обоих происходит примерно одинаково, но на всякий случай опишу оба.

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

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

В статье я не открою никакой тайны, и серебряной пули у меня нет. Также я не претендую на глубокое и качественное знание процесса разработки, но опишу один из простейших подходов, который применяю сам. Здесь будут описаны простые и элементарные вещи, известные всякому опытному руководителю проектов. Статья предназначена прежде всего для начинающих РП, тимлидов, и тех, кто совмещает эти должности. Впрочем, она полезна в любой сложной деятельности.

Велосипед

Итак, Вася долго трудился рядовым программистом, ведущим программистом и наконец стал Руководителем. У него есть команда отчаянных головорезов разработчиков в количестве двух единиц. Безусловно талантливых и знающих свое дело специалистов.

Вася получает первый заказ — надо сделать … велосипед.

Введение

МегаФон — динамичная технологическая компания, работа которой не ограничивается исключительно предоставлением услуг связи. Например, среди наших активов есть большое количество интернет-сайтов, на которых клиенты получают различную информацию и услуги. В рамках проекта по совершенствованию и развитию наших веб-проектов мы, в том числе, создаём продукты, которые могут быть полезны и другим разработчикам. Сегодня мы хотели бы представить первый из них — шаблонизатор Histone, который является opensource-проектом, распространяемым по лицензии Apache Software License 2.0. Но обо всём по порядку.

Что такое Histone?

Многие из вас при создании веб-приложений используют различные шаблонные движки. Ситуация, когда из данных, представленных в определенном формате, вам необходимо сгенерировать некий HTML-код при помощи шаблона, задающего правила преобразования, встречается повсеместно. Несколько лет назад шаблонизаторы активно использовались для генерации HTML-кода на сервере (Smarty, FreeMarker, Velocity), сегодня все чаще и чаще возникает необходимость производить генерацию HTML-кода непосредственно в браузере. В качестве примера таких шаблонизаторов можно привести: TrimPath templates, Mustache, Google Closure Templates и т. д.

В 2013 году планируется улучшение жизни отечественной ИТ-отрасли. Принят Закон N 5091-VI «О внесении изменений в раздел XX «Переходные положения» Налогового кодекса Украины относительно особенностей налогообложения субъектов индустрии программной продукции».

Закон предусматривает освобождение от НДС, и уменьшение ставки налога на прибыль до 5% для субъектов индустрии программной продукции. Правда не для всех*.

Что это дает украинским программистам? Полный текст Закона, а также развернутый комментарий к нему вы можете прочитать в системе ipLex.Профи . А здесь приводим небольшой оперативный анализ последствий для различных слоев программирующего населения.

Задача

При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.

Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).