madmanlear/foundation.txt

## 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">