electronical Brain

Dies ist eine alte Version des Dokuments!

Web Development Toolbox

Rule the InterWebz - Collection of usefull libraries and code snippets for HTML, CSS an Javascript. I love Javascript.

Javascript

jQuery Download - Google CDN

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 

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

Librarys

Funktion Link
Paramter/Arguments https://github.com/stretchr/arg.js
Markdown https://github.com/chjj/marked
Cookie https://github.com/carhartl/jquery-cookie
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

School

Namespacing

http://stackoverflow.com/a/2421949 – http://jsfiddle.net/sinky/P9L9W/ – http://jsfiddle.net/xub6u/

HTML

HTML5 Template

https://github.com/sinky/html5-template

CSS

Librarys

Funktion Link
Grid https://github.com/grahammiller/ResponsiveGridSystem
Normalize https://github.com/necolas/normalize.css
Buttons https://github.com/necolas/css3-github-buttons

Webkit font rendering

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

Nicer Headlines

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

h1, h2 {
  text-rendering: optimizeLegibility;
}

CSS 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; 
}

Media Queries

/*-----------------------------------------------------------------------------------*/
/*	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) {
}

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/

pub/web-development-toolbox.1392901477.txt.gz · Zuletzt geändert: 2014/02/20 14:04 von Marco Krage