FANDOM


Platforms

Meteor

Frameworks

Front-end

Bootstrap

References
Readings
Collections

Foundation

React

Knockout

AngularJS

Backbone.js

  • http://backbonejs.org/
  • Desc. : gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • License : MIT software license
  • Written in : JavaScript
  • Sources : https://github.com/jashkenas/backbone

Ember.js

Durandal

Networking

Socket.IO

Testing

Mocha

QUnit

Jasmine

should.js

expect.js

CSS

Compass

Sass

  • http://sass-lang.com/
  • Desc. : an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.

Libraries

General

CommonJS

  • http://www.commonjs.org/
  • Desc. :defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

RequireJS

Async

Promises

jQuery

  • http://www.jquery.org/
  • Desc. : a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • Written in : JavaScript
References
Tutorials
Articles
Collections

jQuery UI

w2ui

  • http://w2ui.com/web/
  • Desc. : a set of interrelated jQuery plugins for front-end development of data driven web applications.
  • License : the MIT License

YUI

  • http://yuilibrary.com/
  • Desc.: a free, open source JavaScript and CSS library for building richly interactive web applications.
  • License : BSD license

Prototype

  • http://prototypejs.org/
  • Desc. : adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.
  • License : MIT License
  • Written in : JavaScript
  • Readings

Underscore

  • http://documentcloud.github.com/underscore/
  • Desc.: a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • License : MIT license

Closure Library

Modernizr

  • http://modernizr.com/
  • Desc. : a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  • License ; MIT license

Respond.js

Sizzle

  • http://sizzlejs.com/
  • Desc. : a pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

Moment.js

Moment Timezone

Countdown.js

  • http://countdownjs.org/
  • Desc. : A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
  • License : the MIT license

Later

  • http://bunkat.github.io/later/
  • Desc. : a library for describing recurring schedules and calculating their future occurrences.
  • License : the MIT license
  • Written in : JavaScript

Datejs

Jsonix

JSON

JSON-js

JSV

schema.js

Jsonix

Visualization

D3.js

dimple

dc.js

Cubism.js

Processing.js

KineticJS

  • http://kineticjs.com/
  • Desc. : an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
  • License : the MIT or GPL Version 2 licenses.
  • Readings

Raphael

Paper.js

  • http://paperjs.org/
  • Desc. : an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • License : MIT license

jsPlumb

  • http://jsplumb.org/
  • Desc. : allows you to connect elements on the screen using SVG, Canvas or VML, depending on the capabilities of the browser.
  • License : MIT and GPL version 2.

svg.js

SVG.Element <---+--- SVG.Parent <---+--- SVG.Container <---+--- SVG.Doc
                |                                          |--- SVG.Nested
                |                                          |--- SVG.G
                |                                          |--- SVG.A
                |                                          +--- SVG.Defs
                |--- SVG.TextPath
                +--- SVG.Shape  <---+--- SVG.Rect
                                    |--- SVG.Ellipse
                                    |--- SVG.Line
                                    |--- SVG.PolyLine
                                    |--- SVG.Polygone
                                    |--- SVG.Path
                                    |--- SVG.Image
                                    |--- SVG.Text
                                    +--- SVG.TSpan

Snap.svg

JavaScript InfoVis Toolkit

  • http://thejit.org/
  • Desc. : provides tools for creating Interactive Data Visualizations for the Web.

Rickshaw

Google Chart Tools

JSXGraph

Galleria

Nivo Slider

Chart.js

Highcharts JS

  • http://www.highcharts.com/
  • Desc. : a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application.
  • License : commercial

dagre

  • https://github.com/cpettitt/dagre
  • Desc. : a JavaScript library that makes it easy to lay out directed graphs on the client-side.
  • License : the MIT License
  • Written in : JavaScript

Morris.js

Text Editing

CodeMirror

vkBeautify

SyntaxHighlighter

Highlight.js

Presentation

reveal.js

impress.js

  • https://github.com/bartaz/impress.js/
  • a presentation framework based on the power of CSS3 transforms and transitions in modern browsers
  • License : the MIT and GPL (version 2 or later) Licenses.
  • Written in : JavaScript

deck.js


jQuery Plug-ins

Tree

jsTree
  • http://www.jstree.com/
  • Desc. : a javascript based, cross browser tree component.
  • License : MIT or the GPL Version 2
jQuery plugin: Treeview

Data Grid

jqGrid
SlickGrid
DataTables
  • http://www.datatables.net/
  • Desc. : a plug-in for the jQuery Javascript library.
  • License : dual licensed under the GPL v2 license or a BSD (3-point) license.
Handsontable
  • http://handsontable.com/
  • Desc. : a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery
  • License : MIT

Input

jquery.inputmask

Navigation

Toolbar.Js

FX

jQuery Scroll Path

misc

jQuery plugin: Validation
Fotorama
  • http://fotorama.io/
  • Desc. : A simple, stunning, powerful jQuery gallery.
  • License : The MIT License
Cycle2
Spin.js
  • http://fgnass.github.io/spin.js/
  • Desc. : dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.
  • License : The MIT License
jquery.cookie

misc

Font Awesome

Animate.css

FancyBox

Bootswatch

Gate One

Tools

Compiler

Babel


Packages

Compiler Generator

Jison

  • http://zaach.github.io/jison/
  • Desc. : takes a context-free grammar as input and outputs a JavaScript file capable of parsing the language described by that grammar.
  • License : MIT

Web Development

HTML5 Boilerplate

Initializr

Closure Compiler

Firebug

Code Analysis

JSHint

JSLint

ESLint

Documentation

JSDoc 3

Build Tool

Grunt

Brunch

Package Management

Bower

Yarn

Webpack

Samples

  • Simple CSS and setup of SyntaxHighlighter
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Grande","Trebuchet MS",sans-serif,맑은고딕,새굴림;
    text-indent: 5px;
    padding:0px 0px 0px 0px;
}
h1 {
    font-size: 170%;
}
h2 {
    background-color: #99CC33;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    font-size: 150%;
    font-weight: bold;
    line-height: 170%;
    margin-right: 15%;
}
h2 a:link, h2 a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}
h3 {
    background-color: #F5DEB3;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font-size: 130%;
    font-weight: bold;
    line-height: 150%;
    margin-right: 10%;
}
h3 a:link, h3 a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}
h4 {
    font-size: 120%;
    font-weight: bold;
    text-decoration: underline;
}
h5 {
    font-size: 110%;
    font-weight: bold;
    text-decoration: underline;
}
h6 {
    font-size: 105%;
    font-weight: bold;
    text-decoration: underline;
}

body {
    counter-reset: step-for-h3;
}
h1 {
    counter-reset: step-for-h2;
}
h1:before {
    counter-increment: step-for-h1;
}
h2 {
    counter-reset: step-for-h3;
}
h2:before {
    content: counter(step-for-h2, decimal) ". ";
    counter-increment: step-for-h2;
}
h3 {
    counter-reset: step-for-h4;
}
h3:before {
    content: counter(step-for-h2, decimal) "." counter(step-for-h3, decimal) ". ";
    counter-increment: step-for-h3;
}
h4 {
    counter-reset: step-for-h5;
}

table{
  border-spacing:0;
  border-collapse:collapse;
}
table td, table th{
  border:thin solid black;
  padding:2px;
}
pre{
  border:thin dotted black;
  padding:1em;
  margin:0.5em;
}
</style>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>


  • Styles for Redmine of my team
/* Custom styles, Sangmoon Oh, 2011-07-12 */
div.wiki h1, div.wiki h2, div.wiki h3, div.wiki h4, div.wiki h5, div.wiki h6 {
  font-family:"Lucida Grande", "Trebuchet MS", sans-serif, 맑은고딕, 새굴림;
  text-indent:5px;
}
div.wiki h1 {
  font-size:170%;
}
div.wiki h2 {
  font-size:150%;
  font-weight:bold;
  #color:#FFFFFF;
  color:#000000;
  #background-color:#0080C0;
  background-color:#99CC33;
  line-height:170%;
  margin-right:15%;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
div.wiki h2 a:link, div.wiki h2 a:visited {
  color:#FFFFFF;
  text-decoration:underline
}
div.wiki h3 {
  font-size:130%;
  font-weight:bold;
  #color:#FFFFFF;
  color:#000000;
  #background-color:orange;
  #background-color:#995533;
  background-color:#F5DEB3;
  line-height:150%;
  margin-right:10%;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
div.wiki h3 a:link, div.wiki h3 a:visited {
  color:#FFFFFF;
  text-decoration:underline
}
 
div.wiki h4 {
  font-size:120%;
  font-weight:bold;
  text-decoration:underline;
}
div.wiki h5 {
  font-size:110%;
  font-weight:bold;
  text-decoration:underline;
}
div.wiki h6 {
  font-size:105%;
  font-weight:bold;
  text-decoration:underline;
}
 
/* need more optimization for the case when wiki area doen't start with h1 */
div.wiki {
  counter-reset:step-for-h1;
  counter-reset:step-for-h2;
  counter-reset:step-for-h3;
}
div.wiki h1 {
  counter-reset:step-for-h2;
}
div.wiki h1:before {
  counter-increment:step-for-h1;
}
div.wiki h2 {
  counter-reset:step-for-h3;
}
div.wiki h2:before {
  content: counter(step-for-h2) ". ";
  counter-increment:step-for-h2;
}
div.wiki h3 {
  counter-reset:step-for-h4;
}
div.wiki h3:before {
  content: counter(step-for-h2) "." counter(step-for-h3) ". ";
  counter-increment:step-for-h3;
}
div.wiki h4 {
  counter-reset:step-for-h5;
}


  • Styles for Eclipse Mylyn Wiki Editor
    • [Eclipse > Preferences > General > Editors > Text Editors > WikiText > Appearances]
body{
  font-family:"Lucida Grande", "Trebuchet MS", sans-serif, 맑은고딕, 새굴림;
  font-size: 1.0em;
  line-height:1.5;
  margin-left:2.0em;
  text-indent:5px;
  counter-reset: step-h3;
}

code, pre, tt{
  font-family: Consolas,monospace,Courier;
  font-size: 1.0em;
  line-height: 1.3 !important;
}

table { border-collapse: collapse; }
th, td { border: 1px solid #999;padding: 0.2em; }

h1, h2, h3, h4, h5, h6{
  margin-top:1.0em;
  margin-bottom:1px;
  padding-top:0px;
  padding-bottom:0px;
  -webkit-font-smoothing: antialiased;
}

h1 { margin-top:2.0em;font-size: 1.8em;color: #172f47; }
h2 { font-size: 1.5em;color: #172f47; }
h3 { font-size: 1.4em;color: #172f47; }
h4 { font-size: 1.3em;color: #172f47; }
h5 { font-size:1.2em;color: #172f47; }
h6 { font-size:1.15em;  color: #172f47; }

h3:before {
  content: counter(step-h3) ". ";
  counter-increment: step-h3;
  counter-reset: step-h4;
}
h4:before {
  content: counter(step-h3) ". " counter(step-h4) ". ";
  counter-increment: step-h4;
  counter-reset: step-h5;
}
h5:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". ";
  counter-increment: step-h5;
  counter-reset: step-h6;
}
h6:before {
  content: counter(step-h3) ". " counter(step-h4) ". " counter(step-h5) ". " counter(step-h6) ". ";
  counter-increment: step-h6;
}

b{ font-weight: bold; }
strong{ font-weight: bold; }
i{ font-style: italic; }
cite{ font-style: italic; }
em{ font-style: italic; }
var{ font-style: italic; }
code{ color:#4444CC; }
ins{ text-decoration: underline; }
del { text-decoration: line-through; }
sup { font-size: smaller;vertical-align: super; }
a { text-decoration: underline;color: blue; }
sup a { text-decoration: none; }
sub { font-size: smaller;vertical-align: sub; }
blockquote{     color: rgb(38, 86, 145); }
q { color: rgb(38, 86, 145);}

Tips

Automatic Number of Headers in HTML

You can generate the number of headers(h1 ... h6) in HTML using couner-reset, counter-increment, content properties and :before pseudo element of CSS2. But this feature is not supported with Internet Explorer 6 and 7.

To localize the numbering, you can demarcate the area using division which has id property. The following sample shows how you can do it very intuitively.

<style type="text/css">
#go-out-with-her { counter-reset:step; }
#go-out-with-her h5:before{
   content:counter(step) ". ";
   counter-increment:step;
}
</style>

<div id="go-out-with-her">
<h5>Choose a movie</h5>
<p>The movie maybe one of the most common ...</p>

<h5>Choose time</h5>
<p>
... Friday or Saturday would be the most proper day.  
Avoid Sunday or too hot day. A slightly rainy day could be positive...
</p>

<h5>Choose a theater</h5>
<p>
... You should think in advance where to go after the movie.
A nice restaurant or a park ...
</p>

<h5>Call her</h5>
<p>
... Avoid Monday.... Three or four days before would be nice...
</p>

<h5>Prepare a small gift</h5>
<p>
The present should not too expensive, big or uncommon.
Well-known book, CD could be nice.
</p>
</div>

The above source would be look like the following in the browser.

1. Choose a movie

The movie maybe one of the most common ...

2. Choose time

... Friday or Saturday would be the most proper day. Avoid Sunday or too hot day. A slightly rainy day could be positive...

3. Choose a theater

... You should think in advance where to go after the movie. A nice restaurant or a park ...

4. Call her

... Avoid Monday.... Three or four days before would be nice...

5. Prepare a small gift

The present should not too expensive, big or uncommon. Well-known book, CD could be nice.

The following CSS rules can be applied more generally.

div.post-body {
  counter-reset:step-for-h4
}
div.post-body h4:before{
  content:counter(step-for-h4) ". ";
  counter-increment:step-for-h4;
}
div.post-body h4 {
  counter-reset:step-for-h5
}
div.post-body h5:before{
  content:counter(step-for-h4) ". " counter(step-for-h5) ". ";
  counter-increment:step-for-h5;
}
div.post-body h5 {
  counter-reset:step-for-h6
}
div.post-body h6:before{
  content:counter(step-for-h4) ". " counter(step-for-h5) ". " counter(step-for-h6) ". ";
  counter-increment:step-for-h6;
}

For more readings.