3rdstage's Wiki
Register
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 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

Title Code Description Remarks
CSS Level 2 CSS2 defines the core of CSS, parts of which are overridden by later specifications
CSS Syntax Level 3 CSS-SYNTAX-3
Selectors Level 3 SELECTORS-3

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

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
  • template literals (``)
  • computed property names
  • let/const declarations
  • for...of loop
  • arrow function expression (() => {...})
  • class
  • promises
  • Spread/Rest syntax (...)
5.1 Jun 2011 ECMAScript Language Specification 5.1 Edition
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
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 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
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
Performance

Collections

  • Samples for JavaScript library packaging

TypeScript

Configuration

  • Top Level
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.
  • compilerOptions
Category Option Type Description Remarks
Module module
moduleResolution
resolveJsonModule boolean
typeRoots array
types array
Type Checking strict boolean
alwaysStrict boolean
noImplicitThis boolean
noImplicitAny boolean
Emit sourceMap
JavaScript Support allowJs boolean
checkJs boolean
Interop Constraints esModuleInterop boolean
forceConsistentCasingInFileNames boolean
Language and Environment lib array
emitDecoratorMetadata
experimentalDecorators
Completeness skipDefaultLibCheck boolean
skipLibCheck boolean
  • watchOptions
Category Option Type Description Remarks
Watch excludeDirectories array
excludeFiles array

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

Type Package Target Package Description Namespaces/Types Remarks
@types/node node
@types/bn.js bn.js Type definitions for bn.js
@types/chai Chai Type definitions for chai
@types/chance Chance Type definitions for Chance Chance. ChanceStatic, Chance.Chance
@typechain/web3-v1 web3.js v1.8.0 TypeScript bindings for Web3 1.x.x smartcontracts
@typechain/truffle-v5 Truffle TypeScript bindings for Truffle 5.x.x smartcontracts
@types/k6 k6
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

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

Collection Description Adopted by Remarks
Material Design Icons the official icon set from Google Material Icons Catalog, Material Symbols Catalog
SVG Logos A curated collection of SVG logos for developers/DevOps/geeks PlantUML, Slidev Catalog
Unicons the ultimate collection of free icon fonts, SVG icons, 3D icons and animated icons Slidev Catalog
Open Iconic PlantUML, Creole

Material Design Icons

Set Description Catalog
Material Icons classic set Material Icons Catalog
Material Symbols Material Symbols Catalog

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

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

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
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
Syntax Highlighter
Library Languages Remmarkable Languages Themes Description Remarks
Prism Supported languages plantuml Prism themes a lightweight, extensible syntax highlighter, built with modern web standards in mind
Shiki shiki-languages shiki-themes a beautiful Syntax Highlighter
Tips and Tricks
  • Reusable Elements
<!-- 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'>
  • Play with diagrams
<!-- 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
~~~
  • Typical Global Styles
.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
  • 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

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
Plugin Description Package Documentation Remarks
typescript-eslint The tooling that enables ESLint and Prettier to support TypeScript. @typescript-eslint/eslint-plugin https://typescript-eslint.io/getting-started/
Readings

Documentation

JSDoc 3

Readings

TypeDoc

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.

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