Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
pub:web-development-toolbox [2013/07/15 14:15] – Marco Krage | pub:web-development-toolbox [2014/04/11 12:11] – Marco Krage |
---|
====== Web Development Toolbox ====== | ====== Web Development Toolbox ====== |
Rule the InterWebz | 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.10.2/jquery.min.js | https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js |
| https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js |
| |
<code html><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></code> | <code html><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></code> |
| |
===== Librarys ===== | ==== Librarys ==== |
^ Name ^ Funktion ^ | ^ Funktion ^ Link ^ |
| markdown | https://github.com/chjj/marked | | | Paramter/Arguments | https://github.com/stretchr/arg.js | |
| lightbox | https://github.com/dimsemenov/Magnific-Popup | | | Markdown | https://github.com/chjj/marked | |
| templates | https://github.com/blueimp/JavaScript-Templates | | | Cookie | https://github.com/carhartl/jquery-cookie | |
| templates | https://github.com/archan937/templayed.js | | | Lightbox | https://github.com/dimsemenov/Magnific-Popup | |
| password | https://github.com/antelle/passfield | | | Templates | https://github.com/blueimp/JavaScript-Templates | |
| formvalid | https://github.com/guillaumepotier/Parsley.js | | | Templates | https://github.com/archan937/templayed.js | |
| grid | https://github.com/suprb/Grid-A-Licious | | | Password Fields | https://github.com/antelle/passfield | |
| datepicker | https://github.com/dbushell/Pikaday | | | Form validation | https://github.com/guillaumepotier/Parsley.js | |
| extract values | https://github.com/laktek/extract-values | | | Grid | https://github.com/suprb/Grid-A-Licious | |
| number format | https://github.com/adamwdraper/Numeral-js | | | Datepicker | https://github.com/dbushell/Pikaday | |
| Instrumente | https://github.com/toorshia/justgage | | | Extract Values | https://github.com/laktek/extract-values | |
| PieChartsFavicon | https://github.com/lipka/piecon | | | Number Format | https://github.com/adamwdraper/Numeral-js | |
| keyboardShortcuts | https://github.com/ccampbell/mousetrap | | | 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 | | | QRcode | https://github.com/lrsjng/jQuery.qrcode | |
| multitouch | https://github.com/EightMedia/hammer.js | | | Multitouch | https://github.com/EightMedia/hammer.js | |
| TOC | https://github.com/jgallen23/toc | | | TOC Inhalt | https://github.com/jgallen23/toc | |
| fullscreen | https://github.com/sindresorhus/screenfull.js | | | 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/ |
| |
===== School ===== | |
**Namespacing** | |
http://stackoverflow.com/a/2421949 -- http://jsfiddle.net/xub6u/ | |
| |
===== HTML ===== | ===== HTML ===== |
| |
===== CSS ===== | ===== CSS ===== |
| |
==== Librarys ==== | ==== Librarys ==== |
| |
Grid https://github.com/grahammiller/ResponsiveGridSystem | ^ Funktion ^ Link ^ |
noramlize https://github.com/necolas/normalize.css | | Grid | https://github.com/grahammiller/ResponsiveGridSystem | |
buttons https://github.com/necolas/css3-github-buttons | | Normalize | https://github.com/necolas/normalize.css | |
| | Buttons | https://github.com/necolas/css3-github-buttons | |
| | Colors | https://github.com/mrmrs/colors | |
| |
| ==== Webkit font rendering ==== |
| |
[[http://necolas.github.com/normalize.css/]] | |
Siehe auch [[pub:normalize_css_additional_style]] | |
| |
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 { |
}</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>* { |
</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) |
@media screen and (min-width: 1192px) { | @media screen and (min-width: 1192px) { |
}</code> | }</code> |
| |
| ===== Webserver ===== |
| |
| ==== Moongoose ==== |
| All platform, portable, slim, simple. |
| I have put together my own package with php. |
| |
| Windows Build with PHP: https://github.com/sinky/mongoose-win-php |
| Source: https://github.com/valenok/mongoose |
| Builds: https://code.google.com/p/mongoose/ |
| |