wireframe vs mock-up vs prototype

Nice and small presentation on slideshare about the key idea of those concepts and their order during UI development: http://www.slideshare.net/voutulny/wireframe-vs-mockup-why-and-when

document. Object properties

document.documentElement
References the root element of the document, in the case of HTML documents, the html element. This read only property is useful for accessing all elements on the page, such as the HEAD.

document.compatMode
The two possible values returned are "BackCompat" for Quirks and "CSS1Compat" for Strict.

document.documentMode 
IE8 only property


document.readyState
IE property. Supported in Opera 9+, Chrome, and FF 3.6+ as well.

Returns the loading status of the document. It returns one of the below 4 values:
 

uninitialized	The document hasn't started loading yet.
loading	The document is loading.
interactive	The document has loaded enough whereby user can interact with it.
complete	The document has fully loaded.

See also:
Defining Document Compatibility : http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

DOM Document Object properties: http://www.javascriptkit.com/domref/documentproperties.shtml

blinking loader with javascript

Recently saw a pretty simple ajax-loading image on workopolis.com. It's shown to visitors below the article text while comments are loading. For example you can see it in this article.

Here it is a easy gif file: 

So i decided to do the same with only html and javascript. 
And here is a JSFiddle - http://jsfiddle.net/a7bkU/44/

Actually the parameter in setTimeout call in drawLoader function is a bit tricky - one should play with it a little to customize it to fit a number of blinking circles. In other words, it must be small enough not to make all circles blink at the same time.

HTML
<div class="loading"></div>​

CSS
.load-circle {
    padding:8px;
    background:#666;
    border-radius: 10px;
    display:inline-block;
    margin:5px;
}
.loading {
 margin:10px;
 padding:10 20px;
}
​
JS
drawLoader(3, $('.loading'));

function drawLoader(n, element) {
    //draw loading circles
    for (i=0; i<n; i++) {
        $(element).append('<div class="load-circle" />');
    }
    //for each start a blink action with apropriate time lag
    $.each(jQuery('.load-circle'), function(index, item){
        setTimeout(function(){
            blinker.call(item, true);    
        }, index*400);
    });
}

function blinker(dir){
    //needed for recursive calls
    //knowing in which direction
    if(dir) {
        $(this).animate({opacity: 0.25}, 800, function(){
            blinker.call($(this), !dir);
        })    
     } else {
         $(this).animate({opacity: 1}, 800, function(){
            blinker.call($(this), !dir);
        })     
     }
}

как надо и как не надо писать в jQuery

В целом статья для начального уровня, но изложение без нервов и понятное.

Отсюда: http://habrahabr.ru/post/149237/

1. Обработчики событий групп элементов

неэкономично, неправильно
$('.comment a.delete').click(function(){ // });

правильно, метод .on c jQuery 1.7
$('body').on('click', 'a.external', function(e) { // });

2. Ajax вызовы

неправильно, путаница
$.post(url, data, function(data) { // }, 'json').error(function() { /// });

вариант решения с общим обработчиком ошибок
$.ajaxSetup({ error: function() { // } });

читаемый и понятный вариант
$.ajax({ type: "POST" url: url, data: data, dataType: "json", success: function(data) { // }, error: function() { // } })

3. Namespaced events - если нужно независимо добавлять и удалять обработчики на один и тот же элементhttp://docs.jquery.com/Namespaced_Events

велотреки за прошедшие 2 недели

блоки кнопок-переключателей - Segmented Radio Buttons

Такой тип контролов с сгруппированными кнопками, выполняющими роль переключателей/фильтров имеет четкое название - Segment Control в iOS или вообще в среде разработчиков проектировщиков называется Segmented Radio Buttons. Такую функциональность можно реализовать out of the box в:
 jQuery UI : Buttons with checkbox - http://jqueryui.com/demos/button/#checkbox
делается с помощью такого кода:

 $('#SELECTOR').buttonset();

<div id="SELECTOR">
<input type="checkbox" id="check1" /><label for="check1">One</label>
<input type="checkbox" id="check2" /><label for="check2">Two</label>
<input type="checkbox" id="check3" /><label for="check3">Three</label>
</div>

А готовые наборы прототипов для верстки веб-интерфейсов предлагают готовое решение лишь для отображения таких блоков, но за их реакцией на действия пользователя и внешним видом пока придется следить самим.

• Twitter Bootstrap - http://twitter.github.com/bootstrap/components.html
• HTML Kickstart - www.99lime.com/elements/