• Три правила проектирования интерфейсов с высокоскоростным пользовательским взаимодействием

      Эта запись о том, как увеличить скорость навигации и взаимодействия пользователя с интерфейсом, не прибегая к оптимизациям вычислений и рендеринга. Рекомендации касаются приложений, где сервер используется только для получения данных, а вся логика интерфейса находится в самом приложении. Эта запись о преимуществе клиентских приложений над приложениями с плохо разделённой логикой, представлением и данными.

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

      Правила организации высокоскоростного взаимодействия пользователя с приложением можно сформулировать следующим образом:

      1. Вычисления не должны блокировать взаимодействие с интерфейсом и его рендеринг — пользователь всегда должен иметь возможность указать на фокус своих интересов.
      2. Страница объекта, к которому обратился пользователь, должна отображаться мгновенно, не дожидаясь загрузки данных, в которых нуждается объект.
      3. Запросы в сеть не должны уходить одной большой группой, не должны отправляться сразу; должны откладываться на небольшое время, складываться и приоритезироваться в случае необходимости.


      Изложенная в этой заметке информация — это мой практический опыт проектирования и разработки интерфейса моего приложения для поиска и прослушивания музыки seesu.me. Приложения, в котором гармонично комбинируются огромные пласты данных из разрозненных сервисов, таких как last.fm, вконтакте, ex.fm, hypem.com, soundcloud.com, discogs.com, youtube.com


      Читать дальше →
    • Список оптимизаций рендеринга DOM, реализуемых на уровне Javascript фреймворка

        С октября 2009 года я занимаюсь разработкой приложения для поиска и прослушивания музыки. Я стремлюсь организовать возможность быстрого взаимодействия пользователя с интерфейсом, и в качестве одного из средств ускорения взаимодействия использую различные способы для быстрой отрисовки страниц.

        Предлагаю ознакомиться со способами, реализованными мной в приложении на системном уровне:

        • Использование CSS и переключение классов вместо перестроения DOM дерева
        • Повсемнестное кеширование выборок элементов ($('div.active_part span.highlighter')), атомарные операции по изменению (вместо всеобщей перерисовки, вместо переделывания больших участков DOM дерева)
        • Минимизации чтений DOM во время записи изменений состояний
        • Кеширование размеров и расположения элементов (это спасает от излишнего вычисления при считывании этих значений при наличии других изменений: чтение во время изменения множества частей дерева крайне негативно сказывается на производительности)
        • Аккуратное, не затягивающееся накопление изменений, необходимых произвести в DOM
        • Прикрепление частей изменяющихся коллекций единовременно (когда, например, в середину списка вставляется 3 новых элемента; createDocumentFragment) в конкретное место (after, before) вместо открепления всей коллекции от DOM и повторного прикрепления (и вместо того, чтобы перерисовывать весь список)
        • Прогрессивный асинхронный рендеринг: картина прорисовывается сразу с небольшим количеством деталей, затем деталей появляется всё больше
        • Клонирование нодов (как часть шаблонизации)
        • Кеширование и использование кеша результатов парсинга DOM шаблонов


        image image
        изображения из части с заголовком «Прикрепление частей изменяющихся коллекций единовременно...»
        Читать дальше →
      • Онлайн версия Seesu с вконтактовским Open API и поиском mp3 по soundcloud

          Сису — это очередное, небольшое приложение для удобнейшего поиска и прослушивания музыки. Комбинация last.fm, вконтакте, а также с недавних пор soundcloud. Написано на html/css/js.

          Со времени последнего поста на хабре о сису я не только запустил сайт проекта, но и благодаря вконтактовскому APIонлайн версию, которая работает не только на десктопе, но и на мобильных: проверены Android, iPhone, iPad и Opera Mini (в ней работает только soundcloud). Причём на айфонах работает в многозадачном режиме (в том числе на iPhone 3g, в котором в принципе нет многозадачности). Помимо онлайн версии существует виджет для оперы, расширение для хрома и виджет для apple dashboard.

          seesu
          Читать дальше →
        • Seesu (last.fm + vkontakte.ru виджет) в файрфоксе

            image
            Новая версия (1.7) виджета Seesu для поиска и прослушивания музыки может запускаться не только в опере, но и в файрфоксе. Для этого надо поставить расширение ZoooS Widget Runner. Последние изменения в виджете были произведены именно для поддержки этого расширения, хотя оно и сыровато.
            Читать дальше →
          • Удобный поиск по last.fm, проигрывание лучших треков и загрузка музыки с вконтакте в виджете Seesu

              seesu logoНовая (1.2) версия Seesu (зеркало), виджета для прослушивания музыки на основе last.fm и вконтакте.ру, приносит тонну баг фиксов, исправление проблемы инициализации флеша (если тот не во вьюпорте), лучшую поддержку ошибок серверов, улучшения в интерфейсе, рефакторинг кода и с ним лучшую скорость работы, а также

              — сробблинг (поддерживает «прослушивает сейчас» и общую отправку)
              — быстрый удобный поиск (саджестовый + полный), навигация по нему с клавиатуры
              — флеш в айфрейме (поэтому теперь не нужно добавлять виджет в белый список — флеш просто играет музыку)
              — уменьшен размер виджета с 225 кб до 70
              — поддержку Оперы 10.50

              seesu fast search

              С тех пор как была представлена версия 0.25 (или что-то около того) появилось и развилось много альтернатив
              Читать дальше →
            • P2P прямо в браузере

                Новая версия p2p плагина Littleshoot делает возможным загружать торренты прямом в вашем браузере. Отлично работает на Маках и Виндоус; в IE, Лисе, Хроме и Сафари. А также поддерживает протокол Gnutella и интеграцию с Youtube.

                Создатели проекта имеют опыт в разработке p2p проектах, а именно таких как Poisoned, Kazaa, XFactor, Pando, BitTorrent Inc., и Gizmo Project

                Первый настоящий p2p плагин для браузеров (построен на NPAPI и ActiveX) поддерживает битторрент, гнутеллу (действительно децентрализованный протокол) и собственный Littleshoot p2p протокол.

                www.littleshoot.org/beta (виа торрентфрик)

                Глядишь и до реализации высказанной не так давно идеи проигрывания загружающегося видео и аудио прямо из p2p сетей непосредственно в браузере не так далеко.
              • Джаракан

                • Перевод
                Уже нескольких месяцев маленькая команда разработчиков и тестеров работает над созданием нового движка ECMAScript/JavaScript для Оперы. Когда текущий движок ECMAScript — Футарк был впервые предоставлен публике, он был самым быстрым на рынке. Футарк был разработан в основном для быстрого выполнения кода. Традиционно это правильный компромисс разных платформ под которыми работает Опера.  

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

                Название Джаракан как и предыдущие названия движков даётся — это форма письменности. (Футарк — скандинавский алфавит; Джаракан, также известен как чаракан — слоговая письменность для яванского языка)

                Усилия по улучшению сфокусированы по трём основных направлениям
                Читать дальше →
              • Новая сборка Оперы 10 (1285)

                  Простая подписка на онлайн rss читалки


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

                  Изменения в работе с веб почтой


                  Предыдущая сборка включала возможность открытия, выбранного пользователем провайдера веб почты, при нажатие на ссылку mailto. Список провайдеров на тот момент состоял из Gmail, Yahoo! Mail и Windows Live Mail… В общем теперь решено не ставить в список провайдеров, которые официально не поддерживаются (хотя в Опере по прежнему работают над тем, что бы эти почты работали в браузере нормально)…

                  В списке теперь Opera Web Mail, Fastmail и Яяяяндекс!
                  image
                  Читать дальше →
                • Хостинг для SVG изображений

                    На http://petaimg.com можно выкладывать свои SVG и SVGZ изображения. Это значит, что есть место, куда можно выложить свои макеты, рисунки и прочие пряники в векторном формате.

                    Встраиваются куда угодно с помощью <img src="*.svg" alt=""/>, но видны только в Опере и вебкитовых браузерах (проверял только в сафари). Ради безопасности в случае вставки через img браузеры не поддерживают интерактивность в таких изображениях.
                    Эх! если бы у тебя был добрый браузер!
                    Есть один минус у хостинга — картинки порой удаляются.