Визуализация графиков на JavaScript

Сегодня решил немножко «пробить» вопрос визуализации на JavaScript разного рода графиков. Самые лучшие графики получаются средствами HTML5 и её расширением SVG. Также нашёл отличный пост про 20 библиотек визуализации. Вот ссылка на тот пост:

http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/

А также вот сам несколько демок разных библиотек. И всё это без всякого Flash, работает в Firefox! 🙂

http://www.highcharts.com/demo/
http://www.highcharts.com/stock/demo/

И ещё классную библиотечку нашёл сейчас — http://raphaeljs.com/ — там даже есть 3D шутер, типа Quake 🙂

Перед началом использования какой либо библиотеки обратите внимание на лицензии — тема новая, инструментов мало, и сильно коммерцианализирована. Многие разработчики дают free версии только как Demo. Простой пример такой библиотеки — http://wijmo.com/demos/

Несколько полезных jQuery модулей от Odyniec

Сегодня посмотрел страничку одного разработчика по ник — имени Odyniec. Очень понравились его разработки. Спешу поделиться с вами 🙂

  • imgAreaSelect — jQuery плугин для кропинга (cropping images) картинок (точнее, выделение области — кропинг делайте сами ;-)) — (пример)
  • imgZoom — Красивое листание картинок с анимацией, ротацией и приближением из далека (пример)
  • selectListмультивыборочный select лист, показывающий выбранные опции отдельно с возможностью легкого их удаления (пример)

Также, автор написал несколько полезных статей по CSS (как создать «деревья», «табы»)

Также, автор написал несколько модулей на perl для Dancer (его сайт также работает под Dancer): Dancer::Plugin::DebugToolbar, Dancer::Plugin::DirectoryView

Массивы JavaScript, Internet Explorer и запятые

Заметил такую особенность — если описывать массив как

var array = [
elem1,
elem2,
elem3,
];

То в Firefox и Google Chrome — он будет иметь 3 элемента, а в Internet Explorer (тестировалось в 8-ой версии) — 4 элемента, причем 4-ый будет null.

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

Оказывается, такой стиль имеет скрытую угрозу — ошибки, когда «прогулка»  по массиву дает null элемент, тогда как такой программист предполагал, что будет три элемента и все — не null. Вообщем, программеры JavaScript — остерегайтесь 😉

Читать далее Массивы JavaScript, Internet Explorer и запятые

Опять Cookies, только теперь Google Chrome

Не успел написать программу, как опять наткнулся на неприятность, точнее, на баг. Смысл его в том, что Google Chrome некорректно ставит в JavaScript свойство document.cookie, если кука пришла от сайта с quoted path, то есть, если пришла такая:

Set-Cookie: session=session_ID; path="/"

Дело в том, что путь, заключенный в кавычки — правило, определенное самим RFC 2109 (пункт 4.1). Firefox это обрабатывает корректно, а Google Chrome — глючит. То есть, чтобы в JavaScript от Chrome считывать куки, нужно их выставлять через path без кавычек. Но в любом случае, это некорректно, поэтому отписал об этом на их форум. Посмотрим, как они исправят это 😉

Еще немного о Roboform и LastPass

Написал мне недавно суппорт, что они таки устранили баг, о котором я так долго писал! Надо же… Предложили мне протестировать новую версию (7.1.2). Но я так долго ждал (реально баг есть более года, но последний штурм на саппорт я осуществлял в августе 2010), что это мне надоело, терпеть, пока Firefox тормозит и зависает на сайтах с JavaScript, что удалил я этот косячный плагин, тем более, что 7-ая версия (в которой и устранен этот баг) для пользователей 6-ой версии снова стала платной (тут кстати, если помыслить, становится понятно, почему они так тянули с исправлением и исправили во вновь ставшей платной версии…). Теперь я перешел на LastPass Читать далее Еще немного о Roboform и LastPass

Copy Clipboard в Firefox методами JavaScript

Если вы программер под JavaScript, вы навярняка сталкивались с такой проблемой — как реализовать копирование в буфер обмена средствами JavaScript в Firefox. С Internet Explorer все понятно — Microsoft «постаралась», чтобы все, кому не лень, могли читать и писать в буфер обмена средствами JavaScript (по правильному, это конечно же, не должен делать любой сайт — мало ли что у вас в буфере обмена на тот момент, например пароль…). А вот Firefox с его сильной защитой JavaScript, не позволяет любому сайту это делать. Как быть?

Читать далее Copy Clipboard в Firefox методами JavaScript

Javascript — Middle Button Click

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

Читать далее Javascript — Middle Button Click

Как избавиться от сообщения «Unresponsive script» в Firefox

Если вы часто работаете с сайтами, где используются интенсивные JavaScript вычисления, то вы навярняка сталкивались с таким сообщением «Unresponsive script». Оно выскакивает в Firefox, когда JavaScript использует под себя долгое время все процессорное время вашего компьютера. Firefox это замечает, скрипт приостанавливает, а вас спрашивает — продолжать выполнение скрипта или нет. Это, с одной стороны, хорошая фича Файрфокса, с другой — весьма надоедливая и неприятная, когда ваша работа требует каждодневного использования скриптов с такими вычислениями (например, массивные обработки крупной статистики).

Но это сообщение можно либо отключить совсем, либо увеличить лимит срабатывания. Для этого, наберите в строке броузера «about:config«, если будет предупреждение об осторожности смены настроек, согласитесь с ним. Там в строке фильтра неберите «dom.max_», Fire Fox отфильтрует вам настройки, в том числе такую — dom.max_script_run_time. Кликнете по ней и установите значение либо в ноль — отключить предупреждение, либо более 10 — это количество секунд, сколько максимум может использовать скрипт под себя процессорного времени — в таком случае, предупреждение будет появляться реже и только в крайних случаях.

Каков % пользователей с JavaScript?

На своих нескольких проектах уже замечал неоднократно такую статистику — по моим данным, только 70-73% рядовых пользователей интернета имеют включеную поддержку JavaScript. Сразу хочу заметить, что не Java, а JavaScript! Делаю эту поправку потому, что некоторые ошибочно думают, смотря в Google Analytics или в данные некоторых других счетчиков в  колонку Java (там, как правило, цифры за 90%). А ведь счетчики сами работают на JavaScript, и визит посетителя с отключенным JavaScript они просто не зафиксируют!

Как я посчитал эти цифры? Возьмем, к примеру логи Apache сервера. Они показывают сколько реально было загрузок какой либо страницы. Берем данные о загрузке страницы из этих логов -V1, затем смотрим, сколько нам посчитал счетчик, например Google Analytics — V2 (я обсчитывал статистику даже своими JavaScript счетчиками на основе Ajax). V1 — сколько всего смотрело людей, а V2 — у скольки включен скрипт. V2 всегда будет меньше V1, и если посчитать по формуле V2/V1*100%, то получится 70-73%. Проверьте сами! 🙂

Конечно, могут возразить — боты и все такое… Но я замерял на разных проектах — на известных и нет, и из разных источников. Цифры всегда были примерно одинаковые. Не верю, что везде процент ботов одинаковый!

Так что помните об этом, когда создаете страницу, работающую только на чистом JavaScript коде!