Posts Tagged ‘mootools’

Rails: store dates in UTC and display them in local time onto client side

Понедельник, Июнь 27th, 2011

In the Rails all timestamps stored in database in UTC by default. UTC is an improved version of wide-known GMT.

Previously, I have kept the timezone for each individual user for computing local date using UTC and user timezone. Well, you know, when you are asked to specify your timezone, choosen it from a huge drop-down list. Some developers, of course, make smarter, they determine the current user’s timezone with javascript and then send it to the server via AJAX.

Now I come to the conclusion that in most cases I do not necessarily user’s timezone to know (I can’t think where it may be necessary to me.) I decided that will be easier to display all the dates on my site in UTC, then on the client side bring them to local time and format using javascript. As a result, I got a helper and a piece of code in javascript.

Here is rails helper, without any frills:

def utc_date(date)
  raw %Q(<time class="utc-date" title="#{date}">#{date}</time>)
end

This helper just display passed date object and display it wrapped by time HTML5 tag.

And here is a javascript code that convert UTC date to local time and format time:

var Application = {
    processUtcDates: function() {
        $$('.utc-date').each(function(wrapper) {
            wrapper.set('html', Application.utcToLocal(wrapper.get('html')))
        })
    },

    utcToLocal: function(value) {
        var a = /^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})\sUTC$/.exec(value);

        if (a) {
            return (new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]))).format("%d/%m/%Y %H:%M");
        }

        return null;
    }
};

Application.processUtcDates();

This example is written using mootools framework, but I think similar method like format is also available in your favorite framework. If not - it’s easy to write this method yourself.
The script simply looks for all the containers with the class .utc-date and convert contained date to local time with formatting.

In general, this is a simple way to remove yourself from a headache to support multiple time zones in your application. I’m waiting for comments about where method I described does not work.

Хранение дат в UTC, отображение и форматирование на клиенте

Четверг, Июнь 23rd, 2011

В Rails по-умолчанию все даты в БД хранятся в UTC. UTC - это, можно сказать, улучшенная версия знакомого всем GMT.

Раньше я хранил часовой пояс для каждого отдельного пользователя, чтобы потом считать локальную дату, основываясь на UTC и временной зоне пользователя, которую он указал. Ну, вы знаете, когда вас просят указать ваш часовой пояс, выбрав нужный из огромного выпадающего списка. Некоторые разработчики, конечно, делают умнее, они определяют текущий часовой пояс пользователя или посетителя при помощи javascript и отправляют его на сервер при помощи AJAX.

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

Вот хелпер. Он пока что без особых изысков:

def utc_date(date)
  raw %Q(<time class="utc-date" title="#{date}">#{date}</time>)
end

Этот хелпер просто получает объект даты в UTC формате и выводит его в HTML5 теге time (я использую HTML5 в своих проектах).

А вот и кусок джаваскрипта, который приводит дату к локальной, а так же форматирует её:

var Application = {
    processUtcDates: function() {
        $$('.utc-date').each(function(wrapper) {
            wrapper.set('html', Application.utcToLocal(wrapper.get('html')))
        })
    },

    utcToLocal: function(value) {
        var a = /^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})\sUTC$/.exec(value);

        if (a) {
            return (new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]))).format("%d/%m/%Y %H:%M");
        }

        return null;
    }
};

Application.processUtcDates();

Этот пример javascript-кода написан с использованием фреймворка mootools, но я думаю, аналог метода format есть и в вашем любимом фреймворке. Если же нет - его легко написать самому.
Скрипт просто ищет все контейнеры с классом .utc-date и приводит содержащуюся в них дату к локальному времени, с форматированием.

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

Шаблоны приложений в Rails 3

Вторник, Март 1st, 2011

Rails 3 вышел несколько месяцев назад, и одним из многих изменений было обновление API для генераторов и шаблонов приложений. Если вы еще не знаете, то теперь в Rails 3 используется Thor для этих целей, что даёт большую модульность и настраиваемость.

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

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

Вот так, например, выглядит шаблон, подготовленный Аароном Самнером:

# Создание rvmrc файла
create_file ".rvmrc", "rvm gemset use #{app_name}"

gem "haml-rails"
gem "sass"
# hpricot и ruby_parser используются гемом haml
gem "hpricot", :group => :development
gem "ruby_parser", :group => :development
gem "nifty-generators"
gem "simple_form"
gem "jquery-rails"

# Аутентификация и авторизация
gem "devise"
gem "cancan"

# rspec, factory girl, webrat, autotest для тестирования
gem "rails3-generators", :group => [ :development ]
gem "rspec-rails", :group => [ :development, :test ]
gem "factory_girl_rails", :group => [ :development, :test ]
gem "webrat", :group => :test
gem "ffaker", :group => :test
gem "autotest", :group => :test

run 'bundle install'

rake "db:create", :env => 'development'
rake "db:create", :env => 'test'

generate 'nifty:layout --haml'
remove_file 'app/views/layouts/application.html.erb' # вместо этого используется nifty layout
generate 'simple_form:install'
generate 'nifty:config'
remove_file 'public/javascripts/rails.js' # jquery-rails заменит стандартный prototype-ujs
generate 'jquery:install --ui'
generate 'rspec:install'
inject_into_file 'spec/spec_helper.rb', "\nrequire 'factory_girl'", :after => "require 'rspec/rails'"
inject_into_file 'config/application.rb', :after => "config.filter_parameters += [:password]" do
  <<-eos

    # Настройка генераторов
    config.generators do |g|
      g.stylesheets false
      g.form_builder :simple_form
      g.fixture_replacement :factory_girl, :dir => 'spec/factories'
    end
  eos
end
run "echo '--format documentation' >> .rspec"

# Настройка аутентификации и авторизации
generate "devise:install"
generate "devise User"
generate "devise:views"
run "db:migrate"
generate "cancan:ability"

# Удаляем ненужные файлы, копируем конфиг БД и добавляем его в игнор
remove_file 'public/index.html'
remove_file 'rm public/images/rails.png'
run 'cp config/database.yml config/database.example'
run "echo 'config/database.yml' >> .gitignore"

# Создаем git-репозиторий и делаем первый коммит
git :init
git :add => "."
git :commit => "-a -m 'create initial application'"

say <<-eos
  ============================================================================
  Your new Rails application is ready to go.

  Don't forget to scroll up for important messages from installed generators.
eos

Достаточно просто, не правда ли? Воспользоваться таким шаблоном можно так:

$ wget https://gist.github.com/848735.txt
$ rails new appname -m 848735.txt

Я сейчас создаю специальный гем, который поможет упростить создание новыйх приложений Rails 3 - этот гем называется playmo-rails, и уже можно посмотреть некоторые наработки. Мой гем так же использует Thor для генерации различных файлов. Этот гем создан для быстрого старта - можно создать новое приложения, добавляя в него нужные библиотеки и расширения, просто отвечая на вопросы установщика. И это очень удобно.

Пока playmo-rails умеет не так уж много:

  • Создает приложение и использованием Compass
  • Лайот приложения использует html5 boilerplate
  • Можно выбрать установку JQuery либо Mootools
  • Удаляет ненужные файлы из нового rails-приложения

Планов по playmo-rails достаточно много, например, добавить поддержку других фреймворков, полезных общеиспользуемых хелперов, таких как title, динамические страницы 500, 404, 422. В общем, в скором времени, playmo-rails будет той штукой, которая избавит вас от всех манипуляций которые вы делаете с каждым новым rails-приложением.

Как должен выглядеть идеальный WYSIWYG

Понедельник, Январь 31st, 2011

В студии Артемия нашего Лебедева выпустили визуальный редактор на JS под названием Реформатор. Именно так в моем понимании должен выглядеть WYSIWYG.
Мне для моих проектов нужен визуальный редактор, чтобы удобно было возиться с текстами на странице. Так вот, я решил написать собственный. Пока у него будет поддержка только FF > 3, мне этого пока достаточно. Я уже написал немного кода и скоро выложу его на github.

Список того, что должно и не должно быть в моём визуальном редакторе:

  • Никаких возможностей для изменения цвета текста или бэкграунда
  • Все стили берем из стилей css файла для контент-зоны сайта, т.е. того места, где располагается текст.
  • В редакторе все должно выглядеть именно так, как будет выглядеть на сайте.
  • Редактор увеличивает свою высоту по мере набора текста.
  • Удобное боковое меню со стилями (как в Реформаторе).
  • Картинки можно перетаскивать с рабочего стола прямо в редактор и сразу изменять их размер при помощи курсора мыши. Не нужно будет сначала загружать картинку на сайт,а потом вставлять ее в текст.
  • Не будет кучи кнопок, в которых легко запутаться.
  • Не будет выравнивания текста. У нас же будут стили. Если стиль предполагает выравнивание текста по правому краю - то пожалуйста. Это - как задал дизайнер. Редактор сайта не должен хотеть сделать того, чего не задумал дизайнер.
  • По-умолчанию будут: выделение (полужирный, италик, зачеркивание), нумерованный и ненумерованный списки, добавление гиперссылки.
  • Будет undo, redo, очистка форматирования, вставка из word (пока не знаю, как сделать такую вставку наиболее удобно).
  • Текст будет автоматически заворачиваться в параграфы. Озаглавленные параграфы будут заворачиваться в тег section.
  • Поддержка только HTML5.
  • Никаких тебе спелл-чекеров, таблиц спец-символов и прочей ненужной блуды.
  • Все это будет написано на mootools, как расово верном фреймворке.
  • Специальная парсилка для стилей контент-зоны.
  • Мануал, как правильно работать с визуальным редактором.
  • … может - чето забыл, напишу, если вспомню.

Еще одна очень важная фишка, которую хочу выделить:

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

  1. Вокруг текста статьи появилась бы рамка - признак того, что мы можем редактировать статью. Или нет - еще лучше: все остальное на странице, кроме статьи, затемнилось бы.
  2. Сбоку бы появилось плавающее меню с кнопками. И это меню можно было бы перетаскивать в любую часть вьюпорта по своему усмотрению, а так же сворачивать.
  3. При ухода фокуса со статьи плавающее меню бы исчезало.
  4. Если мы попытаемся закрыть окно, то появляется диалог с прогрессбаром, в котором отображается процесс сохранения статьи. Только после этого окно закрывается.
  5. Где-то будет расположена кнопка принудительного сохранения статьи. Или ее совсем не будет. Тут подумаю еще.

Ждите ссылку на проект, кому это интересно. А от вас жду предложений по улучшению.

Получение ответа в виде JSON от Form.Request в Mootools

Суббота, Ноябрь 14th, 2009

В Mootools есть отличное решение для отправки форм при помощи AJAX, это Form.Request. Он позволяет очень просто отправить форму без перезагрузки страницы.

После того, как форма отправлена, вы можете получить ответ в виде html, чистого текста или XML, в зависимости от того, какой заголовок Content-type вы отдаете на стороне сервера. Но чаще всего, нужно получить запрос в виде JSON, а в Form.Request это не предусмотрено.

Давайте посмотрим, как все таки получить нужный нам ответ в JSON:

new Form.Request($('login-form'), $('login-form-errors'), {
    resetForm: false, // Не сбрасывать форму после отправки

    // В случае успешного запроса
    onSuccess : function(target, text, xml) {
        // Если сервер что-то возвратил
        if (text.length) {
            // Перекодируем ответ в объект JSON
            var json = JSON.decode(text[0].data);
            ...
        }
    }
}).send();

Смотрите так же документацию по Form.Request

Подборка хороших плагинов для Mootools

Суббота, Июль 4th, 2009

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

Одних клонов лайтбокса понаписано сотни. Но достойных из них всего пара штук. Почему? Потому что плагин написать не так-то просто как кажется новичкам, изучившим какой-либо js-фреймворк и сразу кинувшимися в бой. (далее…)