1

2
3
4
5
6
See
• [Link]
• [Link]

7
Both maintain separate specifications to cover the related technologies: Microdata,
Canvas 2D Context, Web Workers, Web Storage,…

See:
• [Link]
• [Link]
• [Link]

8
See:
• [Link]
• [Link]
• [Link]
• [Link]

9
New HTML syntax structure: media type, doctype, character encoding, void elements,
boolean attributes...

Important: to ensure that all browsers read the character encoding correctly, the
entire character-encoding declaration must be included somewhere within the first
512 characters of your document. It should also appear before any content-based
elements (such as title element)

See:
• [Link]
• [Link]
• [Link]
• [Link]
US/docs/Web/HTML/Element#Document_metadata
• [Link]

10
At a high level, HTML4 had two major categories of elements, "inline" (e.g. span, img,
text), and "block-level" (e.g. div, hr, table). HTML does not use the terms "block-
level" or "inline" as part of its content model rules, to reduce confusion with CSS,
however, it has more categories than HTML4. As a broad change from HTML4, HTML
no longer has any element that only accepts what HTML4 called "block-level"
elements; e.g. the body element now allows flow content. Thus, This is closer to
HTML4 Transitional than HTML4 Strict.

• Metadata content is content that sets up the presentation or behavior of the rest
of the content, or that sets up the relationship of the document with other
documents, or that conveys other "out of band" information.
• base link meta noscript script style template title
• Most elements that are used in the body of documents and applications are
categorized as flow content.
• a abbr address area (if it is a descendant of a map element) article aside
audio b bdi bdoblockquote br button canvas cite code data datalist del dfn
div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i
iframe img input ins kbd keygen label main map mark math meter nav

11
 noscript object ol output p pre progress q ruby s sampscript section select
small span strong sub sup svg table template textarea time u ul var video
wbr text
• Sectioning content is content that defines the scope of headings and footers. Each
sectioning content element potentially has a heading and an outline. See the
section on headings and sections for further details.
• article aside nav section
• Heading content defines the header of a section (whether explicitly marked up
using sectioning content elements, or implied by the heading content itself).
• h1 h2 h3 h4 h5 h6
• Phrasing content is the text of the document, as well as elements that mark up
that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
• a abbr area (if it is a descendant of a map element) audio b bdi bdobr
button canvas cite code data datalist del dfnem embed i iframe img input
ins kbd keygenlabel map mark math meter noscript object output progress
q ruby s sampscript select small span strong sub sup svg template textarea
time u var video wbr text
• Embedded content is content that imports another resource into the document,
or content from another vocabulary that is inserted into the document.
• audio canvas embed iframe img math object svg video
• Interactive content is content that is specifically intended for user interaction.
• a audio (if the controls attribute is present) button embed iframe img (if
the usemap attribute is present) input (if the type attribute is not in the
hidden state) keygen label object (if the usemapattribute is present) select
textarea video (if the controls attribute is present)

See
• [Link]
• [Link]
• [Link]

11
New HTML 5 structural elements.

Header: identifies the top of a page, article, section, or segment.

Nav: identifies a section of major navigational links on a page.

Article: identifies a section of independent, self-contained content that may be

independently distributed or reused.

Section: identify a thematic grouping of content.

Article and Section contribute to the document’s structure and help to outline a
document.

If the content adds to the document outline and it can be independently redistributed
or syndicated, use the <article> element.
If the content adds to the document outline and represents a thematic group of
content, use the <section> element.
If the content is grouped solely for styling purposes and doesn’t provide value to the

12
outline of a document, use the <div> element.

Aside: holds content that is tangentially related to the content surrounding it.

Footer: identifies the closing or end of a page, article, section or other segment of a
page.

See:
• [Link]
US/docs/Web/HTML/Element#Content_sectioning

12
See:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
US/docs/Web/Guide/HTML/HTML5/Constraint_validation

13
Media elements (video and audio) have APIs for controlling playback, syncronizing
multiple media elements, and timed text tracks (e.g. subtitles). The track element is
used for captions, subtitles and timed metadata.

Frameworks leverage the HTML 5 multimedia API, ex: [Link]

See
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

14
For example, it can be used to draw graphs, make photo compositions or even
perform animations. You may (and should) provide alternate content inside the
<canvas> block. That content will be rendered both on older browsers that don't
support canvas and in browsers with JavaScript disabled.

Some interesting libraries that leverage the canvas:

• [Link]
• [Link]
• [Link]
• [Link]

See:
• [Link]
• [Link]
• [Link]
• [Link]

15
See:
• [Link]

16
See
• [Link]
• [Link]
extensions
• [Link]

17
See:
• [Link]

18
See
• [Link]
• [Link]

19
20
Some website owners are not even aware of the importance of making their website
accessible. Websites are required to be accessible in many countries by national
policies. The UN Convention on the Rights of Persons with Disabilities states that
people with disabilities have a right to access information and services via the
Internet. Also, accessible websites provide business benefits for website owners and
benefits for people without disabilities.

Offer you user a way to provide positive feedback as well as critical feedback. Provide
key contacts and links : Accessibility, Editor, Author, Page Owner, Webmaster, Contact
Us, Feedback, Comments, Help, Support, Customer Service, “FAQ” (frequently asked
questions) …

21
See:
• [Link]
• [Link]

22
See:
• [Link]
• [Link]

23
It is essential that several different components of Web development and interaction
work together in order for the Web to be accessible to people with disabilities. These
components include:

• content - the information in a Web page or Web application, including:

• natural information such as text, images, and sounds
• code or markup that defines structure, presentation, etc.
• Web browsers, media players, and other "user agents"
• assistive technology, in some cases - screen readers, alternative keyboards,
switches, scanning software, etc.
• users' knowledge, experiences, and in some cases, adaptive strategies using the
Web
• developers - designers, coders, authors, etc., including developers with disabilities
and users who contribute content
• authoring tools - software that creates Web sites
• evaluation tools - Web accessibility evaluation tools, HTML validators, CSS
validators, etc.

See:

24
• [Link]

24
See:
• [Link]
• [Link]
• [Link]

25
See:
• [Link]

26
The WAI offers tutorials, see [Link]

Web Content Accessibility Guidelines (WCAG) is a guide for making websites

accessible to people with disabilities.

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)

specifies how to increase the accessibility of web pages, in particular, dynamic
content and user interface components developed with Ajax, HTML, JavaScript and
related technologies. WAI-ARIA describes how to add semantics and other metadata
to HTML content in order to make user interface controls and dynamic content more
accessible.

Other Referentials:
• Mobile Web Best Practices (MWBP) is a guide for making websites usable from a
mobile device.
• Mobile Web Application Best Practices (MWABP) is a guide for developing and
delivering web applications on mobile devices.
• Référentiel général d’accessibilité pour les administrations (RGAA)
• AccessiWeb

27
• section 508

See:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

27
See:
• [Link]
• [Link]
• [Link]
• [Link]

28
29
30
Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page
performance. YSlow's web page analysis is based on the 23 of these 34 rules that are
testable. See: [Link]

Google also publicizes rules, see

[Link]

HttpWatch is also a useful paid tool: [Link]

See:
• [Link]

31
See:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

32
The style of an element is evaluated on element creation.
[Link]
The key selector, is the right-most part of a larger CSS selector. This is what the
browser looks for first.

But find a balance between adding classes and identifiers to everything and using
deep selector rules creating tight coupling between HTML and CSS.

You can alsotest the selectors speed, see

• [Link]
• [Link]

See:
• [Link]
• [Link]
• [Link]

33
See:
• [Link]
[Link]
• [Link]

34
See
• [Link]
content-efficiency/http-caching?hl=en
• [Link]
• [Link]
• [Link]

35
See:
• [Link]
• [Link]
• [Link]
• [Link] 1230000000545/[Link]#_brief_history_
of_spdy_and_http_2
• [Link]
performance-antipatterns-28286548
• [Link] 28630108/http2-is-minifying-js-concatenate-
js-css-and-using-sprites-no-longer-needed

36
See:
• [Link]
• [Link]
• [Link]
faced
• [Link]

• [Link]
US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
• [Link]
• [Link]

37
See:

38
• Static, this keyword lets the element use the normal behavior, that is it is laid out
in its current position in the flow. The top, right, bottom, left and z-index
properties do not apply.
• Relative, this keyword lays out all elements as though the element were not
positioned, and then adjust the element's position, without changing layout (and
thus leaving a gap for the element where it would have been had it not been
positioned). The effect of position:relative on table-*-group, table-row, table-
column, table-cell, and table-caption elements is undefined.
• Absolute, do not leave space for the element. Instead, position it at a specified
position relative to its closest positioned ancestor (non-static) or to the containing
block. Absolutely positioned boxes can have margins, they do not collapse with
any other margins.
• Fixed, do not leave space for the element. Instead, position it at a specified
position relative to the screen's viewport and don't move it when scrolled. When
printing, position it at that fixed position on every page. This value always create a
new stacking context.

See:
• [Link]

39
• [Link]
• [Link]

39
See:
• [Link]
• [Link]
• [Link]
or-flexbox/
• [Link]
• [Link]
• [Link]
do
• [Link]
best?lq=1
• [Link]
• [Link]
• [Link]
layouts-without-css-floats/
• [Link]
• [Link]
• [Link]

40
Most elements on a page are in a single, root stacking context, but absolutely or
relatively positioned elements with non-auto z-index values form their own stacking
contexts (that is, all of their children will be z-ordered within the parent and not be
interleaved with content from outside the parent).

Some CSS properties trigger the creation of new stacking contexts:, see
[Link]
US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context.

See:
• [Link]
US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
• [Link]
• [Link]
to-position-fixed-elements?hl=en
• [Link]

41
See
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

42
43
44
45
46
47
48
49
50
51
See:
• [Link]
• [Link]
• [Link]
ui/responsive/?hl=en

52
Recent generations of mobile browsers can render full web pages without a problem
and scale them so they fit nicely inside the phone browser ’s visible screen area or
viewport — the user then can zoom in on areas of interest and pan around on the
page using touch, keypad, trackball or other input, depending on the phone model.

However, there may be cases where you want to control the size and scaling of the
page, for instance when you are making a mobile-optimized web app with a native
feel

A CSS @viewport rule also exists but is not yet widelysupported.

See:
• [Link]

53
CSS3 introduced some new relative length units, specifically related to the viewport
size of the browser or device. These new units include vw, vh, vmin, and vmax.
Overall support for these new units isn’t great, but it is growing. In time they look to
play a large roll in building responsive websites.

The grid approach is evolving, see [Link]

See:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

54
Common media types include all, screen, print, tv, and braille. The HTML5
specification includes new media types, even including 3d-glasses. Should a media
type not be specified the media query will default the media type to screen.

You can also:

• import a new style sheet using the @import rule
@import url([Link]) all and (max-width: 1024px) {...}
• link to a separate style sheet from within the HTML document
<link href="[Link]" rel="stylesheet" media="all and (max-width: 1024px)">

See
• [Link]
• [Link] -
US/docs/Web/CSS/Media_Queries/Using_media_queries

55
See
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

56
The operating belief behind mobile first design is that a user on a mobile device,
commonly using a smaller viewport, shouldn’t have to load the styles for a desktop
computer only to have them over written with mobile styles later. Doing so is a waste
of bandwidth. Bandwidth that is precious to any users looking for a snappy website.

The mobile first approach also advocates designing with the constraints of a mobile
user in mind. Before too long, the majority of Internet consumption will be done on a
mobile device. Plan for them accordingly and develop intrinsic mobile experiences.

See:
• [Link]
• [Link] 12045893/which-are-the-most-important-
media-queries-to-use-in-creating-mobile-responsive?rq=1

57
58
To allow nested elements to transform in their own three-dimensional plane use the
transform-style property with the preserve-3d value. The flat value forces the
transformed children elements to lie flat on the two-dimensional plane.

When working with three-dimensional transforms, elements will occasionally be

transformed in a way that causes them to face away from the screen. This may be
caused by setting the rotateY(180deg) value for example. By default these elements
are shown from the back. So if you prefer not to see these elements at all, set the
backface-visibility property to hidden, and you will hide the element whenever it is
facing away from the screen. The other value to backface-visibility is visible which is
the default value, always displaying an element, no matter which direction it faces

See:
• [Link]
• [Link]
• [Link]

59
Normally when the value of a CSS property changes, the rendered result is instantly
updated, with the affected elements immediately changing from the old property
value to the new property value. With CSS transitions, these properties are used to
animate smoothly from the old state to the new state over time.

There is a shorthand property, transition, capable of supporting all of the different

transition properties and values.

Not all properties canbe animated, see [Link]

transitions/#properties-from-css-

See
• [Link]
[Link]
US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• [Link]
• [Link]

60
Animations are similar to transitions in that they change the presentational value of
CSS properties over time. The principal difference is that while transitions trigger
implicitly when property values change, animations are explicitly executed when the
animation properties are applied. Because of this, animations require explicit values
for the properties being animated. These values are specified using animation
keyframes.

Tools allow you to create CSS animations more easily:

• [Link]
• [Link]

See:
• [Link]
• [Link]
• [Link]
US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• [Link]
• [Link]

61
62
63
Because of these three differences, failure to declare variables will very likely lead to
unexpected results. Thus it is recommended to always declare variables, regardless
of whether they are in a function or global scope. And in ECMAScript 5 strict mode,
assigning to an undeclared variable throws an error.

See:
• [Link] -
US/docs/Web/JavaScript/Reference/Statements/var
• [Link]

64
For that reason, it is recommended to always declare variables at the top of their
scope (the top of global code and the top of function code) so it's clear which
variables are function scoped (local) and which are resolved on the scope chain.

See:
• [Link]
US/docs/Web/JavaScript/Reference/Statements/var

65
Strict mode isn't just a subset: it intentionally has different semantics from normal
code. Browsers not supporting strict mode will run strict mode code with different
behavior from browsers that do, so don't rely on strict mode without feature-testing
for support for the relevant aspects of strict mode. Strict mode code and non-strict
mode code can coexist, so scripts can opt into strict mode incrementally.

Strict mode applies to entire scripts or to individual functions. It doesn't apply to

block statements enclosed in {} braces; attempting to apply it to such contexts does
nothing. eval code, Function code, event handler attributes, strings passed to
setTimeout, and the like are entire scripts, and invoking strict mode in them works as
expected.

Everything is ES6 is not in strict mode…

[Link]
strict-mode

See:
• [Link]
• [Link]

66
• [Link]

66
The JavaScript spec groups built-in objects and user objects together as native
objects…

A few examples:

• Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like
indexOfand replace, arraymethods, ...
• Host objects (assuming browser environment): window, document, location,
history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll,
...

See:
• [Link] -
US/docs/Web/JavaScript/Reference/Global_Objects
• [Link] 7614317/what-is-the-difference-between-
native-objects-and-host-objects

67
JavaScript allows for multiple catches.

See
• [Link]
US/docs/Web/JavaScript/Reference/Global_Objects/Error
• [Link]
• [Link]
US/docs/Web/JavaScript/Reference/Functions/set

68
See:
• [Link] -
US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
• [Link]

69
JavaScript provides three different value-comparison operations, the choice of which
operation to use depends on what sort of comparison you are looking to perform.

See
• [Link]
US/docs/Web/JavaScript/Equality_comparisons_and_sameness
• [Link]
US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
• [Link]

70
Some libraries can be usedto prevent mutations, like
[Link]
See:
• [Link]
• [Link]
• [Link]

71
Closure gotchas:
• Using closures inside loops.
• Inner function defines a variable having the same name as a variable from the
outer scope => cannot reach the outer variable from the inner function.
• Usage of this keyword is tricky because what this references depends from where
the function is called and not from where the function has been defined.

It is unwise to unnecessarily create functions within other functions if closures are

not needed for a particular task, as it will negatively affect script performance both in
terms of processing speed and memory consumption.

See:
• [Link]
• [Link]

72
Immediately-invoked function expressions can be used to avoid variable hoisting from
within blocks, protect against polluting the global environment and simultaneously
allow public access to methods while retaining privacy for variables defined within
the function.

See:
• [Link]

73
See:
• [Link]
• [Link]
Function/bind

74
Garbage collection algorithms depends on the JavaScript engine implementation.
Moderns browsers often use Mark and Sweep implementations.

Stack: Function calls form a stack of frames.

Queue: A JavaScript runtime contains a message queue, which is a list of messages

to be processed. To each message is associated a function. When the stack is empty,
a message is taken out of the queue and processed. The processing consists of calling
the associated function (and thus creating an initial stack frame). The message
processing ends when the stack becomes empty again.

See:
• [Link]

75
See:
• [Link]
• [Link]
• [Link]
• [Link]
language-or-is-it-the-javascript-engines-that-makes-t

76
See:
• [Link]
• [Link]

77
See:
• [Link]
• [Link]
• [Link]

78
79
80
Any Promise object is in one of three mutually exclusive states: fulfilled, rejected, and
pending:
• A promise p is fulfilled if [Link](f, r) will immediately enqueue a Job to call the
function f.
• A promise p is rejected if [Link](f, r) will immediately enqueue a Job to call the
function r.
• A promise is pending if it is neither fulfilled nor rejected.

A promise is said to be settled if it is not pending, i.e. if it is either fulfilled or rejected.

A promise is resolvedif it is settled or if it has been “locked in” to match the state of
another promise. Attempting to resolve or reject a resolved promise has no effect. A
promise is unresolved if it is not resolved. An unresolved promise is always in the
pending state. A resolved promise may be pending, fulfilled or rejected.

See:
• [Link]
• [Link]
Promise[Link]

81
• [Link]
• [Link]
• [Link] -in-wicked-detail/

81
82
See:

83
See:
• [Link]
• [Link]
• [Link]

84
85
86
87
88
89
90
Two important applications of generators are:
• Implementing iterables
• Blocking on asynchronous function calls

Generators can play three roles:

• Iterators (data producers): Each yield can return a value via next(), which means
that generators can produce sequences of values via loops and recursion. Due to
generator objects implementing the interface Iterable [5], these sequences can be
processed by any ECMAScript 6 construct that supports iterables. Two examples
are: for-of loops and the spread operator (...).

• Observers (data consumers): yield can also receive a value from next() (via a
parameter). That means that generators become data consumers that pause until
a new value is pushed into them via next().

• Coroutines (data producers and consumers): Given that generators are pausable
and can be both data producers and data consumers, not much work is needed to
turn them into coroutines (cooperatively multitasked tasks).

91
See:
• [Link]
• [Link]
[Link]

91
92
A buffer (implemented by the ArrayBuffer object) is an object representing a chunk of
data; it has no format to speak of, and offers no mechanism for accessing its
contents. In order to access the memory contained in a buffer, you need to use a
view.
A view provides a context — that is, a data type, starting offset, and number of
elements — that turns the data into an actual typed array.

Offer support for arbitrarybyte-based data structures to implement network

protocols, cryptographyalgorithms, file format manipulations, etc.

See:
• [Link]

93
See:
• [Link]
• [Link]
• [Link]

• [Link]
• [Link]
• [Link]
babel-gulp/

94
95
See:
• [Link]
• [Link]

96
As an asynchronous event driven framework, [Link] is designed to build scalable
network applications. In the following "hello world" example, many connections can
be handled concurrently. Upon each connection the callback is fired, but if there is no
work to be done Node is sleeping.

This is in contrast to today's more common concurrency model where OS threads are
employed. Thread-based networking is relatively inefficient and very difficult to use.
Furthermore, users of Node are free from worries of dead-locking the process—there
are no locks. Almost no function in Node directly performs I/O, so the process never
blocks. Because nothing blocks, less-than-expert programmers are able to develop
scalable systems.

Node is similar in design to and influenced by systems like Ruby's Event Machine or
Python's Twisted. Node takes the event model a bit further, it presents the event loop
as a language construct instead of as a library. In other systems there is always a
blocking call to start the event-loop. Typically one defines behavior through callbacks
at the beginning of a script and at the end starts a server through a blocking call like
EventMachine::run(). In Node there is no such start-the-event-loop call. Node simply
enters the event loop after executing the input script. Node exits the event loop

97
when there are no more callbacks to perform. This behavior is like browser JavaScript
-— the event loop is hidden from the user.

HTTP is a first class citizen in Node, designed with streaming and low latency in mind.
This makes Node well suited for the foundation of a web library or framework.

Just because Node is designed without threads, doesn't mean you cannot take
advantage of multiple cores in your environment. You can spawn child processes that
are easy to communicate with by using our child_process.fork() API. Built upon that
same interface is the cluster module, which allows you to share sockets between
processes to enable load balancing over your cores.

See:
• [Link]
• [Link]

97
See:
• [Link]

98
See:
• [Link]

99
100
Pre-processors exist for languages other than CSS: Haml, Jade, Slim, Stylus,
CoffeeScript, TypeScript,…

See:
• [Link]
• [Link]
• [Link]

101
See:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

102
See:
• [Link]
• [Link]
• [Link]

103
See:
• [Link]

104
Protractor is a library by the Angular team which is a wrapper on WebDriverJS and
Jasmine and is specifically tailored to make testing of Angular apps a breeze.

WebdriverIO is the new name of WebdriverJS and offers Selenium 2.0 bindings for
NodeJS with a modern (ES6) syntax.
[Link] is a library that allows to write End-to-End tests in [Link] quickly and
effortlessly that run against a Selenium server.
There is also the official but less friendly selenium-webdriver for [Link].

Beware, Karma only runs Browser based tests.

See:
• [Link] 4904096/whats-the-difference-between-unit-
functional-acceptance-and-integration-test
• [Link] 300855/javascript-unit-test-tools-for-tdd
• [Link]
• [Link]
• [Link]
• [Link]

105
 [Link]
• [Link]
• [Link]
• [Link]

105
106
• Custom Elements: This specification describes the method for enabling the author
to define and use new types of DOM elements in a document.
• HTML Imports: HTML Imports are a way to include and reuse HTML documents in
other HTML documents.
• Templates: This specification describes a method for declaring inert DOM subtrees
in HTML and manipulating them to instantiate document fragments with identical
contents.
• Shadow DOM: This specification describes a method of establishing and
maintaining functional boundaries between DOM trees and how these trees
interact with each other within a document, thus enabling better functional
encapsulation within the DOM.

• Polymer: The Polymer library provides a set of features for creating custom
elements.
• X-Tag is a small library that wraps the Web Components family of APIs to provide a
tight, feature-rich interface that makes development of components even easier

See
• [Link]

107
• [Link] -
US/docs/Web/HTML/Element#Web_Components
• [Link] -[Link]
• [Link] -[Link]
• [Link]
• [Link]
difference/
• [Link] [Link]/en/tutorials/webcomponents/customelements/
• [Link] [Link]/en/tutorials/webcomponents/imports/

107
See:
• [Link]
• [Link]

108
109
110
111