Don't waste hours like I did trying to figure it out.

Pass in a 'width' argument to the HTMLEditor constructor. That did it for me.

Using ExtJS 3.2.1.

This tutorial covers building a web application from scratch using Rails with the styled_objects plugin.

As an example we will be building a very static front-end website, mainly to focus on stylesheets.

Everything you get from can be applied to more complex applications.

Because this is such a simple application, we won't be using scaffolding generators.

About styled_obejcts

styled_objects is a Rails plugin for simplifying stylesheet management on your application.

Instead of having one or more large stylesheets on your public folder, have many. Keep your CSS close to their respective templates. styled_objects will compile them into one file per page.

Getting started

1. Bootstrap your Rails app

$ rails testapp

2. Install the LESS gem:

Edit your config/environment.rb and place, anywhere before the "end":

config.gem 'less'

Run on the shell:

$ sudo rake gems:install

2. install the styled_objects plugin

script/plugin install git://github.com/pgte/styled_objects.git

The application

Here we will be building a simple example application for an e-commerce website.
First we will be focusing on building the controllers and the views, and finally we will learn how to style them with styled_objects.

To start we will be having products and product categories. One product can be in many categories and one category can contain many products. So, it is a many-to-many relationship.

For the sake of simplicity, let's say a product has a name and a description.

Each category have a name.

(I won't go through the building of the models, it's beyond the scope of this tutorial).

Product page

After you have your migrations and models setup, we need to configure the routes for our products controller.

Edit your config/routes.rb and add:

map.resources :products

Now build the controller under app/controllers/products_controller.rb. For now we will only have a "show" action:

class ProductsController < ApplicationController

  def show
    @product = Product.find(params[:id])
  end

end

Do the show template  under app/views/products/show.html.erb:

<h1><%= h @product.name %></h1>
<p><%= h @product.description %></p>

Category page

On this page we will be presenting all products on the current category.

Build the product category routes ou config/routes.rb:

config.resources :categories

Next, build the controller under app/controllers/categories_controller.rb:

class CategoriesController < ApplicationController

  def show
    @category = Product.find(params[:id], :include => :products)
  end

end

And the view under app/views/categories/show.html.erb:

<h1><%= h @category.name%></h1>

<p>products in this category:</p>

<%= render :partial => 'products/product', :collection => @category.products %>

This template is a bit more complex than the product show one because it presents all the products inside the current category by calling the products/_product.html.erb partial for each product.

Let's do this partial (under app/views/products/_product.html.erb):

<h2><%= link_to h(product.name), product_path(product) %></h2>
<p><%= h truncate(product.description) %></p>

Here, instead of presenting the full product description, we truncate it using the ActionView truncate helper, presenting only the first 30 characters of the product description.

Styling up

So, now that we have the category and product pages in place, we need to style them.

But first we need to style the whole website.

Global styling

Personally, I feel comfortable with using this folloing setup when starting a website, but it is not a requirement for styled_objects. (We haven't got there yet).

Reset stylesheet

There are numerous reset stylesheets out there. I particulary like the one bundled inside blueprint CSS.

So, grab a copy of blueprint and extract the blueprint/src/reset.css file and copy it into public/stylesheets/ directory.

Next, edit your app/views/layouts/application.html.erb and add the following line before the </head> tag:

<%= stylesheet_link_tag 'reset' %>

Typography sytlesheet

This is where we add a special stylesheet only for defining your typography. This is where you will be styling your p, a, ul, li, table, etc. tags.

This is your job, but I like to start from the blueprint/src/typography.css bundled on blueprint.

Save this file into public/stylesheets and add the respective the stylesheet link tag right after the reset one:

<%= stylesheet_link_tag 'reset' %>
<%= stylesheet_link_tag 'typography' %>

This stylesheet you will be formatting according to the desired look of your website.

Layout stylesheet

Before building a layout stylesheet, you need to build your layout markup. This will be done inside app/layouts/application.html.erb :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<%= javascript_include_tag 'jquery-1.3.2.min' %>
		<%= stylesheet_link_tag 'reset' %>

	</head>
	<body>
      <div class="container">
        <div id="header"><h1>Welcome to ACME</h1></div>
        <div id="main">
          <%= yield %>
        </div>
      </div>
	</body>
</html>

So, on inside our HTML body tag we have a div tag with a "container" class. This "container" class will be used to center and fix the width of our content.

This is what goes inside the layout stylesheet, under public/stylesheets/layout.css:

.container {
  width: 950px;
  margin: 0 auto;
}

So, we are setting the width of content area of our website and centering it.

A lot more could be done here, like styling the header div. This also should be done on the layout stylesheet.

The main idea here is: use the layout stylesheet to only style markup on the layout template. Don't style more than that here.

Local styling

Now we want to style our templates and partials individually. That's where styled_objects comes in.

This plugin allows you to define the styles per template or partial wiathout adding any code.

First we need to call this helper on the app/views/layouts/application.html.erb file:

<%= so_stylesheet_link_tag %>

Place it right before the </head> tag. This helper creates the link tag to the URL for the "glued" stylesheet of each page.

We now begin with the product show page.

Create app/views/products/show.css and edit it.

We want to style the title and the description:

background-color: #e0e0e0;
h1 {color: #f576d8; border-bottom: 1px solid #822321};
p {padding: 1em 0; background-color: #fff;, border-top: 1px solid #d6d6d6}

On the first line we see something that isn't pure CSS: the background color style declared on the root of the CSS document. That's there because we are styling the show.html.erb template, not any sub node.

Now we want to style the product category page.

Create app/views/categories/show.css:

border-top: 5px solid black;
background-color: #f7f7f7;
h1 {letter-spacing: -2px; color: #3e3e3e}

Here we're giving the category show template a top border (line 1), a background-color (line 2) and we're also styling the title on line 3.

This category show template also shows the products and for that it uses the products/_product.html.erb partial.

We also wish to style this partial. Create the file app/views/products/_product.css:

background-color: #999;
border: 1px solid #333;
float: left;
h2 {text-transform: uppercase}

AJAX loading

So, styled_objects collects the needed CSS fragments on each page and constructs one URL that references all the "glued" CSSes.

What if I want to have a shopping basket partial that is called by AJAX instead of normal partial rendering inside a template?

Simple: just add <%= so_include_partial(partial_path) %> (or <%= so_include_template(template_path) %> if it's a template) to anywhere on the calling template. The partial CSS will be included.

Next: See the Advanced styled_objects on Rails Tutorial

More

Read more about object-oriented CSS here:

• Object-oriented CSS by stubbornella

See the presentation video:

• Object-oriented CSS by stubbornella

Other resources

• LESS syntax
• styled_objects Rails plugin
• blueprint CSS framework

styled_objects is a Rails plugin for simplifying stylesheet management on your application.

Instead of having one or more large stylesheets on your public folder, have many. Keep your CSS close to their respective templates. styled_objects will compile them into one file per page.

Why do I need styled_objects?

Because It’s hard to keep order on your application. Having one or many big stylesheet files is not easy. It’s hard do build, maintain and debug.

Do object-oriented stylesheets. Each presentation object has its own style definitions. With styled_objects everything is where expected.

You also make your stylesheets independent from each other, making it easier to find problems extend your app.

» Check out this presentation for a full pitch on OOCSS (Object-Oriented CSS).

Check out http://wiki.github.com/pgte/styled_objects

But maintaining cache consistency across a distributed Rails application can be challenging.

When page caching, Rails writes page result in a static file on the public folder (when using the default options), allowing the web server to serve it directly.

Expiring cache

Cache expiration must be done explicitly by your app using the expire_page command. This should be done when changes are made to your model (creations, deletions and updates), and should affect one or more pages, depending on your app. The cache expiration should be placed on model sweepers, as explained here.

Distributed environment

What about whenu  you are using more than one box for serving your Rails app? When one box calls ethe expire page command, it only cleans the local cache, rendering the other boxes cache remain inconsistent.

Solutions

There are several solutions to this. Let's look at them:

1. dRb cache store

dRb (or distributed Ruby) cache store uses a singleton process to communicate your cache decisions. This is not a good solution because:

• there is a single point of failure: the dRb process
• web servers generally can't talk to dRb. even if they could, serving static files locally is much faster

2. Memcache Store

Using a memcached service is one good solution. Memcached can be use clustering and load balancing, and it is pretty fast. But, if you are using a distributed Rails environment mainly for the sake of redundancy, or don't want to complicate the environment setup, don't use memcache store.

3. Cron-based expiration

You can expire cache on a scheduled basis. This can be enough for some applications. But for some, specially when you have to keep a tight  cache consistency, this is not enough

4. Build your own distributed cache cleaning

In this solution, your model cache sweepers are responsible for cleaning the cache (deleting page cache files) on the other machines.

But how does one machine contact the other machines?

One solution I came up with envolves every machine having a Mongrel server listening on a public TCP port. (When I say public,. mean accessible to the other machines on the cluster. This is not a service that you  want to be public on the internet) .

This HTTP service is there just to listen to cache expiration events. It accepts, as arguments, the paths of the page cache

Security concerns

This service can be implemented on your Rails app, but it should not be accessible to

Drawbacks

There are several problems with this aproach:

1. Every machine must know each other

In order for one machine to contact each other when expiration must occur, every machine must know the other machines. This can be challenging using Rails config, but can be done in Capistrano tasks.

2. It does not scale well

Every time you add a machine you are increasing the cache expiration cost.

3. Fault tolerance

When you expire a cache page, you must contact EVERY other box. If the cache expiration service of one box is down, the cache expiration will fail. Error handling must be done carefully, having a fall-back mechanism like putting the cache expiration command on a queue.

A better solution

One better solution is to make cache expiration events ASYNCHRONOUS. When expiring a page, an event is triggered, and every other box is listening on this channel.

This can be achieved using UDP broadcasts, and having every box listening on this UDP port.

Drawbacks (again)

A fall-back mechanism must be in place, though, in case one box is down during the cache expiration event, rendering the cache inconsistent.

This can be done using some kind of persistent message queue instead of UDP broadcasts, but I think this can be an overkill for most applications.

Expect to hear from me soon regarding the implementation of this solution!

Search engines want to crawl the web faster, and website owners want their users to have a good navigation experience which includes fast page loading.

Both Google and Yahoo say approximately the same regarding techniques for optimizing page load and rendering speed. I am not going to go through each one of them, it's not the point. Let me just tell you my experience regarding the implementation of these rules.

1. It's not that hard

It's not so hard to implement these rules. Any savvy web developer should have no trouble setting up gzip compression or the page cache.

If you think it's hard, you should not be doing deployments. No more weak sauce 25th hour deployments, please!

2. You should plan it ahead

When planning for a new website or a website revamping, you should discuss and establish the performance goals with the team building it.

These are the minimal list of things I think should be established beforehand:

• Maximum total page weight for empty cache - what is the sum in bytes of all the page elements, including HTML, CSS, javascript, images, flash movies, etc?
• Maximum total page weight for primed cache - the same as above, but when the customer is reloading a page shortly after.
• Static files should have a very long expiration dateur
• What should be the cache expiration time for dynamic content?
• How many HTTP requests the browser will make for empty and primed cache?

Remember: this is a negotiation, not an imposition. The more complex your webpage design is, the more it will weight. Balance your design with webpage size, reach an agreement on these values, and write them down.

YSlow (which is a tool for measuring website performance) grades webpages according to some conventions on good practices. For an even more aggressive approach, aim for a good YSlow grade!

3. you should audit it

There are many tools for building performance grades on your website pages. I use YSlow for Firebug, but there is a list of others here. Anyone can use them, and they produce quite comprehensive graphics and stats on your webpage performance.

Check and recheck these stats against what was previously decided.

Back to reality

Not many companies know their homepage total weight, or their YSlow grade. Many big portals have poor grades, and can be fairly improved. Why don't they? I think it's because usually Marketing people lead website projects (which is good), they measure clicks, conversion rates, etc., but they lack the tools and knowledge to measure it's performance.

Website owners, please be at least as demanding on page loading and rendering speeds as you are with design and content quality. Please make the web faster.

Everyone in the Marketing department is concerned about metadata, keyword density, and all the other recommended metrics to quantify you content SEO, but, for the most part, their website implementation lacks at least one part of something that I call Structural SEO.

What is structural SEO?

Structural SEO is the SEO that one can provide on the software side. It sets the base for the content writer, maximizing search engine indexability.

Minimal key features of structural SEO are:

Page titles

Page titles should vary according to content since it is a very good place to have important keywords.

In my opinion, they should also include the website name and navigation context, but not too much of it, and the content title should always come in first.

Example of a title:

Structural SEO < SEO < metaduck

Headings and styling

Content should be organized in headings. For that, content management people should have CSS stylesheets in place so that no additional formatting is required when entering content. Too much formatting using markup hurts SEO. Content should be only content.

As an example, when producing content templates or layouts, I always put the website title inside a <h1> tag.

Content title is next, which shold have it's own h2 title, and content subtitles should be inside h3, etc.

Accessibility on navigation

Navigation menus should not be javascript or flash dependent. This sounds simple, but there are still a lot of old and new websites out there implementing dynamic menus that are unreadable by the search engines.

Javascript is ok, but you should have the browser fallback on plain HTML. Your menu should work when the browser has javascript disabled.

Proeminence on navigation

Important navigation links should be placed as early as possible on content so that they are more relevant to the search engines.

Image titles and alts

All static images should have relevant alt and title attributes, and the content management tools should facilitate (and impose) filling these in.

Search-engine-friendly URLs

URLs should be minimal, but provide enough information on the content. For me, wordpress-style URLs are the way to go.

Example for the URL of a page with the title "Structural SEO":

http://mydomain.com/structural-seo

That's it. No file extensions, no unnecessary arguments, no query string. Words are well separated.

Several products / frameworks allow this, and several make it very hard to implement, specially when using Microsoft ones.

My choice ones are Wordpress (for small websites) and Ruby on Rails routing configuration (for larger websites and applications).

Conclusion

If you are running a website development project, please have these considerations in mind before the building phase starts.

If possible, before contracting anyone for building a website, ask what he can do technically to maximize SEO. These should be their minimal concerns.