Posts Tagged ‘html5’

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.

Шаблоны приложений в 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-приложением.

Озвучивание интерфейсов в HTML5, мысли

Понедельник, Октябрь 4th, 2010

Я тут подумал давеча, что связи с появлением Audio Data API в HTML5, можно будет делать очень клевые штуки. Только представьте: различные меню, всплывающие окна, accordion’ы, notices - все это можно сопровождать различными звуками! Блин, как же классно будет :)

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

Перспективы клиентских технологий в веб

Среда, Март 17th, 2010

Откушав чаю, я тут подумал, что в связи со всеми этими новыми технологиями и фишками, такими как HTML5, canvas, SVG и скоростью выполнения JS в современных браузерах, а так же постепенным выпиливанием IE6-7 (а скоро и 8-го), будет, как мне кажется, отход от технологий flash и silverlight.

Спрашивается, почему?

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

Такой фреймворк скорее всего появится, и будет основан на технологиях Javascript, SVG и canvas. Возможно, он уже разрабатывается кем-то, но вот я пока об этом не знаю.

Я думаю, будущее именно за такой открытой технологией, в отличие от flash и silverlight - нужно ждать только появления фреймворка и развития технологий в браузерах.

UPD: Действительно, такой фреймворк уже разрабатывается. Подробнее здесь: LibCanvas - фреймворк для работы с canvas

HTML5 Tabs: a first touch

Понедельник, Декабрь 21st, 2009

HTML5 have a new, very convenient element section which is used to separate content. I tried to implement tabs using this element, because the standard solution on unordered lists (UL) or definition lists (DL) is not semantic, because the tab is not associated with his content area. Finally, one evening I did the first version, “quick and dirty”, but I tried.

So, let’s see the result: HTML5 tabs demo

These tabs have some drawbacks (fixed content area height and some others), so I accept suggestions for improvement (professionals will understand what I mean, when they’re look the sample code).

Updated at 24 dec 2009

HTML5 Tabs: Первая проба

Понедельник, Декабрь 21st, 2009

В HTML5 есть очень удобные семантичные элементы section, которые используются для разделения контента.
Я попробовал реализовать с их помощью табы, так как стандартное решение на списках UL не является семантичным. В итоге, за вечер был сделан первый вариант, что называется “быстро и грязно”, но я старался.

Итак, смотрим демо: HTML5 tabs demo

Принимаю предложения по улучшению, так как табы имеют некоторые недостатки (профессионалы поймут о чем я, когда посмотрят код примера).