• Page Visibility API и Visibility.js

      Кот Шрёдингера

      Page Visibility API — новое API в JavaScript, которое позволяет узнать, видит ли пользователь ваш сайт или же он, например, открыл другой таб.

      Каким образом это API может сделать наш Веб дружелюбнее и уютнее? Ну самое очевидное:
      • Сделать сайт более дружелюбным к пользователю, «поднять юзабилити». Например, отключать слайдшоу или ставить видео на паузу, когда вы переключаетесь в другой таб (например, вы смотрите видео на YouTube и вам приходит срочное эл. письмо).
      • Не потреблять лишних ресурсов. Выключать лишнюю логику, когда она не нужна, так как пользователь не видит сайт. Например, в фоновом табе отключать сложные JS-рассчёты или реже проверять новые сообщения по AJAX.
      • Считать более точную статистику. Например, не засчитывать пользователей, которые открыли ваш сайт в новом табе и закрыли его не просматривая.
      • Поддерживать новую технологию пререндеринга из Google Chrome, когда браузеру заранее загружает и рендерит указанную страницу, чтобы открыть её мгновенно. Например, в поиске Google первый результат выдачи будет отмечен на прередеринг.
      • Сделать эмулятор кота Шрёдингера (на иллюстрации), который отобразит живого или мёртвого кота только тогда, когда пользователь откроет загруженный в фоне таб.

      Чтобы сделать работу с Page Visibility API более удобной, я (во славу Злых марсиан) разработал библиотеку Visibility.js. Она позволяет забыть о вендорных префиксах и добавляет «сахара» высокоуровневых функций, чтобы писать короткий чистый код (например, Visibility.every — аналог setInterval, но работает только, если сайт в открытом табе).

      Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).
      Читать дальше →
    • Введение в SproutCore, часть первая

        В последнее время появилось много статей о JavaScript MVC фреймворках. Видимо есть потребность в подобных инструментах. Мое внимание привлек продукт под названием SproutCore. Обнаружив на скудное наличие информации на русском языке я решил перевести для себя ряд руководств с официального сайта фреймворка. Поделюсь с сообществом первым из них.

        После прочтения этого руководства, вы сможете:
        • Использовать шаблоны SproutCore, для описания внешнего вида приложения;
        • Обрабатывать события внутри представления;
        • Использовать привязки(bindings) для обновления представления, после изменения состояния модели.


        Вы узнаете все это во время создания приложения Todo-лист.

        Исходный код этого приложения доступен на Github. Также есть скринкаст.
        Читать дальше →
      • Взаимодействие между web-приложениями через Web Intents

        • Перевод
        Прим.: Обычно не занимаюсь переводами, но новость проскочила интересная.

        В сегодняшней браузерной экосистеме веб-приложения полностью изолированы друг от друга, и для того, чтобы, к примеру, отправить комментарий в твиттер через сторонний сервис со своего сайта, необходимо использование сложных (Прим.: ну я бы просто сказал «разнообразных») API. А что если бы мы могли дать сайтам возможность использовать подобные сервисы не зная, какой конкретно сервис мы будем использовать, а зная лишь о том, что он предоставляет некий функционал.

        В Android OS эта проблема решается при помощи Intents[1] — архитектуры, позволяющей взаимодействовать компонентам одного или нескольких различных приложений. По этой схеме, клиенсткое приложение создает запрос (к примеру, разослать что-нибудь) и задает параметры, которые будут переданы другому приложению-сервису. После этого пользователю предоставляется список приложений, которые регистрировали свою возможность обрабатывать данный тип intent-запроса. Затем выбранное пользователем приложение запускается в новом контексте, и ему передаются параметры, переданные клиентом в некоем, заранее определенном для конкретного типа intent, формате.

        На данный момент мы прилагаем большие усилия для создания аналогичной системы для шеЬ: Web Intents. Эта система предоставит те же удобства, что и Intents для Android, но будет адаптирована для web-приложений.

        Читать дальше →
      • KnockoutJS: Ajax grid view с нуля в 40 строк

          В последнее время на Хабре все больше упоминаний о KnockoutJS, и я не останусь в стороне от этого тренда.
          Сегодня я расскажу о том как сделать своими руками Ajax Grid View с фильтрацией и переходом по страницам написав, при этом, совсем немного кода.
          Начиная писать эту статью я чувствовал себя несколько неловко, да и сейчас ощущение не ушло. Все дело в том, что сама библиотека простая, паттерн MVVM простой, и рассказывать я буду простые вещи. Я уверен, что в ближайшее время Knockout получит достаточно большое распространение. А неловко мне от того, что уже через год-дугой кто-то наткнувшись на эту статью будет обескуражен простотой изложенного материала. Примерно так, как любой из вас сейчас, открывший статью о jQuery от 2007 года.

          Кто не испугался предполагаемого баяна, милости прошу под хабракат.

          Читать дальше →
        • Нечёткий поиск на клиенте и Soundex

            Soundex — один из алгоритмов сравнения двух строк по их звучанию. Был разработан чуть менее 100 лет назад Робертом Расселом и Маргарет Оделл. Активно используется в США при диктовке фамилий.

            Я давно интересовался применением этого алгоритма и нашёл ему место для фильтрации данных на клиенте, а точнее, для поиска отеля по названию в проекте Островок.ru.

            Задача

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

            Решение, проблемы и готовый скрипт
          • Ой, у вас баннер убежал!

            Ну, и что?
            Реклама
          • HotMilk — библиотека для удобной организации шаблонов Mustache

              Пост в продолжение недели^W месяца JavaScript на Хабре.

              После статьи о разработке одностраничного веб-приложения занёс в закладки либу ICanHaz с целью потерзать и чуть допилить её, как руки дойдут. И, как водится, отложил в долгий ящик.

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

              Напомню, что ICanHaz — это простой способ чуть-чуть организовать шаблоны Mustache, используемые javascript'ом в браузере. Рендеринг шаблонов с помощью этой библиотеки сводится к простому вызову функции. Ещё она избавляет от необходимости экранировать половину шаблона, т.к. его текст можно писать прямо в HTML-теге <script>

              Под катом расскажу о собственных достижениях в области велосипедостроения
              • +16
              • 2,6k
              • 2
            • Введение в MVVM и KnockoutJS (видео)

                В своей статье о фильтрации списков на Knockout я упоминал, что читал доклад о MVVM и KnockoutJS на .NET Saturday в Днепропетровске.

                Совсем недавно подоспело видео и я спешу им поделиться. Хочу заранее немного оправдаться — поначалу я немного тараторил, но потом вошёл в ритм и вроде как всё было достойно.

                Сам доклад разделён на 2 части:
                1. рассказ о MVVM с разбором практического примера, как сей паттерн может облегчить жизнь при разработке UI
                2. написание простенького приложения на Knockout в live-режиме. Эта часть доклада всем понравилась больше чем первая, но за несколько моих «затупов» я до сих пор краснею :-)


                Посмотреть видео доклада

                PS 1: слайды можно скачать тут: bit.ly/qX61m2
                PS 2: если вдруг кому нужны исходники демо-проекта — я выложу. Но их как минимум причесать надо
              • Замыкания и объекты JavaScript. Переизобретаем интерпретатор

                • Tutorial
                Обычно концепции или парадигмы программирования объясняют либо описательно — «разжёвывая» новые идеи простыми словами, либо метафорически — уподобляя их хорошо знакомым аудитории предметам и понятиям. Но ни первый, ни второй способ не дает такого точного и полного представления о предмете, как взгляд с точки зрения низкоуровневой реализации.

                Когда в изучении языка доходишь до нетривиальных вещей, бывает полезно сместить уровень абстракции, чтобы понять, как на самом деле всё устроено. Ведь, по большому счету, любые конструкции языков сколь угодно высокого уровня сводятся к старому доброму машинному коду. Писать в объектно-ориентированном или функциональном стиле можно и на чистом C, и даже на ассемблере. Грубо говоря, любой высокоуровневый язык — это зафиксированный на уровне компилятора или интерпретатора набор синтаксических карамелек и шоколадок. Повышение уровня абстракции позволяет писать более сложные программы с меньшими усилиями, но вот понять в начале пути, что конкретно имеется в виду под наследованием или замыканием, как это всё работает и почему, гораздо легче, разобравшись, каким образом всё это реализовано.

                JavaScript, как никакой другой язык, нуждается в именно таком объяснении. Функциональная природа, скрытая за Си-подобным синтаксисом, и непривычная прототипная модель наследования поначалу сильно сбивают с толку. Давайте мысленно понизим уровень JavaScript до простого процедурного, наподобие Си. Отталкиваясь от этого «недоязыка», переизобретем функциональное и объектно-ориентированное программирование.
                Читать дальше →
              • Sugar — подслащённый Javascript

                  Что же такое Sugar?
                  Это javascript-библиотека для работы со встроенными объектами javascript, которая:
                  • расширяет встроенные объекты языка, добавляя полезные и интуитивно-понятные методы;
                  • добавляет кросс-браузерную функциональность, где она сломана или ее нет;
                  • полностью покрыта тестами;
                  • легко взаимодействует с другими фреймоворками и сторонним кодом;
                  • проста в понимании и использовании

                  В качестве примера использования, автор приводит вот такой код:
                  getLatestTweets(function(t) {
                      var users = t.map('user').unique();
                      var total = users.sum('statuses_count').format();
                      var top = users.max('followers_count').first();
                      var count = top.followers_count.format();
                      var since = Date.create(top.created_at);
                      return users.length + ' users with a total of ' + total + ' tweets.\n' +
                      top.screen_name + ' is the top with ' + count + ' followers\n' +
                      'and started tweeting ' + since.relative() + '.';
                  });


                  Не правда ли, код читается почти как английский текст.
                  Самые нетерпеливые могут изучить предоставляемые функции по этой ссылке, а остальных ждёт краткое описание под катом.
                  Читать дальше →
                Самое читаемое