JavaScript *

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

Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).

Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:

Подключение скриптов:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/hashchange.js"></script>

Функция:

	$jQuery = jQuery.noConflict();
	$jQuery(window).hashchange(function(){
		var link = window.location.hash.replace("#", "");
		get_page_by_hash(link);
	});

При наличии большого количества статистических данных, например таких, как котировки валют (и прочие данные, связанные с финансовой тематикой), потребление чего-либо (воды и т.д.), вообще говоря, любых данных, которые так или иначе можно представить в виде пары «дата — значение», бывает удобно представить их в графическом виде. Так как данные могут быть собраны за достаточно большой период времени, имеет смысле представлять их в виде пары графиков: «мастер»-график, на котором будут отображены все точки, и график «детали», где будут отображены точки за требуемый период. В данной статье я постараюсь рассказать, как построить график подобного типа при помощи стандартных средств библиотек HighCharts и jQuery UI.

Приведенное ниже решение, в принципе, является велосипедом, т.к. с появлением нового продукта от разработчиков HighCharts, который получил название HighStock, необходимость в реализации подобным способом отпадает. Впрочем, HighStock пока еще в состоянии beta.

Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.

Как пользоваться

Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:

<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>

Допустим у нас есть форма:

<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>

Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:

$('#inputSome').valid8("Заполни это поле!");

После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:

<style>
.error input { background:pink; }
</style>

Валидация готова. Все.

Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.

Javascript-библиотека stream.js вводит «новую»¹ структуру числовых данных: поток (stream). Это контейнер, который похож на массив (array) и связный список (linked list), но содержит неограниченное количество элементов, реализованное методом отложенных вычислений.

var s = Stream.range( 10, 20 );  
s.print(); // prints the numbers from 10 to 20

Для аргумента Stream.range( low, high ) можно указать только начальную границу диапазона Stream.range( low ), тогда поток будет состоять из неограниченного количества натуральных чисел. По умолчанию Stream.range() начинается с 1.

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

Так вот интересным инструментом для наглядного представления событий и периодов на шкале времени является Simile TimeLine.

Далее я расскажу, что сподвигло меня использовать данный инструмент, и в чем я нахожу его использование крайне удобным. В моем описании будет немного про Астериск, колл-центры и, собственно, javascript-библиотеку Simile TimeLine.

В этой статье я хотел бы изложить собственный опыт построения наглядных и презентабельных графиков с помощью Highcharts на основе статистики ОС и дисковых массивов. Для многих современных ОС и дисковых массивов существуют механизмы, основанные на встроенном или дополнительном ПО, которые позволяют получать данные о работе подсистем ОС или массива (имеются в виду не трассировки, а статистические показатели, усредненные по заданному интервалу). Также можно собирать статистику счетчиков пакетов и ошибок на интерфейсах коммутаторов LAN и FC. Многие хотят визуализировать эти данные и использовать в отчетах или же самописной системе мониторинга.

В данной статье будет коротко описан еще один метод реализации «нулевой» задержки setTimeout(callback, 0).
Всем кому интересно — под кат.

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

Меня всегда немного бесило отсутствие в Javascript понятия класса как такового, а с наследованием вообще довольно туговато. Почитав на эту тему довольно много материалов и попробовав несколько «обходных» путей отсюда, в том числе и приведенную в комментариях немного урезанную версию библиотеки ajaxoop.js, не нашел ничего подходящего и привычного.

Однако была задача, потребовавшая реализации «привычного» наследования, дополнительным приятным побочным эффектом которой стало наличие возможности множественного наследования.

Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript'ом.

Что же, начнём?

Вместо предисловия.

Я всегда любил и буду любить компьютерные игры. Есть в них какая-то своя внутренняя магия, которая всегда привлекает и завораживает одновременно. За всю свою жизнь я переиграл в десятки игр, начиная с ветеранов Wolfenstein и Dune 2 и заканчивая современными блокбастерами. И теперь, добивая очередной хит и наблюдая за финальным роликом и титрами, в голове все чаще и чаще мелькает мысть «А что, если?..»

А ведь действительно, что если взять и написать собственную игру? Конечно же понятно, что ААА-тайтл сделать в одиночку не получится, и это годы работы и прочая и прочая, но ведь осилит дорогу идущий? Так уж получилось, что в Desktop-программироании я откровенно слаб, и вариантов для практикующего веб-разработчика не так уж много. Но за последние годы все кардинально изменилось, и теперь уже у браузера много общего с кофеваркой, а javascript может спокойно удовлетворять даже нужды военных ведомств, не то что мои собственные.

Вот как раз во время очередных раздумий и достаточно серьезной простуды мне попалась на глаза статья о Box2d в игрологе Ant.Karlov'а. Зачитавшись и замечтавшись я очень быстро нашел JS-порт этой библиотеки, и старая шальная идея сделать что-то маленькое и, главное — свое, начала донимать меня с новыми силами.

В общем, меньше патетики, больше дела. Надеюсь, вам будет интересно. Да простят меня суровые боги за использование Angry Birds в КПДВ ^_^

Каркас для кроссбраузерной разработки ExtJS сейчас очень популярен. Это поистине грандиозный (и монструозный) набор компонентов, классов, функций, хелперов и т. п., которые могут как облегчить жизнь разработчика, так и усложнить ее. Говоря вообще, ExtJS (до 4-й версии) не устанавливает никаких «правил игры» для конечного разработчика: формально нет никаких требований и рекомендаций по проектированию и написанию надежных приложений.
Удивительно, что до сих пор качество пособий и туториалов для новичков ExtJS, мягко говоря, оставляет желать лучшего. Как и стандартная справка по ExtJS API, впрочем [1].
Цель данной статьи — показать, как писать приложения на базе ExtJS так, чтобы человеку, который будет поддерживать ваш код, не хотелось рвать волосы, а вам просто не было стыдно. А если серьезно, то в данной статье я предложу простой и короткий набор правил проектирования и написания приложений применительно к данному фреймворку.

В этот прекрасный, ничем не отличающийся от остальных день (если не брать в расчёт тот факт, что холодная погода разбила в осколки все мечтания о хотя бы паре тёплых дней в этом году что бы поездить на велосипеде), у меня выдалось хорошее настроение. И хорошее оно даже несмотря на то, что я отчаялся ставить хакинтош на свой ноут, и пришёл к неутешительной мысли, что если я хочу хоть что-то написать под iOS, то мне надо копить на продукцию фирмы Эппл. Но собственно пост не об этом, а о небольшой жизни крохотной игрушки, которую мы с вами и попытаемся создать. Честно говоря, в добрые времена я не так уж и много играл в предка нашего творения (которого ещё и не существует), но определённые теплые воспоминания ещё остались в моём сердце. Итак… Танки! Танчики! БатлТанкс! БатлСити!
Писать будем на JavaScript с выводом на canvas.

Hello World,

Этот топик о том, каким образом можно предварительно зарефакторить код так, чтобы улучшить его минимизацию. Недавно я перед релизом минимизировал библиотеку Helios Kernel (о которой написал позавчера). Исходник библиотеки весит 28112 байт, в нём щедрые комментарии, и поэтому он с пол пинка ужимается YUI компрессором до 7083 байт. Не то что бы мне показалось, что 7 килобайт — слишком жирно. Но просто, посмотрев своими глазами на минимизированный код, я смог увидеть кучу мест, где можно было бы сэкономить ещё:



Посмотрим, что можно сделать с кодом, чтобы превратить 7083 байт в 4009 3937.

Hello World,

Всё начилось с простой идеи: мне захотелось, чтоб я мог в шапке скрипта написать что-то вроде

include( "path/to/someLibrary.js" );

а ниже использовать объекты, объявленные в скрипте someLibrary.js. Так появилась библиотека Helios Kernel.

Вы знаете, какое значение выведет этот код на JavaScript?

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    alert(foo); 
} 
bar();

На guthub'е появилась библиотека keymaster.js, с помощью которой можно добавить клавиатурные сокращения (shortkuts) на любую страничку. Конечно, для тех же целей предназначен модуль jQuery Hotkeys, но у keymaster.js есть свои преимущества: эта библиотека не имеет никаких зависимостей, она очень легковесная (всего 60 строчек кода) и лишена известных багов jQuery Hotkeys. В общем, определённо полезная вещь.

В ближайшее время для keymaster.js добавят ещё селектор INPUT / SELECT / TEXTAREA, это тоже будет полезное дополнение.

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

Сейчас же я решил выпустить код, выполняющий непосредственное вычисление этих значений, в виде отдельной библиотеки с открытым исходным кодом, и опубликовать ее вместе с примерами и документацией на GitHub: github.com/mourner/suncalc

Библиотека написана на основе формул из статьи про положение солнца на сайте Astronomy Answers, опубликована под лицензией BSD, занимает ~1.5 кб, соответствует строгим стандартам JSLint и работает не только в браузере, но и на различных серверных платформах, таких, как Node.js.

Как то поздним вечерком мне пришла мысль изучить Backbone.js и привязать его к уже написанному на jQuery сервису. Сервис уже серьёзно расширился и меня достало это нагромождение обработчиков кликов, запросов и логики. Поэтому, я как усердный школьник полез в официальную документацию. Но либо я тупой, либо мой английский меня подкачал, либо то и другое вместе, но я не черта не понял. Я прочитал уже второй раз, внимательно, и для особо одарённых мест использовал google translate. Прочитал также и пример ToDo List. Всё показалось понятно, ровно до той поры пока я не стал писать. После чего я взял всё что нашел по этой библиотеке, как на английском так и переводы. Прочтя кипу документации я решил, что сейчас вроде всё понял. Я напрягся, но… Не вышел каменный цветок у мастера Данилы, т.е. вышло, но это явно был не цветок, и камень как то неправильно пах. Тогда, как прилежный ученик, я решил написать «Hello, KittyWorld» с нуля. Попутно комментируя и сохраняя шаги в hg, у меня получилось введение в backbone.js framework для таких как я, особо одарённых.