Browser Rendering Sequence

When a web page is loaded, the browser first reads the TEXT HTML and constructs
DOM Tree from it. Then it processes the CSS whether that is inline, embedded or
external CSS and constructs the CSSOM Tree from it. After these trees are constructed,
then it constructs the Render-Tree from it. Once the Render-Tree is constructed, then
the browser starts the printing individual elements on the screen.
What if your JavaScript code was accessing DOM element’s style property which was
supposed to be provided by CSSOM and it wasn’t ready yet because external stylesheet
was still loading?

To prevent such scenarios, the browser might load external JavaScript in a synchronous
manner, but it won’t parse the JavaScript and halt building DOM until CSSOM is ready.
Well for the starters, you can optimize your CSS and make sure that it loads faster. You
can load your JavaScript asynchronously using async or defer attributes.

If neither attribute is present, the script is downloaded and executed synchronously, and
will halt parsing of the document until it has finished executing (default behavior).
Scripts are downloaded and executed in the order they are encountered.

The defer attribute downloads the script while the document is still parsing but waits
until the document has finished parsing before executing it, equivalent to executing
inside a DOMContentLoaded event listener. defer scripts will execute in order.

The async attribute downloads the script during parsing the document but will pause the
parser to execute the script before it has fully finished parsing. async scripts will not
necessarily execute in order.

Note: both attributes must only be used if the script has a src attribute (i.e. not an inline
script).

Module loaders and Module bundlers

Module loaders and bundlers both make it more actionable to write modular JavaScript
applications. Let me give you some background:

Module loaders

A module loader is typically some library that can load, interpret and execute JavaScript
modules you defined using a certain module format/syntax, such
as AMD or CommonJS.
When you write modular JavaScript applications, you usually end up having one file per
module. So, when writing an application that consist of hundreds of modules it could get
quite painful to make sure all files are included and in the correct order. So basically, a
loader will take care of the dependency management for you, by making sure all
modules are loaded when the application is executed. Checkout some popular module
loaders such as RequireJS and SystemJS to get an idea.

Module bundlers

Module bundlers are an alternative to module loaders. Basically, they do the same thing
(manage and load interdependent modules), but do it as part of the application build
rather than at runtime. So instead of loading dependencies as they appear when your
code is executed, a bundler stitches together all modules into a single file (a bundle)
before the execution. Take a look at Webpack and Browserify as two popular options.

When to use what?

Which one is better simply depends on your application's structure and size.

The primary advantage of a bundler is that it leaves you with far fewer files that the
browser has to download. This can give your application a performance advantage, as
it may decrease the amount of time it takes to load. However, depending on the number
of modules your application has, this doesn't always have to be the case. Especially for
big apps a module loader can sometimes provide the better performance, as loading
one huge monolithic file can also block starting your app at the beginning. So that is
something you have to simply test and find out.

If you're building a complex Front-End application with many non-code static

assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits.

If your application is fairly small, and you don't have many static assets and you only
need to build one Javascript file to serve to the client, then Webpack might be more
overhead than you need.

CSS Preprocessors
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced
syntax are processed by the program, and turned into regular CSS style sheets.
However, they do not extend the CSS standard itself.
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and
used throughout this reference, is an extension of the syntax of CSS. This means that
every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is
enhanced with the Sass features described below. Files using this syntax have
the .scss extension.
The second and older syntax, known as the indented syntax (or sometimes just
“Sass”), provides a more concise way of writing CSS. It uses indentation rather than
brackets to indicate nesting of selectors, and newlines rather than semicolons to
separate properties. Files using this syntax have the .sass extension.
Less stands for Leaner Style Sheets. It’s a superset of CSS and makes it easier to
maintain large CSS files.
CSS pre-processor adds programming-like features such as variables, functions,
operations, nested rules, namespacing and scoping.
A Mixin is a block of code that lets us group CSS declarations we may reuse
throughout our site.
GIT

Vendors
CSS browser or vendor prefixes are nothing but a means through which the makers of
web browsers (vendors as they’re known) add support for the latest CSS features, for
an experimentation and testing period.
These browser prefixes are basically used for addition of new features, which may or
may not be a part of the formal specifications. Furthermore, they’re used for
implementation of new features in a specification which hasn’t yet been finalized.

Some of the CSS browser prefixes are as follows:

- Safari: -webkit-
- Chrome: -webkit-
- Internet Explorer: -ms-
- Opera: -o-
- Firefox: -moz-
- Android: -webkit-
- iOS: -webkit-
Web application accessible and user-friendly
I test my web applications on various browsers and devices to check whether the
experience is usable on all devices. I also use popular screen reading software and other
assistive solutions to see whether it's accessible for all potential users.
CSS
Float
"A CSS float tells the browser to put a particular element to the right side or the left side of
the container. I use floats when I'm developing a page that dynamically resizes based on
the user resolution."
Box Model
The CSS box model is a rectangular layout paradigm for HTML elements that consists
of the following:

 Content - The content of the box, where text and images appear
 Padding - A transparent area surrounding the content (i.e., the amount of space
between the border and the content)
 Border - A border surrounding the padding (if any) and content
 Margin - A transparent area surrounding the border (i.e., the amount of space
between the border and any neighboring elements)

JavaScript
Coercion
In JavaScript conversion between different two build-in types called coercion. Coercion comes in two
forms in JavaScript: explicit and implicit.

Closure
Una clausura o closure es una función que guarda referencias del estado adyacente (ámbito
léxico). En otras palabras, una clausura permite acceder al ámbito de una función exterior
desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es
creada.

function iniciar() {
var nombre = "Mozilla"; // La variable nombre es una variable local
creada por iniciar.
function mostrarNombre() { // La función mostrarNombre es una
función interna, una clausura.
alert(nombre); // Usa una variable declarada en la función
externa.
}
mostrarNombre();
}
iniciar();

REST
Some of the advantages of REST web services are:
 Learning curve is easy since it works on HTTP protocol
 Supports multiple technologies for data transfer such as text, xml, json, image
etc.
 No contract defined between server and client, so loosely coupled
implementation.
 REST is a lightweight protocol
 REST methods can be tested easily over browser.

 Pure functions.
 High order functions.
 Promises.
 Callbacks.
 DOM. Can be considered data structure?
The Document Object Model is not a set of data structures; it is an object model
that specifies interfaces.
 Functional programming and OOP.