Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung
Vorhergehende Überarbeitung
pub:web-development-toolbox [2013/06/14 11:47] – angelegt Marco Kragepub:web-development-toolbox [2014/05/12 09:01] (aktuell) Marco Krage
Zeile 1: Zeile 1:
 ====== Web Development Toolbox ====== ====== Web Development Toolbox ======
-Code Snippet collection+Rule the InterWebz - Collection of usefull libraries and code snippets for HTML, CSS an Javascript. I love Javascript.
  
 ===== Javascript ===== ===== Javascript =====
 [[http://docs.jquery.com/Downloading_jQuery|jQuery Download]] - [[http://developers.google.com/speed/libraries/devguide?hl=de#jquery|Google CDN]] [[http://docs.jquery.com/Downloading_jQuery|jQuery Download]] - [[http://developers.google.com/speed/libraries/devguide?hl=de#jquery|Google CDN]]
  
-http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js+https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js 
 +https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
  
-<code html><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></code> +<code html><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script></code>
-==== Namespacing ==== +
-http://stackoverflow.com/a/2421949 +
-<code javascript>(function() {  +
- var user = 'foo', +
-     variables = 'bar' +
-     savely;  +
-  function private() { +
-   return true; +
-  }     +
-})(); </code>+
  
-==== jQuery Start Template ==== +==== Librarys ==== 
-<code html> +^ Funktion ^ Link ^ 
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> +| Paramter/Arguments | https://github.com/stretchr/arg.js | 
-<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script> +| Markdown | https://github.com/chjj/marked | 
-<script> +| Cookie | https://github.com/carhartl/jquery-cookie | 
-$(document).ready(function(){+| Lightbox | https://github.com/dimsemenov/Magnific-Popup | 
 +| Templates | https://github.com/blueimp/JavaScript-Templates | 
 +| Templates | https://github.com/archan937/templayed.js 
 +| Password Fields | https://github.com/antelle/passfield | 
 +| Form validation | https://github.com/guillaumepotier/Parsley.js | 
 +| Grid | https://github.com/suprb/Grid-A-Licious | 
 +| Datepicker | https://github.com/dbushell/Pikaday | 
 +| Extract Values | https://github.com/laktek/extract-values | 
 +| Number Format | https://github.com/adamwdraper/Numeral-js | 
 +| Instrumente Canvas | https://github.com/toorshia/justgage | 
 +| Pie Chart Favicon | https://github.com/lipka/piecon | 
 +| Keyboard Shortcuts | https://github.com/ccampbell/mousetrap | 
 +| QRcode | https://github.com/lrsjng/jQuery.qrcode | 
 +Multitouch | https://github.com/EightMedia/hammer.js 
 +| TOC Inhalt | https://github.com/jgallen23/toc | 
 +| Fullscreen | https://github.com/sindresorhus/screenfull.js | 
 +| Tabs | https://github.com/aarondo/tabulous.js | 
 +| Progress Bar | https://github.com/usablica/progress.js; https://github.com/rstacruz/nprogress | 
 +| Google Map | https://github.com/danielemoraschi/maplace.js | 
 +| Input Max Length | https://github.com/pioul/jQuery.Maxlength | 
 +| Datum | https://github.com/MatthewMueller/date | 
 +| jQuery alternative | https://github.com/timjansen/minified.js | 
 +| URL | https://github.com/websanova/js-url | 
 +| Panorama | https://github.com/peachananr/panorama_viewer | 
 +| Syntax Highlight | https://github.com/isagalaev/highlight.js; https://github.com/mozilla/sweet.js 
 +| prefix-free | https://github.com/LeaVerou/prefixfree | 
 +| Mansory | https://github.com/kombai/freewall | 
 +| AlphaID (like Youtube| http://www.hashids.org/
 +|  |  | 
 +==== School ==== 
 +=== Namespacing === 
 +http://stackoverflow.com/a/2421949 -- http://jsfiddle.net/sinky/P9L9W/ -- http://jsfiddle.net/xub6u/
  
-  $.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> 
-</code> 
  
 ===== HTML ===== ===== HTML =====
 ==== HTML5 Template ==== ==== HTML5 Template ====
-<code html> +https://github.com/sinky/html5-template 
-<!DOCTYPE html> + 
-<html lang="de"> +<html
-<head> +<div class="repo-filedata-user="sinkydata-repo="html5-template"></div>
-  <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="pageid="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> </html>
-</code> 
  
  
 ===== CSS ===== ===== CSS =====
-[[http://necolas.github.com/normalize.css/]] +==== Librarys ==== 
-Siehe auch [[pub:normalize_css_additional_style]]+ 
 +^ Funktion ^ Link ^ 
 +| Grid | https://github.com/grahammiller/ResponsiveGridSystem | 
 +| Normalize | https://github.com/necolas/normalize.css 
 +| Buttons | https://github.com/necolas/css3-github-buttons | 
 +| Colors | https://github.com/mrmrs/colors |
  
-Webkit font rendering+==== Webkit font rendering ====
 <code css>html { <code css>html {
   -webkit-font-smoothing: antialiased;   -webkit-font-smoothing: antialiased;
 }</code> }</code>
  
-Nicer Headlines [[http://aestheticallyloyal.com/public/optimize-legibility/]]+==== Nicer Headlines ==== 
 +http://aestheticallyloyal.com/public/optimize-legibility/
 <code css>h1, h2 { <code css>h1, h2 {
   text-rendering: optimizeLegibility;   text-rendering: optimizeLegibility;
 }</code> }</code>
-CSS Link Fade Animation+ 
 +==== CSS Animation ====
 <code css> <code css>
 a { a {
Zeile 100: Zeile 87:
 }</code> }</code>
  
-The new Box Model+==== The new Box Model ====
 http://paulirish.com/2012/box-sizing-border-box-ftw/ http://paulirish.com/2012/box-sizing-border-box-ftw/
 <code css>* {  <code css>* { 
Zeile 108: Zeile 95:
 </code> </code>
  
 +==== Media Queries ====
 <code css>/*-----------------------------------------------------------------------------------*/ <code css>/*-----------------------------------------------------------------------------------*/
 /* CSS3 Media Queries for Responsiveness (mobile-first, from small to big) /* CSS3 Media Queries for Responsiveness (mobile-first, from small to big)
Zeile 123: Zeile 111:
 @media screen and (min-width: 1192px) { @media screen and (min-width: 1192px) {
 }</code> }</code>
 +
 +===== Webserver =====
 +
 +==== Moongoose ====
 +All platform, portable, slim, simple.
 +
 +Source: https://github.com/valenok/mongoose
 +Builds: https://code.google.com/p/mongoose/
 +
pub/web-development-toolbox.1371203242.txt.gz · Zuletzt geändert: 2013/12/06 19:12 (Externe Bearbeitung)