Dies ist eine alte Version des Dokuments!


Web Development Toolbox

Code Snippet collection

Javascript

jQuery Download - Google CDN

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Namespacing

http://stackoverflow.com/a/2421949

(function() { 
 var user = 'foo',
     variables = 'bar'
     savely; 
  function private() {
   return true;
  }    
})(); 

jQuery Start Template

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>
<script>
$(document).ready(function(){
 
  $.post('backend.php', {
    action: 'value'
  }, function (data) {
    return data
  });
 
  $.getJSON('backend.php?callback=?', {
    action: 'value'
  }, function(data) {
    console.log(data);
    return data.foo;
  }); // END: getJSON   
 
});
</script>

HTML

HTML5 Template

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <link href="style.css" type="text/css" rel="stylesheet" />  
</head>
<body> 
<div class="page" id="wrapper">
	<header role="header" id="header">
		<h1>Page Title</h1>
	</header>	
	<div id="content">
		<p>Foo Bar Content</p>
	</div>	
	<footer role="footer" id="footer">
		<p>© 2013</p>
	</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// jQuery Stuff
}); // END jQuery.ready
</script>
</body>
</html>

CSS

http://necolas.github.com/normalize.css/
Siehe auch normalize_css_additional_style

Webkit font rendering

html {
  -webkit-font-smoothing: antialiased;
}

Nicer Headlines http://aestheticallyloyal.com/public/optimize-legibility/

h1, h2 {
  text-rendering: optimizeLegibility;
}

CSS Link Fade Animation

a {
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

The new Box Model
http://paulirish.com/2012/box-sizing-border-box-ftw/

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
/*-----------------------------------------------------------------------------------*/
/*	CSS3 Media Queries for Responsiveness (mobile-first, from small to big)
/*-----------------------------------------------------------------------------------*/
/* --- smartphones in landscape mode --- */
@media screen and (min-width: 480px) {
}
/* --- tablets in portrait mode --- */
@media screen and (min-width: 768px) {
}
/* tablets in landscape mode */
@media screen and (min-width: 1024px) {
}
/* standard laptop + desktop screens */
@media screen and (min-width: 1192px) {
}
pub/web-development-toolbox.1371203242.txt.gz · Zuletzt geändert: 2013/12/06 19:12 (Externe Bearbeitung)