JavaScript *

Без малого год назад, я уже писал (http://habrahabr.ru/blogs/javascript/50544/) о самом коротком способе определение браузера Internet Explorer, но вот некто Aleko нашел еще более короткий вариант:

-[1,]

Всего 5 байт. Пример использования:
if(-[1,]){
alert("Not IE!");
}

Продолжаем тему визуализации данных в интернете.

Предыдущие топики:

• Изумительные диаграммы с новым Chart контролом
• Визуализация направленных графов в вебе
• Список Javascript библиотек для рисования графиков и диаграмм — habrahabr.ru/blogs/javascript/79960 (публикация в блоге — msug.vn.ua/blogs/akrakovetsky/archive/2010/01/04/javascript-charting-libraries.aspx)

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор JavaScript библиотек для рисования графов, диаграмм и прочей красоты.

Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:



Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

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

Обратите внимание на вот эту иллюстрацию:



Красиво, правда?

Вышел первый стабильный релиз свободного графического Ajax-фреймворка Qooxdoo (произносится ['ku:ksdu:]), использующего JavaScript и предоставляющего почти всё необходимое для создания web-приложений с десктопоподобным интерфейсом. По словам разработчиков, web-приложения при помощи Qooxdoo можно создавать даже без знания HTML, CSS и DOM модели.

Фреймворк запускается в большинстве браузеров (Internet Explorer, Firefox, Safari, Opera и Chrome). Чтобы получить представление о работе фреймворка можно взглянуть на тестовую среду и демо-приложения, демонстрирующие в интерактивном режиме возможности qooxdoo, такие как многочисленные виджеты, Drag&Drop интерфейс, диспетчеры компоновки, визуальные темы, поддержку организации работы многоязычного интерфейса. Для разработчиков особый интерес представляет поставляемый в составе пакета инструментарий, полностью охватывающий процесс разработки, включая валидацию кода, компиляцию JavaScript, юнит-тесты, автоматическое тестирование GUI и средства отладки аналогичные Firebug.

Многие задают мне один и тот же вопрос:
«Как дебажить этот $%*!%$! JavaScript?».

Так вот, во-первых JavaScript — не $%*!%$! А как я его дебажу — сейчас расскажу.

(Примечание: наверное эта статья больше для новичков. Так что не судите строго)

Есть случайное такое хобби — программирование на JavaScript.

Недавно возник у меня глобальный вопрос:
Как часто JS программисты задумываются над [function statement]?

Вот такие необычные часы сделал с помощью JavaScript и MooTools какой-то француз со смешным ником TOKI WOKI.

Исходый код часов

Browser persistence — техника, позволяющая хранить в браузере довольно большие объемы данных, которые в отличие от cookie не отсылаются на сервер при каждом запросе.

Все уже написано до меня, но на хабре никаких более-менее подробных упоминаний не нашел, поэтому написал краткий обзор — как это работает и собрал ссылки для более подробного изучения.

Некоторое время назад у меня дошли руки до темы, которая давно уже меня нервирует интересует. Эта тема — наследование в JavaScript.

В сети есть много статей по данному вопросу, но мне не удалось найти обобщающего анализа, который бы удовлетворил меня своей полнотой и логикой. Почему хотелось найти именно обобщающий анализ? Дело в том, что особая, я бы сказал, уникальная сложность объектно ориентированного программирования в JS состоит в шокирующем (во всяком случае, меня) разнообразии его возможных реализаций. После довольно продолжительных неудачных поисков я решил попробовать разобраться в этом вопросе самостоятельно.

Хочу сразу сказать, что я не претендую на глубокое понимание ООП в JavaScript, и даже не претендую на глубокое понимание ООП вообще. Я буду рад, если моя попытка анализа окажется кому-нибудь полезной, но основная цель публикации, в некотором смысле, противоположная — мне бы хотелось самому воспользоваться замечаниями людей, которые лучше меня ориентируются в теме, чтобы прояснить ее для себя.

Случилось так, что в последнее время мне пришлось читать и рефакторить очень много ужасного javascript-кода. Работа с таким кодом стоит очень многих нервов при сопровождении, да и писать/отлаживать такой код не приятно. Мысли о том, что заставляет людей писать плохой код и как с этим можно бороться заставили меня писать эту статью. Не претендую на сколь-нибудь полное раскрытие темы борьбы за качество кода, хочу рассмотреть лишь некоторые аспекты, доставляющие наибольшее количество проблем. В качестве основного инструмента оптимизации качества кода предлагаю использовать JSLint, который несмотря на все плюсы, не является панацеей и может служить лишь отправной точкой для дальнейшего улучшения кода.

Всех у кого хоть раз болела голова при написании/чтении javascript кода прошу под кат.

В HTML5 есть замечательный атрибут placeholder.

<input placeholder="inbox@disney.com">

Сейчас он работает только в webkit-браузерах (Safari, Google Chrome).

С помощью JS, не изобретая велосипедов, placeholder.js делает этот атрибут кроссбраузерным.

<input placeholder="inbox@disney.com" id="some_input">
<script type="text/javascript">
  inputPlaceholder( document.getElementById('some_input') )
</script>

placeholder.js (1.3 килобайта)

Недавно видел на хабре спор по поводу того, что нам не нужны никакие скриптовые языки, кроме javascript. Утверждение, конечно, спорное, но меня заинтересовала возможность применения javascript на сервере.

Когда деревья были большими, а проблемы просто громадными, существовал такой компьютер — Радио-86РК. Многие программисты на территории бывшего СССР начали свой путь с этой машины.

Но время шло, и РК плавно ушел в небытие. Но для особых фанатов существуют эмуляторы. А в современном мире Web 2.0 вообще модно, чтобы все работало прямо в браузере. А так как правильные браузеры типа Google Chrome предоставляют все возрастающую скорость JavaScript, то подобная мода весьма оправдана. А как результат, даже эмуляторы процессоров теперь можно запускать прямо в браузере (недавно на Хабре была тема про эмулятор Спектрума).

Я так вдохновился тем Спектрумовским эмулятором, что за пару дней перенес свой старый эмулятор РК на платформу JavaScript.

Идея паттерна Observer заключается в создании зависимости типа один ко многим. При изменении состояния одного объекта(субъекта), зависящие от него объекты(наблюдатели) об этом оповещаются и обновляются. Это нужно для согласования состояния взаимосвязанных объектов без их жесткой связанности.

Всем привет.

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

Пожалуй, все встречали подобные инструменты основанные на технологии flash. Однако я считаю, что её использование здесь не к чему. Поэтому потратив несколько часов я реализовал подобный функционал на javascript в виде плагина к jQuery.

В процессе работы с таблицами, для удобства восприятия, а также быстрого анализа, рано или поздно возникает вопрос вывода отсортированного содержимого этих таблиц. Эту задачу в web-программировании можно решить двумя способами:

• Сортировка на стороне сервера посредством SQL или backend'а;
• Сортировка на стороне клиента.

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

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

Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

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

Как это сделано?

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