CSS:
ol { counter-reset: item; }
ol li { display:block; }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }


HTML:

<ol>
  <li>
    Cities
    <ol>
      <li>
        Tallinn
        <ol>
          <li>Kesklinn</li>
          <li>Lasnamäe</li>
          <li>Mustamäe</li>
        </ol>
      </li>
      <li>
        Narva
        <ol>
          <li>Krenholmi</li>
          <li>Soldino</li>
          <li>Paemuru</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Result:

1. Cities
   1. Tallinn
      1. Kesklinn
      2. Lasnamäe
      3. Mustamäe
   2. Narva
      1. Krenholmi
      2. Soldino
      3. Paemuru

You can do so many nested lists as you want.

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});

Configuration

So let’s start with empty Rails application.
$rails test_locale

In directory APP_ROOT/config/locales/ you will find file en.yml this is file which contains all texts for English version of your application. Here in Estonia we usually make applications for 3 or more languages. So I copy en.yml and name files as locale.

en.yml – for English
en:
  hello: "Hello world"


ru.yml – for Russian
ru:
  hello: "Привет мир!"


ee.yml – for Estonian
ee:
  hello: "Tere maailm!"


Now lets do a controller for test.
test_locale$ ruby script/generate controller SayHello index

Now open view file in APP_ROOT/app/views/say_hello/index.html.erb and edit like:
<%=t :hello %>
t – function is a helper that translates the text for current locale. If locale text is missing, it will generate message that “translation is missing” it doesn’t halt your application.

Locale will pass the parameter as query_string ?locale=ru and you need to add this manually for every URL in you application, of course you don’t like to do this manually. If you want that our app looks like http://www.example.com/ru/say_hello go to APP_ROOT/config/routes.rb end add following line
map.connect ':locale/:controller/:action/:id', :controller => 'say_hello', :action => 'index', :requirements => {:locale => /ee|ru|en/}

This will set for ROOT controller too. In requirement we set all available locales to avoid people enter in URL shitty things. After you set this route, Rails will generate pretty nice URLs with link_to, link_to_remote, etc…

Now we need to a function to set locale in every controller of you application. Open APP_ROOT/app/controllers/application_controller.rb and edit:
class ApplicationController < ActionController::Base
  helper :all # include all helpers, all the time
  protect_from_forgery
  before_filter :set_locale
  def set_locale
    locale = params[:locale]
    I18n.locale = locale
    I18n.load_path += Dir[ File.join(RAILS_ROOT, 'config', 'locales', '*.{rb,yml}') ]
  end
end


If you want to setup default locale different than English(en). Open file APP_ROOT/config/environment.rb and commentate following lines (usually at the end of file) and set up default locale. For example it will be Russian:
config.i18n.load_path += Dir[Rails.root.join('config','locales', '*.{rb,yml}')]
config.i18n.default_locale = :ru


Result

Lets see what we got:
$ruby script/server

Open the URL in your browser http://localhost:3000/say_hello

Default (we set by default Russian[ru] locale)

English

Estonian

Thats all! Really isn’t hard?

Siis…

Versioon PHP by Setor
Versioon PHP 2 by MiamiBC (kõige lihtsam ja arusaadavam)
Java version by Incubo
Minu versioon Ruby keeles
Mika Tuupola versioon JavaScript

Kui sul on mingi teine versioon siis saada mulle ka

Simple plugin (basically it’s not a plugin, but widget) to show notify bar
(like on Twitter’s webpage).
It’s very simple to use:

      
$(function () {
  $.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  });
});
      
    

and to your html page stylesheet:

<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  />

$.notifyBar can pass next parameters:

See demonstration or download source.

‘Minify’ is a plugin to minify JavaScript and/or CSS code and combine it
into one file on the fly. This will increase performance of website.
So you don’t need to do dozens HTTP request for every JavaScript or CSS file.
Minify plugin is more useful and faster with Funky cache plugin.

Usage

Install the minify plugin to your Frog CMS plugins directory:

$cd /path/to/frog/plugins/
$git clone git://github.com/dknight/minify.git

Activate minify plugin

Set the settings

So next step you need to create ‘cache’ directory in your document root and make it
writable. Due to security settings most webservers doesn’t allow you to create
directories dynamically, so you need to create it manually. Create it in your DOCUMENT_ROOT/cache/ and set writtable permissions.

$mkdir /website/root/cache/
$chmod 0666 /website/root/cache/

Usage in Frog CMS

<?php
$jsFiles = array(
    '/public/javascripts/jquery-1.3.2.min.js',
    '/public/javascripts/jquery.validate.min.js',
    '/public/javascripts/jquery.form.js',
    '/public/javascripts/frog.js'
);
$cssFiles = array(
    'path/to/master.css',
    'path/to/subpage.css',
    'path/to/ie-fix.css'
);

$js_minify  = Minify::factory('js');
$css_minify = Minify::factory('css');
?>

HTML:

...
<link href="<?php echo $css_minify->minify($cssFiles, true); ?>" rel="stylesheet" type="text/css" />
...
<script type="text/javascript" src="<?php echo $js_minify->minify($files, true); ?>"></script>
...

The ‘minify’ method can pass 3 parameters:

In Internet Explorer you should setup that algorithm manually as CSS property.

img { -ms-interpolation-mode:bicubic }


So here is result, screenshot are taken in IE7 with
image scale about 50-60%.

Bicubic algorithm disabled (default)

Bicubic algorithm enabled

Read more on MSDN website about this issue.

Enabling interpolation algorithm is useful for any kind of *boxes like Fancy Box, Shadowbox, Light Box, etc…

NB! Enabling algorithms can decrease IE’s performance up 2 times!
Nice joke, BILL!

After half day of breaking brain and Google really fantastic solution for this problem, but no one of them didn’t solved our problem. So Mika found that if markup have empty src attribute, IE makes an empty request which breaks session data. So solution is simple check if there any empty src attributes and hrefs in link tag.

Was:
<img src="" alt="An image" id="img" />

You need to remove this empty attribute or if you don’t need this for javascript remove IMG tag at all.
<img src="" alt="An image" id="img" />

That’s really stupid.

This is a great solution to complete such task.

You can check how it’s work here or there (old version).

There are more tools like Webby, Nanoc and jekyll. I have didn’t tried them, but I guess the functionality is the same.