войти зарегистрироваться

Клиентская оптимизацияУвеличиваем скорость загрузки сайта используя lazy-load изображений

Сейчас многие сайты насыщены графикой в разных видах: аватары, иллюстрации к постам, галереи и тп.

Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.

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

Web-разработкаDownload Master Plugin ломает Prototype-сайты

С недавнего времени у меня на Клавогонках у некоторых пользователей начались проблемы совершенно мистического плана — не работали функции, которые ну никак не могли не работать, всплывали абсолютно дикого вида ошибки и гейзенбаги. Долго и мучительно пытаясь выяснить в чем проблема, и не без помощи сообразительных юзеров я обнаружил, что последняя версия Download Master (довольно популярная программа), выпущенная вроде бы где-то в ноябре, содержит удивительнейший Firefox-плагин, который ставится в браузер автоматически. Плагин этот зовется Download Master Plugin 1.2 и его удивительность заключается в том, что он подгружает в глобальное javascript-пространство страницы библиотеку jQuery целиком как она есть. По-настоящему подгружает, со всеми функциями, и (внимание!) с функцией $(). Тем самым, разумеется, ломая аналогичную функцию из Прототайпа.

JavaScriptВиджет выбора OpenID провайдера на Prototype

Когда-то я уже писал, как интегрировать OpenID авторизацию в ваш сайт. Речь шла о серверной части.
Сейчас же я говорю о UI части — виджет для выбора провайдера.

В качестве клиентской библиотеки для своего проекта я выбрал prototype и первым делом я полез в гугл поискать готовое решение. Удалось найти такое, но только для JQuery — code.google.com/p/openid-selector/

И так мне ничего не оставалось как написать OpenID selector самому. Вот что получилось

image

Блог им. saksКак «честно» симулировать события

Здравствуй уважаемое хабрасообщество.
Не так давно я начал заморачиваться не только тестированием кода на ruby, но и js, которого становиться слишком много в проектах. Со
временем добрался и до IU на js, а для его тестирования понадобилось симулировать всяко-разные события. Поискав, нашёл в одной из библиотек на jquery решение. В расширениях для тестирования была искомая библиотечка для симуляции событий. Но вот незадача, мы используем prototype (я закоренелый рубист и оно мне нравиться), а не jquery.

Немного поразмыслив я решил подправить сие, для использования, как plugin к prototype. Что из этого получилось? Что ж, мне очень помогло в тестах. Если Вы тоже сторонник тестируемого кода — Вам тоже будет полезно.

В использовании выглядит это примерно вот так:

$('foo').simulate('keypress', Event.KEY_RETURN);

$('foo').simulate("drag", {
dx: 10,
dy: 0,
onComplete: function(element){
alert('drag simulation $(' + element.id + ')');
}
});


Я намеренно расширял Element, а не Event — мне так кажется логичнее, хотя это можно и обсудить. Сжатая версия весит 3K, с документацией 7K. Git

Для почитателей jquery — выше ссылка.

Блог им. AndryXПроектирование информационных систем в Visual Paradigm

Данная статья подготовлена в качестве доклада небольшой группой студентов НТУУ «КПИ». Являясь её соавтором я решил выложить текстовую копию на хабр, может кому пригодиться. В ней рассказано о проектировке крупных информационных систем при помощи Visual Paradigm. Букв много и написано на ооочень начальном уровне, потому имевшим с этим дело можно не читать.

JavaScriptСравнение скорости популярных JS библиотек

Встал задача, выбрать JS библиотеку для нового проекта. Я уже работал с Prototype и JQuery, в разных проектах и выбирал в основном из них. Обе библиотеки имеют свои слабые и сильные стороны. Холивар на данную тему можно развивать до бесконечности, но меня в первую очередь интересует скорость.

Благодаря приложению пользователя lusever, я провел тест производительности. В тесте так же участвовала не без известная библиотека Ext JS. Тестируется скорость выборки DOM элементов по селекторам, можно зайти на сайт и попробовать пройти тест самостоятельно, кстати, там есть очень интересные примеры селекторов, о которых я ранее не знал.

Блог им. phominHDRA. Interactive Mixer Prototype — Next Gen Game Audio Tool

Andrew Quinn в среде max/msp создал прототип интерактивного микшера. Дакинг, снэпшоты микшера, импорт VST-эффектов, для них же insert и return, изменение параметров эффектов в зависимости от игрового параметра (контроллера) и даже зарождается управление по миди. Работает это всё вот как: задаются настройки микшера для игровых ситуаций. Например, в зависимости от насыщенности происходящего:

1. Сто игроков на самолётах под грайндкор бомбят городишко с миллионом мобов.
2. Один немой сферический моб в позе лотоса думает о вечном в вакууме.
3. Промежуточные варианты.

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

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

И всё это с удобным и понятным саунд-дизайнеру интерфейсом.



сайт проекта
скачать InteractiveMixer
документация

JavaScriptPrototype 1.6.1: быстрее, чище, команднее

Поздравляем Эндрю Дюпона (Andrew Dupont) и Тоби Ланжеля (Tobie Langel) (нового официального соведущего ядра Prototype) с выходом нового 1.6.1:
  • Полная совместимость с новыми браузерами. Эта версия Prototype полностью поддерживает 1.0 и более крупные версии Google Chrome, и Internet Explorer 8 как в режиме совместимости, так и в суперстандартном.
  • Сохранение метаданных в элементах. С лёгкостью объединяйте джаваскриптовые пары ключей и значений с элементами DOM. Поглядите блогозапись, с которой это началось.
  • Новые события мыши. Собственнические события Internet Explorer — «mouseenter» и «mouseleave» — теперь доступны для всех браузеров.
  • Улучшенное быстродействие и домовитость. Часто использовавшиеся методы Function#bind, String#escapeHTML и Element#down стали быстрее, и Prototype лучше прибирает за собою.
  • Собрано со Sprockets. Теперь вы можете включать репозиторий исходного кода Prototype в своё приложение и использовать Sprockets для управления зависимостями и для распространения.
  • Внутреннее документирование посредством PDoc. Наша документация по API теперь хранится внутри исходного кода посредством PDoc, так что проще посылать патчи или лицезреть документацию по конкретной версии.
Подробности глядите во блогозаписи о RC2, во блогозаписи о RC3, и в CHANGELOG.

Вот несколько симпатичных изменений. Хотя с неподдельным волнением ожидаю увидеть работу нового Prototype 2.0 и как команда перезагрузит Prototype.