3rdstage's Wiki
Advertisement

Language

HTML

Named Entity

Category Entity HTML Code Unicode Name Remarks
Text ′ U+02032 Prime minutes
″ U+02033 Double Prime
• Bullet
· · Middle Dot
⋯; ⋯; Middle Horizontal Ellipsis
… Horizontal Ellipsis
⋮ U+022EE Vertical Ellipsis
| | Vertical Bar
Math ≡ Identical To
≠ Not Equal To
≈ U+02248 Almost Equal To Asymptotic To, Approximation
≅ U+02245 Approximately Equal To Usually between figures
≤ U+02264 Less Than Or Equal To
≥ U+02265 Greater Than Or Equal To
≫ U+0226B Much Greater Than
∈ U+2208 Element Of
∊ U+220A Small Element Of
⊂ U+2282 Subset Of
∞ U+221E Infinity
∑ Summation
Mark ↑ Upwards Arrow
↓ Downwards Arrow
← Leftwards Arrow
→ Rightwards Arrow
&#8251 U+0203B Reference Mark
Character ₐ a Latin subscript small letter a
ₘ m Latin subscript small letter m
ₙ n Latin subscript small letter n
Category Examples
Arrow Symbols ⮘ ⮙ ⮚ ⮛ 🡠 🡡 🡢 🡣 🡤 🡥 🡦 🡧 ⭮ ⭯
Number Symbols ① ② ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪
Subscript and superscript ⁻¹

Form

MIME

Canvas

Schema.org

SVG

CSS

Property Description Syntax
word-wrap allows long words to be able to be broken and wrap onto the next line break-word|initial|inherit

Selector

Name Pattern Meaning Samples Remarks
Descendant selectors E F Matches any F element that is a descendant of an E element.
Child selectors E < F Matches any F element that is a child of an element E.
Adjacent selectors E + F Matches any F element immediately preceded by a sibling element E.
Attribute selectors E[foo] Matches any E element with the "foo" attribute set (whatever the value).

Box model

Positioning

Font

  • Consolas
    • ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Pseudo-classes/Pseudo-elements

Collections

JavaScript

References

Edition Released at Spec Remarks
11 Jun 2020 ECMAScript® 2020 Language Specification
10 Jun 2019 ECMAScript 2019 Language Specification
9 Jun 2018 ECMAScript 2018 Language Specification
8 Jun 2017 ECMAScript 2017 Language Specification
7 Jun 2016 ECMAScript 2016 Language Specification
6 Jun 2015 ECMAScript 2015 Language Specification
5.1 Jun 2011 ECMAScript Language Specification 5.1 Edition
Primitive Types
  • primitive value : member of one of the types Undefined, Null, Boolean, Number, Symbol, or String
  • Primitive : There are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol.
Primitive Description Remarks
undefined primitive used when a variable has not been assigned a value
null primitive that represents the intentional absence of any object value
Boolean
String primitive that is a finite ordered sequence of zero or more 16-bit unsigned integer values
Symbol primitive that represents a unique, non-String Object property key
Number primitive corresponding to a double-precision 64-bit binary format IEEE 754-2008 value
Global Methods
Method Description Remarks
isFinite()
isNaN()
parseInt()
Global Objects
Category Object Description Remarks
Fundamental Object
Function Every JavaScript function is actually a Function object.
Primitive Number a primitive wrapper object used to represent and manipulate numbers like 37 or -9.25.
BigInt a primitive wrapper object used to represent and manipulate primitive bigint values — which are too large to be represented by the number primitive.
Boolean an object wrapper for a boolean value.
Symbol
Date represent a single moment in time in a platform-independent format.
Text processing String a constructor for strings or a sequence of characters
RegExp creates a regular expression object for matching text with a pattern
JSON parsing JavaScript Object Notation (JSON) and converting values to JSON parse(), stringify()
Container Array used in the construction of arrays
Map holds key-value pairs and remembers the original insertion order of the keys. iterative, enumerable
Concurrency Promise represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Misc Math has properties and methods for mathematical constants and functions
Object Property/Method Syntax 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
prototype.constructor Returns a reference to the Object constructor function that created the instance object
preventExtensions() Prevents new properties from ever being added to an object (i.e. prevents future extensions to the object)
values() Returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. keys(), entries()
keys() Object.keys(obj) Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would. values(), entries()
entries() Returns an array of a given object's own enumerable string-keyed property [key, value] pairs. values(), keys()
assign() Copies all enumerable own properties from one or more source objects to a target object
seal() Seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable
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
defineProperty() Defines a new property directly on an object, or modifies an existing property on an object, and returns the object
prototype.toLocaleString() Is meant to be overridden by derived objects for locale-specific purposes.
Number MAX_SAFE_INTEGER Represents the maximum safe integer in JavaScript (253 - 1) (= 9,007,199,254,740,991 ~ 9·1015 < 1016).
parseInt Parses a string argument and returns an integer of the specified radix or base.
prototype.toLocaleString() Returns a string with a language-sensitive representation of this number. thousand separator
BigInt BigInt() without the new operator
toLocaleString()
String length Contains the length of the string, in UTF-16 code units read-only
prototype.padEnd() Pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length.
prototype.padStart()
Date new Date() Creates a JavaScript Date instance that represents a single moment in time in a platform-independent format. Date object
Date() Returns a string representation of the current date and time, exactly as new Date().toString() does. string
now() Returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC. Number
Array length Sets or returns the number of elements in that array.
prototype.push() Adds one or more elements to the end of an array and returns the new length of the array.
includes() Determines whether an array includes a certain value among its entries, returning true or false as appropriate.
prototype.slice() slice(start[, end]) Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) A negative index can be used
prototype.forEach() Executes a provided function once for each array element.
prototype.filter() filter((element[, index]) => { /* ... */ } ) Creates a new array with all elements that pass the test implemented by the provided function.
prototype.map() Creates a new array populated with the results of calling a provided function on every element in the calling array.
prototype.reduce() reduce((prev, curr[, index]) => { /* ... */ } ) Executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element
Map prototype.get()
prototype.set()
let ev = rslt.logs.filter(log => log.event === 'Transfer')[0];

const max = estimates.map(e => e.fn.length).reduce((prev, curr) => Math.max(prev, curr));
Literals
  • Literals
    • Numeric literals, Floating-point literals, Boolean literals, String literals, RegExp literals, Array literals, Object literals
Data-type Literal Type Example Remark
number Decimal literal 31, -31. 31,000 Should NOT start with 0, (31).toFixed()
Octal literal 031, 0o31 Starts with 0, 0o or 0O, 031.toFixed()
Hexadecimal literal 0xff Starts with 0x, 0xffff.toFixed()
Binary literal 0b1011 Starts with 0b or 0B, 0b111100.toFixed()
Exponent literal 1e3, 3.56e+2, 314e-2, 1225E-2
string String literal "Deep Purple", 'In Rock'
String template literal `Count: ${cnt}, Average: ${avg}`
`Sum: ${sum(a, b)}, Multipliation: ${muliple(a, b)}`
boolean Boolean literal true, false
Operators
Category Operator Name Description Remarks
Logical Operator ! NOT
&& AND Short circuit
|| OR Short circuit
Comparison == Loose Equality Returns true if the operands are equal.
=== Strict Equality Returns true if the operands are equal and of the same type. Object.is
!= Loose Inequality Returns true if the operands are not equal.
!== Strict Inequality Returns true if the operands are of the same type but not equal, or are of different type.
> Greater Than
>= Greater Than or Equal Not Less Than
< Less Than
<= Less Than or Equal Not Greater Than
Expressions and Statements
Expression/Statement Syntax Description Remarks
Rest parameter f(...r)
f(a, b, ...r)
represent an indefinite number of arguments as an array
Destructuring assignment [a, b] = [1, 2]
[a, ...r] = [1, 2, 3]
makes it possible to unpack values from arrays, or properties from objects, into distinct variables
Arrow function param => expression
(param1, ..., paramN) => expression
(param1, ..., paramN) => { statements }
a compact alternative to a traditional function expression the brackets {} and parentheses () and return are optional
Async function expression
Async function statement Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.
Await expression The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment.
Category Statement Syntax Description Remarks
Control flow if condition
switch statement switch ...
Iteration for loops creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement to be executed in the loop.
for...in loops for(var in object){ statements } iterates over all enumerable properties of an object that are keyed by strings. not for array
for...of loops for(var of iterable){ statements } creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.
for await...of loops for await(var of iterable){ statements } creates a loop iterating over async iterable objects as well as on sync iterables.
while loops creates a loop that executes a specified statement as long as the test condition evaluates to true.
do...while loops creates a loop that executes a specified statement until the test condition evaluates to false.
Others debugger statement debugger; invokes any available debugging functionality, such as setting a breakpoint.
Spread Syntax/Rest Syntax
Syntax Description Remarks
Spread Syntax Allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.
Rest Syntax(Parameters) Collects multiple elements and "condenses" them into a single element. the opposite of spread syntax

DOM

  • DOM(Document Object Model)
    • connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.
  • JavaScript HTML DOM
    • With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

Readings

Grammar
Feature var let
Scope Function Block
Global property Creat Doesn't create
Hoisting Applied Doesn't applied
Redeclaration Allowed Disallowed
Object
Class
Function
String
Number
RegExp
Array
Map
Concurrency
  • How does JavaScript and JavaScript engine work in the browser and node? (Apr 24, 2018)
    • The lack of type system is what makes JavaScript slow to run.
    • The lack of type system in JavaScript is what makes JavaScript engine produce less optimized machine code.
    • These Web APIs are asynchronous.
    • Now the callback function is with the Web API which is performing its operation on a separate thread, separate from the main thread.
    • The only job of the event loop is to look at callback queue and once there is something pending in callback queue, push that callback to the stack. The event loop pushes one callback function at a time, to the stack, once the stack is empty. Later, the stack will execute the callback function.
    • Node.js uses Google’s V8 engine to provide JavaScript runtime and employes its own event loop using the libuv library (written in c).
    • But V8, event queue, and event loop runs on the single thread while worker threads are responsible to provide asynchronous I/O operation. That’s why Node.js is said to have as non-blocking event-driven asynchronous I/O architecture.
Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

One of the great things about using promises is chaining.

In the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom: With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

Promises solve a fundamental flaw with the callback pyramid of doom, by catching all errors, even thrown exceptions and programming errors. This is essential for functional composition of asynchronous operations.

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

A pending promise can either be fulfilled with a value or rejected with a reason (error)

// old-fashioned passed-in callbacks
doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback); 

}, failureCallback);

// modern promise chain - equivalent but flat and simpler
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => { console.log(`Got the final result: ${finalResult}`); }) 
.catch(failureCallback); 

// more simpler with arrow function
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => { console.log(`Got the final result: ${finalResult}`); })
.catch(failureCallback);

// sync-style with async/await
async function foo() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(`Got the final result: ${finalResult}`);
  } catch(error) {
    failureCallback(error);
  }
}
// advanced usages

// IIFE(Immediately Invoked Function Expression) with Promieses
(async () => { await someAsyncFunction(); })();
await (async () => { return await someAsyncFunction(); })();
Method Description Remarks
Promise.prototype.then(onFulfilled[, onRejected)] Appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return value of the called handler, or to its original settled value if the promise was not handled.
Promise.prototype.catch(onRejected) Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.
Promise.prototype.finally(onFinally) Appends a handler to the promise, and returns a new promise that is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.
Promise.all(iterable) Wait for all promises to be resolved, or for any to be rejected. blocked
Promise.allSettled(iterable) Wait until all promises have settled (each may resolve or reject). blocked
Promise.any(iterable)
Promise.race(iterable) Wait until any of the promises is fulfilled or rejected.
Promise.resolve(value) Returns a new Promise object that is resolved with the given value.
Promise.reject(reason) Returns a new Promise object that is rejected with the given reason.
Async/Await
Scope

JavaScript has function-level scope.

Functions can have named formal parameters, which are scoped to the body of that function.

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. Notice that the assignment portion of the declarations were not hoisted. Only the name is hoisted.

Declarations made using let and const are not initialized as part of hoisting.

JavaScript only hoists declarations, not initializations.

Variables declared with let and const are also hoisted, but unlike for var the variables are not initialized with a default value of undefined. Until the line in which they are initialized is executed, any code that accesses these variables will throw an exception.

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

The let statement declares a block-scoped local variable, optionally initializing it to a value.

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

foo(); // TypeError "foo is not a function"
bar(); // valid
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"

var foo = function () {}; // anonymous function expression ('foo' gets hoisted)
function bar() {}; // function declaration ('bar' and the function body get hoisted)
var baz = function spam() {}; // named function expression (only 'baz' gets hoisted)

foo(); // valid
bar(); // valid
baz(); // valid
spam(); // ReferenceError "spam is not defined"


console.log(num); // Throws ReferenceError exception
num = 6; // Initialization without declaration -> no hoisting


catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Chloe"
*/
Closure
IIFE
Modulization
Performance

Collections

  • Samples for JavaScript library packaging

TypeScript

Platforms

Meteor

Frameworks

Front-end

Bootstrap

References
Bootstrap 4
Bootstrap 3
Readings
Collections

Foundation

AngularJS

React

Readings
Tools

Ant Design

Knockout

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

Electron

Networking

Socket.IO

Testing

Mocha

Readings

QUnit

Jasmine

should.js

expect.js

Chai

  • https://www.chaijs.com/
  • Desc. : a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework
  • License :
  • Sources :
Readings
Function Description Remarks
isTrue(expr) Asserts that result of the expression is true. isNotTrue, isFalse
isFalse(expr) Asserts that result of the expression is false. isNotFalse, isTrue
equal(actual, expected) Asserts non-strict equality (==)
strictEqual(actual, expected) sserts strict equality (===)
deepEqual(actual, expected) Asserts that actual is deeply equal to expected. Object
isEmpty(target) Asserts that the target does not contain any values. Object, Array, Map, Set, String
sameMembers(s1, s2) Asserts that s1 and s2 have the same members in any order. Uses a strict equality check (===). Array

CSS

Compass

Sass

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

Compass

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

Lodash

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

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

Datatype

bn.js

Datejs

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

Chance

Function Description Parameters Remarks
integer() Return a random integer. min, max [-253 + 1, 253 - 1]
natural() Return a natural number. min, max, exclude [0, 253 - 1]
pickone() Given an array, pick a random element and return it

Immutable.js

Concurrency

Async

  • https://github.com/caolan/async
  • Desc. : a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.
  • License

Promises

async-mutex

JSON

JSON-js

JSV

schema.js

Jsonix

DOM

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

  • http://jqueryui.com/
  • Desc. : a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

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

Icons

Material Design Icons

CSS

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.

Tailwind CSS

  • https://tailwindcss.com/
  • Desc. : A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup
Category Utility Class Description Remarks
Typography Text Size text-xs, text-sm, text-base, text-lg, text-2xl, text-3xl controlling the font size of an element
Text Color text-grey-nnn, text-orange-nnn, text-lime-nnn, text-indigo-nnn, text-teal-nn controlling the text color of an element
Vertical Alignment align-baseline, align-top, align-middle controlling the vertical alignment of an inline or table-cell box
Word Break break-normal, break-words, break-all controlling word breaks in an element
Layout Display block, inline, grid controlling the display box type of an element

Windi CSS

Visualization

D3.js

References
Readings

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.

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

Cytoscape.js

References
Layouts
Layout Description Remarks
Grid puts nodes in a well-spaced grid
Cose (Compound Spring Embedder) uses a physics simulation to lay out graphs
Cola uses a force-directed physics simulation with several sophisticated constraints, written by Tim Dwyer
Euler a fast, high-quality force-directed (physics simulation) layout
Spread physics simulation layout

jsPlumb

svg.js

  • 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

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

Flot

Text Editing

CodeMirror

vkBeautify

SyntaxHighlighter

Highlight.js

Presentation

reveal.js

Slidev

Windi CSS Utilities
Category Utility Class Description Remarks
Grid Grid grid create a grid container
Inline Grid inline-grid create an inline grid container
Grid Template Columns grid-cols-n specifying the columns in a grid layout
Grid Template Rows grid-rows-m specifying the rows in a grid layout
Grid Column Span col-span-full, col-span-n specifying the column size of an element in a grid layout
Grid Row Span row-span-full, row-span-n specifying the row size of an element in a grid layout
Spacing Padding p-n controlling an element's padding p-4 : 1rem
Padding Y py-n controlling an element's vertical padding padding-top, padding-bottom
Padding Top pt-n controlling an element's top padding
Padding Left pl-n controlling an element's left padding
Padding Bottom pb-n controlling an element's bottom padding
Margin m-n controlling an element's margin
Margin Y my-n controlling an element's vertical margin margin-top, margin-bottom
Margin Top mt-n controlling an element's top margin
Margin Left ml-n controlling an element's left margin
Margin Bottom mb-n controlling an element's bottom margin
Icons
Collection Tag Name Catalog Description License Remarks
Material Design <mdi-icon-name /> Material Design Icons
Carbon <carborn-icon-name /> Carbon Icons Apache 2.0
Unicons <uim-icon-name> / Unicons Monochrome Icons Apache 2.0
Twitter Emoji <twemoji-icon-name> / standard Unicode emoji support across all platforms MIT, CC-BY 4.0
SVG Logos <logos-icon-name> / SVG PORN CC0-1.0

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

  • 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 :

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

  • 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

ESLint

Documentation

JSDoc 3

Readings

Build Tool

Grunt

Brunch

Package Management

Bower

Yarn

Webpack

Tips and Tricks

JavaScript

Default parameter scope

var greetings = 'Hi';

function sayGreetings(val=greetings){
  var greetings = 'Hello';
  console.log(val);
}

sayGreetings(); // will print 'Hi'

Sleep for a specified interval using a single line

Await a promise with simple timer.

await new Promise(r => setTimeout(r, 3000));

Coding Convention

  • Variable
    • Define all variables at the top of the function.
    • Don't use symbol and bigint datatypes.
    • Use const for all of your references.
    • Note that both let and const are block-scoped
  • Function
    • Distinguish function declaration and function expression
      • Function declaration : function foo(){}
      • Function expression : var foo = function(){}
  • Object
    • Use {} instead of new Object()
    • Use [] instead of new Array()
    • Avoid wrapper objects for primitive types.
  • String
    • Distinguish RegExp.test(), String.search() and String.match(), specially in performance.
  • Must Use
  • Never Use
    • Avoid with clause.
    • Avoid eval function.
    • Avoid for-in clause, specially with array.
      • for-in loop over all the present keys in the object and its prototype chain.
  • Misc
    • Be careful with this.

HTML

Basic template

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Standard Template</title>
<style type="text/css">
/* local styles here */

</style>
</head>
<body>

</body>
</html>

CSS

Basic template

body {
  font-family: "맑은 고딕", Georgia, Verdana, sans-serif;
  font-size: 1.0em; 
  line-height:1.5;
  margin-left:2.0em;
  counter-reset: step-h3;
}

pre, code, 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 {
  font-family: "맑은 고딕", Helvetica, "Trebuchet MS", Verdana;
  margin-top:1.0em;
  margin-bottom:1px;
  padding-top:0px;
  padding-bottom:0px;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size:1.8em; }
h2 { font-size:1.5em; }
h3 { font-size:1.4em; }
h4 { font-size:1.3em; }
h5 { font-size:1.2em; }
h6 { font-size:1.15em; }

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

div.syntaxhighlighter{
  padding-top:0.5em;
  padding-bottom:0.5em;
  padding-left:0.5em;
  border:thin solid lightgray;
}
div.syntaxhighlighter div.line{
  line-height:1.5 !important;
}

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.

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);}
Advertisement