Line 923: | Line 923: | ||
* [http://en.wikipedia.org/wiki/JavaScript_graphics_library JavaScript graphics library] (Wikipedia) |
* [http://en.wikipedia.org/wiki/JavaScript_graphics_library JavaScript graphics library] (Wikipedia) |
||
* [http://jster.net/tag/svg SVG Javascript Libraries] |
* [http://jster.net/tag/svg SVG Javascript Libraries] |
||
+ | * [http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/ Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael] |
||
+ | * [http://mattryall.net/blog/2008/11/wiki-visualisations-with-javascript Wiki visualisations with JavaScript: Processing.js and Raphaël] |
||
+ | |||
* [https://modeling-languages.com/javascript-drawing-libraries-diagrams/ 10 JavaScript libraries to draw your own diagrams (2018 edition)] (17/04/2018) |
* [https://modeling-languages.com/javascript-drawing-libraries-diagrams/ 10 JavaScript libraries to draw your own diagrams (2018 edition)] (17/04/2018) |
||
** JointJS, Rappid, MxGraph, GoJS, jsUML2, Nomnoml, Mermaid.js, Diagram.js, State.js, D3, Raphael, Draw2D, Fabric.js, Paper.js, JsPlumb, p5.js, Cytoscape.js, dagre-d3, vis.js |
** JointJS, Rappid, MxGraph, GoJS, jsUML2, Nomnoml, Mermaid.js, Diagram.js, State.js, D3, Raphael, Draw2D, Fabric.js, Paper.js, JsPlumb, p5.js, Cytoscape.js, dagre-d3, vis.js |
Revision as of 18:01, 19 September 2018
Language
HTML
- W3C HTML Current Status
- HTML 4.01 Specification
- XHTML 1.0 Specification
- HTML5 Specification
- HTML syntax
- HTML events
- URL Encoding (Wikipedia)
- HTML 4 Reference at WDG
- HTML Tutorial at W3Schools
- HTML5 Tutorial at W3Schools
- Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
- HTTP Gallery
- Is it possible to change width of tab symbol in textarea?
- Why must we still close SCRIPT elements?
- Comparison of HTML parsers
- Parsing HTML Table using Java XPath
- Void elements of HTML5
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
- a "/" character, which may be present only if the element is a void element.
- Void elements only have a start tag; end tags must not be specified for void elements.
- HTML5 Custom Data Attributes (data-*) (May 27th, 2010)
Named Entity
Entity | Name | Remarks |
---|---|---|
• | •
|
bullet |
· | ·
|
middle dot |
∑ | ∑
|
summation |
- HTML 4
Form
- Form (HTML) (Wikipedia)
- HTML 4.01 Spec
application/x-www-form-urlencoded
- HTML 4.01 Spec
multipart/form-data
- The
application/x-www-form-urlencoded
type (Wikipedia)
MIME
SVG
- SVG 1.1 Specification
- SVG Tutorial at W3Schools
- SVG Essentials (J. David Eisenberg, 2002, O'Reilly)
- SVG Tutorial at PrinceXML
- Box model properties (margin, padding) for SVG element. Are they supported?
- CSS padding property for svg elements
- SVG Viewport and View Box
Canvas
- HTML 5 Draft/The canvas element
- HTML Canvas Reference
- WebKit DOM Programming Topics > Using the Canvas
- Canvas tutorial at MDN
- HTML5 canvas - the basics
Schema.org
CSS
- W3C CSS Current Status
- CSS3 Tutorial at W3Schools
- CSS Tutorial at W3Schools
- Selectors Level 3
- CSS2 Selectors (at CSS2 specification)
- CSS Guide by Web Design Group
- CSS Identifiers
- CSS Color Names
- Floatutorial - Simple tutorials on CSS floats
Property | Description | Syntax |
---|---|---|
word-wrap
|
allows long words to be able to be broken and wrap onto the next line | break-word|initial|inherit |
- Vendor-specific CSS Properties
- CSS Rounded Corners In All Browsers (With No Images)
- Writing efficient CSS for use in the Mozilla UI
- The 100% Easy-2-Read Standard (17. November 2006)
- A Complete Guide to the Table Element(SEPTEMBER 19, 2013)
Selector
- The CSS3 :Not() Selector
- CSS combinator precedence?
- CSS Target All H Tags (Sep 24 '11)
- The answer is None with CSS standard.
- Are parentheses allowed in CSS selectors? (Mar 29 '11)
- The answer is No with CSS standard.
Box model
Positioning
Font
- CSS Font-Size: em vs. px vs. pt vs. percent
- The Perfect Paragraph (November 29th, 2011)
- How to Size Text in CSS (November 20, 2007)
- Design for Developers
- What’s The Best Font & Font Size To Use In Website Design? (December 23rd, 2007)
- Consolas
- ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Pseudo-classes/Pseudo-elements
Collections
- 20 Exceptional CSS Boilerplates and Frameworks
- 20+ Thoughts on CSS/HTML Preprocessors and Frameworks (Updated)
- Responsive CSS Framework Comparison
JavaScript
References
- Primitives
Primitive | Description | Remarks |
---|---|---|
undefined
|
represents the primitive value undefined | |
null
|
represents the intentional absence of any object value |
- Global Methods
Method | Description | Remarks |
---|---|---|
isFinite()
|
||
isNaN()
|
||
parseInt()
|
Object
Member | Description | Remarks |
---|---|---|
Object.prototype.__proto__ |
an accessor property (a getter function and a setter function) that exposes the internal [[Prototype]] (either an object or null) of the object through which it is accessed | Deprecated |
Object.prototype.constructor
|
Returns a reference to the Object constructor function that created the instance object | |
Object.preventExtensions()
|
prevents new properties from ever being added to an object (i.e. prevents future extensions to the object) | |
Object.seal()
|
seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable | |
Object.freeze()
|
prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed | |
Object.defineProperty()
|
defines a new property directly on an object, or modifies an existing property on an object, and returns the object |
- Global Objects
Object | Description | Type | Remarks |
---|---|---|---|
String
|
a constructor for strings or a sequence of characters | global object | |
RegExp
|
creates a regular expression object for matching text with a pattern | global object | |
Array
|
used in the construction of arrays | global object |
- Data-types
Data-type | Desc. | Remark |
---|---|---|
Number | ||
String | ||
Boolean | ||
Undefined | undefined | |
Null | null | |
Object |
- Literals
Type | Example | Remark |
---|---|---|
Octal literal | 031, 0o31 | Starts with 0, 0o or 0O |
Hexadecimal literal | 0xff | Starts with 0x |
Binary literal | 0b1011 | Starts with 0b or 0B |
Exponent literal | 1e3, 3.56e+2, 314e-2, 1225E-2 | |
String literal | "Deep Purple", 'In Rock' | |
String template literal | `Count: ${cnt}, Average: ${avg}` `Sum: ${sum(a, b)}, Multipliation: ${muliple(a, b)}` |
|
Boolean literal | true, false |
- Operators
Category | Operator | Name | Remarks |
---|---|---|---|
Logical Operator | ! | NOT | |
&& | AND | Short circuit | |
|| | OR | Short circuit | |
Comparison | == | Loose Equality | |
=== | Strict Equality | ||
!= | Loose Inequality | ||
!== | Strict Inequality | ||
> | Greater Than | ||
>= | Greater Than or Equal | Not Less Than | |
< | Less Than | ||
<= | Less Than or Equal | Not Greater Than |
- Statements
Name | Syntax | Remarks |
---|---|---|
If condition | if ... else if ... else if ... else | |
Switch statement | switch ... | |
For loops | for ... | |
For in loops | ||
While loops | ||
Do while loops |
- JavaScript Guide at Mozilla Developer Network
- JavaScript Tutorial at W3Schools
- The Modern JavaScript Tutorial
Books
- You Don't Know JS (book series)
- Speaking JavaScript (by Dr. Axel Rauschmayer, February 2014, O'Reilly)
Articles
- Douglas Crockford's Javascript
- Learn Advanced JavaScript Programming
- JavaScript. The core
- Learning Advanced JavaScript
- Google JavaScript Style Guide
- How to insert <script> with Prototype?
- Google Libraries API - Developer's Guide
- Principles of Writing Consistent, Idiomatic JavaScript
- Memory Management in JavaScript
- ECMAScript 5 Strict Mode, JSON, and More
- ECMAScript 5 Objects and Properties
- Global Domination (June 1st, 2006)
- Optional parameters in Javascript
- Unicode and JavaScript
Grammar
for...of
vs.for...in
- Outputting text to the console :
%d, %s, %o
Object
- Self-references in object literal declarations
- Javascript - How to clone an object? (Nov 1 '11)
- Most elegant way to clone a JavaScript object
- Enums in Javascript (January 26, 2014)
- Javascript redefine and override existing function body (Aug 29 '12)
- What's wrong with extending the DOM (5 April 2010)
- Using Prototype Property in JavaScript
- The "constructor" property
- Some Javascript constructor patterns, and when to use them (November 14, 2013)
- JavaScript:
prototype
vs__proto__
(Jun-18/2012) - __proto__ VS. prototype in JavaScript (Mar 31 '12)
- creating json object with variables (Oct 19 '12)
String
- Multiline string literals in JavaScript
- Getting Literal With ES6 Template Strings (2015/01)
`Yo, ${name}!`
Array
Array.prototype.slice.call
([].slice.call(arguments)
)
RegExp
- JavaScript Guide > Regular Expressions
- Remove Line Breaks with Javascript
- JavaScript regex replace - escaping slashes (Jan 12 '11)
Scope
- JavaScript Scoping and Hoisting (2010-02-08)
- Hoisting
- JavaScript “this” keyword
- An Introduction to JavaScript’s “this”
- Can't understand yet. --;
- Scope in JavaScript
Closure
- Javascript Closures
- An Example of a Closure
- Closures ??
- Annotating JavaScript for the Closure Compiler
- Closures explained with JavaScript (April 22nd, 2011)
- Proxy Pattern
IIFE
- Immediately-invoked function expression (Wikipedia)
- Immediately-Invoked Function Expression (IIFE) (By "Cowboy" Ben Alman on November 15, 2010)
- I Love My IIFE (Jan 5th, 2013)
- An Introduction to IIFEs(25 August 2013)
- How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)? (Apr 26 '10)
- How I Introduced JsDoc into a JavaScript project – and found my Eclipse Outline (February 1, 2012)
Concurrency
Modulization
Performance
- JavaScript Array.push Performance (15 Oct 2010)
- Why is array.push sometimes faster than array[n = value? (Mar 5 '09)
Collections
- jswiki - indexes libraries and resources available for JavaScript
- List of JavaScript libraries
- Cool Javascripts
- 16 Javascript Libraries for Visualizations
- 20 Best JavaScript Charting and Plotting Libraries
- 20 Fresh JavaScript Data Visualization Libraries
- Fastest Growing JavaScript Libraries
- 6 JavaScript Date Libraries for Developers
- Samples for JavaScript library packaging
Platforms
Meteor
- https://www.meteor.com/
- Desc. : a full-stack JavaScript platform for developing modern web and mobile applications
- License : MIT License
- Sources : https://github.com/meteor/meteor
- Readings
Frameworks
Front-end
- GitHub Showcases - Front-end JavaScript frameworks
- 10 Best Responsive HTML5 Frameworks and Tools
- Web Framework Benchmarks
- MVC Is Dead, What Comes Next? Oct. 16, 16
- Front-end: Angular vs React vs Vue
Bootstrap
- http://getbootstrap.com/
- Desc. : sleek, intuitive, and powerful front-end framework for faster and easier web development.
- License : Apache License v2.0
- Sources : https://github.com/twbs/bootstrap
References
Bootstrap 4
- Bootstrap 4 Class Reference : Complete List of All Bootstrap 4 Classes
Bootstrap 3
- Bootstrap 3 Documentation - Components
- Twitter Bootstrap 3.0 tutorial at w3resource
- Bootstrap Tutorial at tutorialspoint
Readings
- 20+ Thoughts on CSS/HTML Preprocessors and Frameworks (Updated)
- Responsive CSS Framework Comparison
- Twitter bootstrap 3: Navbar changes width when affix fires (May 26 '14)
Collections
Foundation
- http://foundation.zurb.com/
- Desc. : advanced responsive front-end framework in the world.
- License :
- References
- Readings
React
- https://facebook.github.io/react/
- Desc. : a JavaScript library for building user interfaces
- License : BSD
- Sources : https://github.com/facebook/react
- Readings
Knockout
- http://knockoutjs.com/
- Desc. : a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
- License : MIT license
- Written in : JavaScript
- Source : https://github.com/knockout/knockout
- Readings
- Rapid and responsive UI development with Knockout.js
- includes a link to part 2
- Beginners Guide to KnockoutJS: Part 1
- the first part of all three parts
- Building Large, Maintainable, and Testable Knockout.js Applications
- includes a topic of 'Using Knockout.js and Require.js Together'
- 10 Things to Know About Knockout.js on Day One
- Knockout.js Troubleshooting Strategies
- Don't miss "Undefined properties" section.
- Rapid and responsive UI development with Knockout.js
AngularJS
- http://angularjs.org/
- Desc. : an open-source JavaScript framework, maintained by Google, that assists with running single-page applications.
- License : The MIT License
- Written in : JavaScript
- Sources : https://github.com/angular/angular.js
- Readings
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
- Readings
- Your First Backbone.js App – Service Chooser (Apr. 2013)
- Books
Ember.js
- http://emberjs.com/
- Desc. : an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern.
- License : MIT License
- Written in : JavaScript
- Source : https://github.com/emberjs/ember.js
- References
- Gadgets
- Ember Inspector
- https://github.com/emberjs/ember-inspector
- Adds an Ember tab to Chrome or Firefox Developer Tools that allows you to inspect Ember objects in your application.
- Ember Inspector
Durandal
- http://durandaljs.com/
- Desc. : small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant.
- License : the MIT License
- Readings
Electron
- https://electronjs.org/
- Desc. : lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium
- License : MIT License
- Sources : https://github.com/electron/electron
Networking
Socket.IO
- http://socket.io/
- Desc. : a JavaScript library for realtime web applications.
- References
- Readings
- Socket.IO Disadvantages (Wikipedia)
- Best java server implementation for socket.io( Mar 22 '13)
- Java server and socket.io(Mar 1 '12)
Testing
Mocha
- https://mochajs.org/
- Desc. : a feature-rich JavaScript test framework running on Node.js and the browser, making asynchronous testing simple and fun.
- License :
- Sources : https://github.com/mochajs/mocha
QUnit
- http://qunitjs.com/
- Desc. : a powerful, easy-to-use JavaScript unit test suite.
- References
Jasmine
- http://pivotal.github.io/jasmine/
- Desc. : a behavior-driven development framework for testing JavaScript code.
- License : the MIT License
should.js
- https://github.com/shouldjs/should.js
- Desc. : an expressive, readable, framework-agnostic assertion library.
- License : MIT
expect.js
- https://github.com/Automattic/expect.js
- Desc. : Minimalistic BDD assertion toolkit based on should.js
- License : MIT
CSS
Compass
- http://compass-style.org/
- Desc. : open-source CSS Authoring Framework.
Sass
- http://sass-lang.com/
- Desc. : an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
Libraries
- List of JavaScript libraries from Wikipedia
- CDN for JavaScript modules
- Usage of JavaScript libraries for websites
- JavaScript Usage Statistics
- JSter - a catalog of 1541 JavaScript libraries and tools for web development.
- Web-based SSH
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
- http://requirejs.org/
- Desc. : a JavaScript file and module loader.
- License : new BSD, and MIT
- References
Async
- https://github.com/caolan/async
- Desc. : a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.
- License
- Readings
Promises
- https://www.promisejs.org/
- Desc. : a promise represents the result of an asynchronous operation.
- Licenses : MIT
- Sources : https://github.com/ForbesLindesay/promisejs.org
- Readings
- API
- Patterns
- ES6
Promise
Reference (MDN)
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
- jQuery API
- jQuery Selectors
- CSS2 Selectors (at CSS2 specification)
- jQuery Tree Traversal
- jQuery Quick API Reference
- Types
- Selector Type
- Element Type
- jQuery Type (often called a set of "matched elements" or "selected elements")
- Event Type (different from the Event of ECMAScript)
- jqXHR Type
- Dimensions
Tutorials
Articles
- jQuery: How to disable form element, link, etc
- How do I test whether an element exists?
- jQuery - Set Content - text(), html(), and val()
val()
- Sets or returns the value of form fieldstext()
- Sets or returns the text content of selected elementshtml()
- Sets or returns the content of selected elements (including HTML markup)
- How do I determine the state of a toggled elements?
- Attributes vs. Properties
- Selector
- Form
- How do I disable/enable a form element?
- How do I check/uncheck a checkbox input or radio button?
- How do I get the text value of a selected option?
- Toggle Checkboxes on/off (Nov 14 '10)
$(input[name='wraps']).prop('checked', true)
Collections
- Essential Controls List
- 43 Essential Controls for Web Applications
- 20 Best jQuery Slideshow / Photo Gallery Plugins
jQuery UI
- http://jqueryui.com/
- Desc. : a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
- Readings
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
- http://code.google.com/p/closure-library/
- Desc. : a broad, well-tested, modular, and cross-browser JavaScript library.
- License : Apache License 2.0
Modernizr
- http://modernizr.com/
- Desc. : a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
- License ; MIT license
Respond.js
- https://github.com/scottjehl/Respond
- Desc. : A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
- License : MIT or GPL Version 2 licenses
Sizzle
- http://sizzlejs.com/
- Desc. : a pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
Moment.js
- http://momentjs.com/
- Desc. : A javascript date library for parsing, validating, manipulating, and formatting dates.
- License : the MIT license
- Sources : https://github.com/moment/moment/
- Readings
Moment Timezone
- http://momentjs.com/timezone/
- Desc. : Parse and display dates in any timezone.
- License :
- Sources : https://github.com/moment/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
- http://code.google.com/p/datejs/
- Desc. : open source JavaScript Date library for parsing, formatting and processing.
Jsonix
- http://confluence.highsource.org/display/JSNX/Jsonix
- Desc. : a JavaScript library which allows you to convert between XML and JSON structures.
- License : BSD-style license
- Written in : JavaScript
- Maven artifacts : org.hisrc.jsonix
- Source : https://github.com/highsource/jsonix
- Readings
JSON
JSON-js
- https://github.com/douglascrockford/JSON-js
- Desc. : implement JSON encoders/decoders in JavaScript.
JSV
- https://github.com/garycourt/JSV
- Desc. : a JavaScript implementation of a extendable, fully compliant JSON Schema validator.
schema.js
- https://github.com/akidee/schema.js
- Desc. : implements data schema validation and adaptation according to JSON Schema (draft 2) for JavaScript (CommonJS).
Jsonix
- http://confluence.highsource.org/display/JSNX/Jsonix
- Desc. : a JavaScript library which allows you to convert between XML and JSON structures.
- License : BSD-style license
- Readings
Visualization
- JavaScript graphics library (Wikipedia)
- SVG Javascript Libraries
- Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael
- Wiki visualisations with JavaScript: Processing.js and Raphaël
- 10 JavaScript libraries to draw your own diagrams (2018 edition) (17/04/2018)
- JointJS, Rappid, MxGraph, GoJS, jsUML2, Nomnoml, Mermaid.js, Diagram.js, State.js, D3, Raphael, Draw2D, Fabric.js, Paper.js, JsPlumb, p5.js, Cytoscape.js, dagre-d3, vis.js
- Top 5 : Best free diagrams javascript libraries (May 30th 2016)
- JointJS, Cytoscape.js, JS Sequence Diagrams, Flowchart, Mermaid
D3.js
- http://d3js.org/
- Desc. : a JavaScript library for manipulating documents based on data.
- License : BSD license
- Source : https://github.com/mbostock/d3
- Articles
- mbostock’s blocks
- D3 Tutorials by Scott Murray
- Jerome Cukier's blog on d3.js
- Data joins
- Transitions
- Scale
- Layout
- misc
- D3.js + HTML5 Canvas
dimple
- http://dimplejs.org/
- Desc. : an object-oriented API allowing you to create flexible axis-based charts using d3.js.
- License : MIT
- Sources : https://github.com/PMSI-AlignAlytics/dimple
- Readings
dc.js
- http://nickqizhu.github.io/dc.js/
- Desc. : a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset.
- License : Apache License
- Source : https://github.com/dc-js/dc.js
- Readings
Cubism.js
- http://square.github.com/cubism/
- Desc. : a D3 plugin for visualizing time series.
- License : Apache License 2.0
Processing.js
- http://processingjs.org/
- Desc. : the sister project of the popular Processing visual programming language, designed for the web.
- License : the MIT License
- Source : https://github.com/processing-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
- http://raphaeljs.com/
- Desc. : a small JavaScript library that should simplify your work with vector graphics on the web.
- License : MIT license
- Source : https://github.com/DmitryBaranovskiy/raphael
- References
- Articles
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
- http://svgjs.com/
- Desc. : A lightweight library for manipulating and animating SVG.
- Licesne ; the MIT License
- Source : https://github.com/wout/svg.js
- Readings
- Documentation
SVG.invent()
- Creating your own custom elements with svg.js is piece of cake thanks to the SVG.invent function.
- Class hierarchy
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
- http://snapsvg.io/
- Desc. : makes working with your SVG assets as easy as jQuery makes working with the DOM.
- License : Apache 2 license
- Source : https://github.com/adobe-webplatform/Snap.svg
- Readings
JavaScript InfoVis Toolkit
- http://thejit.org/
- Desc. : provides tools for creating Interactive Data Visualizations for the Web.
Rickshaw
- http://code.shutterstock.com/rickshaw/
- Desc. : a JavaScript toolkit for creating interactive time series graphs.
- License : the MIT license.
Google Chart Tools
- https://developers.google.com/chart/
- Desc. : provide a perfect way to visualize data on your website.
JSXGraph
- http://jsxgraph.uni-bayreuth.de/wp/
- Desc. : a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.
Galleria
- http://galleria.io
- Desc. : a JavaScript image gallery framework.
Nivo Slider
Chart.js
- http://www.chartjs.org/
- Desc. : Easy, object oriented client side graphs for designers and developers
- License : The MIT License
- Written in : JavaScript
- Source : https://github.com/nnnick/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
- http://morrisjs.github.io/morris.js/
- Desc. : a very simple API for drawing line, bar, area and donut charts.
- License :
- Written in : JavaScript
- Source : https://github.com/morrisjs/morris.js
Text Editing
CodeMirror
- http://codemirror.net/
- Desc. : a versatile text editor implemented in JavaScript for the browser.
- License : MIT style
- Written in : JavaScript
- Source : https://github.com/marijnh/codemirror
- References
vkBeautify
- http://www.eslinstructor.net/vkbeautify/
- Desc. : a small, simple and powerfull javascript plugin to beautify ( pretty print ) or minify text in following formats:
- License : Dual licensed under the MIT and GPL licenses:
- Written in : JavaScript
- Source : https://github.com/vkiryukhin/vkBeautify
SyntaxHighlighter
- http://alexgorbatchev.com/SyntaxHighlighter/
- Desc. : a fully functional self-contained code syntax highlighter developed in JavaScript.
Highlight.js
- http://softwaremaniacs.org/soft/highlight/en/
- Desc. : highlights syntax in code examples on blogs, forums and in fact on any web pages.
- References
Presentation
reveal.js
- https://github.com/hakimel/reveal.js
- A framework for easily creating beautiful presentations using HTML.
- License : MIT licensed
- Written in : JavaScript
- Readings
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
- https://github.com/imakewebthings/deck.js
- A JavaScript library for building modern HTML presentations.
- License : the MIT license
- Written in : JavaScript
- Readings
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
- http://www.trirand.com/blog/
- Desc. : an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
- License : MIT
- Source : https://github.com/tonytomov/jqGrid
- Readings
SlickGrid
- https://github.com/mleibman/SlickGrid/wiki
- Desc. : a JavaScript grid/spreadsheet component.
- License : MIT
- Source : https://github.com/mleibman/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
- https://github.com/RobinHerbots/jquery.inputmask
- Desc. : a jquery plugin which create an input mask.
- License : the MIT license
Toolbar.Js
- http://paulkinzett.github.io/toolbar/
- Desc. : allows you to quickly create tooltip style toolbars for use in web applications and websites.
- License : the MIT license
FX
jQuery Scroll Path
- https://github.com/JoelBesada/scrollpath
- Desc. : A jQuery plugin for defining a custom path that the browser follows when scrolling.
- License : MIT Licensed
misc
jQuery plugin: Validation
Fotorama
- http://fotorama.io/
- Desc. : A simple, stunning, powerful jQuery gallery.
- License : The MIT License
Cycle2
- http://jquery.malsup.com/cycle2/
- Desc. : a versatile slideshow plugin for jQuery built around ease-of-use.
- Licenses : dual licensed under the MIT and GPL licenses.
- Written in : JavaScript
- Source : https://github.com/malsup/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
- https://github.com/carhartl/jquery-cookie
- Desc. : A simple, lightweight jQuery plugin for reading, writing and deleting cookies
- Licenses : MIT License
- Written in : JavaScript
misc
Font Awesome
- http://fortawesome.github.io/Font-Awesome/
- Desc. : The iconic font designed for Bootstrap
- License : MIT License
- References
- Complete set : http://fortawesome.github.io/Font-Awesome/icons/
Animate.css
- https://github.com/daneden/animate.css
- Desc. : a bunch of cool, fun, and cross-browser animations for you to use in your projects.
- License : MIT
FancyBox
- http://fancyapps.com/fancybox/
- Desc. : a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages
- License :
- Readings
Bootswatch
- http://bootswatch.com/
- Desc. : Free themes for Bootstrap
Gate One
- http://liftoffsoftware.com/Products/GateOne
- Desc. : an HTML5-powered terminal emulator and SSH client
- License : AGPLv3 or Commercial Licensing
- Written in : JavaScript
- Source : https://github.com/liftoff/GateOne
Tools
Compiler
Babel
- https://babeljs.io/
- Desc. : a tool that helps you write code in the latest version of JavaScript
- License : MIT License
- Sources : https://github.com/babel/babel
- References
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
- http://html5boilerplate.com/
- Desc. : a professional front-end template for building fast, robust, and adaptable web apps or sites.
- License :
- Readings
Initializr
- http://www.initializr.com/
- Desc. : an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.
- License :
- Source : https://github.com/verekia/initializr
Closure Compiler
- http://code.google.com/p/closure-compiler/
- Desc. : a JavaScript optimizing compiler.
- License : Apache License 2.0
Firebug
- http://getfirebug.com/
- Desc. : Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Code Analysis
JSHint
- http://www.jshint.com/
- Desc. : a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules.
- Readings
JSLint
- http://www.jslint.com/
- Desc. : a JavaScript program that looks for problems in JavaScript programs.
ESLint
- http://eslint.org/
- Desc. : The pluggable linting utility for JavaScript and JSX
Documentation
JSDoc 3
- https://github.com/jsdoc3/jsdoc
- Desc. :An inline API documentation processor for JavaScript.
- License : Apache License, Version 2.0
- Source : https://github.com/jsdoc3/jsdoc
- Readings
Build Tool
- Gulp vs Grunt vs Webpack: Comparison of Build Tools / Task Runners (03/17/2017)
- Webpack vs. gulp vs. Grunt
- NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack (Jan 28 '16)
Grunt
- http://gruntjs.com/
- Desc. : The JavaScript Task Runner
- License :
- Written in : JavaScript
- Source :
- Readings
- Getting started
- Plugins
- Grunt Tutorial
- Grunt JS tutorial from Beginner to Ninja (October 7th 2014)
- Getting started with Grunt.js (Mar 18, 2015)
Brunch
- http://brunch.io/
- Desc. : an ultra-fast HTML5 build tool
- License : the MIT License
- Written in : JavaScript
- Source : https://github.com/brunch/brunch
- Readings
Package Management
Bower
- https://bower.io/
- Desc. : A package manager for the web
Yarn
- https://yarnpkg.com/
- Desc. :
Webpack
- https://webpack.js.org/
- Desc. : a static module bundler for modern JavaScript applications.
Tips and Tricks
JavaScript
Default parameter scope
var greetings = 'Hi';
function sayGreetings(val=greetings){
var greetings = 'Hello';
console.log(val);
}
sayGreetings(); // will print 'Hi'
CSS
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.
- CSS counter-reset property
- CSS :before pseudo element
- Automatic counters and numbering in CSS2.1 spec
- Named HTML entities in automatic counters and numbering using CSS2.1
Samples
CSS
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
/* 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);}