Language
HTML
- 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)
- HTML: Allowed Characters in id Attribute (2012-03-29)
- HTML 4 : ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
Named Entity
Form
MIME
Canvas
Schema.org
SVG
CSS
Property |
Description |
Values
|
display
|
specify how an element is shown on a web page
|
inline | block | contents | ...
|
word-wrap
|
allows long words to be able to be broken and wrap onto the next line
|
normal | break-word | initial | inherit
|
Spec
Selector
Name |
Pattern |
Meaning |
Samples |
Remarks
|
Attribute selector |
E[foo]
|
Matches any E element with the "foo" attribute set (whatever the value). |
|
|
Selector list |
E, F
|
All of element E and element F |
div, p |
all <div> elements and all <p> elements
|
Descendant selector |
E F
|
Matches any F element that is a descendant of an E element. |
|
|
Child selector |
E > F
|
Matches any F element that is a child of an element E. |
|
|
Adjacent selector |
E + F
|
Matches any F element immediately preceded by a sibling element E. |
|
|
Negation pseudo-class |
:not(selector)
|
matches every element that is NOT the specified element/selector. |
|
|
Font
- Consolas
- ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Category |
Unit |
Name |
Description |
Remarks
|
Absolute |
pt |
point |
1/72 in |
|
|
px |
pixel |
0.75 pt , 1/96 in |
|
|
in |
inch |
2.56 cm
|
Relative |
em |
|
equal to the computed value of the 'font-size' property of the element on which it is used |
|
|
rem |
|
equal to the 'font-size' property of root element
|
Color
Box model
Positioning
Functions
Function |
Description |
Since |
Remarks
|
var(name[, fallback])
|
Insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property
|
CSS3 |
|
Collections
JavaScript
Fundamentals
Data Types
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
|
string
|
primitive that is a finite ordered sequence of zero or more 16-bit unsigned integer values |
|
number
|
primitive corresponding to a double-precision 64-bit binary format IEEE 754-2008 value |
|
bigint
|
a numeric data type that can represent integers in the arbitrary precision format |
|
boolean |
|
|
undefined
|
primitive used when a variable has not been assigned a value |
|
null
|
primitive that represents the intentional absence of any object value |
|
symbol
|
primitive that represents a unique, non-String Object property key |
|
Global Methods
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
|
storing a collection of multiple items under a single variable name, and has members for performing common array operations. |
|
|
TypedArray
|
an array-like view of an underlying binary data buffer |
abstract
|
|
Int8Array
|
represents an array of twos-complement 8-bit signed integers. |
[-128, 127], byte
|
|
Uint8Array
|
represents an array of 8-bit unsigned integers. |
[0, 255]
|
|
Set |
|
|
|
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
|
|
prototype.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
|
|
parse()
|
Date.parse(str)
|
parses a string representation of a date, and returns Unix epoch time in milliseconds or NaN if the string is unrecognized
|
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. |
|
|
prototype.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. |
|
|
from()
|
Array.from(arrayLike[, (element, index) => { /* … */ }])
|
Creates a new, shallow-copied array instance from an iterable or array-like object. |
|
|
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 |
|
Set
|
prototype.add() |
|
|
|
|
prototype.delete() |
|
|
|
|
prototype.has() |
|
|
|
Map
|
prototype.get() |
|
Returns a specified element from a Map object. |
|
|
prototype.set() |
|
Adds or updates an entry in a Map object with a specified key and a value. |
|
|
prototype.keys() |
|
Returns a new iterator object that contains the keys for each element in the Map object in insertion order. |
|
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 |
|
boolean |
Boolean literal |
true, false |
|
string |
String literal |
"Deep Purple", 'In Rock' |
|
|
String template literal |
`Count: ${cnt}, Average: ${avg}` `Sum: ${sum(a, b)}, Multipliation: ${muliple(a, b)}` |
|
RegExp |
Regex literal
|
/ab+c/, /w3schools/i |
|
Operators
Category |
Operator |
Name |
Description |
Remarks
|
Logical Operator |
! |
NOT |
|
|
|
&& |
AND |
|
Short circuit
|
|
|| |
OR |
|
Short circuit
|
Bitwise |
^ |
Bitwise XOR |
|
|
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
|
Misc |
in
|
In |
Returns true if the specified property is in the specified object or its prototype chain. |
|
|
?.
|
Optional chaining |
If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error. |
|
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
|
Advanced Grammar
Grammar |
Syntax |
Description |
Since |
Remarks
|
Private class member (# )
|
#fieldName
#methodName(paramList)
|
Class fields are public by default, but private class members can be created by using a hash # prefix. |
|
|
get syntax/set syntax
|
|
|
|
class
|
Optional chaining (? )
|
obj.val?.prop
obj.func?(params)
|
Instead of causing an error if a reference is nullish (null or undefined ), the expression short-circuits with a return value of undefined .
|
ECMAScript 2020 |
Safe navigation operator
|
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
Module
Function
String
Number
RegExp
Array
- Array.prototype.slice.call (
[].slice.call(arguments)
)
- How to cartesian product of 2 arrays using JavaScript ? (11-10-2019)
- Cartesian product of multiple arrays in JavaScript (Sep 6 '12)
- Why can't I use Array#includes for a nested array? (Jan 4 '18)
- How to generate sequence of numbers/chars in javascript? (Sep 20 '10)
- Array(5).fill(1).map((_, i) => i) : [ 0, 1, 2, 3, 4 ]
- Array(5).fill(1).map((_, i) => 2 * i + 1) : [ 1, 3, 5, 7, 9 ]
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(); })();
Async/Await
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
- The (Not So) Secret Lifecycle of Variables
- Hoisting, Re-declaration, Constants, Loops, Uninitialized Variables (aka, TDZ)
- Hoisting in Modern JavaScript — let, const, and var (Sep 11, 2018 ) : Learn How Hoisting Really Works in JavaScript
- lexical environment, hoisting function declaration, temporal dead zone
- JavaScript Variables Lifecycle: Why let Is Not Hoisted (July 27, 2016)
- declaration, initialization, assignment
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
Performance
Collections
- Samples for JavaScript library packaging
TypeScript
Configuration
Option |
Type |
Description |
Remarks
|
files |
array
|
Specifies an allowlist of files to include in the program
|
useful when you only have a small number of files and don’t need to use a glob to reference many files
|
include |
array
|
Specifies an array of filenames or patterns to include in the program
|
support glob patterns (? , * , **/ )
.ts , .tsx , .d.ts , .js , .jsx
|
exclude |
array
|
Specifies an array of filenames or patterns that should be skipped when resolving include option. |
|
Basic Types
Type |
ES Type |
Description |
Examples |
Remarks
|
number |
Number |
|
|
|
string |
String |
|
|
|
bigint |
BigInt |
|
|
|
boolean |
Boolean |
|
|
|
symbol |
Symbol |
|
|
|
null |
Null |
|
|
|
undefined |
Undefined |
|
|
|
object |
Object |
|
|
|
any |
|
|
|
noImplicitAny
|
unknown |
|
the top type |
|
|
never |
|
the bottom type |
|
|
object literal |
|
|
|
|
void |
|
|
|
|
T[] |
|
arrays |
|
Array<T>
|
[T1, T2] |
|
tuples |
|
fixed-length
|
(t: T) => U |
|
functions |
|
|
Advanced Types
Type |
Syntax |
Description |
Examples |
Remarks
|
Union Types |
T1 | T2
|
a type formed from two or more other types, representing values that may be any one of those types
|
id: string | number |
|
Intersection Types |
T1 & T2
|
combine existing object types
|
figure: Colorful & Circle |
|
Generic Types |
T<E>
|
|
Promise<BN> |
|
Type Declaration Packages
import Chance from 'chance'; // implicitly Chance: Chance.ChanceStatic
const chance = new Chance(); // implicitly chance: Chance.Chance
Advanced Grammar
Grammar |
Syntax |
Description |
Remarks
|
Optional Properties
|
propName? : propType
|
Mark properties as optional by adding a question mark (? ) to the end of their names. |
|
Definite Assignment Assertion Operator
|
propName! : propType |
|
|
Read-only Properties
|
readonly propName : propType
|
Properties can also be marked as readonly for TypeScript. |
|
Optional Parameters
|
|
Marking the parameter as optional with ? |
|
Non-null Assertion Operator
|
value!.property , value!.function(params)
|
Writing ! after any expression is effectively a type assertion that the value isn’t null or undefined |
|
Annotations
Annotaion |
Used in |
Description |
Remarks
|
// @ts-check |
JS |
enable TypeScript checking in your JavaScript file |
1st line of the .js file
|
// @ts-nocheck |
JS |
skip TypeScript checking for a file |
|
// @ts-ignore |
JS, TS |
ignore errors on specific lines |
|
// @ts-expect-error |
JS, TS |
ignore errors on specific lines |
|
Readings
|
Declaration Merging |
Extension |
Intersection |
Union |
Tuple
|
Type |
X |
X |
O |
O |
O
|
Interface |
O |
O |
X |
X |
X
|
ts-node
Platforms
Meteor
Frameworks
Front-end
Bootstrap
References
Bootstrap 4
Bootstrap 3
Readings
Collections
BootstrapVue
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
- http://durandaljs.com/
- Desc. : small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant.
- License : the MIT License
- Readings
Electron
Networking
Socket.IO
- http://socket.io/
- Desc. : a JavaScript library for realtime web applications.
- References
- Readings
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
- 11 JavaScript Utility Libraries you Should Know in 2019 (May 31, 2018)
- Underscore, Lodash, Ramda, MathJS, Sugar, Lazy, CollectJS, ChanceJS, ChartJS, Polished, Mout
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 |
|
|
pickset() |
|
|
|
shuffle() |
|
|
|
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
Tiny Validator
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
Font Awesome 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
- 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
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
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
UnoCSS
Windi CSS
Category |
Utility |
Classes |
Description |
Remarks
|
Colors |
|
teal-50 , teal-100 , teal-200 , ... teal-900 , slate-50 , stone-100 , stone-200 , ... stone-900 , stone-50 , stone-100 , stone-200 , ... stone-900
|
|
|
Typography |
Font Size
|
text-xs , text-sm , text-base , text-lg , text-nxl
|
controlling the font size of an element |
2 ≤ n ≤ 8
|
|
Text Alignment
|
text-left , text-center , text-right , text-justify
|
controlling the horizontal alignment of text. |
|
List |
List Bullet Type
|
list-none , list-disc , list-circle , list-square , list-decimal , list-zero-decimal , list-greek , list-roman , list-upper-roman , list-alpha , list-upper-alpha
|
controlling the bullet/number style of a list |
|
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 |
|
Sizing |
Width |
w-n
|
setting the width of an element |
w-auto , w-full , w-3/5 (60%), w-4 (1rem), w-48 (24rem)
|
|
Height |
h-n
|
setting the height of an element |
h-auto , h-full , h-3/5 (60%), h-4 (1rem), h-48 (24rem)
|
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 |
|
Tailwind CSS
Icons
Syntax Highlighter
Tips and Tricks
<!-- Vertical spacing between blocks -->
<div class='container py-4'/>
<!-- Image with Slidev's built-in styles -->
<img src='https://www.w3.org/TR/vc-data-model/diagrams/ecosystem.svg' class='h-84 ml-4 mt-12 pt-4'>
<img src='payment-gateway-flow.svg' class='h-9/10'>
<!-- Rendering diagram with PlantUML -->
```plantuml
@startuml
'https://plantuml.com/sequence-diagram
Title "Payment Gateway Worflow"
Hide footbox
Actor Customer as customer order 10
participant "Online Mall" as mall order 30
participant "Payment Diaglog" as dialog order 20
participant "Order Result Page" as result order 25
participant "Payment Gateway" as gateway order 40
participant "VAN Service" as van order 50
...
@enduml
```
<!-- Highlighting PlantUML source without rendering -->
~~~plantuml
@startuml
'https://plantuml.com/sequence-diagram
Title "Payment Gateway Worflow"
Hide footbox
Actor Customer as customer order 10
participant "Online Mall" as mall order 30
participant "Payment Diaglog" as dialog order 20
participant "Order Result Page" as result order 25
participant "Payment Gateway" as gateway order 40
participant "VAN Service" as van order 50
...
@enduml
~~~
.slidev-layout.default {
padding-top: 3em;
padding-bottom: 3em;
}
.slidev-code {
font-size: 0.9rem !important;
line-height: 1.4 !important;
background-color: rgb(243, 242, 242) !important; /* transparent */
border: 1px dotted tan;
border-radius: 6px;
}
.text-sm .slidev-code {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
.slidev-layout :not(pre) > code {
padding: 0.2em 0.4em;
background-color: rgba(175, 184, 193, 0.2);
border-radius: 6px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:not(pre) > code:before, :not(pre) > code:after {
content: '';
}
.slidev-layout th, .slidev-layout td, .slidev-layout tr{
border: 1px dotted tan;
}
.slidev-layout th {
text-align: center !important;
}
.slidev-layout th:first-of-type, .slidev-layout th:last-of-type, .slidev-layout td:first-of-type, .slidev-layout td:last-of-type, .slidev-layout tr {
border-left: 0px;
border-right: 0px;
}
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
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
- http://html5boilerplate.com/
- Desc. : a professional front-end template for building fast, robust, and adaptable web apps or sites.
- License :
- Readings
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
Configuration
Object |
Description |
Remarks
|
files
|
An array of glob patterns indicating the files that the configuration object should apply to. |
|
ignores
|
An array of glob patterns indicating the files that the configuration object should not apply to. |
|
env
|
Which environments your script is designed to run in.
|
browser , node , es6 , es2017 , es2018 , es2019 , ...
|
globals
|
The additional global variables your script accesses during execution |
|
parserOptions
|
Specify the JavaScript language options you want to support |
ecmaVersion , sourceType , ecmaFeatures
|
rules
|
Which rules are enabled and at what error level. |
|
plugins
|
Which third-party plugins define additional rules, environments, configs, etc. for ESLint to use. |
|
- Old Configurations
.eslintrc.js
, .eslintrc.cjs
, .eslintrc.yaml
, .eslintrc.json
, package.json
Rules
Plugins
Readings
Documentation
JSDoc 3
Readings
TypeDoc
Build Tool
Grunt
- http://gruntjs.com/
- Desc. : The JavaScript Task Runner
- License :
- Written in : JavaScript
- Source :
- Readings
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.
- 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.
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;
}
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.
GitHub Style Fancy Inline Code
code{
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
white-space: break-spaces;
/* background-color: rgba(110, 118, 129, 0.4); */ /* for dark theme */
background-color: rgba(183, 183, 183, 0.1); /* for light theme */
border-collapse: collapse;
border-color: rgba(156, 156, 156, 0.4);
border-width: 1px;
border-style: solid;
border-radius: 6px;
}
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);}