JavaScript *

Подведены итоги конкурса скриптов размером 1024 байт или меньше. Ниже список победителей.

1. Legend Of The Bouncing Beholder (автор: @marijnjh)
2. Миниатюрные шахматы (Oscar Toledo G.)
3. Тетрис со звуком (@sjoerd_visscher)
4. WOLF1K и буквы в цветах радуги (@p01)
5. Бинарные часы (tweetable) (@alexeym)
6. Mother fucking lasers (@evilhackerdude)
7. Схема графического движка (Lars Ronnback)
8. Многопользовательский настольный теннис (@feiss)
9. Генератор кода по азбуке Морзе (@chrissmoak)
10. Пульсирующие 3D-провода (@unconed)

Сайт с демками пока лежит, но некоторые из них можно найти на сайтах авторов.

Нашел в коде Javascript библиотеки вот такую вот конструкцию:

if ('is_public' in profile) {
...
}

Очень заинтересовало, как это работает. До этого использовал оператор 'in' только для итерации, а тут вот такая вот проверка интересная. Покопавшись я обнаружил для себя, что оператор 'in' также можно использоваться для проверки существования метода объекта, свойства объекта и индекса элемента в массиве. Ниже несколько примеров:

Задача

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

Довольно часто во многих статьях я вижу, как люди захватывают контекст this для использования в анонимной функции и удивляюсь — то, что уже стало стандартом — просто ужасная практика, которая противоречит всем канонам программирования. Вам знакома такая запись?
var self = this;
Может вам тоже стоит переосмыслить этот аспект?

Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 

Приглашаю уважаемых разработчиков к участию в мастер-классах по профессиональному Javascript-программированию, AJAX/COMET, оптимизации, jQuery.

Они пройдут — в Ярославле (24-25 сентября), Новосибирске (3-4 октября), Казани (9-10 октября), Минске(16-17 октября), Днепропетровске (23-24 октября), Одессе (30-31 октября) и Самаре (13-14 ноября).

В топике я расскажу о нюансах использования тега <audio> в разных браузерах при разработке игр, о проблемах, с которыми я столкнулся и о том, как их решить. Объяснение будет идти паралельно с написанием обертки для удобной работы.

Если посмотреть на скрипт, сжатый Closure Compiler'ом, YUI Compressor'ом или еще чем-нибудь, можно увидеть бесконечные вереницы повторяющихся ключей: .prototype, .length, offsetParent и так далее. Попробуем избавиться от них на примере плагина jQuery UI Sortable. Скажу сразу, что gzip нам не переплюнуть, но когда его нет под рукой или нельзя им воспользоваться (например, на конкурсе 10K Apart), эта техника сжатия может оказаться весьма полезной.

Недавние посты об алгоритме сборки кубика 5×5 сподвигли меня написать эмулятор кубика на канвас. Автором статей про сборку предлагался свой кубик на OpenGL, но он мне многим не понравился. Надеюсь, с моим кому-нибудь удастся освоить алгоритм быстрее. Некоторые особенности и преимущества:

• Кроссплатформенность, кроссбраузерность (IE за браузер не считаем), ненужность инсталлятора и прочие преимущества веб-приложения.
• Поддержка кубиков от 2×2 и до бесконечности (пока грани не станут сильно маленькими и рендеринг не начнёт жестоко тормозить). В интерфейс вынесено до 11×11, но в библиотеке ограничений нет.
• Псевдообъёмные грани для красоты.
• Бесконечный undo-буфер.
• Возможность замеса кубика (shuffle).
• Слои вращаются легко и интуитивно, быстро привыкаешь. Крутить весь кубик (мышкой с зажатым шифтом или правой кнопкой) не так легко, но тоже можно привыкнуть.
• Вся библиотека компактная, размещается в одном js-файле и не имеет никаких внешних зависимостей.
• Лицензия MIT, а также открытые и не очень страшные исходники позволяют вставить кубик на ваш сайт и доработать по вкусу.

Наигравшись с предыдущей поделкой http://babarun.ru/content/canvas/, {шиза+навязчивая идея} не дали мне остановиться на достигнутом.



Сразу смотрим демо http://esboza.ru/demo/, все пояснения потом.

Потребовалось однажды реализовать пейджер постраничной навигации а-ля дёти.
Далеко в лес ходить я не стал, а решил найти, что же это за зверь такой раскопированный на множестве сайтов, а оказалось, что это детище karaboz. И даже есть аналог, переделанный под jQuery.

Но у каждой версии есть, как мне показалось, огромный недостаток, игнорирование колесика мыши. «Но ведь с этим было бы удобнее!» — воскликнул я и решил немного переписать, чтобы пейджер прокручивался на событие mousewheel. А также есть другие недостатки, которые я освещу под катом.

Каждый, кому приходилось писать объемные куски осмысленного кода на javascript, рано или поздно понимал, что ему многого не хватает в этом языке или просто неудобны некоторые врожденные конструкции. Для сглаживания шероховатостей применяются jQuery, Prototype, MooTools etc. Кто-то уже мало представляет себе, как можно кодить без них. Сегодня я расскажу о еще одной маааленькой библиотечке, которая делает мир javascript-программиста еще прекраснее. Речь пойдет о Underscore.js

Сегодня наткнулся довольно занятный gist на github'е.

 — Здравствуй *с широко развевающейся по лицу улыбкой* дружок.
 — Ваа! *с ярким блеском в широко распахнутых глазах* Тётя Ася приехала!
 — Да, и у меня есть для тебя новая сказка *присела и взяла малыша за руки* хочешь послушать?
 — Конечно! *слегка смутился и отвёл взгляд* Мне тут дядя такие страшные истории рассказывал…
 — Ну, надеюсь моя история тебя не испугает *потрепала его по волосам* Она должна научить тебя мыслить шаблонно.
 — Эээ? *лицо перекосилось от недопонимания* Это как?
 — М… сейчас узнаешь *подмигнула и взяла на ручки* Вот когда тебе нужно вставить переменные в строку — ты как поступишь?
 — Ну… *взял карандаш и чирканул на лежащей рядом бумажке* примерно так:

var query= 'xxx'
var resultCount= 512
var message= 'По запросу <kbd>' + query + '</kbd> найдено страниц: ' + resultCount

 — Ты ничего не забыл? *победоносно подняла голову*
 — Да вроде нет… *уткнулся носом в код, ещё раз внимательно его проверяя*
 — Что, если пользователь введёт… *выдержала многозначительную паузу и добавила*

Не так давно из лекции Дугласа Крокфорда я узнал об очень интересной технике «шаблонизирования» в JavaScript. Основная цель техники заключается в том, что мы получаем с сервера JSON и потом как-то формируем из этого HTML. Во многих ситуациях этот процесс оставляет желать лучшего потому, что формирование HTML происходит или с помощью конкатенации строк или ряда операций createElement, appendChild и т.п. Возможно многие уже знают об этом решении, но для тех кто не знал надеюсь будет полезно.

Увидел недавно топик-ссылку Smokescreen — конвертер flash в html5\js, решил сделать перевод той информации, которую я уже читал в сети про этот новый инструмент. Если коротко: Smokescreen — новый проект с открытыми исходниками, направленный на преобразование Flash в JavaScript/HTML5 для лучшего взаимодействовия с веб-страницей там, где раньше это было невозможно.
С его помощью вы можете расширить поддержку своего проекта на новые платформы без изучения новых инструментов, Flash автоматически преобразуется в JavaScript/HTML5. Smokescreen будет выпущен под open source лицензией и будет распространяться бесплатно. Стоимость поддержки и обслуживания будет низкой, чтобы вы могли убедиться, что Smokescreen работает именно так, как вам необходимо. Библиотека даст вам широкий выбор инструментов для разработки, включая разработку на JavaScript, без использования ActionScript, и разработку с подключением Flash к HTML-страницам проекта.

Данная статья посвящена Appcelerator Titanium — платформе для создания мобильных и десктопных кроссплатформенных приложений на JavaScript (HTML+CSS в придачу). Развитие платформы, особенности, варианты использования, личный опыт

Некоторое время назад, я публиковал топик про 3D с z-buffer-ом, субпиксельной точностью и освещением по Гуро на javascript с использованием канвы.

Сегодня я представляю вашему вниманию вариант без канвы (да и без gouraud shading, чего уж тут).



Это всего-лишь тестовые наработки, но, тем не менее, они работают (а лучше посмотрите сами).

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

Это часть фреймворка, который я сделал для своей платформы Akshell, вот полный код решения и документация. Однако оно может пригодиться в любой Server-Side JavaScript среде, на стороне сервера удобное создание иерархий классов особенно актуально. Его можно использовать и на клиенте, если заменить работу со свойством __proto__ оператором new.

Недавно Гугл позволил проговаривать текст с помощью Text-To-Speech API. Теперь возможно и обратное преобразование речи в текст.

Используя speechapi.com возможно построение интересных речевых веб-ресурсов включающих двустороннее текст-в-речь и речь-в-текст (speech-to-text as и text-to-speech) преобразования.

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

(Ссылка на оригинал)
UPD: перенес в Javascript

Пример использования API: