Thomas Bassetto tbassetto

Pagination 101

Article by Faruk Ateş, [originally on KuraFire.net][original] which is currently down

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. After all, I'd say that pagination is pretty easy to get right. Alas, that doesn't seem the case, so after encouragement from Chris Messina on Flickr I decided to write my Pagination 101, hopefully it'll give you some clues as to what makes good pagination.

Before going into analyzing good and bad pagination, I want to explain just what I consider to be pagination: Pagination is any kind of control system that lets the user browse through pages of search results, archives, or any other kind of continued content. Search results are the o

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

	ּ_בּ
	בּ_בּ
	טּ_טּ
	כּ‗כּ
	לּ_לּ
	מּ_מּ
	סּ_סּ
	תּ_תּ
	٩(×̯×)۶
	٩(̾●̮̮̃̾•̃̾)۶

	// Minimalist class (className) manipulation library
	var klass = {
	has: function(elem, name) {
	return (' '+elem.className+' ').indexOf(' '+name+' ') != -1;
	},
	add: function(elem, name) {
	if(!klass.has(elem, name)) {
	elem.className += ' '+name;
	}
	},

	// ----------------------------------------------------------
	// A short snippet for detecting versions of IE in JavaScript
	// without resorting to user-agent sniffing
	// ----------------------------------------------------------
	// If you're not in IE (or IE version is less than 5) then:
	// ie === undefined
	// If you're in IE (>=5) then you can determine which version:
	// ie === 7; // IE7
	// Thus, to detect IE:
	// if (ie) {}

	// 1: how could you rewrite the following to make it shorter?
	if (foo) {
	bar.doSomething(el);
	} else {
	bar.doSomethingElse(el);
	}

	<!DOCTYPE html>

	<!-- Helpful things to keep in your <head/>
	// Brian Blakely, 360i
	// http://twitter.com/brianblakely/
	-->
	<head>

	<!-- Disable automatic DNS prefetching.

	#context-sendpage, #context-sendlink, #context-sendimage, #context-setDesktopBackground,
	#context-bookmarklink, #context-savelink, #context-searchselect,
	#context-bookmarkpage, #context-savepage, #context-sep-open, #context-sep-viewbgimage,
	#urlbar .urlbar-history-dropmarker, #star-button
	{
	display: none !important;
	}

	#urlbar-icons {
	margin-right: 2px;

	// ==UserScript==
	// @name UTM param stripper
	// @author Paul Irish
	// @namespace http://github.com/paulirish
	// @version 1.2
	// @description Drop the UTM params from a URL when the page loads.
	// @extra Cuz you know they're all ugly n shit.
	// @include http://
	// ==/UserScript==

	/* Scaled-down Backbone.js demonstration
	* By Jacob Oscarson (http://twitter.com/jacob414), 2010
	* MIT Licenced, see http://www.opensource.org/licenses/mit-license.php */
	$(function() {
	window.ulog = function(msg) { $('#log').append($('<div>'+msg+'</div>')); }

	// Faking a little bit of Backbone.sync functionallity
	Backbone.sync = function(method, model, succeeded) {
	ulog('<strong>'+method + ":</strong> " + model.get('label'));
	if(typeof model.cid != 'undefined') {

Thomas Bassetto tbassetto

Pagination 101

Sass/Less Comparison

Variables