Derby app improvements

- Update dependencies
- Improve readme
- Convert to tabs
- Code style
- CSS simplification
- Quotes
- and more

labs/architecture-examples/derby/README.md

-# Derby.js TodoMVC app
+# Derby TodoMVC app
+
+> MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.
+
+[Website](http://derbyjs.com)
+
 
 ## Getting started
 
-[NodeJS](http://nodejs.org) (>= 0.8.0) is required to run this app.
+[Node.js](http://nodejs.org) (>=0.8.0) is required to run this app.
+
+
+### Run the app
 
-## Run the app
 `make run`
 
-This will install the dependencies locally, compile the coffeescript and run
+This will install the dependencies locally, compile the CoffeScript and run
 the demo server for you.
 
-## Play with the code
-In one window, run `make` which will continue to compile the coffeescript as
-you save changes. In a separate window run `node server.js` and open up the
-shown URL.
 
+### Play with the code
 
-## TODO
- * PROBLEM: Add ie.js - I've added the include to the template, but it
-   obviously gets stripped out due to the comments, plus Nate mentioned that
-   there's work needing to be done for ie < 10.
- * QUESTION: Check with derby folk whether there's a better way to do the filtering while still using a route, and other improvements.
+In one window, run `make` which will continue to compile the CoffeScript as
+you save changes. In a separate window run `node server.js` and open up the
+shown URL.

labs/architecture-examples/derby/package.json

 {
-  "name": "todomvc-derby",
-  "description": "TodoMVC todo app using Derby",
-  "version": "0.1.0",
-  "main": "./server.js",
-  "dependencies": {
-    "derby": "0.3.13",
-    "express": "3.0.0beta4",
-    "gzippo": ">=0.1.4"
-  },
-  "private": true,
-  "devDependencies": {
-    "coffee-script": ">=1.3.1"
-  }
+	"name": "todomvc-derby",
+	"description": "TodoMVC todo app using Derby",
+	"version": "0.1.0",
+	"main": "server.js",
+	"dependencies": {
+		"derby": "~0.3.13",
+		"express": "~3.0.1",
+		"gzippo": "~0.2.0"
+	},
+	"devDependencies": {
+		"coffee-script": "~1.4.0"
+	},
+	"private": true
 }

labs/architecture-examples/derby/styles/404.styl

-@import "./base";
+@import './base';

labs/architecture-examples/derby/styles/todos/index.styl

@@ -42,17 +42,9 @@
 	text-decoration: line-through;
 }
 
-section.empty-list, footer.empty-list {
-	display: none;
-}
-
-section.empty-list #toggle-all {
-	display: none;
-}
-button#clear-completed.non-completed {
-	display: none;
-}
-
+section.empty-list, footer.empty-list,
+section.empty-list #toggle-all,
+button#clear-completed.non-completed,
 #todo-list li.editing input.toggle,
 #todo-list li.editing button.destroy {
 	display: none;

labs/architecture-examples/derby/styles/ui.styl

 .connection {
-  position: absolute;
-  text-align: center;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 0;
-  z-index: 99;
+	position: absolute;
+	text-align: center;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 0;
+	z-index: 99;
 }
 .connection > .alert {
-  background: #fff1a8;
-  border: 1px solid #999;
-  border-top: 0;
-  border-radius: 0 0 3px 3px;
-  display: inline-block;
-  line-height: 21px;
-  padding: 0 12px;
+	background: #fff1a8;
+	border: 1px solid #999;
+	border-top: 0;
+	border-radius: 0 0 3px 3px;
+	display: inline-block;
+	line-height: 21px;
+	padding: 0 12px;
 }

labs/architecture-examples/derby/ui/connectionAlert/index.js

 exports.connect = function() {
-  model = this.model
-  // Hide the reconnect link for a second after clicking it
-  model.set('hideReconnect', true)
-  setTimeout(function() {
-    model.set('hideReconnect', false)
-  }, 1000)
-  model.socket.socket.connect()
-}
+	var model = this.model;
+	// Hide the reconnect link for a second after clicking it
+	model.set('hideReconnect', true);
+	setTimeout(function() {
+		model.set('hideReconnect', false);
+	}, 1000);
+	model.socket.socket.connect();
+};
 
 exports.reload = function() {
-  window.location.reload()
-}
+	window.location.reload();
+};

labs/architecture-examples/derby/ui/index.js

-var config = {
-  filename: __filename
-, styles: '../styles/ui'
-, scripts: {
-    connectionAlert: require('./connectionAlert')
-  }
-};
-
-module.exports = ui
-ui.decorate = 'derby'
-
 function ui(derby, options) {
-  derby.createLibrary(config, options)
+	derby.createLibrary({
+		filename: __filename,
+		styles: '../styles/ui',
+		scripts: {
+			connectionAlert: require('./connectionAlert')
+		}
+	}, options);
 }
+
+module.exports = ui;
+ui.decorate = 'derby';

labs/architecture-examples/derby/views/todos/index.html

 <Head:>
-	<link href=/base.css rel=stylesheet>
+	<link href="/base.css" rel="stylesheet">
 
 <Title:>
   DerbyJS • TodoMVC
@@ -14,7 +14,7 @@
 		<section id="main" class="{#unless _list.shown}empty-list{/}">
 			<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
 			<label for="toggle-all">Mark all as complete</label>
-			<ul id=todo-list>{#each _list.shown}<app:todo>{/}</ul>
+			<ul id="todo-list">{#each _list.shown}<app:todo>{/}</ul>
 		</section>
 
 		<app:todoFooter>
@@ -24,13 +24,13 @@
 <todoHeader:>
 	<header id="header">
 		<h1>todos</h1>
-		<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" autofocus value={_newTodo}></form>
+		<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" value={_newTodo} autofocus></form>
 	</header>
 
 <todo:>
 	<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
 		<div>
-			<input class="toggle" type="checkbox" checked={.completed}>
+			<input class="toggle" type="checkbox" checked="{.completed}">
 			<form x-bind=submit:submitEdit>
 				<input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
 			</form>
@@ -59,9 +59,8 @@
 
 <info:>
 	<footer id="info">
-		<h3>Open this <a href="/{{_groupName}}">ToDo list</a> in another browser, or share it with a friend to collaborate!</h3>
+		<h3>Open this <a href="/{{_groupName}}">app</a> in another browser, or share it with a friend to collaborate!</h3>
 		<p>Click on a todo to edit</p>
-		<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
 		<p>Created by <a href="http://micknelson.wordpress.com">Michael Nelson</a> and <a href="https://github.com/lackac">László Bácsi</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>