Web Development Toolbox

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

Javascript

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
AlphaID (like Youtube) http://www.hashids.org/

School

Namespacing

HTML

HTML5 Template

CSS

Librarys

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.

Source: https://github.com/valenok/mongoose
Builds: https://code.google.com/p/mongoose/

pub/web-development-toolbox.txt · Zuletzt geändert: 2014/05/12 09:01 von Marco Krage