Improved rendering speed

client/css/style.css

@@ -11,6 +11,12 @@ h1,
 h2 {
 	margin: 0;
 }
+ul,
+li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
 a {
 	color: #1abc9c;
 	text-decoration: none;
@@ -133,6 +139,20 @@ button::-moz-focus-inner {
 	font: 13px "Consolas", monospace;
 	height: 100%;
 }
+#chat form {
+	bottom: 0;
+	height: 35px;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+#chat form .input {
+	border: 0;
+	border-top: 1px solid #bdc3c7;
+	height: 35px;
+	padding: 0 10px;
+	width: 100%;
+}
 #chat .lobby .messages,
 #chat .query .messages {
 	right: 0;
@@ -235,27 +255,25 @@ button::-moz-focus-inner {
 	right: 0;
 	width: 160px;
 }
+#chat .users li {
+	display: table-row;
+	text-align: left;
+}
+
 #chat .users .user {
-	display: block;
 	padding: 4px 12px;
+	text-align: left;
+	width: 160px;
 }
 #chat .count {
 	background: #ecf0f1;
 	color: #aeb6bf;
 	margin-bottom: 4px;
+}
+#chat .count span {
+	display: block;
 	padding: 10px 12px;
 }
-#chat .form {
+#chat .count + li .user {
-	bottom: 0;
+	padding-top: 8px
-	height: 35px;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-#chat .input {
-	border: 0;
-	border-top: 1px solid #bdc3c7;
-	height: 35px;
-	padding: 0 10px;
-	width: 100%;
 }

client/index.html

@@ -58,51 +58,59 @@
 		{{#each windows}}
 		<div id="window-{{id}}" class="window {{type}}">
 			<div class="chat">
-				<div class="messages">
+				<ul class="messages">
-					<div class="show-more">
+					<li class="show-more">
 						<button class="btn">Show more</button>
-					</div>
+					</li>
 					{{partial "messages"}}
-				</div>
+				</ul>
-				<div class="users">
+				<ul class="users">
 					{{partial "users"}}
+				</ul>
 			</div>
-			</div>
+			<form onSubmit="return false" data-target="{{id}}">
-			<form class="form" onSubmit="return false" data-target="{{id}}">
+				<input class="input">
-				<input type="text" class="input">
 			</form>
 		</div>
 		{{/each}}
 		</script>
 		
 		<script type="text/html" class="users">
-		<div class="count">
+		<li class="count">
-			Users: {{users.length}}
+			<span>
-		</div>
+				Users:
+				{{users.length}}
+			</span>
+		</li>
 		{{#each users}}
+		<li>
 			<button class="user">
 				{{mode}}{{name}}
 			</button>
+		</li>
 		{{/each}}
 		</script>
 		
 		<script type="text/html" class="messages">
 		{{#slice messages limit=100}}
-		<div class="msg {{type}}">
+		<li class="msg {{type}}">
-
 			<span class="from">
-				<button class="user">{{from}}</button>
+				<button class="user">
+					{{from}}
+				</button>
 			</span>
 			<span class="text">
 				{{#if type}}
-				<em class="type">{{type}}</em>
+				<em class="type">
+					{{type}}
+				</em>
 				{{/if}}
 				{{{uri text}}}
 			</span>
 			<span class="time">
 				{{time}}
 			</span>
-		</div>
+		</li>
 		{{/slice}}
 		</script>
 	</div>

lib/server.js

@@ -138,6 +138,8 @@ function input(data) {
 			user = client.me;
 			client.send(args[1], text);
 		}
+		var chan = _.findWhere(network.channels, {name: args[1]});
+		if (typeof chan !== "undefined") {
 			var msg = new Msg({
 				from: user,
 				text: text,
@@ -147,6 +149,7 @@ function input(data) {
 				id: chan.id,
 				msg: msg,
 			});
+		}
 		break;
 	
 	case "notice":