One late night, while I was working on a web page, my wife asked why am I using a text editor and coding HTML when I can use Microsoft FrontPage. I tried to explain to her the benefits of my approach but she was not convinced. Honestly, I was not also convinced of my reasons but somehow, deep inside of me, I knew that I should not be using FrontPage or other tools that let you do it visually.

Some people see creating web pages as an activity reserved for graphic designers. For many, it makes sense for a fine arts major to become a web designer. These same people also think that website is about creating and placing pictures, assigning colors, and fonts.

Structure and Presentation

People venturing into web designs, I guess, have a choice between two roads – a presentation-oriented approach or structure-oriented approach. Not that one approach is superior to the other (I have no right to judge that) but from experience, a structure-oriented approach provides more flexibility that you will be thankful for when you started worrying about presentation.

For example, in almost all documents, whether in print or digital, there are items that appear more important than others, such as chapter title to a section heading. Any good designer would distinguish the important elements with the less important ones – make the element bold, increase its size, and change the font, for example.

My first goal is to structure the web page using HTML tags taking into account the semantics. For example, the heading tag <h1>, ideally, should be used to markup the most important heading in a web page while <h2> tag for the next important. So if I want to show importance, I decide which heading is more important then use the <h1> tag. Of course, nothing stops you from using an <h5> or a <p> tag for the page title.

A presentation-oriented approach does not make a distinction between an <h1> or <p> as long the elements appear as the designer intends to. Is there something wrong with that? A visitor would not care if your web page is constructed structurally or not. This is one major reason why there are web page designers that do not care about structure.

Structure as an element of presentation

Some may think that the two approaches do not converge, but as I have experienced, a good structure helps significantly in creating a good presentation.

First, the principle of contrast. If we are conscious in our choice of what tag to use, we are making contrast explicit in the content of our web page. In the absence of any formatting, a web browser can provide more emphasis on the important text against the less important. This is possible because the contrast is present and the browser can understand it. It may not be visually appealing at first but when you start formatting and use CSS, you will thank yourself for making structure a priority.

Another design principle is proximity, which states that related items should be close to each other. A good structure groups related elements. When you structure your content as a hierarchy of <h1>, <h2>, and so on, you are already grouping elements together. You can also use the <div> tag to group elements. In fact, using <div> is the most common and effective way of creating layouts (with some little help from CSS).

So what if it is not structured

We could create two web pages that looks exactly the same but constructed using different approaches. So where is the advantage? The well structured web page makes presentations manageable.

When you structure your web page, you separate the content from the presentation. You compose the content using only HTML tags and you prepare the layout, fonts, colors, margins, etc. using CSS. I do not deny that I lack artistic talent and that is why it is very important for me to able to try different designs and see the results as soon as possible. In programming, you should isolate things that may change from things that most likely, will not.

So how do these things answer why I do not use FrontPage?

If we are given a problem to solve, the perspective from which we view the problem affects our analysis and eventually our solution. Some have the ability to see things from various perspectives while others find it difficult to change perspective. (I guess this is why the world still have racism and religious prejudices.)

I see web page construction from a structured-oriented view. I see no need for FrontPage because a text editor and browser supports very well the approach I am taking.

Frontpage is not evil but…

I am not saying using FrontPage is evil. The purpose of a tool is to help us accomplish tasks easily, or with less effort than doing it without the tool. In the software domain, the use of WYSIWYG (What-You-See-Is-What-You-Get) and the GUI (Graphical-User-Interface) has been one of the most effective technique of making tasks simpler. There is no doubt that software like Microsoft Word has helped a lot people especially those writing documents. If you work on a computer, there is a big chance you have used Microsoft Word. Because of the experience, you would have come to expect that every software application provides a similar ability.

Of course, not all tasks is better done visually but for designing web page it makes sense if you can do it the way you would design a teaser. I will not be surprised if you find FrontPage a very useful tool because it supports very well a presentation-oriented approach.

One common mantra, especially in management domain, is “I do not care how is it done, just get it done”. FrontPage allows you to get it done and the fact that you can focus on getting it done, allows you to ignore how it is done.

Fine, FrontPage still allows you to see the HTML – to see everything that is going on behind the scenes. But that is an optional thing to do. I bet you do not have time to do it and it does not interest you. In case it interests you, there is a bigger problem. FrontPage shows you how he does it, not how it should be done properly. You, as the person, is at the mercy of FrontPage, the tool. I cannot live with that.

If you have been relying solely on FrontPage and not really learning HTML, you may come to accept that FrontPage does the correct thing. It is like the case of Dr. Evil (in Austin Powers) who have been raised by a Belgian couple to be evil and knows no good deeds.

You may say, “I do not need to know the inner workings of car, I just need to drive”. First, as I have said before, a good structure lends to a flexible design. Second, if you understand what is happening in your web pages, you have control. Control allows you to improve things, to innovate, and to fix things when they are broken. Lastly, HTML is very darn simple so the only reason I could see to skip learning proper use of HTML tags is pure laziness.

I am really a keyboard guy

Another reason why I tend not use FrontPage or similar tools is influenced by my preference to use the keyboard in almost every computing tasks that I do. As a programmer and aspiring writer, I live and breath via the keyboard.

The most popular task in computer is saving documents. While most people would use the mouse, I prefer to use the keyboard. I am not comfortable leaving the keyboard, touching the mouse and positioning the pointer over the ’save’ button. Sometimes, I would miss it and the ‘File Open’ dialog box would pop out instead.

Every time I use a new software, the first thing, I check is the ’save’ shortcut, which is often, ‘Ctrl-S’. In Windows 98, the version of Notepad has no save shortcut but the Windows 2000 and XP version have it.

I guess non-programmers would find it odd that programmers would rather use the keyboard in everything we do. The keyboard is our primary tool and we want to be masters of it.

So if you want to use FrontPage, go ahead but I encourage you to take time to learn proper HTML and consider creating a structure first for your web pages before presentation details. I also invite you to learn CSS.

If you are looking for more information, A List Apart is an excellent starting point. Dan Cenderhom’s book, Web Standards Solutions is a great book on using HTML and CSS.

The staff has developed guidelines for dealing with you and quietly passes them to new employees. “Never suggest that there might be another way of doing something,” they might say. Or “Act self-deprecating so he doesn’t feel threatened.”

#6 Employees start sucking up

You have one or two fanatical acolytes. Yes, such devotion may be a testament to your fabulousness. But often when a boss is perceived as universally loathed, the staff opportunist offers herself up as sole confidante and friend, seeking power and favor at the expense of more honest, critical employees.

#5 Your staff hides from you

You never see people walk by. Employees would rather circumnavigate the entire office to get to the coffee machine or bathroom than take the shortcut past your door and risk being invited in.

#4 Bogus reviews

Your 360-degree evaluations come back short and full of generically positive comments, with one very mild criticism (”Sometimes she works too damn hard for her own good”) thrown in for credibility’s sake.

#3 Apprehension

People don’t volunteer for your pet projects. The idea sucks, and they’re afraid to tell you, or it’s brilliant, but the consequences for letting you down are too terrible to imagine. And, of course, if it’s your pet project, you’ll probably work on it as well. Which means more time spent…gulp…with you.

#2 Former employees disappear forever

You have legions of former employees, but they rarely give your name as a reference for new jobs. Either they don’t trust you to give them their due, or they worry that because they were so miserable working for you, your recollections will also be dismal.

#1 The revolving door

You have legions of former employees, period. If your staff falls away like linty Post-it notes, ask yourself: Is high turnover the problem? Or am I?

[via Inc.]

via BusinessWeek

Given a default URL in Rails, e.g. http://cia.gov/users/123, we know as developers that this request involves the controller ‘Users’, an action ’show’, and a User with an ID ‘123′. However, Google doesn’t care about controllers actions, no ‘id’s – it only cares what the URL represents. To tell Google what the URL represents, we need to add more information like a name.

The most common approach in the Rails community is create URLs like this ‘/users/123-greg-moreno’. Hyphens are highly recommended because it is the king of word separation. To accomplish this, we modify our User model:

def to_params
  "#{id}-#{name.parameterize}"
end

I think this became prevalent because it is the easiest and involves the least amount of code. There’s no need to change all your controller code because this format, i.e ‘users/123-greg-moreno’, works well with User.find(params[:id]) thanks to Ruby’s string to numeric conversion.

>> id_s = params[:id]
=> "123-greg-moreno"
>> id = id_s.to_i
=> 123

One principle in SEO is that the relevant keywords should appear first, which is ‘name’ in our case. As an alternative, we can change our URL to ‘/users/greg-moreno-123′. Let’s see if this works.

>> id_s = params[:id]
=> "greg-moreno-123"
>> id = id_s.to_i
=> 0

This won’t work as is because Ruby looks at the first digits it can recognize. If we go by this route, we need to build a method to extract the ‘id’.

def extract_id(s)
  s.gsub(/.+-(\d+)$/, '\1') if s
end

User.find extract_id(params[:id])

This isnt’ nice because you need to make sure you call the ‘extract_id’ method every time we need the ‘id’.

What we want is a URL that is SEO-friendly and at the same time requires minimal changes to our code. My friend who maintains a site with 4M visitors a month, recommends this format ‘users/greg-moreno/123′.

This is better but it will fail because it will match the route ‘users/:id/:action’. To work around this, we need to change the format and add a new route. Before we got into the technical details, let’s discuss our goals first:

1. The URL we are preparing is for use by Google and other search engines.
2. We also expect this URL to be pasted in blogs, forums, and other websites.

The URL we are preparing is for external use. Pages that need authentication doesn’t need to be in a SEO-friendly format because after all we don’t intend Google to see them.

If you agree with me, let’s continue :)

Here are the things we need to do then.
1. Remove ‘to_params’ from our models. Use Rails’ default.
2. Create a new route to distinguish our Google-friendly URL with Rails’ default
3. Use the Google-friendly URLs in pages that we want Google to see (e.g. public forum pages)

Here’s the new route:

map.user_permalink 'u/:name/:id', :controller => 'users', :action => 'show'
# => u/greg-moreno/1

# in  template
link_to user.name, user_permalink_path(:name => user.name.parameterize, :id => user.id)

I’m sure you would be using this URL in at least one 1 page so you better move this to a helper method.

module UrlsHelper
  def permalink(object)
    case object
    when User
      user_permalink_path(user_permalink(object))
    when Book
      book_permalink_path(book_permalink(object))
    end
  end

  def user_permalink(user)
    {:name => "#{user.name.parameterize}",
     :id  => user.id,
    }
  end

  def book_permalink(book)
    # your code here
  end
end

# in your template
link_to user.name, permalink(user)

Wait, we’re not done yet. Let’s improve the code a little bit. In our UrlsHelper, we can do away with the case/when statements by checking the object’s class.

def permalink(object)
  name = object.class.name.downcase
  params = send("#{name}_permalink", object)
  send("#{name}_permalink_path", params)
end

But wait there’s more!

Wouldn’t it be nice if instead of another helper, we could just use the generated route names instead? What if we can do this?

user_path(user, :permalink => true)
# => u/greg-moreno/123
user_path(user)
# => users/123
user_path(user, :permalink => true, :sort => 'votes')
# => u/greg-moreno/123?sort=votes

That would be cool! To do this we need to dig deeper into Rails. We still use the same technique as our UrlsHelper but we need to modify Rails’s default URL generation code:

module ActionController
  class UrlRewriter
    private

    def rewrite_url_with_permalink(options)
      debugger
      if options.delete(:permalink)
        case options[:use_route]
        when :user
          options.merge!(user_permalink(options[:id]))
        when :book
          options.merge!(workspace_permalink(options[:id]))
        end
      end

      rewrite_url_without_permalink(options)
    end
    alias_method_chain :rewrite_url, :permalink

    def user_permalink(id)
      object = id.is_a?(Fixnum) ? User.find(id) : id
      { :use_route => :user_permalink,
        :name      => object.profile ? object.profile.name.parameterize : object.name.parameterize,
        :subdomain  => false
      }
    end

    def book_permalink(id)
    end
  end
end

The method ‘url_rewrite’ handles the generation of the URL after Rails has decided what route to use. For example, in ‘user_path(user, :permalink => true)’, options would have the following values:

{:action=>"show", :controller=>"user", :only_path=>true,
:permalink=>true, :id=>#<User id: 123,  name: "Greg Moreno"...>,
:use_route=>:user}

What we do then is tell Rails the route to use, i.e. :user_route => :user_permalink, and pass the extra options to generate our Google-friendly URL. If the code looks a bit strange, that’s OK. This code uses method chaining to add functionality to ‘url_rewrite’

alias_method_chain :rewrite_url, :permalink

# above line is a shortcut for 2 method aliases:

alias_method :url_rewrite_without_permalink, :url_rewrite
alias_method :url_rewrite, :url_rewrite_with_permalink

For further reading, you can check Jamis Buck’s detailed post on Rails route generation and recognition.

Limitations: This doesn’t work with nested resources and additional member/collection methods. If you have a solution, I would love to try your code :)

Update: The friendly_id plugin uses slugs and even has redirect options. subdomain_fu uses ‘url_rewrite’ to add a subdomain to your URL. You can also this approach to modify the protocol like change it to ‘https’ for some accounts.

When visitors arrive at a new website, they pause, look around, and figure out how to proceed. There are a lot of question marks in their head and as soon as your website answers them the better. Otherwise, your visitor will leave and may never come back.

Websites are difficult to use

All visitors suffer a moment of difficulty in a website. Some find it a simple annoyance while others become frustrated. Recognizing that websites are still not as easy to use like a newspaper is the right attitude when designing webpages.

Who does not want a visitor-friendly website? I’m sure you do but your actions do not say so. Too often your websites serve the needs of your company, or sometimes, even your egos. You cannot accept the truth that your visitor are finding it difficult to move around your website. This has to change.

When building the pages of your website how often do you ask yourself this question: “Am I helping my visitor with this webpage?”

We understand the pressure. Different people in an organization have different and often conflicting goals for the website. You throw up your arms and give up. Helping visitors requires fighting some fights. You may need to fight with the sales guy, the programmer, your boss, and yourself.

Yes, including yourself.

You thrust your own views upon your visitors. You want him to accept your website, your design, your creation. You want your visitor to change to satisfy you. When she does not, you call her stupid.

It is not just layout and colors

You have spent a lot of time designing the layout and choosing the right color combinations that you believe would appeal to your visitors but you forgot how to talk to them. Just like any human being on the planet we use words, not colors nor diagrams.

If you want to help your visitors, then talk to them in a language they understand. Use words and terms that are relevant to your visitors — not words only you and your friends understand. Craft your messages the way you would talk to a person face-to-face. The online world is a lonely place — your visitors need company.

Does it matter?

At one point, you have also visited a website that is inconsiderate of you. How does it feel? Don’t forget that you are a visitor, too.

However, this approach requires the server to perform the validation even for simple things like checking the length of a password. To improve response time (and thus the user experience), we use Javascript to pass some workload to the browser. For example, the popular jQuery framework has a validation plugin similar to that of Rails.

Here are the Rails and jQuery code snippets for our form validation:

validates_presence_of     :login
validates_length_of       :login,    :within => 3..40

$('#new_user').validate({
rules: {
'user[login]': {
required: true,
maxlength: 40,
minlength: 3
}
},
});

Notice the length condition of the login is repeated in Rails and jQuery, which violates the Don’t Repeat Yourself principle. To remedy this, one approach is to publish the constants from your Rails code as Javascript code. To do this, we need to refactor our model a bit and use a Rails helper method.

# User model
MIN_LENGTH = 3
MAX_LENGTH = 40

validates_presence_of     :login
validates_length_of       :login,    :within => MIN_LENGTH..MAX_LENGTH

# in your helper
def js_user_format
format = {
"MAX_LENGTH" => User::MAX_LENGTH,
"MIN_LENGTH" => User::MIN_LENGTH
}
javascript_tag "var User=#{format.to_json}"
end

Then, in your form template:

<%= js_user_format %>

This will produce the following Javascript code in your page:

<script type="text/javascript">
//<![CDATA[
var User={"MIN_LENGTH": 3, "MAX_LENGTH": 40}
//]]>
</script>

You can now improve your jQuery code:

$('#new_user').validate({
rules: {
'user[login]': {
required: true,
maxlength: User.MAX_LENGTH,
minlength: User.MIN_LENGTH
}
},
});

This is just a simple example and I bet you can extend this one. For example, if you use regular expressions with validates_format_of, you can use the same regex to validate the format of the input in jQuery.

Update: One reader had a problem including Javascript in templates using HAML. You can include Javascript in HAML templates but there should be no indentation. Otherwise, HAML would complain of “illegal nesting”. Of course, no indentation would make it harder to read your Javascript. To preserve the whitespace, you can use multiline string. I also suggest you put it in a helper to isolate your Javascript code. If you can get away with it in your helper, the better.

# in helper
def js_foo
javascript_tag <<-eos
function onAfter() {
var current = $(this).attr('id');
if (current!="") {
$('.'+current).removeClass("active", 'timeout');
}
};
eos
end

# in haml template
= js_foo

1. Make it easy to verify the accuracy of the information on your site.
2. Show that there’s a real organization behind your site.
3. Highlight the expertise in your organization and in the content and services you provide.
4. Show that honest and trustworthy people stand behind your site.
5. Make it easy to contact you.
6. Design your site so it looks professional (or is appropriate for your purpose).
7. Make your site easy to use — and useful.
8. Update your site’s content often (at least show it’s been reviewed recently).
9. Use restraint with any promotional content (e.g., ads, offers).
10. Avoid errors of all types, no matter how small they seem.

1. Ask ‘Why?’ constantly. All creativity stems from questioning why things are the way they are. The more everyday obvious a thing is, the more it needs to be questioned.
2. Always be suspicious when people say, ‘It stands to reason’. Human progress has come from those who had the courage to challenge the generally held view.
3. When working on a problem, never be satisfied with your first solution even if it seems correct. Always look for other answers.
4. Never worry about ideas that don’t work. Most ideas are like that. Just be encouraged to keep trying for a better idea.
5. Always carry a notebook for jotting down any bright ideas that you may have. Ideas come to the surface all the time but, unless they are quickly caught, will often escape and you may well find that you are quite unable to remember them later.
6. It is always easier to ask for forgiveness that to ask for permission. If you believe in your idea, you must go ahead with it at all costs. If you wait for a permission, it might never come. If you find that you are wrong, admit it frankly and then get on you with your next project.
7. Take a random word — the more ridiculous the better — and try to find a way to work it into your creative project. This exercise may seem tough and you might not see right away how it will help but if you persist you’ll be surprised at the number of original notions that suddenly pop into your mind.
8. Always look for new experiences that will stretch your mind. For example, listen to new music, read a magazine that you don’t normally look at, watch a TV documentary on a subject you know nothing about, go somewhere new, talk to new people. If you always stick to your usual routine, you make it hard for new things to influence and inspire you.
9. It is often a good idea to spend some time visualizing what you think a project will look like when it’s finished. This can sometimes show you the path from where you are now to where you will be at the end.
10. It is possible to make a trigger (such as a gesture) that you deliberately associate with creative thought. For example, you could run the tip of your index finger up and down the bridge of your nose whenever you are involved in creative thinking. When you have a bright idea, make sure that you use your trigger. Eventually, the process can be made to work the other way around, and the use of your gesture will prompt you to enter your creative mode and produce bright ideas.
11. Ask a dumb question and you may look stupid for five minutes. Fail to ask it and you will be stupid forever.
12. Always keep stirring the pot. Good ideas will float to the surface unpredictably, but for that to happen there has to be plenty of thought and action going on.
13. First the chaos; then the production of order from chaos. In this way, interesting ideas may be born.

–
From Robert Allen’s Boost Your Creativity

The short answer: No.

Einstein is a genius. Just like Newton, da Vinci, and Mozart, he belongs to a small group that very few of us will ever be part of. This is not an insult to your capacity but I’m just stating a simple truth – geniuses are born, not made.

However, you share one characteristic with these geniuses that can make you famous, too. It is called creativity.

Creativity is a human characteristic available to everyone. While there is no guarantee you’ll come with an idea as revolutionary as e=mc2, tapping into your creative capacity can help you succeed.

First, you have to accept that you are creative. Even retards exhibit some creativity. However, creativity is not something you enroll in college. It is stupid to think you can just pick a bum on the street, enroll him in Harvard, and he’ll become a genius after 4 years. Creativity needs a room to grow, encouragement, and nourishment.

Capture your ideas. Always have a pen and paper ready. If you think of something, just write it down. You can worry about whether it is good or stupid later. Unless quickly caught,  ideas will escape and you may not remember them again.

Start a project. Buy some Lego and start playing with it. You can buy a model set but don’t restrict yourself with it. How about gardening?

Work on your project regularly. Some people think they need a spark. Well, that spark will not happen if you just sit around. There is no way to predict when that spark will happen but if you regularly work on your project, you will definitely come up with something.

Happiness and creativity are partners. Have you ever met an inventor who doesn’t like what he’s doing? If you don’t enjoy what you’re doing, your force yourself into it and everything becomes a burden. If you are not enjoying your project anymore, find a new one.

This is not an exhaustive list and I’m sure there are tons of books written on this subject. Just always keep in mind that creativity is available to everyone but only those who develop their creative power can benefit from it.