Отключаем кэширование загружаемых RequireJS файлов при разработке

Мне нравится RequireJS. Нравятся принцип построения приложения с его использованием, то как он работает с зависимостями, его гибкость и настраиваемость. Но часто может возникать проблема при разработке на локале — кэширование ресурсов браузером (файл подправил, а изменения не отображаются, так как файл берется из кэша).

Можно, конечно, открыть консоль и поставить флаг запрещающий кэширование, можно подправить конфиг web-демона так, чтоб он запрещал кэширование, а можно пойти другим путем — заставить requirejs добавлять рандомный параметр к своим запросам, таким образом заставляя браузер не брать файл из кэша.

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

Ниже будет пример его содержания в полном объеме, и думаю что комментарии тут будут излишне (ссылка на док). Такой код можно оставить работать и на продакшене без особых переживаний, но для разработки на локале есть как минимум одно очевидное ограничение — необходимо чтоб домен верхнего уровня был указан в массиве local, а так как для всех своих локальных проектов использую домен верхнего уровня dev — неудобств совсем не замечаю.

Подробнее под катом

Синглтон для RequireJS

Частенько при разработке приложения с использованием requirejs возникает необходимость в реализации паттерна синглтона. И вот, испробовав пример его реализации что описан ниже заявляю — он имеет право на жизнь. Не без своих недостатков, разумеется, но в целом вполне применибельно:

'use strict';

define([], function () {

  /**
   * Singletone instance.
   *
   * @type {OurNewSingletone|null}
   */
  var instance = null;

  /**
   * OurNewSingletone object (as singletone).
   *
   * @returns {OurNewSingletone}
   */
  var OurNewSingletone = function () {

    /**
     * Initialize method.
     *
     * @returns {}
     */
    this.init = function () {
      // Make init
    };

    // Check instance exists
    if (instance !== null) {
      throw new Error('Cannot instantiate more than one instance, use .getInstance()');
    }

    // Execute initialize method
    this.init();
  };

  /**
   * Returns OurNewSingletone object instance.
   *
   * @returns {null|OurNewSingletone}
   */
  OurNewSingletone.__proto__.getInstance = function () {
    if (instance === null) {
      instance = new OurNewSingletone();
    }
    return instance;
  };

  // Return singletone instance
  return OurNewSingletone.getInstance();

});

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

Индикатор загрузки страницы (css + pure js)

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

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

Итак, каким же требованиям должен отвечать наш индикатор загрузки?

  • Отсутствие растровых изображений;
  • Старые браузеры — в топку, мы будем использовать современные CSS3 методы;
  • JavaScript поддерживается и включен по умолчанию более чем на 90% браузеров — не стесняемся его использовать;
  • Минимализм по возможности во всем — это же индикатор загрузки, и именно он должен загрузиться и отрисоваться у клиента быстрее всего;
  • И не забываем про адаптивность под мобильные гаджеты.

Подробнее под катом

JavaScript — получаем статус Skype, VK и Jabber аккаунтов

Вывод статуса аккаунта — довольно удобная хреновина которая позволяет, например, на странице контактов сразу указать — аккаунт в данный момент в сети, или же нет. Сейчас мы рассмотрим функции на Javascript (с использованием jQuery) для получения статуса аккаунта из трех наиболее популярных сервисов — Skype, VK.com и Jabber. Комментарии имеются лишь у первой по причине некоторой их однотипности — разобрав как работает одна — ты поймешь как работают и остальные. Демка так же имеется в конце этого поста.
Подробнее под катом

Псевдо-случайное изображение (на примере страницы 404-й ошибки)

Данная статья является копией публикации на хабре

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

Спустя некоторое время случайно наткнулся на мертвую ссылку, которая вела на несуществующий Tumblr-блог, и страница ошибки сразу привлекла внимание. Обновив страничку фоновое изображение (в виде gif-анимации) сменилось — внимание ещё более усилилось. Почитав исходники стало понятно что все изображения «прописаны» статично, но это натолкнуло на другую идею, о которой вы узнаете под катом.

Подробнее под катом