<rmcreative>

RSS

Все заметки с тегом «JavaScript»

  1. Паттерны для масштабируемых JavaScript-приложений

    18 марта 2014

    Качественный перевод книги Addy Osmani «Patterns For Large-Scale JavaScript Application Architecture».

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

    Книга доступна совершенно бесплатно в форматах epub, mobi, fb2 и pdf.

    Читаем и помогаем переводчикам на github

    Комментировать
  2. jQuery 2.0

    19 апреля 2013

    Релизнулась версия 2.0 самой популярной JavaScript-библиотеки.

    В релизе выкинули поддержку Internet Explorer 6, 7 и 8. За счёт этого выиграли в размере на 12% и прибавили в скорости. Можно выиграть в размере ещё больше, если сделать свой билд, убив ненужные из 12-и встроенных по умолчанию модулей.

    Тем, кому нужны старые IE остаются на ветке 1.x, которая их поддерживает и которую не забросили (скоро выйдет 1.10) и планируют поддерживать ещё несколько лет. API 2.0 хоть и совместим с не-deprecated 1.9, но изменений всё-таки много.

    7 комментариев
  3. JSHint и JSLint

    30 октября 2012

    В рядах тех, кто пока не очень много работал с JavaScript, ну или каким-то образом только-только нашёл этим замечательные инструменты для статического анализа JavaScript-кода, существует некоторое замешательство по поводу того, чем же пользоваться, JSHint или JSLint.

    JSHint появился как более человечный и настраиваемый форк JSLint, напсанного Douglas Crockford. Crockford-а смело можно назвать одним из лучших по части JavaScript, но, к несчастью (а может и наоборот), он славится ещё и тем, что не признаёт других стилей форматирования и оформления кода, о чём несколько раз высказывался в довольно категоричной форме. Наверное поэтому JSLint не особо настраивается и практически неприменим, если ваш код отформатирован не так, как у его автора.

    Именно поэтому я использую JSHint. Кстати, оба инструмента встроены в PhpStorm и другие IDE JetBrains.

    12 комментариев
  4. jQuery 1.8

    10 августа 2012

    Вышла новая версия JavaScript-библиотеки jQuery.

    Совместима с jQuery UI (1.8.22) и jQuery Mobile (1.1.1).

    Главное изменение — переписан движок селекторов Sizzle, что дало определённый прирост производительности. Также:

    • Закрыто 160+ багов.
    • Меньше размер, чем у предыдущего релиза.
    • Переписано многое, касающееся анимации. Старое всё будет работать. Есть и дополнения (пример).
    • Добавили возможность собирать только нужные части (большинства это не коснётся потому как собирается спецутилитами).
    • Теперь автоматически расставляются CSS-прификсы:
    $('#test').css("user-select", "none");
    // В Chrome/Safari получим "-webkit-user-select"
    // В Firefox — "-moz-user-select"
    // IE10 — "-ms-user-select".
    2 комментария
  5. The Modal

    13 июля 2012

    Оформил «правильные модальные окна» в плагин jQuery и выложил на github.

    API получился, на мой вкус, неплохим. Можно делать, например, вот такие штуки:

    $.modal().open({
        onOpen: function(el, options){
            $.get('http://example.com/', function(data){
                el.html(data);
            });
        }
    });

    На данный момент найдены две нехорошести — одна со скроллом кнопками в FF, вторая — со скроллом на iPad. Со временем, конечно же, они будут исправлены.

    Пользуемся и форкаем

    24 комментария
  6. Правильные модальные окна

    5 июля 2012

    Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

    Если окно модальное, то пользователю нельзя позволять прокручивать страницу под ним. При этом, если содержимого в модальном окне очень много, нужно позволить это содержимое прокручивать.

    По этому принципу работает просмотр фото в Facebook и Вконтакте.

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

    Рассматриваем пример

    Немного прокомментирую:

    /* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */
    .lock {
        /* Скрываем скроллбары */
        overflow: hidden;
    }
     
    .modal {
        /* По умолчанию не показываем содержимое модальных окон */
        display: none;
    }
     
    .lock .modal {
        /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */
        display: block;
     
        /* Саму подложку фиксируем и растягиваем на всё пространство */
        position: fixed;
        bottom: 0; left: 0; top: 0; right: 0;
     
        /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */
        overflow: auto;
    }

    UPD: оформил в плагин jQuery

    29 комментариев
  7. Facebook JavaScript SDK, новые fql.query и fql.multiquery

    29 июня 2012

    Много где написано, что REST API Facebook устарел, но, я не нашёл в официальной документации JavaScript SDK, что с этим делать в случае FQL. Описанные в примерах fql.query и fql.multiquery посылают запросы как раз на устаревший restserver.php.

    Как это обычно бывает у Facebook, решение сделали по-тихому. Кому нужна документация, верно?

    fql.query:

    // старая версия
    FB.api(
      {
        method: 'fql.query',
        query: 'SELECT name FROM user WHERE uid=me()'
      },
      function(response) {
        alert('Your name is ' + response[0].name);
      }
    );
     
    // новая версия
    FB.api('/fql', {
        q: 'SELECT name FROM user WHERE uid=me()'
      },
      function(response) {
        // формат ответа отличается
        alert('Your name is ' + response.data[0].name);
      }
    );

    fql.multiquery:

    // старая версия
    FB.api(
      {
        method: 'fql.multiquery', 
        queries: {
          username: 'SELECT name FROM user WHERE uid = me()',
          userpic: 'SELECT pic_big FROM user WHERE uid = me()'
        }
      },
      function(response){
        console.log(response);
      }
    );
     
    // новая версия
    FB.api('/fql', {
        q: {
          username: 'SELECT name FROM user WHERE uid = me()',
          userpic: 'SELECT pic_big FROM user WHERE uid = me()'
        }
      },
      function(response){
        console.log(response);
      }
    );
    Комментировать
  8. Facebook FB.ui send на мобильных устройствах

    1 июня 2012

    В очередной раз Facebook заставил попотеть. После реализации приглашалок через диалоги Facebook выяснилось, что они никак не хотят работать на мобильных девайсах, выдавая загадочную API Error Code 3, Unknown method. This method isn't supported by this display type.

    Оказывается, вызывать диалоги на мобильных устройствах и планшетах через JavaScript SDK — дохлый номер. Однако, примеры с URL в описании диалогов работали, поэтому родилась вот такая штука:

    // определяем, мобильный ли браузер
    // не забудьте iPad
    if(isMobileBrowser()) {
      var params = {
        // если не используете SDK, можно просто вставить ID приложения
        app_id: FB._apiKey,
        name: header,
        link: link,
        description: description,
        // позволяет видеть ошибки, лишним не будет
        show_error: 1,
        to: userID,
        redirect_uri: window.location.href,
        // не рисовать лишнее, ресайзить попап автоматом
        display: 'popup'
    };
    // строим URL
    var url = 'http://www.facebook.com/dialog/send?';
    var parts = [];
    $.each(params, function(key, val){
      parts.push(key+'='+encodeURIComponent(val));
    });
    // открываем попап
    var facebookPopup = window.open(url+parts.join('&'),'facebook-popup','height=300,width=200');
    // ставим на него фокус
    if (window.focus) {
      facebookPopup.focus();
    }
    7 комментариев
  9. Можно ли использовать в браузере X штуку Y

    29 мая 2012

    На подобные вопросы отлично отвечает ресурс caniuse.com.

    Есть данные о:

    • CSS (@font-face, Media Queries, …).
    • HTML5 (Canvas, WebGL, …).
    • JS API (CORS, Web Sockets, …).
    • SVG.
    • И другом (Data URLs, XMLHttpRequest 2, …)

    Информация предствлена в виде удобных таблиц.

    Пользуемся

    Комментировать
  10. Twitter Bootstrap 2.0

    3 февраля 2012

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

    В комплекте сетка, базовый CSS для текста, таблиц, форм и кнопок, набор значков, отдельные элементы интерфейса и даже JavaScript-плагины. Всё это кроссбраузерно и кроссдевайсово. Можно использовать LESS, так что работать с набором довольно удобно.

    Пробуем

    11 комментариев