madmanlear · May 15, 2012 16:47
diff --git a/foundation.txt b/foundation.txt
 //Websites: Foundational Elements

 //SEO
 * Unique Title and Meta Description for each page
 * Use of Schema.org to mark-up relevant content, large or small (http://schema.org/docs/schemas.html)

 //Sharing
 * For sites/pages that are meant to be shared (all?), use Facebook OG Tags (http://developers.facebook.com/docs/opengraphprotocol/)
 * Test and optimize product/portfolio pages for sharing via Facebook and Pinterest

 //HTML
 * Use HTML5 on all new projects
 * Define the charset and content type:
  <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
  <meta charset="UTF-8">
 * Use the HTML5 boilerplate method of determining IE version:
  <!--[if lt IE 7 ]> <html class="ie6 no-js" lang="en"> <![endif]-->
  <!--[if IE 7 ]>    <html class="ie7 no-js" lang="en"> <![endif]-->
  <!--[if IE 8 ]>    <html class="ie8 no-js" lang="en"> <![endif]-->
  <!--[if IE 9 ]>    <html class="ie9 no-js" lang="en"> <![endif]-->
  <!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
 * Use the X-UA-Compatible meta tag to force IE to use the latest rendering engine or Chrome if available:
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 * Empty meaningLESS tags (<div class="clear"></div>) are to be avoided. Empty meaningFUL tags (<a href="/" class="logo"></a>) are forbidden, except those created in javascript

 //CSS
 * Use a preprocessor, like LESS or SASS
 * Default to solutions in CSS and use images for graceful degradation (box shadow, rounded corners, etc)
 * Use real text where ever possible
 * Use normalize.css. And don't just throw it in. Read it, understand it, and edit it (http://necolas.github.com/normalize.css/)

 //JS
 * Opt for the smallest solution (don't pollute your project with huge plugins that solve 100 problems when you only need to solve 1)
 * DO NOT BROWSER SNIFF. Test for features (http://modernizr.com/)
 * Don't load a default javascript library or file, even jQuery, until you have a need for it

 //Speed
 * Load JS in the footer when possible (Modernizr, for example, must be in the <head>)
 * Refactor your code whenever time and budget allows
 * Use image sprites for non-repeating background images
 * Optimize ALL images (http://imageoptim.com/, http://pngmini.com/)
 * Use the Bokeh technique on complex jpegs to reduce file size where possible (http://en.wikipedia.org/wiki/Bokeh) Discuss the designer
 * Concatenate and minify JS and CSS files in production (http://incident57.com/codekit/)
 * Use Yahoo's speed recommendations in your .htaccess:

  FileETag None

  SetOutputFilter DEFLATE

  # Don't compress images
  SetEnvIfNoCase Request_URI \
  \.(?:gif|jpe?g|png)$ no-gzip dont-vary

  <ifModule mod_headers.c>
  Header unset ETag
  Header append Vary User-Agent env=!dont-vary
  </ifModule>

  AddDefaultCharset UTF-8

 * Test speed with YSlow (http://yslow.org/) and Mobitest (http://www.blaze.io/mobile/)

 //Other Best Practices
 * Use mod-rewrite, etc to remove page extensions
 * Given a new layout, write out all the HTML - representing the context and flow of the content ideally - before implementing any of the design
 * Never leave the office without committing finished code
 * Use the History API to load very similar pages in a section (http://diveintohtml5.info/history.html)
 * Use JS to open external links in a new page/tab by default

  $('a').each(function() {
    var a = new RegExp('/' + window.location.host + '/');
    if(!a.test(this.href)) {
      $(this).attr('target', '_blank');
    }
  });

 * For IE support, only replicate CSS3 features that you really need (sometimes a box shadow and rounded corners is OK to leave out for IE7). Discuss with designer
 * Include a Favicon!
  <link rel="shortcut icon" href="/favicon.ico">
	//Websites: Foundational Elements

	//SEO
	* Unique Title and Meta Description for each page
	* Use of Schema.org to mark-up relevant content, large or small (http://schema.org/docs/schemas.html)

	//Sharing
	* For sites/pages that are meant to be shared (all?), use Facebook OG Tags (http://developers.facebook.com/docs/opengraphprotocol/)
	* Test and optimize product/portfolio pages for sharing via Facebook and Pinterest

	//HTML
	* Use HTML5 on all new projects
	* Define the charset and content type:
	<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
	<meta charset="UTF-8">
	* Use the HTML5 boilerplate method of determining IE version:
	<!--[if lt IE 7 ]> <html class="ie6 no-js" lang="en"> <![endif]-->
	<!--[if IE 7 ]> <html class="ie7 no-js" lang="en"> <![endif]-->
	<!--[if IE 8 ]> <html class="ie8 no-js" lang="en"> <![endif]-->
	<!--[if IE 9 ]> <html class="ie9 no-js" lang="en"> <![endif]-->
	<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
	* Use the X-UA-Compatible meta tag to force IE to use the latest rendering engine or Chrome if available:
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	* Empty meaningLESS tags (<div class="clear"></div>) are to be avoided. Empty meaningFUL tags (<a href="/" class="logo"></a>) are forbidden, except those created in javascript

	//CSS
	* Use a preprocessor, like LESS or SASS
	* Default to solutions in CSS and use images for graceful degradation (box shadow, rounded corners, etc)
	* Use real text where ever possible
	* Use normalize.css. And don't just throw it in. Read it, understand it, and edit it (http://necolas.github.com/normalize.css/)

	//JS
	* Opt for the smallest solution (don't pollute your project with huge plugins that solve 100 problems when you only need to solve 1)
	* DO NOT BROWSER SNIFF. Test for features (http://modernizr.com/)
	* Don't load a default javascript library or file, even jQuery, until you have a need for it

	//Speed
	* Load JS in the footer when possible (Modernizr, for example, must be in the <head>)
	* Refactor your code whenever time and budget allows
	* Use image sprites for non-repeating background images
	* Optimize ALL images (http://imageoptim.com/, http://pngmini.com/)
	* Use the Bokeh technique on complex jpegs to reduce file size where possible (http://en.wikipedia.org/wiki/Bokeh) Discuss the designer
	* Concatenate and minify JS and CSS files in production (http://incident57.com/codekit/)
	* Use Yahoo's speed recommendations in your .htaccess:

	FileETag None

	SetOutputFilter DEFLATE

	# Don't compress images
	SetEnvIfNoCase Request_URI \
	\.(?:gif\|jpe?g\|png)$ no-gzip dont-vary

	<ifModule mod_headers.c>
	Header unset ETag
	Header append Vary User-Agent env=!dont-vary
	</ifModule>

	AddDefaultCharset UTF-8

	* Test speed with YSlow (http://yslow.org/) and Mobitest (http://www.blaze.io/mobile/)

	//Other Best Practices
	* Use mod-rewrite, etc to remove page extensions
	* Given a new layout, write out all the HTML - representing the context and flow of the content ideally - before implementing any of the design
	* Never leave the office without committing finished code
	* Use the History API to load very similar pages in a section (http://diveintohtml5.info/history.html)
	* Use JS to open external links in a new page/tab by default

	$('a').each(function() {
	var a = new RegExp('/' + window.location.host + '/');
	if(!a.test(this.href)) {
	$(this).attr('target', '_blank');
	}
	});

	* For IE support, only replicate CSS3 features that you really need (sometimes a box shadow and rounded corners is OK to leave out for IE7). Discuss with designer
	* Include a Favicon!
	<link rel="shortcut icon" href="/favicon.ico">