screamingmunch/HTML

## HTML
<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
	body{
		margin: 0;
	}
	h1{
		color:  navy;
	}
	div#left-nav{
		margin-right: 3px;
		width: 150px;
		float: left;
		overflow: hidden;
	}
	div#content{
		width:800px;
	}
	ul{
		list-style: none;
	}
	div#left-nav ul{
		padding:0;
	}
	div#posts{
		width: 79%;
		float: left;
	}
	div{
	/*	border: 5px solid green;*/
		padding: 10px;

	}
	div#header{
		border:none;
		background-color: #191924;
		margin: 0;
		color: white;
	}
	#social-links li{
		list-style: none;
		display: inline;
		border-right: 1px dashed;
		padding: 0 1em;
	}
	#social-links a#twitter{
		height: 30px;
		width: 50px;
		background:  no-repeat url('http://www.stevesouders.com/images/twitter-icon.png');

	}
	div#footer{
		clear: both;
		/*  clear: right- clears everything to the right;
            clear: both- clear contents both to the left & right.*/
		/*border: 5px solid green;*/
		text-align: center;
		background-color: papayawhip;
	}


	</style>
	<title>High Performance Web Sites</title>
</head>
<body>
	<div id="header">
		<h1>I Kristine, the monkey, my Blog!!</h1>
		<ul id="social-links">
			<li><a>about</a></li>
			<li><a>email</a></li>
			<li><a id="twitter">
				&nbsp;&nbsp;&nbsp;&nbsp;
			</a></li>
		</ul>
	</div>

	<div id="left-nav">
		<h3>Most Recent Links</h3>
		<ul>
			<li><a href="google.com"> Mobile Waterfalls</a></li>
			<li><a href="google.com">Zopflinator</a></li>
		</ul>
		<a href="google.com">View Archives</a>
	</div>

	<div id="posts">
		<h2>Mobile Waterfalls</h2>
		<span>March 30, 2013</span>
		<p>
			I often scan the mobile dev tools landscape and get flashbacks to 2005 when debugging and profiling in desktop browsers was nigh impossible. This was before Firebug when alert was the primary means of debugging.
			woe is mobile dev tools </p>

			<p>Most of the tools that exist for desktop web development are also needed on mobile. That’s obvious. And yet, despite more than six years of mobile web development many necessary tools are still missing. Browser vendors and tool hackers should just walk through the most useful desktop dev tools and make sure they’re available on mobile.</p>

			<p>But it's complicated. Extensions for mobile browsers are hindered by, well, the absence of an extensions API. While Firefox for Android and Opera Mobile support extensions, Chrome for Android and Mobile Safari do not. The lack of an extensions API for these popular browsers is a setback. It can be worked around by writing mobile apps that use OS hooks to capture the information needed by web developers, but those types of apps are likely to run afoul of app store approval processes, and in some cases the OS hooks aren’t available.</p>

			<p>I chose to create the Mobile Perf bookmarklet as a way to get dev tools on all mobile devices. The Mobile Perf bookmarklet is an uber-bookmarklet that includes these other tools: Firebug Lite, Page Resources, Docsource, DOM Monster, Storager, YSlow, SpriteMe, and CSSess. These tools are great, but they’'re just JavaScript running in the page and don’t have access to the browser’s internals. For example, Firebug Lite includes a console and DOM walker, but doesn’t support JavaScript debugging and profiling.</p>


		</div>

		<div id="footer">
			&copy; Kristine
		</div>


	</body>
	</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style type="text/css">
	body{
	margin: 0;
	}
	h1{
	color: navy;
	}
	div#left-nav{
	margin-right: 3px;
	width: 150px;
	float: left;
	overflow: hidden;
	}
	div#content{
	width:800px;
	}
	ul{
	list-style: none;
	}
	div#left-nav ul{
	padding:0;
	}
	div#posts{
	width: 79%;
	float: left;
	}
	div{
	/* border: 5px solid green;*/
	padding: 10px;

	}
	div#header{
	border:none;
	background-color: #191924;
	margin: 0;
	color: white;
	}
	#social-links li{
	list-style: none;
	display: inline;
	border-right: 1px dashed;
	padding: 0 1em;
	}
	#social-links a#twitter{
	height: 30px;
	width: 50px;
	background: no-repeat url('http://www.stevesouders.com/images/twitter-icon.png');

	}
	div#footer{
	clear: both;
	/* clear: right- clears everything to the right;
	clear: both- clear contents both to the left & right.*/
	/border: 5px solid green;/
	text-align: center;
	background-color: papayawhip;
	}


	</style>
	<title>High Performance Web Sites</title>
	</head>
	<body>
	<div id="header">
	<h1>I Kristine, the monkey, my Blog!!</h1>
	<ul id="social-links">
	<li><a>about</a></li>
	<li><a>email</a></li>
	<li><a id="twitter">

	</a></li>
	</ul>
	</div>

	<div id="left-nav">
	<h3>Most Recent Links</h3>
	<ul>
	<li><a href="google.com"> Mobile Waterfalls</a></li>
	<li><a href="google.com">Zopflinator</a></li>
	</ul>
	<a href="google.com">View Archives</a>
	</div>

	<div id="posts">
	<h2>Mobile Waterfalls</h2>
	<span>March 30, 2013</span>
	<p>
	I often scan the mobile dev tools landscape and get flashbacks to 2005 when debugging and profiling in desktop browsers was nigh impossible. This was before Firebug when alert was the primary means of debugging.
	woe is mobile dev tools </p>

	<p>Most of the tools that exist for desktop web development are also needed on mobile. That’s obvious. And yet, despite more than six years of mobile web development many necessary tools are still missing. Browser vendors and tool hackers should just walk through the most useful desktop dev tools and make sure they’re available on mobile.</p>

	<p>But it's complicated. Extensions for mobile browsers are hindered by, well, the absence of an extensions API. While Firefox for Android and Opera Mobile support extensions, Chrome for Android and Mobile Safari do not. The lack of an extensions API for these popular browsers is a setback. It can be worked around by writing mobile apps that use OS hooks to capture the information needed by web developers, but those types of apps are likely to run afoul of app store approval processes, and in some cases the OS hooks aren’t available.</p>

	<p>I chose to create the Mobile Perf bookmarklet as a way to get dev tools on all mobile devices. The Mobile Perf bookmarklet is an uber-bookmarklet that includes these other tools: Firebug Lite, Page Resources, Docsource, DOM Monster, Storager, YSlow, SpriteMe, and CSSess. These tools are great, but they’'re just JavaScript running in the page and don’t have access to the browser’s internals. For example, Firebug Lite includes a console and DOM walker, but doesn’t support JavaScript debugging and profiling.</p>


	</div>

	<div id="footer">
	© Kristine
	</div>


	</body>
	</html>