JavaScript: use power of console

console.log() - is pretty nice way to display debug information without interrupting user's actions. But do you know that 'console object' has lot of other useful methods? In this article I will try to show another important method in console object.


1. power of output
most common case for using console object is:
console.log("hello word")
but here few more ways how we can use it
console.log("string1", "string2", 1, 2, {proper1:"val1", proper2: 5});
console.log("Do you know that word %s same for all language except english %s. %d < %d", "ananas", "pineapple", 1, 2);

There are few another kind of log (works same as log but has different status)
console.debug(), console.info(), console.warn(), console.error()


console.group() and console.groupEnd() allow you to format very nice output with categories, it is very usefull when you have tons of data in log so you can easy control what is related to etc.
console.group("Food")
console.group("Fruit")
console.log("Apple")
console.groupEnd("Fruit")
console.group("Vegetables")
console.log("Potato")
console.groupEnd("Vegetables")

console.groupEnd("Food")

2. power of time
just put console.time()/console.timeEnd() before/after code where you want to measure time .
Aslo there are profile methods console.profile() and console.profileEnd() which allow to see "stack".


3. power of inspection
I guess most of us often want to see specific properties in HTML fragment, for such tasks we can use console.dir(object) or console.dirxml(element)


Some usefull articles about logging: Firebug about logging and Joe Hewitts about console

Page-layout rel = «next | prev»

Along with the attribute rel = «canonical» to specify a 'search robot' to duplicate content, it is now possible to use the HTML reference value rel = "next" and rel = "prev" to indicate the position of the current page with neighbors in the navigation box. F.x. you have article splitted on 10 pages and you use next/prev buttons in order to move from one page to another. If you want to be sure that most of 'score' from 'google spider' will go to main page red="next"/"prev" is the very good options.

Here is more details about our example

www.example.com/article?id=123page=1
www.example.com/article?id=123page=2
www.example.com/article?id=123page=3
...
www.example.com/article?id=123page=10

Now about rel="next" and rel="prev"
www.example.com/article?id=123page=1
<link rel="next" href="http://www.example.com/article?id=123&page=2" />

www.example.com/article?id=123page=2
<link rel="next" href="http://www.example.com/article?id=123&page=3" />

<link rel="prev" href="http://www.example.com/article?id=123&page=1" />

www.example.com/article?id=123page=3
<link rel="next" href="http://www.example.com/article?id=123&page=4" />

<link rel="prev" href="http://www.example.com/article?id=123&page=2" />www.example.com/article?id=123page=10
<link rel="prev" href="http://www.example.com/article?id=123&page=9" />

Few notes:

• First page should have only rel=«next». 
• All pages between 1-st and last usually should have both only rel=«next» and rel="prev".
• Last page should have olny rel=«prev». 
• Allowed to use the value rel=«previous» as an alternative to rel=”prev”. Not sure if it has sence :) 
• In case if you fail with that Google will continue to index your content with own heuristic logic.

sources: View-all in search results and Page-layout rel = «next | prev»

Chrome 13 ready

Domino resolve URL with and without trailing as same URL, wrong?

We are faced with a problem (for us) with Domino. The problem is that Domino processes those 2 URL as similar same URL:

http://host/0/unid
http://host/0/unid/

the difference in 'trailing' (for those who thinks in same way as Domino :]). Well, it would be not a problem at all if you do internal staff, even very useful, problems start when we talk about SEO.

It actually affects our websites, as f.x. google 'eats' 2 URL (I mentioned above) as 2 different URL so their 'value' will be split on 2 part + 2 URL with same content also very bad as it is duplicate.

We should be able to either make 301's from the NOT CORRECT to the CORRECT URLs, or respond with a 404 (not found). Both options would be good.

Does anybody know ways how to do it?

[update from 28 October 2011] we've found solution with DSAPI filter, here you can read Solution to the trailing slash problem in Lotus Domino

How to prevent text selection

There are few ways

1. Apply 'preventDefault' for events 'onselectstart' and 'onmousedown'

var element = document.getElementById('content');
element.onselectstart = function () { return false; }
element.onmousedown = function () { return false; }

2. Add attribute 'unselectable'

$(document.body).attr('unselectable', 'on')

3. Add style 'user-select: none'

.g-unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

4. Use disabled textarea

<textarea disabled="disabled" style="border:none;color:#000;background:#fff; font-family:Arial;">
    how to prevent text selection?
textarea>

source (ru): javascript tips #2