• Как создавалась Айчиталка. Часть 1: движок

      Совсем недавно мы выпустили в свет первую бета-версию нашей онлайн-читалки, с которой можно ознакомиться, почитав книгу Михаила Лермонтова «Герой нашего времени». Эта читалка — результат почти семимесячной работы, пять из которых ушло только на разработку движка. Казалось бы, в интернете уже есть бесплатные и открытые JavaScript-движки для чтения электронных книг и такой долгий срок может вызвать сомнения в профпригодности разработчика (то есть меня). Но есть одно большое и жирное «НО». Мы поставили перед собой слишком амбициозную и трудновыполнимую задачу: мы хотели использовать один и тот же движок на разных устройствах, в том числе маломощных, таких как айфон или электронная читалка.

      В чём же заключается трудновыполнимость задачи? В первую очередь — в очень низкой скорости работы веб-приложений на айфоне. Например, мобильный Сафари по моим прикидкам работает раз в 100 медленнее своего десктопного собрата. Если на декстопе одна и та же операция выполняется 10 мс и совершенно незаметна для пользователя, то на айфоне она может выполняться больше секунды. Для сравнения: первая версия движка разбивала небольшую главу на страницы примерно за 15 секунд. Сейчас, спустя полгода, он делает то же самое менее, чем за секунду и вполне сносно работает в нашем приложении booq.

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

      Читать дальше
    • Новые аттачи в Яндекс.Почте

        Мы стремимся к тому, чтобы все части Яндекс.Почты одинаково хорошо работали у всех пользователей. Сегодня мы расскажем вам о том, как и зачем полностью переписали блок добавления аттачей. В этой статье — про отказ от флеша, поддержку возможностей современных браузеров и, как результат, увеличение скорости и надёжности загрузки файлов.

        Проблема

        Раньше всю аудиторию Яндекс.Почты мы разделяли на пользователей с флешем и без.

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

        А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.
        Читать дальше →
      • jQuery-плагины для удивительной web типографики

        • Перевод
        Добрый час, Хабр.
        Наткнулся на интересную статью (на английском языке) с подборкой плагинов jQuery для работы с типографикой.
        Кому интересно познакомиться с ними, добро пожаловать под кат, перевожу статью для Вас.

        Затравка

        Типографика является очень важной частью дизайна сайта. Однако ею часто пренебрегают. В этой статье собраны удивительные JQuery-плагины для полного контроля типографики на вашем сайте.
        Читать дальше →
      • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №25 (29 сентября — 5 октября 2012)

          Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


          Читать дальше →
          • +31
          • 20,3k
          • 8
        • Привязка контекста (this) к функции в javascript и частичное применение функций

          • Tutorial
          В предыдущем посте я описал, что this в javascript не привязывается к объекту, а зависит от контекста вызова. На практике же часто возникает необходимость в том, чтобы this внутри функции всегда ссылался на конкретный объект.
          В данной статье мы рассмотрим два подхода для решения данной задачи.
          1. jQuery.proxy — подход с использованием популярной библиотеки jQuery
          2. Function.prototype.bind — подход, добавленный в JavaScript 1.8.5. Рассмотрим также его применение для карринга (частичного применения функции) и некоторые тонкости работы, о которых знают единицы.

          Читать дальше →
        • Ключевое слово this в javascript — учимся определять контекст на практике

          • Tutorial
          По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

          var f = function() {
              this.x = 5;
              (function() {
                  this.x = 3;
              })();
              console.log(this.x);
          };
          
          var obj = {x: 4, m: function() {
              console.log(this.x);
          }};
          
          
          f();
          new f();
          obj.m();
          new obj.m();
          f.call(f);
          obj.m.call(f);
          

          Читать дальше →
        • Про jQuery и велосипеды — мое дополнение

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

          Для затравки начнем с простого.
          Читать дальше →
        • Велосипеды на Javascript и jQuery

          В очередной раз открыв код коллег и ужаснувшись, я решил написать эту статью. Надеюсь для кого-нибудь это будет полезным, заодно и мне будет проще новичкам объяснять что у них в коде не так, просто кинув ссылку на эту статью.
          Безусловно количество таких вещей очень и очень велико, поэтому в статье ограничусь лишь некоторыми.
          Читать дальше →
        • gmaps.js — самый легкий способ использования Google Maps API

          Привет!

          Расскажу об одной небольшой (~30kb) JS библиотеке для удобной работы с Google Maps API под названием gmaps.js.
          Раз уж библиотека создана для ускорения процесса веб-разработки, то и я вас задерживать не буду. Как можно понять из названия, она делает не что иное, как упрощает взаимодействие с API Google Maps. Многие из вас работали с API и, вероятно, каждый раз вам приходилось попотеть, чтобы порыться в документации и реализовать, например, свое собственное описание метки на карте. Или подписаться на событие взаимодействия с картой…
          Читать дальше →
        • Дайджест интересных новостей и материалов из мира айти за последнюю неделю №8 (26 мая — 1 июня 2012)

            Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


            Читать дальше →
            • +15
            • 19,9k
            • 9