socketstream app - various tweaks

labs/architecture-examples/socketstream/.gitignore

 node_modules
+/client/code/libs

labs/architecture-examples/socketstream/app.js

 var http = require('http');
 var ss = require('socketstream');
+var PORT = process.env.PORT || 3000;
 
 // Define a single-page client
 ss.client.define('main', {
 	view: 'app.html',
 	css: ['base.css'],
 	code: [
-		'libs/jquery/jquery.js',
 		'libs/todomvc-common/base.js',
+		'libs/jquery/jquery.js',
 		'app'
 	],
 	tmpl: '*'
@@ -28,7 +29,8 @@ if (ss.env === 'production') {
 
 // Start web server
 var server = http.Server(ss.http.middleware);
-server.listen(3000);
+server.listen(PORT);
 
 // Start SocketStream
 ss.start(server);
+console.log('Started server on http://localhost:' + PORT);

labs/architecture-examples/socketstream/bower.json

 {
 	"name": "todomvc-socketstream",
-	"version": "0.0.0",
 	"dependencies": {
-		"jquery": "~1.9.1",
-		"todomvc-common": "~0.1.3"
+		"todomvc-common": "~0.1.9",
+		"jquery": "~2.1.0"
 	}
 }

labs/architecture-examples/socketstream/client/code/app/entry.js

@@ -17,10 +17,8 @@
 	ss.server.on('ready', function () {
 		// Wait for the DOM to finish loading
 		$(function () {
-
 			// Load app
 			require('/app');
-
 		});
 	});
 })();

labs/architecture-examples/socketstream/client/css/base.css

@@ -14,7 +14,6 @@ button {
 	font-family: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	/*-moz-appearance: none;*/
 	-ms-appearance: none;
 	-o-appearance: none;
 	appearance: none;
@@ -34,6 +33,11 @@ body {
 	font-smoothing: antialiased;
 }
 
+button,
+input[type="checkbox"] {
+  outline: none;
+}
+
 #todoapp {
 	background: #fff;
 	background: rgba(255, 255, 255, 0.9);
@@ -61,7 +65,7 @@ body {
 	font-style: italic;
 }
 
-#todoapp input:-moz-placeholder {
+#todoapp input::-moz-placeholder {
 	font-style: italic;
 	color: #a9a9a9;
 }
@@ -100,9 +104,6 @@ body {
 	background: #8d7d77;
 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
 	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
 	border-top-left-radius: 1px;
@@ -123,7 +124,6 @@ body {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-ms-box-sizing: border-box;
 	-o-box-sizing: border-box;
@@ -159,7 +159,8 @@ label[for='toggle-all'] {
 	left: -4px;
 	width: 40px;
 	text-align: center;
-	border: none; /* Mobile Safari */
+	/* Mobile Safari */
+	border: none;
 }
 
 #toggle-all:before {
@@ -214,9 +215,9 @@ label[for='toggle-all'] {
 	top: 0;
 	bottom: 0;
 	margin: auto 0;
-	border: none; /* Mobile Safari */
+	/* Mobile Safari */
+	border: none;
 	-webkit-appearance: none;
-	/*-moz-appearance: none;*/
 	-ms-appearance: none;
 	-o-appearance: none;
 	appearance: none;
@@ -224,7 +225,8 @@ label[for='toggle-all'] {
 
 #todo-list li .toggle:after {
 	content: '✔';
-	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	/* 40 + a couple of pixels visual adjustment */
+	line-height: 43px;
 	font-size: 20px;
 	color: #d9d9d9;
 	text-shadow: 0 -1px 0 #bfbfbf;
@@ -238,15 +240,13 @@ label[for='toggle-all'] {
 }
 
 #todo-list li label {
+	white-space: pre;
 	word-break: break-word;
-	padding: 15px;
+	padding: 15px 60px 15px 15px;
 	margin-left: 45px;
 	display: block;
 	line-height: 1.2;
 	-webkit-transition: color 0.4s;
-	-moz-transition: color 0.4s;
-	-ms-transition: color 0.4s;
-	-o-transition: color 0.4s;
 	transition: color 0.4s;
 }
 
@@ -267,9 +267,6 @@ label[for='toggle-all'] {
 	font-size: 22px;
 	color: #a88a8a;
 	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	-o-transition: all 0.2s;
 	transition: all 0.2s;
 }
 
@@ -277,9 +274,7 @@ label[for='toggle-all'] {
 	text-shadow: 0 0 1px #000,
 				 0 0 10px rgba(199, 107, 107, 0.8);
 	-webkit-transform: scale(1.3);
-	-moz-transform: scale(1.3);
 	-ms-transform: scale(1.3);
-	-o-transform: scale(1.3);
 	transform: scale(1.3);
 }
 
@@ -387,6 +382,7 @@ label[for='toggle-all'] {
 	Hack to remove background from Mobile Safari.
 	Can't use it globally since it destroys checkboxes in Firefox and Opera
 */
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 	#toggle-all,
 	#todo-list li .toggle {
@@ -403,12 +399,158 @@ label[for='toggle-all'] {
 		width: 65px;
 		height: 41px;
 		-webkit-transform: rotate(90deg);
+		-ms-transform: rotate(90deg);
 		transform: rotate(90deg);
 		-webkit-appearance: none;
 		appearance: none;
 	}
 }
 
-.hidden{
-	display:none;
+.hidden {
+	display: none;
+}
+
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	-webkit-transition-property: left;
+	transition-property: left;
+	-webkit-transition-duration: 500ms;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+
+	.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
 }

labs/architecture-examples/socketstream/client/views/app.html

@@ -16,14 +16,11 @@
 			<label for="toggle-all">Mark all as complete</label>
 			<ul id="todo-list"></ul>
 		</section>
-		<footer id="footer">
-			<span id="todo-count"><strong>0</strong> item left</span>
-			<button id="clear-completed">Clear completed</button>
-		</footer>
+		<footer id="footer"></footer>
 	</section>
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
-		<p>Created by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
+		<p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
 </body>

labs/architecture-examples/socketstream/package.json

 {
-	"name": "todos",
+	"name": "todomvc-socketstream",
 	"description": "SocketStream TodoMVC app",
-	"version": "1.0.0",
 	"author": {
 		"name": "Sindre Sorhus",
 		"email": "sindresorhus@gmail.com",
@@ -9,14 +8,14 @@
 	},
 	"private": true,
 	"engines": {
-		"node": ">=0.6.0"
+		"node": ">=0.10.0"
 	},
 	"scripts": {
 		"start": "node app.js"
 	},
 	"dependencies": {
-		"socketstream": "0.3.x",
-		"ss-stylus": "0.1.x",
-		"ss-hogan": "0.1.x"
+		"socketstream": "~0.3.10",
+		"ss-stylus": "~0.1.8",
+		"ss-hogan": "~0.1.3"
 	}
 }

labs/architecture-examples/socketstream/server/rpc/todos.js

@@ -6,7 +6,7 @@ var todos = [];
 
 // Define actions which can be called from the client using
 // ss.rpc('demo.ACTIONNAME', param1, param2...)
-exports.actions = function(req, res, ss) {
+exports.actions = function (req, res, ss) {
 	return {
 		getAll: function () {
 			res(todos);