Aran w3aran

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

First couple things I thought about when migrating after reading the docs

So migrating my existing app wasn't as troublesome as I originally thought. First thing I did was take a look at my router and routes and figure try to make a mental model of all the files where I had nested routes in the existing app because those components/containers will contain {this.props.children}. So I need to replace those with the nested <Match /> components.

So just to give an example:

In v2:

<Router history={history}>
  <Route path="/" component={App}>

A top-level App component returns <Button /> from its render() method.

What is the relationship between <Button /> and this in that Button’s render()?
Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?
Can the App change anything in the Button output? What and how?

Counter Examples

Moved to omg-counters

This is a collection of increment/decrement counters using various frontend frameworks.

The increment/decrement counter is the step between a hello world example and a todo app. Please note that the examples are supposed to be as minimal as possible.

So far we have the following:

	<!DOCTYPE html>
	<html>
	<head>
	<meta content="Hans-Peter Buniat" name="author">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Form-Submit Popunder</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	</head>
	<body>
	<form id="testSubmit" action="http://www.google.com">

	{
	"USD": {
	"symbol": "$",
	"name": "US Dollar",
	"symbol_native": "$",
	"decimal_digits": 2,
	"rounding": 0,
	"code": "USD",
	"name_plural": "US dollars"
	},

	# Idempotent way to build a /etc/hosts file with Ansible using your Ansible hosts inventory for a source.
	# Will include all hosts the playbook is run on.
	# Inspired from http://xmeblog.blogspot.com/2013/06/ansible-dynamicaly-update-etchosts.html

	- name: "Build hosts file"
	lineinfile: dest=/etc/hosts regexp='.*{{ item }}$' line="{{ hostvars[item].ansible_default_ipv4.address }} {{item}}" state=present
	when: hostvars[item].ansible_default_ipv4.address is defined
	with_items: groups['all']

	if [type] == 'elb-access-log' {
	grok {
	patterns_dir => "./patterns"
	# Different elastic-access-log patterns. look for _grokfailure tag in kibana and keep adding patterns here.
	match => [ "message" , [
	"%{IPORHOST:elbIp} \(%{IPORHOST:clientIp}, %{IPORHOST:elbip1}\) - - \[%{HTTPDATE:timestamp}\] \"%{WORD:verb} %{NOTSPACE:request} HTTP/%{NUMBER:httpversion}\" %{NUMBER:response} %{NUMBER:bytes} %{QS:referrer} %{QS:agent}",
	"%{IPORHOST:elbIp} \(%{IPORHOST:clientIp}, %{IPORHOST:elbip1}\) - - \[%{HTTPDATE:timestamp}\] \"%{WORD:verb} %{NOTSPACE:request} HTTP/%{NUMBER:httpversion}\" %{NUMBER:response} - \"-\" %{QS:agent}",
	"%{IPORHOST:elbIp} \(%{IPORHOST:clientIp}, %{IPORHOST:elbip1}\) - - \[%{HTTPDATE:timestamp}\] \"%{WORD:verb} %{NOTSPACE:request} HTTP/%{NUMBER:httpversion}\" %{NUMBER:response} %{NUMBER:bytes} \"-\" %{QS:agent}",
	"%{IPORHOST:elbIp} \(%{IPORHOST:clientIp}, %{IPORHOST:clientIp1}, %{IPORHOST:elbip1}\) - - \[%{HTTPDATE:timestamp}\] \"%{WORD:verb} %{NOTSPACE:request} HTTP/%{NUM

	// general update
	sudo apt-get update

	// general upgrade
	sudo apt-get upgrade

	// install midnight commander
	sudo apt-get install mc

	// install git

	import React, { Component } from 'react'
	import Subapp from './subapp/Root'

	class BigApp extends Component {
	render() {
	return (
	<div>
	<Subapp />
	<Subapp />
	<Subapp />